:root {
--max-width: 100%;
--pc-content-width: 1024px;
--border-radius: 6px;
--color-concept: rgba(0, 128, 203, 1);
--color-text: rgba(50, 50, 50, 1);
--color-white: rgba(255, 255, 255, 1);
--color-bg-page: rgba(250, 250, 244, 1);
--color-bg-content: rgba(240, 240, 234, 1);
}




html {
background-color: var(--color-bg-page);
color: var(--color-text);
}

a {
color: var(--color-text);
text-decoration: none;
}






.container {
width: var(--max-width);
}

.container-inner {
margin-left: auto;
margin-right: auto;
width: var(--pc-content-width);
}

.space {
padding-bottom: 6rem;
padding-top: 3rem;
}

.title-h2 {
font-size: 2rem;
margin-top: 0;
text-align: center;
}

.title-h2 span {
color: var(--color-concept);
display: block;
font-size: .8rem;
}

.title-h3 {
text-align: center;
}

.flex-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.shadow {
box-shadow: 2px 2px 2px 1px rgba(180, 180, 180, 1);
}

.button {
background-color: var(--color-concept);
border-radius: var(--border-radius);
color: var(--color-white);
display: block;
font-size: 1.5rem;
font-weight: bold;
line-height: 3.25rem;
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
text-align: center;
}






.slick-dots {
bottom: 3rem;
}
.slick-dots li button:before,
.slick-dots li.slick-active button:before {
color: rgba(255, 255, 255, 1);
}

.slick-dotted.slick-slider {
margin-bottom: 0;
}







#header {
padding-top: 3rem;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}

#footer {
padding-bottom: 1rem;
padding-top: 6rem;
}


.hamburger,
nav.globalMenuSp {
display: none;
}

.header-wrapper {
align-items: center;
display: flex;
justify-content: space-between;
}

.header-logo {
margin: 0;
}

.footer-logo {
text-align: center;
}

.header-nav-wrapper,
.footer-nav-wrapper {
display: flex;
gap: 3rem;
justify-content: flex-end;
}

.footer-nav-wrapper {
border-bottom: 1px solid var(--color-text);
justify-content: center;
padding-bottom: 1.5rem;
padding-left: 0;
}

.footer-nav-item {
list-style-type: none;
}

#slider-wrapper .catch {
position: absolute;
top: 50%;
left: 50%;
z-index: 50;
}

#slider-wrapper .catch img {
border-radius: var(--border-radius);
margin-top: 35px;
transform: translate(-50%,-50%);
}

.page #slider-wrapper .catch {
background-color: rgba(255, 255, 255, .9);
border-radius: var(--border-radius);
color: var(--color-concept);
font-size: 2.5rem;
margin-left: -320px;
padding-bottom: 1.5rem;
padding-top: 1.5rem;
text-align: center;
top: 25vh;
width: 640px;
}

.page #slider-wrapper .catch span {
color: var(--color-text);
display: block;
font-size: 1rem;
}

#slider {
z-index: 10;
}

.header-anchor {
color: rgba(255, 255, 255, 1);
}

.slider-item {
background-size: cover;
background-position: center;
height: 100vh;
width: var(--max-width);
}

.page .slider-item {
background-position: center;
height: 60vh;
}

.slider1 {
background-image: url("/assets/images/slider1.jpg");
}

.slider2 {
background-image: url("/assets/images/slider2.jpg");
}

.slider3 {
background-image: url("/assets/images/slider3.jpg");
}

.slider4 {
background-image: url("/assets/images/slider4.jpg");
}

.header-recruit {
background-image: url("/assets/images/header_recruit.jpg");
}

#top-about {
background-color: var(--color-bg-content);
}

#top-about p {
text-align: center;
}
/*
#top-about .flex-item {
background-color: var(--color-white);
border-radius: var(--border-radius);
width: 30%;
}

#top-about .flex-item .title-h3 {
background-color: var(--color-concept);
color: var(--color-white);
line-height: 2.5em;
margin-top: 2rem;
}

#top-about .flex-item p {
padding-bottom: .5rem;
padding-left: 2rem;
padding-right: 2rem;
}
*/

