@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap");
* {
box-sizing: border-box;
}
body {
background: #fff;
width: 100%;
font-family: "Noto Sans JP", sans-serif;
color: #000;
font-weight: 400;
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
}
img {
width: 100%;
height: auto;
}
a {
display: inline-block;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
.pc-view {
display: block;
}
.sp-view {
display: none;
}
.header {
background: #fff;
width: 100%;
height: 185px;
padding: 40px 16px 38px;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
}
.header__inner {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
max-width: 1600px;
margin: 0 auto;
}
.header__logo a {
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
display: block;
width: 274px;
height: 48px;
margin: 0 auto;
text-decoration: none;
transition: background 0.3s ease;
}
.header__logo a:hover {
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
}
.header__menu__btn {
display: none;
}
.header__nav {
display: flex;
justify-content: center;
}
.header__nav li {
padding: 0 30px;
}
.header__nav li a {
display: block;
padding: 12px 0;
font-family: "Jost", serif;
font-size: 17px;
line-height: 100%;
letter-spacing: 0.5px;
text-decoration: none;
}
.header__nav__wrap {
display: table;
position: relative;
margin: 12px auto 0;
}
.header__nav__pointer {
background: #E4007F;
height: 4px;
border-radius: 2px;
position: absolute;
bottom: 0;
transition: all 0.3s ease;
opacity: 0;
}
.header__link {
display: flex;
position: absolute;
top: 16px;
right: 16px;
}
.header__link li a {
display: block;
padding: 46px 12px 4px;
font-family: "Jost", serif;
font-size: 12px;
line-height: 100%;
text-decoration: none;
position: relative;
transition: all 0.3s ease;
}
.header__link li a:before {
content: "";
width: 36px;
height: 36px;
position: absolute;
top: 4px;
left: 0;
right: 0;
margin: 0 auto;
transition: background 0.3s ease;
}
.header__link li a[href*="#recruit"]:before {
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
}
.header__link li a[href*="#contact"]:before {
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
}
.header__link li a:hover, .header__link li a.current {
background: #E4007F;
color: #fff;
}
.header__link li a:hover[href*="#recruit"]:before, .header__link li a.current[href*="#recruit"]:before {
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
}
.header__link li a:hover[href*="#contact"]:before, .header__link li a.current[href*="#contact"]:before {
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
}
.header.floating {
height: 78px;
padding: 16px 16px 16px 32px;
box-shadow: 0px 1px 6px #e3e3e3;
position: fixed;
}
.header.floating .header__inner {
flex-direction: row;
justify-content: space-between;
align-items: center;
max-width: 100%;
padding-right: 145px;
}
.header.floating .header__logo a {
width: 180px;
}
@media only screen and (max-width: 1107px) and (min-width: 768px) {
.header.floating .header__logo {
width: 19.6721311475%;
}
.header.floating .header__logo a {
width: 100%;
}
}
@media only screen and (max-width: 1107px) and (min-width: 768px) {
.header.floating .header__menu__wrap {
width: 78.9071038251%;
}
}
.header.floating .header__nav__wrap {
width: 100%;
margin-top: 0;
}
.header.floating .header__nav {
margin-top: 0;
}
@media only screen and (max-width: 1107px) and (min-width: 768px) {
.header.floating .header__nav {
justify-content: flex-end;
}
}
@media only screen and (max-width: 1107px) and (min-width: 768px) {
.header.floating .header__nav li {
padding: 0 3.324099723%;
}
}
.header.floating .header__nav li a {
padding: 12px 0;
}
@media only screen and (max-width: 1107px) and (min-width: 768px) {
.header.floating .header__nav li a {
font-size: 1.5356820235vw;
}
}
.header.floating .header__link {
top: 8px;
right: 8px;
}
.footer {
width: 100%;
padding: 35px 0;
}
#top .footer {
background: #001A5B;
}
.footer p {
margin-top: 1.5%;
font-family: "Jost", serif;
color: #000;
font-size: 17px;
line-height: 100%;
letter-spacing: 0.5px;
text-align: center;
}
#top .footer p {
color: #fff;
}
.footer__inner {
width: 100%;
max-width: 1600px;
margin: 0 auto;
}
.footer__link {
display: flex;
justify-content: center;
}
.footer__link li {
margin: 0 2%;
}
.footer__link li a {
font-family: "Jost", serif;
color: #000;
font-size: 17px;
line-height: 100%;
letter-spacing: 0.5px;
text-decoration: none;
}
#top .footer__link li a {
color: #fff;
}
.footer__link li a:hover {
text-decoration: underline;
}
.visual,
section {
transition: opacity 0.3s ease;
opacity: 0;
}
.visual .read + .en,
section .read + .en {
transition: opacity 0.3s 0.4s ease;
opacity: 0;
}
.visual.anim,
section.anim {
opacity: 1;
}
.visual.anim .read + .en,
section.anim .read + .en {
opacity: 1;
}
.slide-up {
transition: transform 0.3s ease, opacity 0.3s ease;
transform: translateY(30px);
opacity: 0;
}
.slide-up.anim {
transform: translateY(0);
opacity: 1;
}
.slide-up-list li {
transition: transform 0.3s ease, opacity 0.3s ease;
transform: translateY(30px);
opacity: 0;
}
.slide-up-list li:nth-of-type(1) {
transition-delay: 0s;
}
.slide-up-list li:nth-of-type(2) {
transition-delay: 0.1s;
}
.slide-up-list li:nth-of-type(3) {
transition-delay: 0.2s;
}
.slide-up-list li:nth-of-type(4) {
transition-delay: 0.3s;
}
.slide-up-list li:nth-of-type(5) {
transition-delay: 0.4s;
}
.slide-up-list li:nth-of-type(6) {
transition-delay: 0.5s;
}
.slide-up-list li:nth-of-type(7) {
transition-delay: 0.6s;
}
.slide-up-list li:nth-of-type(8) {
transition-delay: 0.7s;
}
.slide-up-list li:nth-of-type(9) {
transition-delay: 0.8s;
}
.slide-up-list li:nth-of-type(10) {
transition-delay: 0.9s;
}
.slide-up-list.anim li {
transform: translateY(0);
opacity: 1;
}
.slide-up-dl dt, .slide-up-dl dd {
transition: transform 0.3s ease, opacity 0.3s ease;
transform: translateY(30px);
opacity: 0;
}
.slide-up-dl dt:nth-of-type(1), .slide-up-dl dd:nth-of-type(1) {
transition-delay: 0s;
}
.slide-up-dl dt:nth-of-type(2), .slide-up-dl dd:nth-of-type(2) {
transition-delay: 0.1s;
}
.slide-up-dl dt:nth-of-type(3), .slide-up-dl dd:nth-of-type(3) {
transition-delay: 0.2s;
}
.slide-up-dl dt:nth-of-type(4), .slide-up-dl dd:nth-of-type(4) {
transition-delay: 0.3s;
}
.slide-up-dl dt:nth-of-type(5), .slide-up-dl dd:nth-of-type(5) {
transition-delay: 0.4s;
}
.slide-up-dl dt:nth-of-type(6), .slide-up-dl dd:nth-of-type(6) {
transition-delay: 0.5s;
}
.slide-up-dl dt:nth-of-type(7), .slide-up-dl dd:nth-of-type(7) {
transition-delay: 0.6s;
}
.slide-up-dl dt:nth-of-type(8), .slide-up-dl dd:nth-of-type(8) {
transition-delay: 0.7s;
}
.slide-up-dl dt:nth-of-type(9), .slide-up-dl dd:nth-of-type(9) {
transition-delay: 0.8s;
}
.slide-up-dl dt:nth-of-type(10), .slide-up-dl dd:nth-of-type(10) {
transition-delay: 0.9s;
}
.slide-up-dl.anim dt, .slide-up-dl.anim dd {
transform: translateY(0);
opacity: 1;
}
@media only screen and (max-width: 767px) {
a {
-webkit-tap-highlight-color: transparent;
}
.pc-view {
display: none;
}
.sp-view {
display: block;
}
.header {
height: 64px;
padding: 20px 64px 20px 16px;
}
.header__inner {
width: 87.6923076923%;
margin: 0;
}
.header__logo a {
width: 138px;
height: 24px;
margin: 0;
}
.header__menu__wrap {
background: #001A5B;
width: 100%;
height: 100%;
min-height: 100vh;
padding: 64px 0;
position: fixed;
top: 0;
right: -100%;
z-index: 1000;
overflow-y: auto;
transition: right 0.3s ease;
}
.header__menu__btn {
display: block;
width: 64px;
height: 64px;
position: fixed;
top: 0;
right: 0;
z-index: 1001;
cursor: pointer;
}
.header__menu__btn span {
display: block;
background: #000;
width: 24px;
height: 2px;
position: absolute;
left: 20px;
transition: all 0.2s ease-in-out;
pointer-events: none;
}
.header__menu__btn span:nth-of-type(1) {
top: 22px;
}
.header__menu__btn span:nth-of-type(2) {
top: 31px;
opacity: 1;
}
.header__menu__btn span:nth-of-type(3) {
top: 40px;
}
.header__nav {
display: block;
}
.header__nav li {
margin: 0;
padding: 0 10.2564102564%;
}
.header__nav li:nth-child(1) a {
transition-delay: 0.2s;
}
.header__nav li:nth-child(2) a {
transition-delay: 0.3s;
}
.header__nav li:nth-child(3) a {
transition-delay: 0.4s;
}
.header__nav li:nth-child(4) a {
transition-delay: 0.5s;
}
.header__nav li:nth-child(5) a {
transition-delay: 0.6s;
}
.header__nav li:nth-child(6) a {
transition-delay: 0.7s;
}
.header__nav li:nth-child(7) a {
transition-delay: 0.8s;
}
.header__nav li:nth-child(8) a {
transition-delay: 0.9s;
}
.header__nav li:nth-child(9) a {
transition-delay: 1s;
}
.header__nav li:nth-child(10) a {
transition-delay: 1.1s;
}
.header__nav li a {
padding: 12px 0;
color: #fff;
font-size: 24px;
line-height: 180%;
letter-spacing: 0;
text-align: center;
transition: transform 0.3s ease, opacity 0.3s ease;
transform: translateX(30px);
opacity: 0;
}
.header__nav li a span {
position: relative;
}
.header__nav li a span:after {
content: "";
background: #E4007F;
width: 100%;
height: 4px;
border-radius: 2px;
position: absolute;
left: 0;
bottom: -10px;
transition: opacity 0.3s ease;
opacity: 0;
}
.header__nav li a.current span:after {
opacity: 1;
}
.header__nav__wrap {
display: block;
margin-top: 0;
}
.header__nav__pointer {
display: none;
}
.header__link {
display: block;
position: static;
margin-top: 36px;
padding: 0 10.2564102564%;
}
.header__link li {
margin-top: 16px;
margin-right: 0;
}
.header__link li:nth-child(1) a {
transition-delay: 0.7s;
}
.header__link li:nth-child(2) a {
transition-delay: 0.8s;
}
.header__link li:nth-child(3) a {
transition-delay: 0.9s;
}
.header__link li:nth-child(4) a {
transition-delay: 1s;
}
.header__link li:nth-child(5) a {
transition-delay: 1.1s;
}
.header__link li:nth-child(6) a {
transition-delay: 1.2s;
}
.header__link li:nth-child(7) a {
transition-delay: 1.3s;
}
.header__link li:nth-child(8) a {
transition-delay: 1.4s;
}
.header__link li:nth-child(9) a {
transition-delay: 1.5s;
}
.header__link li:nth-child(10) a {
transition-delay: 1.6s;
}
.header__link li:first-of-type {
margin-top: 0;
}
.header__link li a {
display: flex;
align-items: center;
background: #ffffff;
width: 100%;
height: 80px;
padding: 0 24px 0 88px;
color: #fff;
color: #001A5B;
font-size: 24px;
line-height: 180%;
transition: transform 0.3s ease, opacity 0.3s ease;
transform: translateX(30px);
opacity: 0;
}
.header__link li a:before {
width: 52px;
height: 52px;
top: 0;
left: 24px;
right: auto;
bottom: 0;
margin: auto 0;
transition: none;
}
.header__link li a:hover {
background: #ffffff;
color: #001A5B;
}
.header__link li a:hover[href*="#recruit"]:before {
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
}
.header__link li a:hover[href*="#contact"]:before {
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
}
.header__link li a.current {
background: #E4007F;
color: #fff;
}
.header__link li a.current[href*="#recruit"]:before {
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
}
.header__link li a.current[href*="#contact"]:before {
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
}
.header.open .header__menu__btn span {
background: #fff;
}
.header.open .header__menu__btn span:nth-of-type(1) {
top: 32px;
transform: rotate(45deg);
}
.header.open .header__menu__btn span:nth-of-type(2) {
opacity: 0;
}
.header.open .header__menu__btn span:nth-of-type(3) {
top: 32px;
transform: rotate(-45deg);
}
.header.open .header__menu__wrap {
right: 0;
}
.header.open .header__menu__wrap a {
transform: translateX(0);
opacity: 1;
}
.footer {
padding: min(calc(35/390*100%), 35px) 0;
}
.footer p {
margin-top: 7.0175438596%;
font-size: min(calc(14/390*100vw), 14px);
}
.footer__inner {
width: 87.6923076923%;
}
.footer__link li {
margin: 0 4.6783625731%;
}
.footer__link li a {
font-size: min(calc(14/390*100vw), 14px);
}
.footer__link li a:hover {
text-decoration: none;
}
}
main {
padding-top: 185px;
}
.contents {
background: #fff;
margin-top: min(calc(120/1600*100%), 120px);
position: relative;
}
#top .contents {
margin-top: 0;
}
.contents.rower {
padding: 0 min(calc(80/1080*100%), 80px);
}
.inner {
width: 100%;
max-width: 1600px;
margin: 0 auto;
}
.rower .inner {
max-width: 1080px;
margin-bottom: 85px;
}
h1 {
font-family: "Jost", serif;
color: #001A5B;
font-size: min(calc(80/1760*100vw), 80px);
font-weight: 600;
line-height: 100%;
}
h1 small {
display: block;
margin-top: min(calc(16/1600*100%), 16px);
font-family: "Noto Sans JP", sans-serif;
color: #231815;
font-size: min(calc(24/1760*100vw), 24px);
font-weight: 700;
line-height: 160%;
}
#top h1 {
font-size: min(calc(120/1760*100vw), 120px);
}
.rower h1 {
text-align: center;
}
.read {
color: #231815;
font-size: min(calc(48/1760*100vw), 48px);
font-weight: 700;
line-height: 160%;
}
.read:first-of-type {
margin-top: 1.5%;
}
.rower .read {
margin: 24px 0 0;
font-size: 18px;
font-weight: 400;
line-height: 180%;
}
.rower .read:first-of-type {
margin-top: 80px;
}
.rower .text {
font-size: 18px;
line-height: 180%;
}
.en {
margin-top: 1.5%;
font-family: "Jost", serif;
color: #231815;
font-size: min(calc(18/1760*100vw), 18px);
line-height: 160%;
}
.notes {
margin-top: 1.5%;
color: #231815;
font-size: min(calc(24/1760*100vw), 24px);
font-weight: 700;
line-height: 180%;
}
.works__list {
display: grid;
grid-template-columns: repeat(4, min(calc(398/1600*100%), 398px));
gap: min(calc(2/1600*100vw), 2px);
}
.works__list__item {
width: 100%;
}
.works__list__item__link {
width: 100%;
height: 100%;
background: #ffffff;
text-decoration: none;
transition: background 0.3s;
}
.works__list__item__link:hover {
background: #e4007f;
}
.works__list__item__img {
overflow: hidden;
position: relative;
width: 100%;
aspect-ratio: 398/209;
}
.works__list__item__img img {
object-fit: cover;
position: absolute;
inset: 50%;
translate: -50% -50%;
}
.works__list__item__texts {
padding: min(calc(22.5/398*100%), 22.5px) min(calc(16/398*100%), 16px) min(calc(24.5/398*100%), 24.5px);
}
.works__list__item__texts__type {
font-family: "Jost", serif;
color: #001a5b;
font-size: min(calc(16/1760 * 100vw), 16px);
font-weight: bold;
line-height: 1;
transition: color 0.3s;
}
.works__list__item__link:hover .works__list__item__texts__type {
color: #ffffff;
}
.works__list__item__texts__description {
overflow: hidden;
display: -webkit-box;
color: #1a1a1a;
font-size: min(calc(16/1760 * 100vw), 16px);
font-weight: bold;
line-height: 1.75;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
margin-top: min(calc(4/1600*100vw), 4px);
transition: color 0.3s;
}
.works__list__item__link:hover .works__list__item__texts__description {
color: #ffffff;
}
.works__list__item__texts__title {
color: #1a1a1a;
font-size: min(calc(14/1760 * 100vw), 14px);
line-height: 1.35;
margin-top: min(calc(4/1600*100vw), 4px);
transition: color 0.3s;
}
.works__list__item__link:hover .works__list__item__texts__title {
color: #ffffff;
}
.contact-text {
display: flex;
flex-direction: column;
align-items: center;
}
.contact-text .text {
font-size: min(calc(24/1760*100vw), 24px);
color: #231815;
font-weight: 700;
line-height: 160%;
}
.contact-text .en {
margin-top: 0;
}
.contact-text a {
background: #E4007F;
display: block;
width: 30%;
margin-top: 1.5%;
padding: min(calc(30/1600*100%), 30px) min(calc(32/1600*100%), 32px);
color: #fff;
font-size: min(calc(20/1760*100vw), 20px);
font-weight: 700;
line-height: 20px;
text-align: center;
text-decoration: none;
position: relative;
position: relative;
overflow: hidden;
}
.contact-text a:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -100%;
transition: left 0.3s ease;
z-index: 0;
}
.contact-text a span {
position: relative;
}
.contact-text a:hover:before {
left: 0;
}
@media only screen and (max-width: 767px) {
.contact-text a:before {
display: none;
}
}
.contact-text a:before {
background: #001A5B;
}
.contact-text a:after {
content: "";
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
width: 16px;
height: 16px;
position: absolute;
top: 0;
right: 16px;
bottom: 0;
margin: auto 0;
transform: rotate(90deg);
}
.contact-text a:hover {
text-decoration: none;
}
.tag {
display: inline-flex;
align-items: center;
column-gap: min(calc(4/1600*100vw), 4px);
color: #9aa4c5;
font-size: min(calc(12/1600*100vw), 12px);
line-height: 1;
text-decoration: none;
padding: min(calc(1/1600*100vw), 1px);
border: solid 1px transparent;
border-radius: min(calc(2/1600*100vw), 2px);
transition: border 0.3s;
}
.tag::before {
content: "";
display: block;
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
width: min(calc(16/1600*100vw), 16px);
height: min(calc(16/1600*100vw), 16px);
}
.tag:hover {
border: solid 1px #55b545;
}
.tag span {
flex: 1;
}
#top .visual {
width: 100%;
padding-top: 56.25%;
position: relative;
}
#top .visual__bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#top .visual__bg video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
#top .about {
padding: min(calc(160/1600*100%), 160px) min(calc(80/1600*100%), 80px) 0;
}
#top .about .inner {
display: flex;
}
#top .about__title {
flex: 1;
}
#top .about__text {
width: 67.25%;
}
#top .about__text .read {
margin-top: 0;
font-size: min(calc(24/1760*100vw), 24px);
line-height: 180%;
}
#top .service {
padding: min(calc(160/1600*100%), 160px) min(calc(80/1600*100%), 80px) 0;
}
#top .service__list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 5%;
}
#top .service__list li {
width: 30%;
margin-top: 7.5%;
}
#top .service__list li:nth-of-type(-n+3) {
margin-top: 0;
}
#top .service__list li .jp {
display: block;
font-size: min(calc(20/1760*100vw), 20px);
font-weight: 700;
line-height: 160%;
}
#top .service__list li h2 {
font-family: "Jost", serif;
font-size: min(calc(64/1760*100vw), 64px);
font-weight: 600;
line-height: 160%;
}
#top .service__list li .text {
margin-top: 6.6666666667%;
font-size: min(calc(24/1760*100vw), 24px);
line-height: 160%;
}
#top .service__list li .en {
margin-top: 5%;
}
#top .service__works {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 7.5%;
padding: min(calc(80/1600*100%), 80px);
border: 1px solid #000;
}
#top .service__works__title {
flex: 1;
}
#top .service__works__title h2 {
font-family: "Jost", serif;
color: #001A5B;
font-size: min(calc(80/1760*100vw), 80px);
font-weight: 600;
line-height: 100%;
}
#top .works {
padding: min(calc(160/1600*100%), 160px) min(calc(80/1600*100%), 80px) 0;
}
#top .works__title {
display: flex;
justify-content: space-between;
align-items: center;
}
#top .works__title__more__link {
display: flex;
align-items: center;
column-gap: min(calc(12/1600*100vw), 12px);
font-family: "Jost", serif;
font-size: min(calc(20/1600*100vw), 20px);
text-decoration: none;
}
#top .works__title__more__link::before {
content: "";
display: block;
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
width: min(calc(24/1600*100vw), 24px);
height: min(calc(24/1600*100vw), 24px);
}
#top .works__list {
margin-top: min(calc(80/1600*100%), 80px);
}
#top .works .contact-text {
margin-top: min(calc(80/1600*100%), 80px);
}
#top .company {
padding: min(calc(160/1600*100%), 160px) min(calc(80/1600*100%), 80px) 0;
}
#top .company__list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 5%;
}
#top .company__list dt {
width: 10%;
margin-top: 5%;
font-size: min(calc(24/1760*100vw), 24px);
color: #231815;
font-weight: 700;
line-height: 160%;
}
#top .company__list dt:first-of-type {
margin-top: 0;
}
#top .company__list dt span {
display: inline-block;
font-size: min(calc(20/1760*100vw), 20px);
font-weight: normal;
}
#top .company__list dd {
width: 90%;
margin-top: 5%;
font-size: min(calc(24/1760*100vw), 24px);
color: #231815;
line-height: 160%;
}
#top .company__list dd:first-of-type {
margin-top: 0;
}
#top .company__post li {
display: flex;
justify-content: space-between;
margin-top: 0.5555555556%;
}
#top .company__post li p:nth-of-type(1) {
width: 17.3611111111%;
}
#top .company__post li p:nth-of-type(2) {
width: 82.6388888889%;
}
#top .company__business li {
list-style: decimal inside;
}
#top .company__partners {
display: flex;
flex-wrap: wrap;
margin-bottom: -1.1111111111%;
}
#top .company__partners li {
margin-right: 1.1111111111%;
margin-bottom: 1.1111111111%;
padding-right: 1.8055555556%;
position: relative;
}
#top .company__partners li:after {
content: "/";
position: absolute;
right: 0;
}
#top .company__partners li:last-of-type {
margin-right: 0;
padding-right: 0;
}
#top .company__partners li:last-of-type:after {
display: none;
}
#top .access {
padding: min(calc(160/1600*100%), 160px) min(calc(80/1600*100%), 80px) 0;
}
#top .access__map {
margin-top: 5%;
padding-top: 50%;
position: relative;
}
#top .access__map iframe {
width: 100%;
height: 100%;
filter: grayscale(100%);
position: absolute;
top: 0;
left: 0;
}
#top .access__detail {
display: flex;
flex-wrap: wrap;
margin-top: 5%;
}
#top .access__detail dt {
width: 10%;
margin-top: 5%;
font-size: min(calc(24/1760*100vw), 24px);
color: #231815;
font-weight: 700;
line-height: 160%;
}
#top .access__detail dt:nth-of-type(-n+2) {
margin-top: 0;
}
#top .access__detail dt:nth-of-type(even) {
margin-left: 5%;
}
#top .access__detail dd {
width: 37.5%;
margin-top: 5%;
font-size: min(calc(24/1760*100vw), 24px);
color: #231815;
line-height: 160%;
}
#top .access__detail dd:nth-of-type(-n+2) {
margin-top: 0;
}
#top .sns {
padding: min(calc(160/1600*100%), 160px) min(calc(80/1600*100%), 80px) min(calc(298/1600*100%), 298px);
}
#top .sns__list {
display: flex;
flex-wrap: wrap;
margin-top: 5%;
}
#top .sns__list li {
width: calc((100% - 6px) / 4);
margin-left: 2px;
padding-top: 8.6875%;
position: relative;
}
#top .sns__list li:nth-of-type(4n+1) {
margin-left: 0;
}
#top .sns__list li a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-family: "Roboto", serif;
font-size: min(calc(18/1760*100vw), 18px);
color: #fff;
font-weight: 700;
line-height: 100%;
text-decoration: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transition: opacity 0.3s ease;
}
#top .sns__list li a:hover {
opacity: 0.7;
}
@media only screen and (max-width: 767px) {
#top .sns__list li a:hover {
opacity: 1;
}
}
#top .sns__list li a small {
display: block;
font-size: min(calc(12/1760*100vw), 12px);
color: #fff;
font-weight: 400;
line-height: 100%;
}
#top .sns__list li a span {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 28.7769784173%;
padding-left: 19.5734002509%;
position: relative;
}
#top .sns__list li a span img {
filter: invert(97%) sepia(97%) saturate(0%) hue-rotate(73deg) brightness(103%) contrast(106%);
width: auto;
height: 120%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto 0;
}
#top .sns__list li a.facebook {
background: #1877F2;
}
#top .sns__list li a.x {
background: #000000;
}
#top .sns__list li a.instagram {
background: url("../img/bg_instagram.png") no-repeat center center/cover;
}
#top .sns__list li a.youtube {
background: #FF0302;
}
#top .recruit {
background: #DCE1EF;
padding: min(calc(120/1600*100%), 120px) min(calc(80/1600*100%), 80px);
}
#top .contact {
background: #001A5B;
padding: min(calc(120/1600*100%), 120px) min(calc(80/1600*100%), 80px);
}
#top .contact h1 {
color: #fff;
}
#top .contact__form {
margin-top: 5%;
}
#top .contact__form dl {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#top .contact__form dl dt {
width: 308px;
padding: 32px 0;
border-top: 1px solid #828282;
font-size: 18px;
color: #fff;
font-weight: 700;
line-height: 180%;
}
#top .contact__form dl dt small {
margin-left: 8px;
font-size: 14px;
font-weight: 400;
}
#top .contact__form dl dd {
width: calc(100% - 308px);
padding: 32px 0;
border-top: 1px solid #828282;
font-size: 18px;
color: #fff;
line-height: 19.6px;
}
#top .contact__form dl dt:last-of-type, #top .contact__form dl dd:last-of-type {
padding: 0;
border-top: none;
}
#top .contact__form .name {
display: flex;
justify-content: space-between;
max-width: 650px;
}
#top .contact__form .name > span:nth-of-type(2) {
margin-left: 16px;
}
#top .contact__form .submit {
width: 480px;
margin: 60px auto 0;
}
#top .contact__form .wpcf7-form-control-wrap {
display: block;
}
#top .contact__form .wpcf7-list-item {
display: block;
margin-bottom: 20px !important;
}
#top .contact__form .wpcf7-list-item:last-of-type {
margin-bottom: 0 !important;
}
#top .contact__form .wpcf7-response-output {
margin: 32px auto 0;
padding: 0;
border: none;
color: #E4007F;
font-size: 16px;
text-align: center;
}
#top .contact__form .wpcf7-not-valid-tip {
margin-top: 8px;
color: #E4007F;
font-size: 14px;
}
#top .contact form input:focus-visible,
#top .contact form textarea:focus-visible {
outline: 2px solid #E4007F;
}
#top .contact form input[type=text],
#top .contact form input[type=email],
#top .contact form textarea {
background: #fff;
padding: 10px 20px;
border-radius: 5px;
border: 1px solid #BDBDBD;
color: #000;
font-size: 16px;
line-height: 19.6px;
}
#top .contact form span:has(input[type=radio]),
#top .contact form span:has(input[type=checkbox]) {
margin: 0;
}
#top .contact form input[type=text], #top .contact form input[type=email] {
width: 100%;
max-width: 650px;
}
#top .contact form input::placeholder {
color: #979797;
}
#top .contact form input[type=radio], #top .contact form input[type=checkbox] {
display: none;
}
#top .contact form input[type=radio] + span, #top .contact form input[type=checkbox] + span {
display: inline-block;
padding-left: 32px;
line-height: 160%;
position: relative;
cursor: pointer;
}
#top .contact form input[type=radio] + span:before, #top .contact form input[type=radio] + span:after, #top .contact form input[type=checkbox] + span:before, #top .contact form input[type=checkbox] + span:after {
content: "";
position: absolute;
}
#top .contact form input[type=radio] + span:before, #top .contact form input[type=checkbox] + span:before {
display: block;
background: #fff;
display: block;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
left: 0;
}
#top .contact form input[type=radio] + span:after, #top .contact form input[type=checkbox] + span:after {
display: none;
}
#top .contact form input[type=radio]:checked + span:after, #top .contact form input[type=checkbox]:checked + span:after {
display: block;
}
#top .contact form input[type=radio] + span:before {
border-radius: 24px;
top: 3px;
}
#top .contact form input[type=radio]:checked + span:after {
background: #E4007F;
width: 12px;
height: 12px;
border-radius: 24px;
top: 9px;
left: 6px;
}
#top .contact form input[type=checkbox] + span:before {
border-radius: 3px;
top: 4px;
}
#top .contact form input[type=checkbox]:checked + span:after {
width: 14px;
height: 20px;
transform: rotate(35deg) skewY(16deg) translateY(-50%);
transform-origin: center right;
border-right: 6px solid #E4007F;
border-bottom: 6px solid #E4007F;
top: 16px;
left: -2px;
}
#top .contact form input[type=checkbox] + label {
display: inline-block;
margin-bottom: 20px;
padding-left: 32px;
line-height: 160%;
position: relative;
}
#top .contact form input[type=checkbox] + label:before, #top .contact form input[type=checkbox] + label:after {
content: "";
position: absolute;
}
#top .contact form input[type=checkbox] + label:before {
background: #fff;
display: block;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 3px;
top: 4px;
left: 0;
}
#top .contact form input[type=checkbox] + label:after {
display: none;
}
#top .contact form input[type=checkbox]:checked + label:after {
display: block;
width: 14px;
height: 20px;
transform: rotate(35deg) skewY(16deg) translateY(-50%);
transform-origin: center right;
border-right: 6px solid #E4007F;
border-bottom: 6px solid #E4007F;
top: 16px;
left: -2px;
}
#top .contact form button[type=submit] {
display: flex;
justify-content: center;
align-items: center;
background: #E4007F;
width: 100%;
height: 80px;
padding: 0 48px;
color: #fff;
font-size: 20px;
font-weight: 700;
line-height: 20px;
text-align: center;
position: relative;
transition: color 0.3s ease;
position: relative;
overflow: hidden;
}
#top .contact form button[type=submit]:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -100%;
transition: left 0.3s ease;
z-index: 0;
}
#top .contact form button[type=submit] span {
position: relative;
}
#top .contact form button[type=submit]:hover:before {
left: 0;
}
@media only screen and (max-width: 767px) {
#top .contact form button[type=submit]:before {
display: none;
}
}
#top .contact form button[type=submit]:before {
background: #ffffff;
}
#top .contact form button[type=submit]:after {
content: "";
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
width: 16px;
height: 16px;
position: absolute;
top: 0;
right: 16px;
bottom: 0;
margin: auto 0;
pointer-events: none;
transition: background 0.3s ease;
}
#top .contact form button[type=submit]:hover {
color: #001A5B;
}
#top .contact form button[type=submit]:hover:after {
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
}
#top .contact form button[disabled] {
opacity: 0.3;
pointer-events: none;
}
#top .contact form textarea {
width: 100%;
}
.contents.works {
margin-top: 0;
}
.contents.works .works__head-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: solid 1px #001a5b;
margin-bottom: min(calc(80/1600*100vw), 80px);
}
.contents.works .works__head-wrapper h1 {
color: #000;
font-size: min(calc(40/1600*100vw), 40px);
line-height: 1.6;
}
.contents.works .works__head-wrapper ul {
display: flex;
column-gap: min(calc(16/1600*100vw), 16px);
}
.contents.works .works__head-wrapper ul a {
font-size: min(calc(20/1600*100vw), 20px);
line-height: 1.25;
text-decoration: none;
padding: min(calc(8/1600*100vw), 8px) min(calc(24/1600*100vw), 24px);
border-radius: min(calc(4/1600*100vw), 4px);
transition: background 0.3s;
}
.contents.works .works__head-wrapper ul a.is-selected, .contents.works .works__head-wrapper ul a:hover {
background: #f4f4f4;
}
.contents.works .works__list__item.is-hidden {
display: none;
opacity: 0;
transform: translateY(30px);
}
.contents.works .works__list__item.is-hidden.is-show {
display: block;
opacity: 1;
transform: translateY(0);
animation: slide-up 0.3s ease;
}
@keyframes slide-up {
0% {
display: none;
}
1% {
display: block;
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
.contents.works .works__empty {
color: #231815;
font-size: min(calc(18/1600*100vw), 18px);
line-height: 180%;
text-align: center;
padding-block: min(calc(80/1600*100vw), 80px);
}
.contents.works .works__view-more {
width: fit-content;
margin: min(calc(48/1600*100vw), 48px) auto min(calc(80/1600*100vw), 80px);
}
.contents.works .works__view-more__btn {
display: flex;
align-items: center;
column-gap: min(calc(12/1600*100vw), 12px);
font-family: "Jost", serif;
font-size: min(calc(20/1600*100vw), 20px);
text-decoration: none;
transition: opacity 0.3s;
}
.contents.works .works__view-more__btn::before {
content: "";
display: block;
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
width: min(calc(24/1600*100vw), 24px);
height: min(calc(24/1600*100vw), 24px);
rotate: 90deg;
}
.contents.works .works__view-more__btn:hover {
opacity: 0.7;
}
.contents.works .keyword {
margin-top: min(calc(80/1600*100vw), 80px);
}
.contents.works .keyword h2 {
font-family: "Jost", serif;
color: #000;
font-size: min(calc(40/1600*100vw), 40px);
font-weight: bold;
line-height: 1.6;
margin-bottom: min(calc(8/1600*100vw), 8px);
}
.contents.works .keyword ul {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: min(calc(32/1600*100vw), 32px);
padding: min(calc(80/1600*100vw), 80px);
border: solid 1px #000;
}
.contents.works__detail .inner {
max-width: 1200px;
}
.contents.works__detail .info {
display: flex;
justify-content: space-between;
align-items: center;
font-size: min(calc(16/1200*100vw), 16px);
line-height: 1.6;
padding-block: min(calc(4/1200*100vw), 4px);
border-bottom: solid 1px #001a5b;
}
.contents.works__detail .info .type {
font-family: "Jost", serif;
font-weight: bold;
}
.contents.works__detail .head .title {
font-family: "Noto Sans JP", sans-serif;
color: #000;
font-size: min(calc(40/1200*100vw), 40px);
font-weight: bold;
line-height: 1.2;
text-align: left;
margin-block: min(calc(16/1200*100vw), 16px);
}
.contents.works__detail .head .name {
font-size: min(calc(20/1200*100vw), 20px);
line-height: 1.6;
}
.contents.works__detail .head .kv {
margin-top: min(calc(40/1200*100vw), 40px);
}
.contents.works__detail .head .kv img {
width: 100%;
}
.contents.works__detail .detail {
padding: min(calc(40/1200*100vw), 40px) min(calc(120/1200*100vw), 120px) 0;
margin-top: min(calc(40/1200*100vw), 40px);
}
.contents.works__detail .detail h2 {
font-size: min(calc(36/1200*100vw), 36px);
font-weight: bold;
line-height: 1.1944444444;
margin-bottom: min(calc(24/1200*100vw), 24px);
}
.contents.works__detail .detail h3 {
font-family: "Jost", serif;
font-size: min(calc(36/1200*100vw), 36px);
font-weight: bold;
line-height: 1.6;
}
.contents.works__detail .detail p {
font-size: min(calc(18/1200*100vw), 18px);
line-height: 1.8;
}
.contents.works__detail .detail p:has(iframe) {
aspect-ratio: 960/540;
margin-block: min(calc(40/1200*100vw), 40px);
}
.contents.works__detail .detail p:has(iframe) iframe {
width: 100%;
height: 100%;
}
.contents.works__detail .detail .wp-block-gallery {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: min(calc(2/1200*100vw), 2px);
margin-block: min(calc(40/1200*100vw), 40px);
}
.contents.works__detail .detail .wp-block-gallery .wp-block-image {
width: calc(50% - 1px) !important;
flex-grow: inherit !important;
}
.contents.works__detail .detail .point {
margin-top: min(calc(40/1200*100vw), 40px);
}
.contents.works__detail .detail .point h3 {
margin-bottom: min(calc(24/1200*100vw), 24px);
}
.contents.works__detail .detail .credit {
margin-top: min(calc(40/1200*100vw), 40px);
}
.contents.works__detail .detail .credit h3 {
margin-bottom: min(calc(8/1200*100vw), 8px);
}
.contents.works__detail .detail .credit dl {
display: flex;
flex-direction: column;
row-gap: min(calc(8/1200*100vw), 8px);
padding-block: min(calc(40/1200*100vw), 40px);
border-top: solid 1px #001a5b;
border-bottom: solid 1px #001a5b;
}
.contents.works__detail .detail .credit dl div {
display: flex;
column-gap: min(calc(16/1200*100vw), 16px);
min-height: min(calc(42/1200*100vw), 42px);
}
.contents.works__detail .detail .credit dl dt {
font-family: "Jost", serif;
width: min(calc(104/1200*100vw), 104px);
color: #828282;
font-size: min(calc(14/1200*100vw), 14px);
font-weight: normal;
line-height: 1.6;
}
.contents.works__detail .detail .credit dl dd {
flex: 1;
color: #231815;
font-size: min(calc(16/1200*100vw), 16px);
line-height: 1.6;
}
.contents.works__detail .detail .credit dl dd a {
text-decoration: none;
}
.contents.works__detail .detail .credit dl dd .roles {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.contents.works__detail .detail .credit dl dd .roles li:not(:last-of-type)::after {
content: "/";
margin-inline: min(calc(12/1200*100vw), 12px);
}
.contents.works__detail .detail .credit dl dd .tag {
color: #231815;
}
.contents.works__detail .contact-text {
padding-bottom: min(calc(80/1200*100vw), 80px);
margin-top: min(calc(40/1200*100vw), 40px);
}
.contents.works__detail .other {
margin-top: min(calc(40/1200*100vw), 40px);
}
.contents.works__detail .other .works__list.splide__list {
display: grid !important;
}
.contents.works__detail .other .splide__arrows {
display: none;
}
.contents.works__detail .other .type {
display: flex;
justify-content: center;
column-gap: min(calc(16/1200*100vw), 16px);
margin-top: min(calc(40/1200*100vw), 40px);
}
.contents.works__detail .other .type li a {
font-family: "Jost", serif;
font-size: min(calc(16/1200*100vw), 16px);
line-height: 1.25;
text-decoration: none;
padding: min(calc(16/1200*100vw), 16px) min(calc(24/1200*100vw), 24px);
transition: opacity 0.3s;
}
.contents.works__detail .other .type li a:hover {
opacity: 0.7;
}
.policy dt {
margin-top: 80px;
font-size: 24px;
font-weight: 700;
line-height: 160%;
}
.policy dd {
margin-top: 24px;
font-size: 18px;
line-height: 180%;
}
.policy ul {
margin-top: 16px;
counter-reset: number 0;
}
.policy ul li {
margin-bottom: 16px;
padding-left: 1.6em;
position: relative;
}
.policy ul li:last-of-type {
margin-bottom: 0;
}
.policy ul li:before {
counter-increment: number 1;
position: absolute;
}
.policy ul.mb-32 {
margin-bottom: 32px;
}
.policy .decimal > li:before {
content: counter(number) ".";
left: 0.2em;
}
.policy .decimal__brackets > li {
list-style: none inside;
}
.policy .decimal__brackets > li:before {
content: "(" counter(number) ")";
left: 0;
}
.policy .dot > li:before {
content: "・";
left: 0;
}
.policy .line > li:before {
content: "─";
left: 0;
}
.policy .free > li i {
font-style: normal;
position: absolute;
left: 0.2em;
}
.policy + .text {
margin-top: 80px;
text-align: right;
}
.policy span.text {
display: block;
margin-top: 32px;
}
.page_404 .read {
font-size: min(calc(18/1600*100vw), 18px);
text-align: center;
margin-bottom: min(calc(80/1600*100vw), 80px);
}
.page_404 .to_top {
display: flex;
flex-direction: column;
align-items: center;
}
.page_404 .to_top a {
background: #E4007F;
display: block;
width: 30%;
padding: min(calc(30/1600*100%), 30px) min(calc(32/1600*100%), 32px);
color: #fff;
font-size: min(calc(20/1760*100vw), 20px);
font-weight: 700;
line-height: 1.6;
text-align: center;
text-decoration: none;
position: relative;
position: relative;
overflow: hidden;
}
.page_404 .to_top a:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -100%;
transition: left 0.3s ease;
z-index: 0;
}
.page_404 .to_top a span {
position: relative;
}
.page_404 .to_top a:hover:before {
left: 0;
}
@media only screen and (max-width: 767px) {
.page_404 .to_top a:before {
display: none;
}
}
.page_404 .to_top a:before {
background: #001A5B;
}
.page_404 .to_top a:after {
content: "";
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
width: 16px;
height: 16px;
position: absolute;
top: 0;
right: 16px;
bottom: 0;
margin: auto 0;
}
.page_404 .to_top a:hover {
text-decoration: none;
}
@media only screen and (max-width: 767px) {
main {
padding-top: 64px;
}
.contents {
margin-top: min(calc(48/390*100%), 48px);
}
#top .contents {
margin-top: 0;
}
.contents.rower {
padding: 0;
}
.inner {
width: 87.6923076923%;
}
.rower .inner {
margin-bottom: 48px;
}
h1 {
font-size: min(calc(40/390*100vw), 40px);
}
h1 small {
margin-top: min(calc(12/390*100%), 12px);
font-size: min(calc(18/390*100vw), 18px);
}
#top h1 {
font-size: min(calc(48/390*100vw), 48px);
}
.read {
font-size: min(calc(18/390*100vw), 18px);
line-height: 180%;
}
.read:first-of-type {
margin-top: min(calc(24/342*100vw), 24px);
}
.rower .read {
margin: 16px 0 0;
font-size: 16px;
}
.rower .read:first-of-type {
margin-top: 40px;
}
.rower .text {
font-size: 16px;
}
.en {
margin-top: min(calc(16/342*100vw), 16px);
font-size: min(calc(16/390*100vw), 16px);
}
.notes {
margin-top: min(calc(24/342*100vw), 24px);
font-size: min(calc(16/390*100vw), 16px);
}
.contact-text {
align-items: flex-start;
}
.contact-text .text {
font-size: min(calc(20/390*100vw), 20px);
line-height: 1.6;
}
.contact-text a {
width: 100%;
font-size: min(calc(20/390*100vw), 20px);
padding-block: min(calc(30/390*100vw), 30px);
margin-top: min(calc(24/390*100vw), 24px);
}
.works__list {
display: block;
margin-top: min(calc(40/390*100vw), 40px);
}
.works__list__item {
width: 100%;
margin-top: min(calc(2/390*100vw), 2px);
}
.works__list__item__img {
width: 100%;
aspect-ratio: 342.22/179.66;
}
.works__list__item__texts {
padding: min(calc(19.48/390*100vw), 19.48px);
}
.works__list__item__texts__type {
font-size: min(calc(13.76/390*100vw), 13.76px);
}
.works__list__item__texts__description {
font-size: min(calc(13.76/390*100vw), 13.76px);
margin-top: min(calc(3.44/390*100vw), 3.44px);
}
.works__list__item__texts__title {
font-size: min(calc(12.04/390*100vw), 12.04px);
margin-top: min(calc(3.44/390*100vw), 3.44px);
}
.tag {
column-gap: min(calc(4/390*100vw), 4px);
font-size: min(calc(16/390*100vw), 16px);
}
.tag::before {
width: min(calc(16/390*100vw), 16px);
height: min(calc(16/390*100vw), 16px);
}
.tag:hover {
border: solid 1px transparent;
}
#top .about {
padding: min(calc(40/390*100%), 40px) 0 0;
}
#top .about .inner {
display: block;
}
#top .about__text {
width: 100%;
}
#top .about__text .read {
font-size: min(calc(18/390*100vw), 18px);
}
#top .about__text .read:first-of-type {
margin-top: min(calc(24/342*100vw), 24px);
}
#top .service {
padding: min(calc(80/390*100%), 80px) 0 0;
}
#top .service__list {
display: block;
margin-top: min(calc(48/342*100vw), 48px);
}
#top .service__list li {
width: 100%;
margin-top: min(calc(40/342*100vw), 40px);
}
#top .service__list li:nth-of-type(-n+3) {
margin-top: min(calc(40/342*100vw), 40px);
}
#top .service__list li:first-of-type {
margin-top: 0;
}
#top .service__list li .jp {
font-size: min(calc(18/390*100vw), 18px);
}
#top .service__list li h2 {
font-size: min(calc(40/390*100vw), 40px);
}
#top .service__list li .text {
margin-top: min(calc(8/342*100vw), 8px);
font-size: min(calc(18/390*100vw), 18px);
}
#top .service__list li .en {
margin-top: min(calc(8/342*100vw), 8px);
}
#top .service__works {
display: block;
margin-top: min(calc(80/342*100vw), 80px);
padding: min(calc(24/342*100%), 24px);
}
#top .service__works__title h2 {
font-size: min(calc(40/390*100vw), 40px);
text-align: center;
}
#top .service__works__text {
width: 100%;
margin-top: min(calc(24/294*100vw), 24px);
}
#top .service__works__text .text {
font-size: min(calc(18/390*100vw), 18px);
}
#top .service__works__text .en {
margin-top: min(calc(16/294*100vw), 16px);
}
#top .service__works__text a {
width: 100%;
max-width: 480px;
margin: min(calc(24/294*100vw), 24px) auto 0;
padding: min(calc(12/294*100%), 12px) min(calc(48/294*100%), 48px);
font-size: min(calc(20/390*100vw), 20px);
line-height: 140%;
}
#top .works {
padding: min(calc(80/390*100%), 80px) 0 0;
}
#top .works__title {
display: flex;
justify-content: space-between;
align-items: center;
}
#top .works__title__more__link::before {
width: min(calc(24/390*100vw), 24px);
height: min(calc(24/390*100vw), 24px);
}
#top .works__title__more__link__text {
display: none;
}
#top .works__list__item:nth-of-type(n + 5) {
display: none;
}
#top .works__contact-text {
margin-top: min(calc(40/390*100vw), 40px);
}
#top .company {
padding: min(calc(80/390*100%), 80px) 0 0;
}
#top .company__list {
display: block;
margin-top: min(calc(24/342*100vw), 24px);
}
#top .company__list dt {
width: 100%;
margin-top: min(calc(32/342*100vw), 32px);
font-size: min(calc(18/390*100vw), 18px);
}
#top .company__list dt span {
font-size: min(calc(14/390*100vw), 14px);
font-weight: normal;
}
#top .company__list dd {
width: 100%;
margin-top: min(calc(8/342*100vw), 8px);
font-size: min(calc(18/390*100vw), 18px);
}
#top .company__list dd:first-of-type {
margin-top: 0;
}
#top .company__post li {
margin-top: min(calc(8/342*100vw), 8px);
}
#top .company__post li p:nth-of-type(1) {
width: 170px;
}
#top .company__post li p:nth-of-type(2) {
width: calc(100% - 170px);
}
}
@media only screen and (max-width: 767px) and (max-width: 389px) {
#top .company__post li p:nth-of-type(1) {
width: 49.7076023392%;
}
#top .company__post li p:nth-of-type(2) {
width: 50.2923976608%;
}
}
@media only screen and (max-width: 767px) {
#top .company__partners {
display: block;
margin-bottom: min(calc(-4/342*100vw), -4px);
}
#top .company__partners li {
margin-right: 0;
margin-bottom: min(calc(4/342*100vw), 4px);
padding-right: 0;
}
#top .company__partners li:after {
display: none;
}
#top .access {
padding: min(calc(80/342*100%), 80px) 0 0;
}
#top .access__map {
margin-top: min(calc(24/342*100vw), 24px);
padding-top: min(calc(171/342*100vw), 171px);
}
#top .access__detail {
display: block;
margin-top: min(calc(24/342*100vw), 24px);
}
#top .access__detail dt {
width: 100%;
margin-top: min(calc(32/342*100vw), 32px);
font-size: min(calc(18/390*100vw), 18px);
}
#top .access__detail dt:first-of-type {
margin-top: 0;
}
#top .access__detail dt:nth-of-type(-n+2) {
margin-top: min(calc(32/342*100vw), 32px);
}
#top .access__detail dt:nth-of-type(even) {
margin-left: 0;
}
#top .access__detail dd {
width: 100%;
margin-top: min(calc(8/342*100vw), 8px);
font-size: min(calc(18/390*100vw), 18px);
}
#top .access__detail dd:nth-of-type(-n+2) {
margin-top: min(calc(8/342*100vw), 8px);
}
#top .sns {
padding: min(calc(80/342*100%), 80px) 0 min(calc(56/342*100%), 56px);
}
#top .sns__list {
display: block;
margin-top: min(calc(24/342*100%), 24px);
}
#top .sns__list li {
width: 100%;
margin-top: 2px;
margin-left: 0;
padding-top: min(calc(119/342*100%), 119px);
}
#top .sns__list li:first-of-type {
margin-top: 0;
}
#top .sns__list li a {
font-size: min(calc(18/390*100vw), 18px);
}
#top .sns__list li a small {
font-size: min(calc(12/390*100vw), 12px);
}
#top .sns__list li a span {
height: min(calc(40/119*100%), 40px);
padding-left: min(calc(78/342*100%), 78px);
}
#top .recruit {
padding: min(calc(40/342*100%), 40px) 0;
}
#top .contact {
padding: min(calc(40/342*100%), 40px) 0;
}
#top .contact__form {
margin-top: min(calc(24/342*100%), 24px);
}
#top .contact__form dl {
display: block;
}
#top .contact__form dl dt {
width: 100%;
padding: 24px 0 0;
}
#top .contact__form dl dd {
width: 100%;
padding: 16px 0 24px;
border-top: none;
font-size: 18px;
}
#top .contact__form dl dt:last-of-type, #top .contact__form dl dd:last-of-type {
padding: 8px 0 0;
}
#top .contact__form .name {
display: block;
max-width: 100%;
}
#top .contact__form .name > span:nth-of-type(2) {
margin-top: 16px;
margin-left: 0;
}
#top .contact__form .wpcf7-list-item {
margin-bottom: 16px !important;
}
#top .contact__form .submit {
width: 100%;
margin: 20px auto 0;
}
#top .contact form button[type=submit]:hover {
color: #ffffff;
}
#top .contact form button[type=submit]:hover:after {
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
}
.contents.works .works__head-wrapper {
flex-direction: column;
align-items: flex-start;
border-bottom: none;
margin-bottom: min(calc(12.5/390*100vw), 12.5px);
}
.contents.works .works__head-wrapper h1 {
width: 100%;
font-size: min(calc(40/390*100vw), 40px);
text-align: left;
border-bottom: solid 1px #001a5b;
margin-bottom: min(calc(24/390*100vw), 24px);
}
.contents.works .works__head-wrapper ul {
overflow: auto;
width: 100%;
padding-bottom: min(calc(11.5/390*100vw), 11.5px);
}
.contents.works .works__head-wrapper ul a {
font-size: min(calc(16/390*100vw), 16px);
white-space: nowrap;
padding: min(calc(4/390*100vw), 4px) min(calc(12/390*100vw), 12px);
}
.contents.works .works__empty {
font-size: min(calc(16/390*100vw), 16px);
padding-block: min(calc(40/390*100vw), 40px);
}
.contents.works .works__view-more {
margin-block: min(calc(40/390*100vw), 40px);
}
.contents.works .works__view-more__btn {
column-gap: min(calc(11/390*100vw), 11px);
font-size: min(calc(20/390*100vw), 20px);
line-height: 1.2;
}
.contents.works .works__view-more__btn::before {
width: min(calc(32/390*100vw), 32px);
height: min(calc(32/390*100vw), 32px);
}
.contents.works .keyword {
margin-top: min(calc(40/390*100vw), 40px);
}
.contents.works .keyword h2 {
font-size: min(calc(40/390*100vw), 40px);
margin-bottom: min(calc(8/390*100vw), 8px);
}
.contents.works .keyword ul {
gap: min(calc(16/390*100vw), 16px) min(calc(12/390*100vw), 12px);
padding: min(calc(32/390*100vw), 32px) min(calc(16/390*100vw), 16px);
}
.contents.works__detail .inner {
width: 100%;
}
.contents.works__detail .info {
padding: min(calc(4/390*100vw), 4px) min(calc(8/390*100vw), 8px);
}
.contents.works__detail .info .type {
font-size: min(calc(14/390*100vw), 14px);
}
.contents.works__detail .info .date {
font-size: min(calc(14/390*100vw), 14px);
font-weight: bold;
}
.contents.works__detail .head {
display: flex;
flex-direction: column;
padding-bottom: min(calc(24/390*100vw), 24px);
}
.contents.works__detail .head .title,
.contents.works__detail .head .name {
width: 87.6923076923%;
margin-inline: auto;
}
.contents.works__detail .head .title {
order: 2;
font-size: min(calc(20/390*100vw), 20px);
margin-top: min(calc(24/390*100vw), 24px);
}
.contents.works__detail .head .name {
order: 3;
font-size: min(calc(16/390*100vw), 16px);
margin-top: min(calc(16/390*100vw), 16px);
}
.contents.works__detail .head .kv {
order: 1;
margin-top: 0;
}
.contents.works__detail .detail {
width: 87.6923076923%;
padding: 0;
margin: min(calc(40/390*100vw), 40px) auto 0;
}
.contents.works__detail .detail h2 {
font-size: min(calc(18/390*100vw), 18px);
line-height: 1.2222222222;
margin-bottom: min(calc(24/390*100vw), 24px);
}
.contents.works__detail .detail h3 {
font-size: min(calc(26/390*100vw), 26px);
}
.contents.works__detail .detail p {
font-size: min(calc(14/390*100vw), 14px);
}
.contents.works__detail .detail p:has(iframe) {
margin-block: min(calc(24/390*100vw), 24px);
}
.contents.works__detail .detail .wp-block-gallery {
gap: min(calc(2/390*100vw), 2px);
margin-block: min(calc(24/390*100vw), 24px);
}
.contents.works__detail .detail .wp-block-gallery .wp-block-image:only-child {
width: 100% !important;
}
.contents.works__detail .detail .point {
margin-top: min(calc(24/390*100vw), 24px);
}
.contents.works__detail .detail .point h3 {
margin-bottom: min(calc(8/390*100vw), 8px);
}
.contents.works__detail .detail .credit {
margin-top: min(calc(24/390*100vw), 24px);
}
.contents.works__detail .detail .credit h3 {
margin-bottom: min(calc(8/390*100vw), 8px);
}
.contents.works__detail .detail .credit dl {
row-gap: min(calc(8/390*100vw), 8px);
padding-block: min(calc(24/390*100vw), 24px);
}
.contents.works__detail .detail .credit dl div {
display: block;
min-height: auto;
}
.contents.works__detail .detail .credit dl dt {
width: auto;
min-height: min(calc(24/390*100vw), 24px);
font-size: min(calc(14/390*100vw), 14px);
}
.contents.works__detail .detail .credit dl dd {
font-size: min(calc(16/390*100vw), 16px);
}
.contents.works__detail .contact-text {
text-align: center;
padding-bottom: 0;
margin-top: min(calc(40/390*100vw), 40px);
}
.contents.works__detail .contact-text p {
line-height: 1.6;
}
.contents.works__detail .contact-text .text {
font-size: min(calc(16/390*100vw), 16px);
}
.contents.works__detail .contact-text a {
width: 100%;
font-size: min(calc(20/390*100vw), 20px);
padding: min(calc(30/390*100vw), 30px) min(calc(42/390*100vw), 42px) min(calc(30/390*100vw), 30px) min(calc(32/390*100vw), 32px);
margin-top: min(calc(24/390*100vw), 24px);
}
.contents.works__detail .other {
margin-top: min(calc(40/390*100vw), 40px);
}
.contents.works__detail .other .works__list.splide__list {
display: flex !important;
}
.contents.works__detail .other .splide__arrows {
display: flex;
justify-content: space-between;
align-items: center;
width: min(calc(140/390*100vw), 140px);
margin: min(calc(5/390*100vw), 5px) auto 0;
}
.contents.works__detail .other .splide__arrows .splide__arrow {
position: static;
transform: none;
border: none;
width: min(calc(20/390*100vw), 20px);
height: min(calc(20/390*100vw), 20px);
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
background-size: contain;
border-radius: 50%;
cursor: pointer;
}
.contents.works__detail .other .splide__arrows .splide__arrow--next {
rotate: 180deg;
}
.contents.works__detail .other .splide__pagination {
display: flex;
gap: min(calc(8/390*100vw), 8px);
bottom: min(calc(5/390*100vw), 5px);
padding: 0;
}
.contents.works__detail .other .splide__pagination__page {
opacity: 1;
width: min(calc(10/390*100vw), 10px);
height: min(calc(10/390*100vw), 10px);
background: #d9d9d9;
margin: 0;
}
.contents.works__detail .other .splide__pagination__page.is-active {
background: #001a5b;
transform: scale(1);
}
.contents.works__detail .other .type {
flex-wrap: wrap;
gap: min(calc(12/390*100vw), 12px) min(calc(16/390*100vw), 16px);
padding-inline: min(calc(12/390*100vw), 12px);
margin-top: min(calc(40/390*100vw), 40px);
}
.contents.works__detail .other .type li a {
font-size: min(calc(16/390*100vw), 16px);
padding: min(calc(8/390*100vw), 8px) min(calc(12/390*100vw), 12px);
}
.policy dt {
margin-top: 40px;
font-size: 18px;
}
.policy dd {
margin-top: 16px;
font-size: 16px;
}
.policy ul {
margin-top: 8px;
}
.policy ul li {
margin-bottom: 8px;
}
.policy ul.mb-32 {
margin-bottom: 16px;
}
.policy + .text {
margin-top: 40px;
}
.page_404 .read {
text-align: left;
margin-bottom: min(calc(40/390*100vw), 40px);
}
.page_404 .to_top {
display: flex;
flex-direction: column;
align-items: center;
}
.page_404 .to_top a {
width: 100%;
padding: min(calc(30/342*100%), 30px) min(calc(32/342*100%), 32px);
font-size: min(calc(20/390*100vw), 20px);
}
}