@charset "utf-8";

html{
  scroll-behavior: smooth;
}

body{
    min-width:800px;
		font-family: "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3","メイリオ",sans-serif;
}


#loading {
    background: yellow;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 299;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* header */
header {
    height: 120px;
    padding-top: 12px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    min-width:800px;
    z-index: 100;
    background: url(/images/bs-b-tr.png) 100% top/100% 120px no-repeat;
}

.logo {
    position: absolute;
    width: 240px;
    height: 240px;
    top: 0;
    left: -120px;
    background: yellow;
    transform: skewX(-45deg);
    box-shadow: 3px 3px 3px #00000033;
}

.logo a {
    display: block;
    transform: skewX(45deg);
    position: absolute;
    width: 230px;
    height: 230px;
    right: -110px;
    top: 4px;
}

.logo a img {
    width: 60%;
    height: auto;
}

.header__navBtn {
    display: none;
}

.header__navBtn span {}

.header__navBtn span:nth-child(1) {}

.header__navBtn span:nth-child(2) {}

.header__navBtn span:nth-child(3) {}

nav {
    position: absolute;
    right: 0;
}

nav ul {
    display: flex;
    margin-right: 1em;
    gap: .5em;
    align-items: center;
}

nav ul li {
}

nav ul li:after {
    content: "/";
    color: gray;
    margin-left: .5em;
}
nav ul li:last-child:after{
    content:none;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 18px;
}
nav ul li a:hover{
    color:yellow;
    border-bottom:2px solid;
}

nav ul li.navi__recruit a {
	background: yellow;
	color: #333333;
	padding: .5em;
	display:inline-block;
}

nav ul li.navi__recruit a:hover {
	border:none;
	background:lightyellow;
}

/* firstview */
.firstview {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(/images/bs-w-bl.png) 100% bottom/100% 150px no-repeat,
        url(/images/firstview-bg.jpg) center center/cover;
}

.firstview__main {
    margin-bottom: 20px;
}

.firstview__sub {
    margin-bottom: 80px;
    max-width: 640px;
}

.firstview__name {
    width: 180px;
}


/* content */
.content {}

.content__title {
    text-align: center;
    font-size: 40px;
    padding: 0.75em 0;
    font-family: 'Noto Sans JP', sans-serif;
    color:#333;
}

.content__title span {
    display: block;
    font-size: 18px;
    margin-top: .5em;
}

#slogan,
#value,
#access{
    padding:60px 0;
}

#jobDesc,
#companyOverview,
#contact {
    background:
        url(/images/bs-w-tr.png) top -1px center/100% 15vw no-repeat,
        url(/images/bs-w-bl.png) bottom -1px center/100% 15vw no-repeat,
        #333;
    padding:calc(15vw + 60px) 0;
}

#jobDesc .content__title,
#companyOverview .content__title,
#contact .content__title{
    color:white;
}
#jobDesc .content__title span,
#companyOverview .content__title span,
#contact .content__title span{
}

/* slogan */

.content__slogan {
    max-width: 800px;
    margin: 0 auto;
    line-height: 2;
    text-align: center;
    color: #333;
}

.content__slogan img {
    width: 540px;
}

.content__slogan h3 {
    font-size: 64px;
    font-family: 'Noto Sans JP', sans-serif;
}

.content__slogan p {
    font-size: 18px;
}

.Button {
    margin: 40px 0;
}

.Button__link {
    background: yellow;
    padding: 1em 3em;
    border: 4px solid;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 4px 4px #33333333;
    position:relative;
    top:0;
    left:0;
    transition:.1s;
}
.Button__link:hover{
    top:4px;
    left:4px;
    box-shadow:1px 1px #33333333;
    background:#ffffa6;

}

.Button__link:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    border: 0.6em solid transparent;
    border-left-color: #333;
}

/* job description */
.content__jobDesc {
    display: flex;
    max-width: 800px;
    margin: 0 auto;
    gap: 32px;
}

.content__jobDescItem {
    color: white;
    line-height: 1.5;
}

.content__jobDescItem img {
    width: 100%;
}

.content__jobDescItem h3 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 32px;
    text-align: center;
    margin-bottom: 8px;
}

.content__jobDescItem p {
    font-size: 14px;
    color: lightgray;
    text-align: center;
}

/* value */

.content__value {
    display: flex;
    max-width: 800px;
    margin: 0 auto;
    gap: 32px;
}

.content__valueItem {
    color: #333;
    line-height: 1.5;
}

.content__valueItem img {
    width:100%;
}

.content__valueItem h3 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 32px;
    text-align: center;
    margin-bottom: 8px;
}

.content__valueItem p {
    font-size:14px;
}


/* companyOverview */
.content__companyOverview {
    max-width:800px;
    margin:0 auto;
    color:white;
    line-height:1.5;
}

.content__companyOverview table {
    width:100%;
}

.content__companyOverview table tbody {}

.content__companyOverview table tr {
    border-bottom:1px solid #1e1e1e;
}