#business-about p {
text-align: center;
}

#business-method .flex-box {
gap: 2rem;
}

#business-method .flex-item {
background-color: rgba(200, 230, 240, 1);
width: calc(50% - 1rem);
}

#business-method .flex-item h3 {
background-color: var(--color-concept);
color: var(--color-white);
line-height: 3rem;
margin-top: 0;
text-align: center;
}

#business-method .flex-item p {
padding-left: 1rem;
padding-right: 1rem;
}

#business-object .flex-box {
flex-direction: row-reverse;
}

#business-object .flex-item {
width: 50%;
}

#business-object .flex-item:nth-child(2) {
background-image: url("/assets/images/slider3.jpg");
background-size: cover;
}

#menu-box a {
background-size: cover;
display: block;
padding-top: 18.74%;
position: relative;
width: 25%;
}

#menu-box a:nth-child(1) {
background-image: url("/assets/images/slider1.jpg");
}

#menu-box a:nth-child(2) {
background-image: url("/assets/images/slider3.jpg");
}

#menu-box a:nth-child(3) {
background-image: url("/assets/images/header_recruit.jpg");
}

#menu-box a:nth-child(4) {
background-image: url("/assets/images/header_contact.jpg");
}

#menu-box a p {
background-color: rgba(255, 255, 255, .9);
bottom: 0;
color: var(--color-concept);
font-size: 1.2rem;
font-weight: bold;
left: 0;
line-height: 3rem;
margin: 0;
position: absolute;
text-align: center;
width: 100%;
}

#topics .flex-box {
flex-flow: column;
gap: 1.5rem;
}

#topics .flex-item {
display: flex;
gap: 3rem;
}

#topics .flex-item .image {
align-items: center;
border-radius: var(--border-radius);
display: flex;
height: 180px;
justify-content: center;
overflow: hidden;
width: 320px;
}

#topics .flex-item .article .title-h3 {
text-align: left;
}

#accepting-applications p {
text-align: center;
}

#application-guidelines dl {
margin-bottom: 3rem;
}

#application-guidelines dl div {
display: table;
width: 100%;
}

#application-guidelines dl div dt,
#application-guidelines dl div dd {
display: table-cell;
padding: 1rem;
}

#application-guidelines dl div dt {
background-color: var(--color-concept);
border-top: 1px solid rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, 1);
text-align: center;
vertical-align: middle;
width: 20%;
}

#application-guidelines.inq dl div dt {
text-align: left;
width: 30%;
}

.consent-box {
background-color: var(--color-concept);
line-height: 5rem;
margin-bottom: 1.5rem;
text-align: center;
}

.consent-box label {
color: rgba(255, 255, 255, 1);
}

#application-guidelines.inq dl div dt span,
.consent {
background-color: rgba(255, 255, 255, 1);
border-radius: var(--border-radius);
color: var(--color-concept);
font-weight: bold;
margin-left: 1rem;
padding: .2rem .6rem;
}
/*
.consent {
background-color: var(--color-concept);
color: rgba(255, 255, 255, 1);
}
*/
#application-guidelines dl div:first-child dt {
border-top: 1px solid var(--color-concept);
}

#application-guidelines dl div dd {
border-top: 1px solid var(--color-concept);
border-right: 1px solid var(--color-concept);
width: 80%;
}

#application-guidelines.inq dl div dd {
width: 70%;
}

#application-guidelines dl div:last-child dd {
border-bottom: 1px solid var(--color-concept);
}

#application-guidelines p .button {
width: 60%;
}

.form-privacy {
border: 1px solid var(--color-concept);
height: 300px;
margin: 0 auto 1.5rem;
overflow-x: hidden;
overflow-y: scroll;
padding: 1rem;
width: 100%;
}

input[type="submit"] {
border: none;
}










#gmap iframe {
/*filter: grayscale(100%);*/
}

#footer-recruit {
background-blend-mode: multiply;
background-color: var(--color-text);
background-image: url("/assets/images/slider1.jpg");
background-position: center;
background-size: cover;
color: var(--color-white);
font-size: 1.5rem;
font-weight: bold;
justify-content: center;
padding-bottom: 1.5rem;
padding-top: 1.5rem;
}

