@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 32px;
}
.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: calc(180/915*100%);
}
.header.floating .header__logo a {
width: 100%;
}
}
@media only screen and (max-width: 1107px) and (min-width: 768px) {
.header.floating .header__menu__wrap {
width: calc(722/915*100%);
}
}
.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 calc(32/722*100%);
}
}
.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: calc(17/1107*100vw);
}
}
.header.floating .header__link {
top: 8px;
right: 8px;
}
.footer {
width: 100%;
padding: 35px 0;
}
#top .footer {
background: #001A5B;
}
.footer p {
margin-top: calc(24/1600*100%);
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 calc(32/1600*100%);
}
.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: calc(342/390*100%);
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 calc(40/390*100%);
}
.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 calc(40/390*100%);
}
.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: calc(24/342*100%);
font-size: min(calc(14/390*100vw), 14px);
}
.footer__inner {
width: calc(342/390*100%);
}
.footer__link li {
margin: 0 calc(16/342*100%);
}
.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: calc(24/1600*100%);
}
.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: calc(24/1600*100%);
font-family: 'Jost', serif;
color: #231815;
font-size: min(calc(18/1760*100vw), 18px);
line-height: 160%;
}
.notes {
margin-top: calc(24/1600*100%);
color: #231815;
font-size: min(calc(24/1760*100vw), 24px);
font-weight: 700;
line-height: 180%;
}
#top .visual {
width: 100%;
padding-top: calc(1080/1920*100%);
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: calc(1076/1600*100%);
}
#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: calc(80/1600*100%);
}
#top .service__list li {
width: calc(480/1600*100%);
margin-top: calc(120/1600*100%);
}
#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: calc(32/480*100%);
font-size: min(calc(24/1760*100vw), 24px);
line-height: 160%;
}
#top .service__list li .en {
margin-top: calc(24/480*100%);
}
#top .service__works {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: calc(120/1600*100%);
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 .service__works__text {
width: calc(1062/1438*100%);
}
#top .service__works__text .text {
font-size: min(calc(24/1760*100vw), 24px);
color: #231815;
font-weight: 700;
line-height: 160%;
}
#top .service__works__text a {
background: #E4007F;
display: block;
width: calc(480/1062*100%);
margin-top: calc(24/1062*100%);
padding: min(calc(30/1062*100%), 30px) min(calc(32/1062*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;
}
#top .service__works__text a:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -100%;
transition: left 0.3s ease;
z-index: 0;
}
#top .service__works__text a span {
position: relative;
}
#top .service__works__text a:hover:before {
left: 0;
}
@media only screen and (max-width: 767px) {
#top .service__works__text a:before {
display: none;
}
}
#top .service__works__text a:before {
background: #001A5B;
}
#top .service__works__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);
}
#top .service__works__text a:hover {
text-decoration: none;
}
#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: calc(80/1600*100%);
}
#top .company__list dt {
width: calc(160/1600*100%);
margin-top: calc(80/1600*100%);
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: calc(100% - (160/1600*100%));
margin-top: calc(80/1600*100%);
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: calc(8/1440*100%);
}
#top .company__post li p:nth-of-type(1) {
width: calc(250/1440*100%);
}
#top .company__post li p:nth-of-type(2) {
width: calc(100% - (250/1440*100%));
}
#top .company__business li {
list-style: decimal inside;
}
#top .company__partners {
display: flex;
flex-wrap: wrap;
margin-bottom: calc(-16/1440*100%);
}
#top .company__partners li {
margin-right: calc(16/1440*100%);
margin-bottom: calc(16/1440*100%);
padding-right: calc(26/1440*100%);
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: calc(80/1600*100%);
padding-top: calc(800/1600*100%);
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: calc(80/1600*100%);
}
#top .access__detail dt {
width: calc(160/1600*100%);
margin-top: calc(80/1600*100%);
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: calc(80/1600*100%);
}
#top .access__detail dd {
width: calc(600/1600*100%);
margin-top: calc(80/1600*100%);
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: calc(80/1600*100%);
}
#top .sns__list li {
width: calc((100% - 6px)/4);
margin-left: 2px;
padding-top: calc(139/1600*100%);
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.0;
}
}
#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: calc(40/139*100%);
padding-left: calc(78/398.5*100%);
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: calc(48/40*100%);
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: calc(80/1600*100%);
}
#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%;
}
.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;
}
@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: calc(342/390*100%);
}
.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);
}
#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 .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: calc(170/342*100%);
}
#top .company__post li p:nth-of-type(2) {
width: calc(100% - (170/342*100%));
}
}
@media only screen and (max-width: 767px) {
#top .company__partners {
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;
}
.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;
}
}