.content__companyOverview table th,
.content__companyOverview table td {
    padding:1em;
    width:50%;
    letter-spacing:.1em;
}

.content__companyOverview table th{
    text-align:right;
    color:#ffd100;
    font-size:15px;
}
.content__companyOverview table td{
    font-size:14px;
}


/* access */

.content__access {
    max-width:800px;
    margin:0 auto;
    display:flex;
    gap:32px;
}

.content__accessMap {}

.content__accessMap iframe {}

.content__accessDesc {}

.content__accessDesc h3 {
	font-size:20px;
}

.content__accessDesc ol li {
    font-size: 14px;
    line-height: 1.5;
    list-style:inside dicimal;
    margin:1em 0;
}

/* contact */

.content__contact {
    max-width:800px;
    margin:0 auto;
    gap:32px;
    text-align:center;
    color:white;
}

.content__contact p {
    font-size: 14px;
}

.Button__link.is-contact{
}


/* footer */

footer{
    padding:2em 0;
    text-align:center;
    font-size:12px;

}

/* subpage */
.subpage {
    padding-top: 120px;
}

.subpage__text {
    width: 800px;
    margin: 0 auto;
    line-height: 1.5;
    font-size: 14px;
}

.subpage__text img {
    width: 100%;
}

.subpage__text h3 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 2em 0;
    padding:.25em .5em;
    background:#333;
    color:white;
}

.subpage__text h4 {
    font-size: 1.2em;
    border-left: 8px solid dimgray;
    padding-left: .5em;
    font-weight: bold;
    margin: 2em 0;
}

.subpage__text h5 {
    font-weight: bold;
    font-size: 1.1em;
    margin: 2em 0;
}

.subpage__text p {
    margin: 2em 0;
}

.subpage__text ul {
    list-style: square;
    padding-left: 1em;
}

.subpage__text ol {
    list-style: auto;
    padding-left: 1em;
}

.subpage__text li {
    margin: .5em 0;
}

.subpage__text blockquote {
    padding: 2em;
    border: 1px solid lightgray;
    border-radius: 8px;
    background: whitesmoke;
}

.subpage__text blockquote p:first-child {
    margin-top: unset;
}

.subpage__text blockquote p:last-child {
    margin-bottom: unset;
}


.subpage__text .b-table {
    margin: 16px auto;
    min-width: 640px;
}

.subpage__text .b-table th,
.subpage__text .b-table td {
    padding: 8px;
    border:1px solid #333;
    vertical-align:middle;
}

.subpage__text .b-table th {
	background:#ffffdb;
}

.subpage__text .b-table td {
}

.subpage__text .h-table {
    width: 100%;
    margin: 2em 0;
}

.subpage__text .h-table thead {
    background: whitesmoke;
}

.subpage__text .h-table tr {
    border-top: 1px solid lightgray;
}

.subpage__text .h-table tr:last-child {
    border-bottom: 1px solid lightgray;
}

.subpage__text .h-table th,
.subpage__text .h-table td {
    padding: 8px;
    vertical-align:middle;
}

.subpage__text .h-table th {
}

.subpage__text .h-table td {
}




