@charset "UTF-8";
            html {
font-size: 100%;
}
body {
color: #222222;
font-size: 1rem;
font-family: "Zen Kaku Gothic New", sans-serif;
font-style: normal;
line-height: 1.8;
letter-spacing: 0.1em;
overflow-x: hidden;
background-color: #FDFDFD;
}
a {
color: #222222;
text-decoration: none;
}
img {
max-width: 100%;
}
li {
list-style: none;
}
rt {
font-size: 10px; color: #777777;
}
.wrapper {
overflow: hidden;
padding: 3rem 2.5rem;
}
@media (min-width: 767px) {
.wrapper {
padding: 4rem 6rem;
}
}
@media (min-width: 1200px) {
.wrapper {
padding: 5rem 15%;
}
}
.en {
font-family: "Poppins", sans-serif;
}  .l-header {
position: fixed;
width: 100%;
height: 67px;
padding: 1rem;
z-index: 1000;
}
@media (min-width: 767px) {
.l-header {
height: 73px;
padding: 1rem 2.5rem;
}
}
@media (min-width: 1200px) {
.l-header {
height: 85px;
}
}
.l-header__flex {
display: flex;
justify-content: space-between;
align-items: center;
} .l-footer {
display: flex;
flex-direction: column;
padding: 2.5rem 4rem;
}
@media (min-width: 767px) {
.l-footer {
justify-content: space-between;
padding: 2.5rem 6rem;
}
}
@media (min-width: 1200px) {
.l-footer {
flex-direction: row;
padding: 2.5rem 14rem;
margin-bottom: 2rem;
}
}
.l-footer__logo {
width: 97px;
margin: 0 auto 2.5rem auto;
}
@media (min-width: 1200px) {
.l-footer__logo {
margin: 0;
}
}
.l-copy-right {
text-align: center;
margin-bottom: 2.5rem;
}  .l-mv {
width: 100%;
position: relative;
}
@media (min-width: 1200px) {
.l-mv {
height: 100vh;
}
}
.l-mv-header-space {
display: block;
width: 100%;
height: 67px;
}
@media (min-width: 767px) {
.l-mv-header-space {
height: 73px;
}
}
@media (min-width: 1200px) {
.l-mv-header-space {
height: 85px;
}
}
.l-mv__scroll {
position: absolute;
top: 60%;
right: 20px;
}
@media (min-width: 1200px) {
.l-mv__scroll {
top: 75%;
right: 40px;
}
} .l-vision {
padding: 2rem 0;
}
@media (min-width: 767px) {
.l-vision {
padding: 2.5rem 0;
}
} .l-works__btn {
text-align: center;
margin-top: 3.5rem;
}
@media (min-width: 767px) {
.l-works__btn {
margin-top: 4rem;
}
} .l-target__flex {
display: flex;
flex-direction: column;
gap: 2rem;
margin-bottom: 1.5rem;
}
@media (min-width: 767px) {
.l-target__flex {
margin-bottom: 3rem;
}
}
@media (min-width: 1200px) {
.l-target__flex {
flex-direction: row;
align-items: stretch;
gap: 2.5rem;
margin-bottom: 3.5rem;
}
} .l-service {
display: flex;
flex-direction: column-reverse;
justify-content: center;
padding: 2.5rem 0;
}
@media (min-width: 767px) {
.l-service {
padding: 5rem 0 0 0;
}
}
@media (min-width: 1200px) {
.l-service {
flex-direction: row;
justify-content: flex-end;
}
}
.l-service__btn {
display: flex;
justify-content: flex-end;
} .l-about {
display: flex;
flex-direction: column;
justify-content: center;
padding: 2.5rem 0;
}
@media (min-width: 767px) {
.l-about {
padding: 5rem 0;
}
}
@media (min-width: 1200px) {
.l-about {
flex-direction: row;
justify-content: flex-start;
}
}
.l-about__btn {
display: flex;
justify-content: flex-end;
} .l-contact {
background-image: url(//y-cottodesign.com/wp-content/themes/cotto-design-1/cotto-design/assets/img/contact-sp.webp);
background-position: center;
background-size: cover;
position: relative;
margin-top: 1.5rem;
}
@media (min-width: 767px) {
.l-contact {
margin-top: 3rem;
}
}
@media (min-width: 1200px) {
.l-contact {
background-image: url(//y-cottodesign.com/wp-content/themes/cotto-design-1/cotto-design/assets/img/contact-pc.webp);
}
}
.l-contact__sec-title {
color: #FDFDFD;
text-align: center;
margin-bottom: 2rem;
}
@media (min-width: 1200px) {
.l-contact__sec-title {
margin-bottom: 2rem;
}
}
.l-contact__sec-title p {
font-size: 2rem;
font-weight: 500;
letter-spacing: 0.2em;
}
@media (min-width: 1200px) {
.l-contact__sec-title p {
font-size: 4rem;
}
}
.l-contact__sec-title h2 {
font-size: 1rem;
font-weight: 600;
}
@media (min-width: 1200px) {
.l-contact__sec-title h2 {
font-size: 1.25rem;
}
} .l-news {
width: 100%;
display: flex;
flex-direction: column;
padding: 0 2.5rem;
}
@media (min-width: 767px) {
.l-news {
padding: 0 6rem;
}
}
@media (min-width: 1200px) {
.l-news {
width: 41%;
gap: 2rem;
padding: 0;
margin: 0 7.5rem 0 auto;
}
}
.l-news__content {
display: flex;
flex-direction: column;
}
@media (min-width: 1200px) {
.l-news__content {
flex-direction: row;
align-items: center;
gap: 2.5rem;
}
}
.l-news__title {
font-size: 1rem;
margin-bottom: 1rem;
}
@media (min-width: 1200px) {
.l-news__title {
font-size: 1.25rem;
margin-bottom: 0;
}
}
.l-news__btn {
display: flex;
justify-content: flex-end;
margin-top: 1rem;
}
@media (min-width: 1200px) {
.l-news__btn {
margin-bottom: 2rem;
}
}  .l-page-service__text {
background-color: #FDFDFD;
margin-bottom: 2.5rem;
}
@media (min-width: 1200px) {
.l-page-service__text {
text-align: center;
margin-bottom: 5rem;
}
} .l-faq__img {
width: 100%;
height: 240px;
background-image: url(//y-cottodesign.com/wp-content/themes/cotto-design-1/cotto-design/assets/img/faq.jpg);
background-position: bottom;
background-size: cover;
margin-bottom: 2.5rem;
}
@media (min-width: 767px) {
.l-faq__img {
margin-bottom: 2rem;
}
}
@media (min-width: 1200px) {
.l-faq__img {
margin-bottom: 3.5rem;
}
}
@media (min-width: 1200px) {
.l-faq__text {
text-align: center;
}
} .l-page-news {
margin-bottom: 2rem;
}
@media (min-width: 1200px) {
.l-page-news {
margin-bottom: 7rem;
}
}
.l-page-news__content {
padding: 2rem 0;
}
@media (min-width: 1200px) {
.l-page-news__content {
padding: 4.5rem 2rem;
}
}
.l-news-single {
padding: 2rem 0;
margin-bottom: 2rem;
}
@media (min-width: 1200px) {
.l-news-single {
padding: 0 2rem 4rem 2rem;
margin-bottom: 3.5rem;
}
}
.l-news-single__title {
padding: 2rem 0;
}
@media (min-width: 1200px) {
.l-news-single__title {
padding: 4rem 0 2rem 0;
}
} .c-shadow {
box-shadow: 1px 1px 50px rgba(34, 34, 34, 0.15);
}
.c-logo {
width: 72px;
}
.c-sec-title {
text-align: center;
margin-bottom: 2rem;
}
@media (min-width: 767px) {
.c-sec-title {
margin-bottom: 3.5rem;
}
}
@media (min-width: 1200px) {
.c-sec-title {
margin-bottom: 4rem;
}
}
.c-sec-title .en {
color: #222222;
font-size: 2rem;
font-weight: 500;
letter-spacing: 0.15em;
}
@media (min-width: 767px) {
.c-sec-title .en {
font-size: 3rem;
}
}
.c-sec-title .ja {
color: #777777;
font-size: 1rem;
font-weight: 700;
}
@media (min-width: 767px) {
.c-sec-title .ja {
font-size: 1.25rem;
}
}
.c-sec-sub-title {
color: #222222;
font-size: 1rem;
font-weight: 500;
}
@media (min-width: 767px) {
.c-sec-sub-title {
font-size: 1.25rem;
}
}
.c-price {
color: #222222;
font-family: "Roboto", sans-serif;
font-size: 2rem;
font-weight: 700;
text-align: center;
}
@media (min-width: 1200px) {
.c-price {
font-size: 2.5rem;
}
}
.c-tax {
font-size: 10px;
font-weight: 700;
}
@media (min-width: 1200px) {
.c-tax {
font-size: 12px;
}
}
.c-text {
font-size: 0.875rem;
font-weight: 400;
}
.c-line {
display: block;
width: 100%;
height: 1px;
background-color: #222222;
}
.c-line.gray {
background-color: #E7E7E7;
}
.c-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1rem;
width: 100%;
background-color: #FDFDFD;
border: 1px solid #222222;
text-align: center;
padding: 24px 0;
white-space: nowrap;
}
@media (min-width: 767px) {
.c-btn {
max-width: 450px;
}
}
@media (min-width: 1200px) {
.c-btn {
max-width: 500px;
transition: all 0.2s ease;
}
}
.c-btn__img {
width: 24px;
transition: transform 0.4s ease;
}
.c-btn.prev {
padding: 24px 24px 24px 0;
}
.c-btn.next {
padding: 24px 0 24px 24px;
}
.c-btn:hover {
color: #777777;
box-shadow: 1px 1px 10px rgba(34, 34, 34, 0.2);
}
.c-btn:hover .next {
transform: translateX(8px);
}
.c-btn:hover .prev {
transform: translateX(-8px);
}
.c-btn.tug {
width: auto;
display: inline-block;
font-size: 10px;
padding: 4px 16px;
}
@media (min-width: 1200px) {
.c-btn.tug {
font-size: 13px;
}
}
.c-btn.current {
color: #FDFDFD;
background-color: #777777;
border-color: #777777;
}
.c-btn.contact {
border: none;
}
.c-view-more {
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 0.875rem;
font-family: "Poppins", sans-serif;
position: relative;
transition: all 0.4s ease;
}
@media (min-width: 767px) {
.c-view-more {
font-size: 1rem;
}
}
.c-view-more__img {
width: 24px;
transition: transform 0.4s ease;
margin-left: 0.5rem;
}
@media (min-width: 1200px) {
.c-view-more::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 0;
height: 1px;
background-color: #222222;
transition: width 0.4s ease;
}
.c-view-more:hover {
color: #777777;
}
.c-view-more:hover img {
transform: translateX(4px);
}
.c-view-more:hover::after {
width: 100%;
}
}
@media (min-width: 1200px) {
.c-hover-text {
transition: all 0.4s ease;
}
.c-hover-text:hover {
transform: translate(2px, 2px);
color: #777777;
}
}
@media (min-width: 1200px) {
.c-hover-gray a {
transition: all 0.4s ease;
}
.c-hover-gray:hover a {
color: #777777;
}
}
.c-link-underline {
position: relative;
display: inline-block;
padding: 4px 0;
color: #222222; }
@media (min-width: 1200px) {
.c-link-underline::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background-color: #222222; transition: all 0.4s ease;
}
.c-link-underline:hover::after {
width: 100%;
}
} .c-fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease-out;
}
.c-fade-in.show {
opacity: 1;
transform: translateY(0);
}
.c-fade-in:nth-child(1) {
transition-delay: 0s;
}
.c-fade-in:nth-child(2) {
transition-delay: 0.3s;
}
.c-fade-in:nth-child(3) {
transition-delay: 0.5s;
}
.c-fade-in:nth-child(4) {
transition-delay: 0.7s;
}
.c-fade-in:nth-child(5) {
transition-delay: 0.9s;
}
.c-sns {
display: flex;
gap: 2rem;
justify-content: center;
}
.c-sns-icon {
display: inline-block;
vertical-align: middle;
position: relative;
width: 24px;
height: 24px;
}
.c-sns-icon img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
transition: opacity 0.4s ease;
}
.c-sns-icon img.hover {
opacity: 0;
}
@media (min-width: 1200px) {
.c-sns-icon:hover img.hover {
opacity: 1;
}
.c-sns-icon:hover img.normal {
opacity: 0;
}
}
.c-sns-icon {
display: inline-block; vertical-align: middle;
position: relative;
width: 24px;
height: 24px;
}
.c-sns-icon img {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.4s ease;
}
.c-sns-icon img.hover {
opacity: 0;
}
@media (min-width: 1200px) {
.c-sns-icon:hover img.hover {
opacity: 1;
}
.c-sns-icon:hover img.normal {
opacity: 0;
}
}
.c-logo {
display: inline-block; vertical-align: middle;
position: relative;
width: 97px;
height: 37px;
}
.c-logo img {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.4s ease;
}
.c-logo img.hover {
opacity: 0;
}
@media (min-width: 1200px) {
.c-logo:hover img.hover {
opacity: 1;
}
.c-logo:hover img.normal {
opacity: 0;
}
}
.c-pagination {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (min-width: 767px) {
.c-pagination {
gap: 2.5rem;
}
}
@media (min-width: 1200px) {
.c-pagination {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
@media (min-width: 1200px) {
.c-pagination.page-works {
margin-bottom: 7rem;
}
}
.c-pagination.page-news {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.c-pagination-link--empty {
flex: 1;
visibility: hidden; }
.c-page-navi {
display: flex;
justify-content: center;
gap: 1.5rem;
}
.c-pagination__numbers {
font-family: "Roboto", sans-serif;
display: flex;
gap: 1rem;
}
@media (min-width: 1200px) {
.c-pagination__numbers {
gap: 2rem;
}
}
.page-numbers.current {
color: #222222;
pointer-events: none;
}
.page-numbers.current::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background-color: #222222;
}
.page-numbers:hover {
color: #222222;
}
.page-numbers:hover.prev img {
transform: translateX(-8px);
}
.page-numbers:hover.next img {
transform: translateX(8px);
}
.c-page-link a,
.page-numbers img,
.page-numbers {
font-family: "Roboto", sans-serif;
display: inline-block;
padding: 0.2em 0.4em;
font-size: 1rem;
color: #777777;
position: relative;
transition: all 0.4s ease;
vertical-align: middle;
}
.c-page-link a.current,
.page-numbers img.current,
.page-numbers.current {
color: #222222;
}
.c-page-link--empty {
width: 50px;
visibility: hidden; }
.c-page-link__arrow {
transition: transform 0.4s ease;
}
.c-page-link__img {
width: 30%;
}
.c-pagination-link__title {
display: inline;
width: 170px;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.4s ease;
}
.c-pagination-link__title.news {
width: auto;
}
@media (min-width: 767px) {
.c-pagination-link__title {
width: 300px;
}
}
@media (min-width: 1200px) {
.c-pagination-link__title {
width: 170px;
}
}
.c-pagination-link {
width: 100%;
display: flex;
align-items: center;
gap: 1rem;
transition: all 0.4s ease;
}
.c-pagination-link.next {
flex-direction: row;
}
.c-pagination-link.prev {
flex-direction: row-reverse;
}
.c-pagination-link:hover .c-page-link__arrow.prev {
transform: translateX(8px);
}
.c-pagination-link:hover .c-page-link__arrow.next {
transform: translateX(-8px);
}
.c-pagination-link:hover .c-pagination-link__title {
color: #777777;
}
@media (min-width: 1200px) {
.c-pagination-link {
width: 33%;
}
}
.c-pagination-link.works {
width: auto;
}
@media (min-width: 767px) {
.c-pagination-link.works {
justify-content: space-between;
}
}
@media (min-width: 1200px) {
.c-pagination-link.works {
justify-content: center;
}
}
.c-float-text {
display: inline-block;
-webkit-animation: floatY 2.5s ease-in-out infinite;
animation: floatY 2.5s ease-in-out infinite;
} @-webkit-keyframes floatY {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
100% {
transform: translateY(0);
}
}
@keyframes floatY {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
100% {
transform: translateY(0);
}
} .breadcrumb {
font-size: 13px;
margin-bottom: 2rem;
}
@media (min-width: 1200px) {
.breadcrumb {
font-size: 0.875rem;
text-align: right; }
}
.breadcrumb ul {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
@media (min-width: 1200px) {
.breadcrumb ul {
justify-content: flex-end;
}
}
.breadcrumb li {
list-style: none;
display: flex;
align-items: center;
}
.breadcrumb li::after {
content: ">";
margin-left: 0.5rem;
}
.breadcrumb li:last-child::after {
content: "";
}
.breadcrumb a {
color: #777777;
transition: all 0.4s ease;
}
.breadcrumb a:hover {
color: #222222;
}
.breadcrumb--pc {
display: none;
}
@media (min-width: 1200px) {
.breadcrumb--pc {
display: block;
}
}
.breadcrumb--sp {
display: block;
}
@media (min-width: 1200px) {
.breadcrumb--sp {
display: none;
}
}   .p-header--logo {
display: inline-block; vertical-align: middle;
position: relative;
width: 35px;
height: 35px;
}
@media (min-width: 1200px) {
.p-header--logo {
width: 40px;
height: 38px;
}
}
.p-header--logo img {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.4s ease;
}
.p-header--logo img.hover {
opacity: 0;
}
.p-header--logo:hover img.hover {
opacity: 1;
}
.p-header--logo:hover img.normal {
opacity: 0;
}
.p-hamburger {
position: relative;
width: 37px;
height: 29px;
cursor: pointer;
z-index: 999;
}
@media (min-width: 767px) {
.p-hamburger {
width: 43px;
height: 33px;
}
}
.p-hamburger:hover .p-hamburger__line {
background-color: #777777;
}
.p-hamburger:hover .p-hamburger__menu {
color: #777777;
}
.p-hamburger__line {
display: block;
width: 100%;
height: 1px;
position: absolute;
transition: ease 0.3s;
background-color: #222222;
transform-origin: center;
}
.p-hamburger__line:nth-child(1) {
top: 2px;
}
.p-hamburger__line:nth-child(2) {
top: 12px;
}
.is-open .p-hamburger__line:nth-child(1) {
transform: translateY(10px) rotate(35deg);
}
.is-open .p-hamburger__line:nth-child(2) {
transform: translateY(0px) rotate(-35deg);
}
.is-open .p-hamburger__menu {
opacity: 0;
}
.p-hamburger__menu {
display: block;
font-size: 11px;
letter-spacing: 0.15em;
position: absolute;
bottom: 0;
line-height: 1;
transition: ease 0.3s;
}
@media (min-width: 767px) {
.p-hamburger__menu {
font-size: 12px;
letter-spacing: 0.21em;
}
} .p-nav {
width: 100vw;
height: 100dvh;
background-color: #FDFDFD;
position: fixed;
inset: 0;
z-index: 100;
opacity: 0;
transition: all 0.4s ease;
pointer-events: none;
}
.p-nav.is-open {
opacity: 1;
pointer-events: auto;
}
.p-nav__header {
height: 67px;
padding: 0;
}
@media (min-width: 767px) {
.p-nav__header {
height: 73px;
}
}
@media (min-width: 1200px) {
.p-nav__header {
height: 85px;
padding: 1rem 2.5rem;
}
}
.p-nav-container {
height: 100%;
display: flex;
flex-direction: column-reverse;
padding: 1rem;
}
@media (min-width: 1200px) {
.p-nav-container {
flex-direction: row;
padding: 0;
}
}
.p-nav-menu {
width: 100%;
height: 100%;
background-color: #FDFDFD;
}
@media (min-width: 1200px) {
.p-nav-menu {
width: 30%;
height: 100%;
}
}
.p-nav__flex {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.5rem;
padding: 0 2.5rem;
}
@media (min-width: 767px) {
.p-nav__flex {
gap: 2.5rem;
padding: 0 4rem;
}
}
.p-nav-menu__list {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
}
@media (min-width: 767px) {
.p-nav-menu__list {
gap: 1.5rem;
}
}
@media (min-width: 1200px) {
.p-nav__menu--item:hover .p-nav__menu--title::after {
width: 100%;
}
}
.p-nav__menu--title {
font-size: 1.25rem;
position: relative;
display: inline-block;
padding: 4px 0;
color: #222222; }
@media (min-width: 767px) {
.p-nav__menu--title {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.p-nav__menu--title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background-color: #222222; transition: all 0.4s ease;
}
}
.p-nav__menu--sub-title {
display: block;
font-size: 13px;
}
.p-nav__contact {
width: 100%;
display: block;
margin: 0 auto;
}
@media (min-width: 1200px) {
.p-nav__contact {
width: 100%;
}
}
.p-nav-imgs {
width: 100%;
height: 30%;
position: relative;
overflow: hidden;
}
@media (min-width: 767px) {
.p-nav-imgs {
height: 40%;
}
}
@media (min-width: 1200px) {
.p-nav-imgs {
width: 70%;
height: 100%;
}
}
.p-nav-copy-right {
font-size: 10px;
font-weight: 400;
}
.p-nav-bg-slide {
display: none;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.8s ease-in-out;
}
@media (min-width: 1200px) {
.p-nav-bg-slide {
display: block;
margin: 0;
}
}
.p-nav-bg-slide.active {
opacity: 1;
} .p-footer-nav {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 2.5rem;
}
@media (min-width: 1200px) {
.p-footer-nav {
margin-bottom: 0;
}
}
.p-footer-nav__item {
font-size: 0.875rem;
}
.p-copy-right {
font-size: 10px;
font-weight: 400;
}  .p-loading {
position: fixed;
inset: 0;
z-index: 9999;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: opacity 2s ease, visibility 1s ease;
}
.p-loading img {
width: 120px;
-o-object-fit: cover;
object-fit: cover;
-webkit-clip-path: inset(0 63% 0 0);
clip-path: inset(0 63% 0 0); transition: -webkit-clip-path 1.2s ease-in-out;
transition: clip-path 1.2s ease-in-out;
transition: clip-path 1.2s ease-in-out, -webkit-clip-path 1.2s ease-in-out;
} .p-loading.show-full img {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
} .p-loading.fade-out {
opacity: 0;
visibility: hidden;
transition: opacity 1s ease;
} body.loading #main {
opacity: 0;
visibility: hidden;
}
body.loaded #main {
opacity: 1;
visibility: visible;
transition: opacity 1.2s ease;
}
body.loaded .p-mv {
opacity: 1;
transform: scale(1);
} .p-mv {
font-weight: 500;
letter-spacing: 0.15em;
position: relative;
margin-bottom: 5rem;
}
@media (min-width: 1200px) {
.p-mv {
margin-bottom: 2.5rem;
}
}
.p-mv__img {
display: block;
width: 85%;
margin: 0 0 2rem auto;
opacity: 0;
}
@media (min-width: 767px) {
.p-mv__img {
width: 82%;
margin: 0 0 3rem auto;
}
}
@media (min-width: 1200px) {
.p-mv__img {
width: 64%;
max-width: 1200px;
margin: 0 7.5rem 0 auto;
}
}
.p-mv__catch {
width: auto;
max-width: 300px;
margin: 2.5rem auto 0 2.5rem;
}
@media (min-width: 767px) {
.p-mv__catch {
max-width: 540px;
margin: 0 auto 0 6rem;
}
}
@media (min-width: 1200px) {
.p-mv__catch {
position: absolute;
top: 47%;
left: 0;
z-index: 1;
}
}
.p-mv__title {
font-size: 13px;
font-weight: 500;
opacity: 0;
transform: translateY(20px);
}
@media (min-width: 767px) {
.p-mv__title {
font-size: 24px;
}
}
.p-mv__line {
width: 0;
display: block;
height: 1px;
background-color: #222222;
margin: 1rem 0;
}
@media (min-width: 767px) {
.p-mv__line {
margin: 1.5rem 0;
}
}
.p-mv__sub-title {
font-size: 10px;
opacity: 0;
transform: translateY(20px);
}
@media (min-width: 767px) {
.p-mv__sub-title {
font-size: 1rem;
}
}  .is-animated .p-mv__img {
-webkit-animation: mvFadeUp 0.8s ease forwards 0s;
animation: mvFadeUp 0.8s ease forwards 0s;
}
.is-animated .p-mv__line {
-webkit-animation: lineGrow 0.5s ease-out forwards 0.5s;
animation: lineGrow 0.5s ease-out forwards 0.5s;
}
.is-animated .p-mv__title {
-webkit-animation: fadeUp 1s ease forwards 1s;
animation: fadeUp 1s ease forwards 1s;
}
.is-animated .p-mv__sub-title {
-webkit-animation: fadeDown 1s ease forwards 1s;
animation: fadeDown 1s ease forwards 1s;
}  @-webkit-keyframes mvFadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes mvFadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} @-webkit-keyframes lineGrow {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes lineGrow {
from {
width: 0;
}
to {
width: 100%;
}
} @-webkit-keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} @-webkit-keyframes fadeDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}  .p-vision__text {
text-align: center;
font-size: 0.875rem;
}
@media (min-width: 767px) {
.p-vision__text {
font-size: 1.25rem;
}
}
@media (min-width: 1200px) {
.p-vision__text {
font-size: 1.5rem;
}
} .p-works {
display: grid;
gap: 2rem;
font-size: 0.875rem;
margin-bottom: 2rem;
}
@media (min-width: 767px) {
.p-works {
grid-template-columns: repeat(2, 1fr);
font-size: 11px;
}
}
@media (min-width: 1200px) {
.p-works {
font-size: 1rem;
}
}
@media (min-width: 767px) {
.p-works.is-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
font-size: 10px;
margin-bottom: 2rem;
}
}
@media (min-width: 1200px) {
.p-works.is-3col {
font-size: 0.875rem;
}
}
.p-works__item.is-dummy {
display: none;
}
@media (min-width: 767px) {
.p-works__item.is-dummy {
display: block;
pointer-events: none; }
}
.p-works__img {
position: relative;
overflow: hidden;
}
.p-works__img img {
width: 100%;
height: auto;
display: block;
transition: filter 0.4s ease, transform 0.4s ease;
}
@media (min-width: 1200px) {
.p-works__img img {
transform-origin: center center;
filter: brightness(0.95) saturate(0.8); }
}
.p-works__img img.is-dummy {
pointer-events: none;
cursor: default; }
@media (min-width: 1200px) {
.p-works__img:hover img {
transform: scale(1.1);
filter: brightness(1) saturate(1);
}
}
.p-works__img.is-dummy {
display: none;
}
@media (min-width: 767px) {
.p-works__img.is-dummy {
display: block;
}
}
.p-works__title {
background-color: #FDFDFD;
padding: 1.5rem;
}
@media (min-width: 767px) {
.p-works__title {
padding: 1rem;
}
}
@media (min-width: 1200px) {
.p-works__title {
padding: 1.5rem;
}
}
.p-works__name {
display: block;
font-weight: 500;
margin-bottom: 0.5rem;
transition: all 0.4s ease;
}
.p-works__name:hover {
color: #777777;
}
.p-works__text {
color: #777777;
transition: all 0.4s ease;
}
.p-works__text:hover {
color: #222222;
}
.p-target__title {
font-size: 15px;
font-weight: 500;
text-align: center;
margin-bottom: 2rem;
}
@media (min-width: 767px) {
.p-target__title {
font-size: 1.25rem;
margin-bottom: 3.5rem;
}
}
@media (min-width: 1200px) {
.p-target__title {
margin-bottom: 4rem;
}
}
.p-target-card {
margin: 0 auto;
}
.p-target-card--number {
display: inline-block;
color: #222222;
font-size: 36px;
font-family: "Roboto", sans-serif;
line-height: 1.5;
background-color: #FDFDFD;
padding: 0 0.5rem;
position: relative;
z-index: 10;
margin-left: 2.5rem;
}
@media (min-width: 1200px) {
.p-target-card--number {
font-size: 2.25rem;
}
}
.p-target-card__content {
background-color: #FDFDFD;
border: 1px solid #222222;
box-shadow: 1px 1px 10px rgba(34, 34, 34, 0.15);
padding: 43px 2rem 2rem 2rem;
margin-top: -27px;
}
@media (min-width: 767px) {
.p-target-card__content {
max-width: 310px;
padding: 43px 2rem 2rem 2rem;
}
}
@media (min-width: 1200px) {
.p-target-card__content {
max-width: 400px;
}
}
.p-target-card__title {
font-size: 1rem;
font-weight: 500;
text-align: center;
margin-bottom: 1.5rem;
}
.p-target-card--text {
font-size: 0.875rem;
margin-bottom: 0;
} .p-service__content {
padding: 2.5rem 2rem;
margin: -40px 2.5rem 2.5rem 0;
background-color: rgba(253, 253, 253, 0.9);
}
@media (min-width: 1200px) {
.p-service__content {
width: 46%;
margin-top: 5rem;
margin-right: -129px;
padding: 4rem;
}
}
.p-service-title {
margin-bottom: 2rem;
}
.p-service__bg {
width: 82%;
height: 204px;
position: relative;
z-index: -1;
background-image: url(//y-cottodesign.com/wp-content/themes/cotto-design-1/cotto-design/assets/img/service-sp.webp);
background-position: center;
background-size: cover;
margin-left: auto;
margin-right: 0;
}
@media (min-width: 767px) {
.p-service__bg {
height: 320px;
}
}
@media (min-width: 1200px) {
.p-service__bg {
width: 51%;
height: 650px;
background-image: url(//y-cottodesign.com/wp-content/themes/cotto-design-1/cotto-design/assets/img/service-pc.webp);
margin-left: 0;
margin-bottom: 0;
}
}
.p-service__content--text {
margin-bottom: 1.5rem;
} .p-about-title {
margin-bottom: 1.5rem;
}
@media (min-width: 1200px) {
.p-about-title {
margin-bottom: 2rem;
}
}
.p-about__bg {
width: 82%;
height: 204px;
background-image: url(//y-cottodesign.com/wp-content/themes/cotto-design-1/cotto-design/assets/img/about-sp.webp);
background-position: center;
background-size: cover;
margin-left: 0;
margin-right: auto;
}
@media (min-width: 767px) {
.p-about__bg {
height: 320px;
}
}
@media (min-width: 1200px) {
.p-about__bg {
width: 51%;
height: 650px;
background-image: url(//y-cottodesign.com/wp-content/themes/cotto-design-1/cotto-design/assets/img/about-pc.webp);
margin-right: 0;
margin-bottom: 0;
}
}
.p-about__content {
padding: 2.5rem 2rem;
margin: -40px 0 2.5rem 2.5rem;
margin-bottom: 1.5rem;
background-color: rgba(253, 253, 253, 0.9);
}
@media (min-width: 1200px) {
.p-about__content {
width: 46%;
margin-top: 5rem;
margin-left: -129px;
padding: 4rem;
}
}
.p-about__content--text {
margin-bottom: 1.5rem;
} .p-contact {
width: 100%;
text-align: center;
z-index: 1;
padding: 2rem 0;
}
@media (min-width: 767px) {
.p-contact {
padding: 2.5rem 0;
}
}
.p-contact__text {
color: #FDFDFD;
font-weight: 500;
text-align: left;
margin-bottom: 1.5rem;
}
@media (min-width: 767px) {
.p-contact__text {
text-align: center;
margin-bottom: 2.5rem;
}
} .p-news-title {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 2rem;
}
@media (min-width: 1200px) {
.p-news-title {
flex-direction: column;
align-items: baseline;
}
}
.p-news-title p {
font-size: 2rem;
}
@media (min-width: 767px) {
.p-news-title p {
font-size: 3rem;
}
}
.p-news-title h2 {
color: #777777;
font-size: 1rem;
font-weight: 700;
}
@media (min-width: 767px) {
.p-news-title h2 {
font-size: 1.25rem;
margin-bottom: 2.5rem;
}
}
.p-news {
width: 100%;
height: 200px;
display: block;
}
.p-news-ticker {
height: 3rem;
overflow: hidden;
position: relative;
}
@media (min-width: 767px) {
.p-news-ticker {
height: 1.5rem;
}
}
@media (min-width: 1200px) {
.p-page-news {
width: 75%;
}
}
.p-news__item {
display: block;
font-size: 0.875rem;
font-weight: 500;
}
.p-news__item:last-child {
margin-bottom: 0;
}
.p-news__link {
display: flex;
flex-direction: column;
}
@media (min-width: 767px) {
.p-news__link {
font-size: 1rem;
display: flex;
flex-direction: column;
flex-direction: row;
gap: 2rem;
}
}
.p-news__date {
display: block;
}
@media (min-width: 767px) {
.p-news__date {
margin-bottom: 0;
}
}
.p-news__title {
display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.p-news__line {
display: block;
width: calc(100% - 5rem);
height: 1px;
background-color: #222222;
margin: 0 auto;
}
@media (min-width: 767px) {
.p-news__line {
width: calc(100% - 12rem);
}
}
@media (min-width: 1200px) {
.p-news__line {
width: calc(100% - 28rem);
}
} .p-page-works__text {
margin: 2.5rem 0;
}
@media (min-width: 767px) {
.p-page-works__text {
text-align: center;
margin: 4rem 0;
}
} .p-works-post__main-title {
font-size: 1.25rem;
}
@media (min-width: 767px) {
.p-works-post__main-title {
font-size: 2rem;
}
}
.p-works-categories {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 4rem;
}
@media (min-width: 767px) {
.p-works-categories {
justify-content: center;
}
}
.p-works-post__bg {
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media (min-width: 767px) {
.p-works-post__bg {
height: 320px;
}
}
.p-works-post__design-title {
margin-bottom: 2.5rem;
}
.p-works-post__design-text {
margin-bottom: 2.5rem;
}
.p-works-post__design-point {
margin-bottom: 4rem;
}
.p-works-post__design-point ul {
padding-left: 1em;
}
.p-works-post__design-point li {
list-style: disc;
}
.p-works-post__design-point li::marker {
font-size: 0.5em;
padding-right: 0.3em;
}
@media (min-width: 1200px) {
.p-works-post__design-point {
margin-bottom: 2.5rem;
}
}
.p-works-post__sp-mockup {
margin-bottom: 2.5rem;
}
.p-works-post__url {
display: inline-block;
font-size: 1rem;
position: relative;
margin-bottom: 2em;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
color: #222222;
}
@media (min-width: 1200px) {
.p-works-post__url {
font-size: 1.25rem;
margin-bottom: 2.5rem;
}
}
.p-works-post__content {
width: 100%;
}
@media (min-width: 767px) {
.p-works-post__content {
width: 90%;
margin: 0 auto;
}
}
.p-works-post__mockup {
margin-bottom: 2.5rem;
}
@media (min-width: 1200px) {
.p-works-post__mockup {
margin-bottom: 7.5rem;
}
}
.p-design-camp__pc,
.p-design-camp__sp {
display: none;
}
.p-design-camp__sp {
display: block;
}
@media (min-width: 767px) {
.p-design-camp__sp {
display: none;
}
}
.p-design-camp__pc {
display: none;
}
@media (min-width: 767px) {
.p-design-camp__pc {
display: block;
}
}
.p-design-camp {
position: relative;
margin-bottom: 4rem;
}
@media (min-width: 767px) {
.p-design-camp {
margin-bottom: 7.5rem;
}
}
.p-design-camp__pc {
width: 100%;
aspect-ratio: 16/9;
overflow: visible;
border: 1px solid #ddd;
border-radius: 8px;
}
.p-design-camp__sp {
width: 290px;
height: 516px;
overflow: visible;
border: 1px solid #ddd;
border-radius: 12px;
margin: 0 auto;
}
.p-design-camp__scroll {
overflow-y: scroll;
height: 100%;
scrollbar-width: thin;
}
.p-design-camp__scroll::-webkit-scrollbar {
width: 6px;
}
.p-design-camp__scroll::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 3px;
}
.p-works__scroll {
color: #222222;
font-size: 10px;
font-weight: 500;
position: absolute;
right: -24px;
top: 40px;
writing-mode: vertical-rl;
}
@media (min-width: 767px) {
.p-works__scroll {
font-size: 0.875rem;
right: -56px;
}
}
.p-works__scroll::before {
-webkit-animation: scroll 3s infinite;
animation: scroll 3s infinite;
background-color: #FDFDFD;
content: "";
width: 1px;
height: 64px;
position: absolute;
bottom: -70px;
left: 45%;
margin: auto;
z-index: 2;
}
@media (min-width: 1200px) {
.p-works__scroll::before {
height: 80px;
bottom: -90px;
}
}
.p-works__scroll::after {
background-color: #222222;
content: "";
width: 1px;
height: 64px;
position: absolute;
left: 45%;
bottom: -70px;
margin: auto;
}
@media (min-width: 1200px) {
.p-works__scroll::after {
height: 80px;
bottom: -90px;
}
}
.p-works-post-pc {
margin-bottom: 4rem;
}
@media (min-width: 1200px) {
.p-works-post-pc {
margin-bottom: 7.5rem;
}
}
.p-works-post-sp {
margin-bottom: 4rem;
}
@media (min-width: 1200px) {
.p-works-post-sp {
margin-bottom: 7.5rem;
}
} .p-page-service-first {
display: flex;
flex-direction: column;
gap: 2rem;
margin-bottom: 2.5rem;
}
@media (min-width: 767px) {
.p-page-service-first {
flex-direction: row;
margin-bottom: 2rem;
}
}
@media (min-width: 1200px) {
.p-page-service-first {
margin-bottom: 3.5rem;
}
}
.p-page-service-first__text {
margin-bottom: 0;
}
@media (min-width: 767px) {
.p-page-service-first__text {
text-align: center;
}
}
.p-page-service-cotto__flex {
display: flex;
flex-direction: column-reverse;
gap: 2rem;
}
@media (min-width: 1200px) {
.p-page-service-cotto__flex {
flex-direction: row;
justify-content: center;
gap: 5rem;
}
}
.p-page-service-cotto__img {
width: 100%;
aspect-ratio: 3/2;
background-image: url(//y-cottodesign.com/wp-content/themes/cotto-design-1/cotto-design/assets/img/page-service.jpg);
background-position: bottom;
background-size: cover;
}
@media (min-width: 1200px) {
.p-page-service-cotto__img {
aspect-ratio: none;
max-width: 400px;
}
}
@media (min-width: 1200px) {
.p-page-service-cotto__text {
max-width: 660px;
}
}
.p-page-service-cotto__text--title {
margin-bottom: 2rem;
}
.p-page-service-cotto__list {
padding-left: 1em;
}
.p-page-service-cotto__list li {
list-style: disc;
}
.p-page-service-cotto__list li::marker {
font-size: 0.5em;
padding-right: 0.3em;
}
.p-page-service-cotto__list li {
list-style: disc !important; }
.p-page-service-cotto__title {
margin-bottom: 2rem;
} .p-plan__title {
text-align: left;
margin-bottom: 1rem;
}
.p-plan__line {
margin-bottom: 2rem;
}
@media (min-width: 1200px) {
.p-plan__line {
margin-bottom: 4.5rem;
}
} .p-plan-hp {
margin-bottom: 5rem;
}
@media (min-width: 1200px) {
.p-plan-hp {
margin-bottom: 7.5rem;
}
}
.p-plan-hp__title {
text-align: center;
margin-bottom: 2rem;
}
.p-plan-hp__text {
margin-bottom: 2rem;
}
@media (min-width: 767px) {
.p-plan-hp__text {
text-align: center;
margin-bottom: 4.5rem;
}
} .p-plan-card {
display: flex;
flex-direction: column;
gap: 2.5rem;
margin-bottom: 1.5rem;
}
@media (min-width: 767px) {
.p-plan-card {
gap: 2.5rem;
}
}
@media (min-width: 1200px) {
.p-plan-card {
flex-direction: row;
justify-content: center;
align-items: baseline;
margin-bottom: 2rem;
}
}
.p-plan-card__recommend {
position: absolute;
top: -1.5rem;
left: 50%;
transform: translateX(-50%);
text-align: center;
white-space: nowrap;
z-index: 2;
}
@media (min-width: 1200px) {
.p-plan-card__recommend {
top: -1.8rem;
}
}
.p-plan-card__line {
display: inline-block;
width: 32px;
height: 1px;
background-color: #222222;
}
.p-plan-card__line.left {
transform: rotate(60deg);
}
.p-plan-card__line.right {
transform: rotate(-60deg);
}
.p-plan-card__container {
width: 100%;
flex: 1;
color: #222222;
position: relative;
overflow: visible;
border: 1px solid #E7E7E7;
}
.p-plan-card__container.orange {
border: 1px solid #EBB757;
}
.p-plan-card__bg {
color: #FDFDFD;
text-align: center;
background-color: #E7E7E7;
border-bottom: 1px solid #E7E7E7;
padding: 1.5rem 0 1rem 0;
}
.p-plan-card__bg.orange {
background-color: #EBB757;
}
.p-plan-card__title {
display: inline-block;
font-size: 1.25rem;
font-weight: 700;
color: #222222;
background-color: #FDFDFD;
padding: 0 1rem;
margin-bottom: 0.5rem;
}
.p-plan-card__title.orange {
color: #EBB757;
}
@media (min-width: 1200px) {
.p-plan-card__title {
font-size: 1.5rem;
}
}
.p-plan-card__title--text {
color: #222222;
}
.p-plan-card__title--text.orange {
color: #FDFDFD;
}
.p-plan-card__content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 1.5rem 2rem;
}
@media (min-width: 1200px) {
.p-plan-card__content {
padding: 2rem;
}
}
.p-plan-card__price {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.5rem;
}
.p-plan-card__list {
margin-bottom: 1rem;
}
.p-plan-card__list--item {
font-size: 0.875rem;
font-weight: 700;
}
@media (min-width: 1200px) {
.p-plan-card__list--item {
font-size: 1rem;
}
}
.p-plan-card__detail {
padding: 1.5rem;
}
@media (min-width: 1200px) {
.p-plan-card__detail {
padding: 2rem;
}
} .p-after-plan {
margin-bottom: 5rem;
}
@media (min-width: 1200px) {
.p-after-plan {
margin-bottom: 7.5rem;
}
}
.p-after-plan-card {
display: flex;
flex-direction: column;
gap: 2.5rem;
position: relative;
}
@media (min-width: 767px) {
.p-after-plan-card {
gap: 2.5rem;
}
}
@media (min-width: 1200px) {
.p-after-plan-card {
flex-direction: row;
justify-content: center;
align-items: stretch;
}
}
.p-plan-card__recommend {
position: absolute;
top: -1.5rem;
left: 50%;
transform: translateX(-50%);
text-align: center;
white-space: nowrap;
z-index: 2;
}
@media (min-width: 1200px) {
.p-plan-card__recommend {
top: -1.8rem;
}
}
.p-after-plan-card__bg {
color: #FDFDFD;
text-align: center;
padding: 1.5rem 0 1rem 0;
background-color: #E7E7E7;
}
.p-after-plan-card__title {
color: #222222;
font-size: 1rem;
font-weight: 500;
display: inline-block;
background-color: #FDFDFD;
padding: 0.5rem 1rem;
margin-bottom: 0.5rem;
}
@media (min-width: 1200px) {
.p-after-plan-card__title {
font-size: 1.25rem;
}
}
.p-after-plan-card__container {
width: 100%;
flex: 1;
border: 1px solid #E7E7E7;
}
@media (min-width: 1200px) {
.p-after-plan-card__container {
width: 43%;
}
} .p-other-plan {
margin-bottom: 1.5rem;
}
@media (min-width: 1200px) {
.p-other-plan {
margin-bottom: 2rem;
}
}
.p-other-plan__title {
color: #222222;
font-size: 1rem;
font-weight: 500;
margin-bottom: 2rem;
}
@media (min-width: 767px) {
.p-other-plan__title {
width: 250px;
margin-bottom: 0;
}
}
@media (min-width: 1200px) {
.p-other-plan__title {
font-size: 1.25rem;
}
}
.p-other-plan__content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
}
@media (min-width: 767px) {
.p-other-plan__content {
flex-direction: row;
padding: 2rem;
}
}
@media (min-width: 1200px) {
.p-other-plan__detail {
width: 65%;
}
}
.p-other-plan__list {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.p-other-plan__list::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
border-bottom: 1px dashed #E7E7E7;
transform: translateY(-50%);
z-index: 0;
}
.p-other-plan__list dt,
.p-other-plan__list dd {
position: relative;
background-color: #FDFDFD;
z-index: 1;
}
.p-other-plan__text {
flex: 0 0 180px;
font-size: 13px;
font-weight: 500;
}
@media (min-width: 1200px) {
.p-other-plan__text {
font-size: 0.875rem;
flex: 0 0 200px;
}
}
.p-other-plan__price {
width: 125px;
display: flex;
align-items: baseline;
font-size: 0.875rem;
font-weight: 500;
}
@media (min-width: 767px) {
.p-other-plan__price {
width: 150px;
justify-content: center;
gap: 0.5rem;
}
}
@media (min-width: 1200px) {
.p-other-plan__price {
width: 180px;
justify-content: center;
gap: 0.5rem;
font-size: 1.25rem;
}
} @media (min-width: 1200px) {
.p-flow__container {
display: flex;
flex-direction: column;
align-items: center;
}
}
.p-flow {
margin-bottom: 1.5rem;
}
@media (min-width: 1200px) {
.p-flow {
width: 850px;
margin-bottom: 2rem;
}
}
.p-flow__text {
text-align: left;
margin-bottom: 2.5rem;
}
@media (min-width: 1200px) {
.p-flow__text {
margin-bottom: 3.5rem;
}
}
.p-flow__title {
display: flex;
align-items: center;
gap: 0.5rem;
}
@media (min-width: 1200px) {
.p-flow__title {
gap: 2rem;
}
}
.p-flow__title--step {
color: #EBB757;
font-size: 1rem;
font-weight: 500;
}
@media (min-width: 1200px) {
.p-flow__title--step {
font-size: 1.25rem;
}
}
.p-flow__title--text {
font-size: 1rem;
font-weight: 500;
}
@media (min-width: 1200px) {
.p-flow__title--text {
font-size: 1.25rem;
}
}
.p-flow__content {
display: flex;
gap: 3rem;
}
@media (min-width: 1200px) {
.p-flow__content {
gap: 7.5rem;
}
}
.p-flow__vertical-line {
display: block;
height: 100%;
width: 1px;
background-color: #777777;
margin: 0.5rem 0 0 27px;
}
@media (min-width: 1200px) {
.p-flow__vertical-line {
margin: 1rem 0 0 36px;
}
}
.p-flow__vertical-line.last {
background-color: transparent;
}
.p-flow__content--text {
margin-top: 1rem;
}
@media (min-width: 1200px) {
.p-flow__content--text {
margin-top: 2rem;
}
}
.p-flow__btn {
margin-top: 2rem;
}
.p-flow__img {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.p-flow__img img {
width: 100px;
}
@media (min-width: 767px) {
.p-flow__img img {
width: 200px;
}
}
.p-faq__item {
margin-bottom: 2rem;
overflow: hidden;
}
@media (min-width: 1200px) {
.p-faq__item {
margin-bottom: 2.5rem;
}
}
.p-faq__title {
width: 100%;
-webkit-appearance: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; color: #222222;
font-size: 1rem;
letter-spacing: 0.1em;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #E7E7E7;
padding: 1rem 0 1rem 0;
cursor: pointer;
}
@media (min-width: 1200px) {
.p-faq__title {
align-items: center;
padding: 2rem 4rem 2rem 4rem;
}
}
.p-faq__title .q {
margin-right: 0.5rem;
}
.p-faq__title .p-faq__arrow {
margin-left: 0.5rem;
transition: transform 0.3s ease;
}
@media (min-width: 1200px) {
.p-faq__title {
margin-left: 0;
}
}
.p-faq__title--text {
display: flex;
}
.p-faq__question {
text-align: left;
}
.p-faq__answer {
color: #777777;
max-height: 0;
background-color: #FDFDFD;
border-radius: 0 0 10px 10px;
opacity: 0;
transition: max-height 0.4s ease, padding 0.3s ease, opacity 0.4s ease;
}
@media (min-width: 1200px) {
.p-faq__answer {
padding: 0 4rem 0 4.5rem;
}
}
.p-faq__answer .a {
display: inline-block;
margin-right: 0.5rem;
}
.p-faq__arrow {
transition: transform 0.3s ease;
}
.p-faq__arrow.rotate {
transform: rotate(180deg);
}
.p-faq__answer.open {
opacity: 1;
padding: 1rem 0 1rem 0;
max-height: 800px;
}
@media (min-width: 1200px) {
.p-faq__answer.open {
padding: 2rem 4.5rem 2rem 4.5rem;
}
}
.p-faq__list {
padding-left: 0.8em;
}
.p-faq__list li {
list-style: disc;
}
.p-faq__list li::marker {
font-size: 0.5em;
padding-right: 0.3em;
} .p-about-yuuka {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 4rem;
}
@media (min-width: 1200px) {
.p-about-yuuka {
flex-direction: row;
align-items: center;
gap: 5rem;
margin-bottom: 7.5rem;
}
}
.p-about-yuuka_img {
aspect-ratio: 3/2;
}
@media (min-width: 1200px) {
.p-about-yuuka_img {
max-width: 450px;
}
}
.p-about-work {
margin-bottom: 4rem;
}
@media (min-width: 1200px) {
.p-about-work {
margin-bottom: 7.5rem;
}
}
.p-about-work__img {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
margin-bottom: 2rem;
}
@media (min-width: 767px) {
.p-about-work__img {
flex-direction: row;
gap: 2.5rem;
margin-bottom: 2.5rem;
}
}
.p-about-yuuka__work {
display: inline-block;
margin-left: 1rem;
}
.p-about-yuuka__last {
display: flex;
}
.p-about-work__title {
text-align: center;
margin-bottom: 2rem;
}
@media (min-width: 767px) {
.p-about-work__text {
text-align: center;
}
}
.p-about-vision {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (min-width: 1200px) {
.p-about-vision {
flex-direction: row;
align-items: center;
gap: 5rem;
}
}
.p-about-vision__img {
aspect-ratio: 3/2;
}
@media (min-width: 1200px) {
.p-about-vision__img {
max-width: 450px;
}
} .p-about-cotto {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 4rem;
}
@media (min-width: 1200px) {
.p-about-cotto {
flex-direction: row;
align-items: center;
gap: 5rem;
margin-bottom: 5rem;
}
}
.p-about-cotto__title {
display: inline-block;
text-align: left;
margin-bottom: 2rem;
}
@media (min-width: 767px) {
.p-about-cotto__title {
margin-bottom: 3.5rem;
}
}
@media (min-width: 1200px) {
.p-about-cotto__title {
margin-bottom: 4rem;
}
}
.p-about-cotto__title--ja {
color: #777777;
font-size: 1rem;
font-weight: 700;
}
@media (min-width: 767px) {
.p-about-cotto__title--ja {
font-size: 1.25rem;
}
}
.p-about-cotto__title--main {
color: #222222;
font-size: 2rem;
font-weight: 500;
letter-spacing: 0.15em;
}
@media (min-width: 767px) {
.p-about-cotto__title--main {
font-size: 3rem;
}
}
.p-about-cotto__title--main ruby {
display: inline-flex;
flex-direction: column-reverse;
align-items: center;
margin: 0 0.15em;
}
.p-about-cotto__title--main rt {
font-size: 0.3em;
line-height: 1;
position: relative;
top: 0.5em;
color: #777777;
font-weight: 400;
}
.p-about-cotto__img {
aspect-ratio: 3/2;
}
@media (min-width: 1200px) {
.p-about-cotto__img {
max-width: 450px;
}
} .p-about-company {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 4rem;
}
@media (min-width: 1200px) {
.p-about-company {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 7.5rem;
}
}
.p-about-company__text {
font-size: 10px;
display: flex;
justify-content: space-between;
gap: 0.5rem;
border-bottom: 1px solid #E7E7E7;
padding: 0 0 1rem 0;
margin-bottom: 1rem;
}
.p-about-company__text:last-child {
margin-bottom: 0;
}
.p-about-company__text span {
display: block;
}
.p-about-company__text span:nth-child(1) {
width: 50px;
}
.p-about-company__text span:nth-child(2) {
width: 180px;
}
@media (min-width: 767px) {
.p-about-company__text {
font-size: 14px;
}
.p-about-company__text span:nth-child(1) {
width: 100px;
}
.p-about-company__text span:nth-child(2) {
width: 300px;
}
}
@media (min-width: 1200px) {
.p-about-company__text {
width: 500px;
padding-left: 2rem;
}
.p-about-company__text span:nth-child(1) {
width: 100px;
}
.p-about-company__text span:nth-child(2) {
width: 300px;
}
}
.p-about-company__img {
aspect-ratio: 3/2;
}
@media (min-width: 1200px) {
.p-about-company__img {
max-width: 450px;
}
} .p-blog {
display: grid;
gap: 2rem;
font-size: 0.875rem;
margin-bottom: 2rem;
}
@media (min-width: 767px) {
.p-blog {
display: grid;
grid-template-columns: repeat(3, 1fr);
font-size: 10px;
margin-bottom: 2rem;
}
}
@media (min-width: 1200px) {
.p-blog {
font-size: 0.875rem;
gap: 3rem;
}
}
.p-blog__item.is-dummy {
display: none;
}
@media (min-width: 767px) {
.p-blog__item.is-dummy {
display: block;
pointer-events: none; }
}
.p-blog__img {
position: relative;
overflow: hidden;
}
.p-blog__img img {
width: 100%;
height: auto;
display: block;
transition: filter 0.4s ease, transform 0.4s ease;
}
@media (min-width: 1200px) {
.p-blog__img img {
transform-origin: center center;
}
}
.p-blog__img img.is-dummy {
pointer-events: none;
cursor: default; }
.p-blog__content:hover .p-blog__img img {
transform: scale(1.1);
}
.p-blog__img.is-dummy {
display: none;
}
@media (min-width: 767px) {
.p-blog__img.is-dummy {
display: block;
}
}
.p-blog__title {
padding: 1.5rem 0;
}
@media (min-width: 767px) {
.p-blog__title {
padding: 1rem 0;
}
}
@media (min-width: 1200px) {
.p-blog__title {
padding: 1.5rem 0 0.5rem 0;
}
}
.p-blog__name {
font-size: 1rem;
display: block;
font-weight: 500;
transition: all 0.4s ease;
}
.p-blog__date {
color: #222222;
display: block;
margin-bottom: 0.5rem;
transition: all 0.4s ease;
}
.p-blog__tug {
color: #777777;
transition: all 0.4s ease;
}
.p-blog__tug:hover {
color: #222222;
} .p-page_contact {
margin-bottom: 2rem;
}
.p-contact-form {
max-width: 600px;
margin: 0 auto;
}
.p-contact-form__item {
display: flex;
flex-direction: column;
margin-bottom: 2rem;
}
.p-contact-form__item label {
font-size: 0.875rem;
color: #222222;
font-weight: 500;
margin-bottom: 0.5rem;
}
.required {
color: #d67a7a;
margin-left: 4px;
font-size: 0.9em;
}
.input,
.textarea {
border: 1px solid #222222;
border-radius: 8px;
padding: 12px;
font-size: 0.875rem;
width: 100%;
font-family: inherit;
transition: border-color 0.2s;
box-shadow: 1px 1px 50px rgba(34, 34, 34, 0.15);
}
.input:focus,
.textarea:focus {
border-color: #222222;
outline: none;
}
.textarea {
height: 150px;
resize: vertical;
}
.p-contact-form__item--btn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
}
.submit {
color: #222222;
font-size: 1rem;
padding: 12px 40px;
border: 1px solid #222222;
cursor: pointer;
transition: all 0.4s ease;
}
.submit.black {
color: #FDFDFD;
background-color: #222222;
}
.submit-black {
color: #FDFDFD;
background-color: #222222;
font-size: 1rem;
padding: 12px 40px;
border: 1px solid #222222;
cursor: pointer;
transition: all 0.4s ease;
}
.submit:hover, .submit-black:hover {
color: #777777;
box-shadow: 1px 1px 50px rgba(34, 34, 34, 0.15);
}
.wpcf7-response-output {
display: none !important;
} .p-page-news__item {
display: block;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 2rem;
}
.p-page-news__item:last-child {
margin-bottom: 0;
}
.p-page-news__link {
display: flex;
flex-direction: column;
}
@media (min-width: 767px) {
.p-page-news__link {
font-size: 1rem;
display: flex;
flex-direction: column;
flex-direction: row;
gap: 2rem;
}
}
.p-news__line {
display: block;
width: calc(100% - 5rem);
height: 1px;
background-color: #222222;
margin: 0 auto;
}
@media (min-width: 767px) {
.p-news__line {
width: calc(100% - 12rem);
}
}
@media (min-width: 1200px) {
.p-news__line {
width: calc(100% - 28rem);
}
}
.p-news-post__title {
font-size: 1.25rem;
margin-bottom: 2rem;
}
@media (min-width: 767px) {
.p-news-post__title {
font-size: 2rem;
margin-bottom: 4rem;
}
}
.p-news-post__img {
width: 100%;
margin-bottom: 2.5rem;
}
@media (min-width: 1200px) {
.p-news-post__img {
margin-bottom: 5rem;
}
}
.p-news-post__img img {
width: 100%;
height: auto;
display: block;
}
.p-news-post__url {
display: inline-flex;
align-items: center;
} .u-fw-medium {
font-weight: 500;
}
.u-sp-only {
display: inline;
}
@media (min-width: 767px) {
.u-sp-only {
display: none;
}
}
.u-sp-tb-only {
display: inline-block;
}
@media (min-width: 1200px) {
.u-sp-tb-only {
display: none;
}
}
.u-tb-only {
display: none;
}
@media (min-width: 767px) {
.u-tb-only {
display: inline-block;
}
}
@media (min-width: 1200px) {
.u-tb-only {
display: none;
}
}
.u-tb-pc-only {
display: none;
}
@media (min-width: 767px) {
.u-tb-pc-only {
display: inline-block;
}
}
.u-pc-only {
display: none;
}
@media (min-width: 1200px) {
.u-pc-only {
display: inline-block;
}
}
.u-text-black {
color: #222222;
}
.u-text-gray {
color: #777777;
}
.u-text-orange {
color: #EBB757;
}
.u-text-red {
color: #EB7457;
}
.u-text-center {
text-align: center;
}
.u-text-right {
text-align: right;
}
.u-mb-16 {
margin-bottom: 1rem;
}
.u-mb-32 {
margin-bottom: 2rem;
}
.u-mb-64 {
margin-bottom: 4rem;
}