#footer-recruit .flex-item {
text-align: center;
}

#footer-recruit a {
color: var(--color-white);
}

#footer-recruit .button {
margin-bottom: 1.5rem;
width: 60%;
}

#footer-recruit p:last-child {
font-size: 1rem;
font-weight: normal;
}

.copy {
text-align: center;
}











@media only screen and (max-width: 599px) {

.shadow {
box-shadow: none;
}

.container-inner {
margin-left: auto;
margin-right: auto;
width: 96%;
}

.header-wrapper {
justify-content: center;
}

.header-logo {
width: 60%;
}

.header-logo img {
height: auto;
width: 100%;
}

.header-nav,
.footer-nav {
display: none;
}

#slider-wrapper .catch {
bottom: calc( 50% + 2rem );
top: auto;
width: 80%;
}

#slider-wrapper .catch img {
height: auto;
margin-top: -20vh;
width: 100%;
}

.slider-item {
height: 60vh;
}

#slider-wrapper .catch {
margin-left: -40%;
}

#slider-wrapper .catch img {
transform: none;
}

.page #slider-wrapper .catch {
margin-bottom: 0;
margin-left: -40%;
margin-top: 0;
top: auto;
width: 80%;
}

.flex-box {
flex-flow: column;
gap: 1rem;
}

#top-about .flex-item {
width: 100%;
}

#menu-box {
width: 100%;
}

#menu-box a {
padding-top: 33vh;
width: 100%;
}

#topics .flex-item {
gap: .5rem;
}

#topics .flex-item .image {
height: 16vh;
width: 30%;
}

#application-guidelines dl div dt,
#application-guidelines dl div dd,
#application-guidelines.inq dl div dt,
#application-guidelines.inq dl div dd {
display: block;
margin: 0;
width: 100%;
}

#application-guidelines.inq dl div dt {
text-align: center;
}

#application-guidelines dl div:first-child dt,
#application-guidelines dl div dt,
#application-guidelines dl div dd,
#application-guidelines dl div:last-child dd {
border: none;
}

#business-method .flex-item,
#business-object .flex-item {
width: 100%;
}

#business-object .flex-box {
flex-direction: column-reverse;
}

#business-object .flex-item:nth-child(2) {
aspect-ratio: 4 / 3;
}

.footer-nav-wrapper {
flex-flow: column;
text-align: center;
}

.copy {
margin-top: 1.5rem;
}

#top-about p,
#business-about p,
#accepting-applications p {
text-align: left;
}





/* sp menu */
.hamburger {
display: block;
position: fixed;
z-index: 1000;
right: 20px;
top: 20px;
width: 42px;
height: 42px;
cursor: pointer;
text-align: center;
}

.hamburger span {
display: block;
position: absolute;
width: 30px;
height: 2px ;
left: 6px;
background: #BBBBBB;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

.hamburger span:nth-child(1) {
top: 10px;
}

.hamburger span:nth-child(2) {
top: 20px;
}

.hamburger span:nth-child(3) {
top: 30px;
}

/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
top: 16px;
left: 6px;
background:#fff;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
top: 16px;
background:#fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

/* メニュー背景　*/
nav.globalMenuSp {
position: fixed;
z-index: 900;
top: 0;
left: 0;
color: #fff;
background: rgba(71, 70, 73, .8 );
text-align: center;
width: 100%;
opacity: 0;
display: none;
transition: opacity .6s ease, visibility .6s ease;
height: 100%;
}

nav.globalMenuSp ul {
margin: 0 auto;
padding: 0;
width: 100%;
}

nav.globalMenuSp ul li {
list-style-type: none;
padding: 0;
width: 100%;
transition: .4s all;
}

nav.globalMenuSp ul li:last-child {
padding-bottom: 0;
}

nav.globalMenuSp ul li:hover{
background:#ddd;
}

nav.globalMenuSp ul li a {
display: block;
color: #fff;
padding: 1em 0;
text-decoration:none;
}

/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
opacity: 100;
display: block;
}

}