/*---  SP [S] ---*/
@media (max-width: 800px) {

	body{
	    min-width:unset;
	}

	#loading {
	}

		/* header */
	header {
	min-width: unset;
	background: unset;
	}

	.logo {
	width: 120px;
	height: 120px;
	left: -60px;
	background: linear-gradient(to bottom,#ffff00 50%,#ffff003d 100%);
	box-shadow: unset;
	}

	.logo a {
	width: 120px;
	height: 120px;
	right: -60px;
	top: 0;
	}

	.logo a img {
	}

	.header__navBtn {
		display: flex;
		width: 20%;
		height: 20vw;
		background: yellow;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 100;
	}

	.header__navBtn span {
		position:absolute;
		height: 1.5vw;
		width: 60%;
		left:0;
		right:0;
		margin:0 auto;
		background: #333333;
		transition:.2s;
		}

	.header__navBtn span:nth-child(1) {
		top:50%;
		transform:translateY(-50%) rotate(0deg);
	}
	.header__navBtn span:nth-child(2) {
		top:24%;
		opacity:1;
	}
	.header__navBtn span:nth-child(3) {
		bottom:24%;
	}

    .header__navBtn.active span{
		top:50%;
    }

	.header__navBtn.active span:nth-child(1) {
        transform:translateY(-50%) rotate(45deg);
	}

	.header__navBtn.active span:nth-child(2) {
		opacity:0;
	}

	.header__navBtn.active span:nth-child(3) {
        transform:translateY(-50%) rotate(-45deg);
	}

	nav {
		display:none;
	}

	nav.active{
	position: fixed;
	width: 100%;
	height: 100%;
	background: #000000dd;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 50;
	}

	nav ul {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	nav ul li {
	}

	nav ul li:after {
		content:none;
	}

	nav ul li a {
		color: #fff;
		font-size: 8vw;
		padding: 3vw 0;
		display: block;
	}
	nav ul li a:hover{
	}

	/* firstview */
	.firstview {
    height: 100vh;
    padding: 20vh 4%;
    background:
    url(/images/bs-b-tr.png) right top/200% auto no-repeat,
    url(/images/bs-w-bl.png) left bottom/200% auto no-repeat,
    url(/images/firstview-bg-sp.jpg) center center/cover;
}

	.firstview img{
		max-width: 100%;
	}

	.firstview__main {}

	.firstview__sub {margin-bottom: 10%;}

	.firstview__name {width: 50%;}


	/* content */
	.content {
}

	.content__title {
		font-size:9vw;
	}

	.content__title span {
		font-size:5vw;
	}

	#slogan,
	#value,
	#access{
	}

	#jobDesc,
	#companyOverview,
	#contact {
	background:
	    url(/images/bs-w-tr.png) top right/200% no-repeat,
        url(/images/bs-w-bl.png) bottom right/200% no-repeat,
        #333
	}

	#jobDesc .content__title,
	#companyOverview .content__title,
	#contact .content__title{
	}
	#jobDesc .content__title span,
	#companyOverview .content__title span,
	#contact .content__title span{
	}

	/* slogan */

	.content__slogan {
	}


	.content__slogan img {
		width: 90%;
		margin-bottom:4vw;
	}
	.content__slogan h3 {
	font-size: 14vw;
	}

	.content__slogan p {
	font-size: 16px;
	text-align: left;
	margin: 0 8%;
	}

	.Button {
	}

	.Button__link {
	padding: 1em 2em;
	}
	.Button__link:hover{

	}

	.Button__link:before {
	}

	/* job description */
	.content__jobDesc {
	flex-direction: column;
	margin: 0 16%;
	}

	.content__jobDescItem {
	}

	.content__jobDescItem img {
	}

	.content__jobDescItem h3 {
	font-size: 8vw;
	}

	.content__jobDescItem p {
	}

	/* value */

	.content__value {
	flex-direction: column;
	margin: 0 10%;
	}

	.content__valueItem {
	}

	.content__valueItem img {
	}

	.content__valueItem h3 {
	font-size: 8vw;
	}

	.content__valueItem p {
	}


	/* companyOverview */
	.content__companyOverview {	}

	.content__companyOverview table {	}

	.content__companyOverview table tbody {}

	.content__companyOverview table tr {display: flex;flex-direction: column;margin: 2% 8%;padding: 4% 0;}

.content__companyOverview table tr:last-child {
    border: unset;
}

	.content__companyOverview table th,
	.content__companyOverview table td {width: 100%;text-align: center;padding: 0;}

	.content__companyOverview table th{font-size: 18px;}
	.content__companyOverview table td{
    font-size: 14px;
}


	/* access */

	.content__access {
    flex-direction: column;
    margin: 0 8%;
}

	.content__accessMap {}

	.content__accessMap iframe {
    width: 100%;
    height: 100vw;
}

	.content__accessDesc {}

	.content__accessDesc h3 {
		font-size:18px;
	}

	.content__accessDesc ol li {
		font-size: 13px;
		line-height: 1.5;
		list-style:inside dicimal;
		margin:1em 0;
	}

	/* contact */

	.content__contact {
    margin: 0 8%;
    line-height: 1.6;
    text-align: left;
    }

	.content__contact p {
		font-size:13px;
	}

	.content__contact .Button{
		text-align:center;
	}

	.Button__link.is-contact{}


	/* footer */

	footer{}

	/* subpage */
	.subpage {
	}

	.subpage__text {
	width: 100%;
	}

	.subpage__text img {
	}

	.subpage__text h3 {
	}

	.subpage__text h4 {
	margin: 2em 4%;
	}

	.subpage__text h5 {
	}

	.subpage__text p {
	margin: 2em 4%;
	}

	.subpage__text ul {
		margin:0 4%;
	}

	.subpage__text ol {
		margin:0 4%;
	}

	.subpage__text li {
	}

	.subpage__text blockquote {
	margin: 2em 4%;
	}

	.subpage__text blockquote p:first-child {
	}

	.subpage__text blockquote p:last-child {
	}


	.subpage__text .b-table {
	margin: 2em 4%;
	width: auto;
	font-size: 13px;
	min-width: unset;
	}

	.subpage__text .b-table th,
	.subpage__text .b-table td {
	}

	.subpage__text .b-table th {
	white-space: nowrap;
	}

	.subpage__text .b-table td {
	}

	.subpage__text .h-table {
	margin: 2em 4%;
	width: auto;
	font-size: 13px;
	}

	.subpage__text .h-table thead {
	}

	.subpage__text .h-table tr {
	}

	.subpage__text .h-table tr:last-child {
	}

	.subpage__text .h-table th,
	.subpage__text .h-table td {
	}

	.subpage__text .h-table th {
	white-space: nowrap;
	}

	.subpage__text .h-table td {
	}



}