/* PCはそのまま。768px以下は可変に */

.only-sp {
	display: none;
}

/* ハンバーガーアイコン */
.nav-toggle {
  display: none;
}
.g-navi-s {
	background: var(--main-color);
	padding: 5px;
}
.nav-icon {
	width: 30px;
	height: 25px;
	position: relative;
	cursor: pointer;
	display: none; /* 初期は非表示（PC向け） */
	z-index: 1001;
	margin: auto;
}
.nav-icon span {
	display: block;
	height: 3px;
	background: #fff;
	margin: 5px 0;
	transition: 0.4s;
}
.g-navi-s .navigation li {
	line-height: 200%;
	padding: 5px 0;
	border-bottom: 1px solid var(--main-color);
	text-align: center;
	font-size: 1.2rem;
}
.g-navi-s .navigation li:hover {
	background: var(--secondary-color);
}
.g-navi-s .navigation li ul li {
	border-bottom: none;
}
@media screen and (max-width: 768px) {
	.only-pc {
		display: none;
	}
	.only-sp {
		display: block;
	}
	
	body {
		min-width: 320px;
		font-size: 14px;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	section {
		width: 100%;
		padding: 0;
		box-sizing: border-box;
	}
	h2 {
		font-size: 1.5rem;
		letter-spacing: 0.2rem;
		padding: 5px 0;
		margin: 0 -5px 15px;
	}
	h3 {
		font-size: 1.2rem;
		padding: 5px 0;
	}

	#body {
		flex-direction: column-reverse;
		padding: 5px;
	}
	#side, #main {
		//display: block;
		width: 100%;
	}
	
	header {
		padding: 5px;
	}
	header > section.header-wrapper {
		flex-wrap: wrap;
		justify-content: center;
	}
	header .logo_wrapper {
		width: 15%;
	}
	header .logo_wrapper figure {
		padding: 5px;
		margin: 0;
	}
	header .logo_wrapper .logo-s {
		display: initial;
	}
	header .logo_wrapper .logo {
		display: none;
	}
	header .logo_wrapper figure .logo-st1 {
		display: none;
	}
	header h1 {
		width: 40%;
		flex-grow: 0;
	}
	.site-title a {
		font-size: 1.2rem;
	}
	header h1 a span:first-of-type {
		font-size: 0.8rem;
		font-weight: 400;
		letter-spacing: -0.2rem;
	}
	header h1 a span:last-of-type {
		font-size: 0.9rem;
		font-weight: 400;
		letter-spacing: -0.1rem;
		//background: none;
		color: var(--main-color);
	}
	header .contact-wrapper {
		width: fit-content;
		text-align: center;
		margin-top: 5px;
		margin-left: 0;
		margin-right: 0;
	}
	
	.contact-wrapper > p {
		display: none;
	}
	.contact-wrapper ul li {
		margin-left: 0.2rem;
	}
	.contact-btn {
		padding: 10px;
	}
	.contact-btn span {
		display: none;
	}
	.contact-btn i {
		margin-right: 0;
		font-size: 1.2rem;
	}
	.nav-icon {
		display: block;
	}

	.navigation {
		display: none;
		flex-direction: column;
		position: absolute;
		//top: 60px;
		left: 0;
		background: #fff;
		width: 100%;
		border-top: 2px solid #de8a83;
		z-index: 1000;
	}

	.nav-toggle:checked + .nav-icon + .navigation {
		display: flex;
		height: 100%;
	}
	/* チェック時にハンバーガーを×に変形 */
	.nav-toggle:checked + .nav-icon span:nth-child(1) {
		transform: rotate(45deg) translate(5px, 5px);
	}
	.nav-toggle:checked + .nav-icon span:nth-child(2) {
		opacity: 0;
	}
	.nav-toggle:checked + .nav-icon span:nth-child(3) {
		transform: rotate(-45deg) translate(6px, -6px);
	}
	
	#side {
		margin: 0 5px 20px;
		position: relative;
		box-sizing: border-box;
		width: calc(100% - 10px);
	}

	#footerArea {
		padding: 5px;
	}
	#footerArea > section {
		flex-wrap: wrap;
	}
	#footerArea .leftArea {
		width: 100%;
		margin-right: 0;
	}
	#footerArea .logo_wrapper {
		width: 15%;
	}
	#footerArea .leftArea .logo {
		display: none;
	}
	#footerArea .leftArea .logo-s {
		display: inherit;
	}
	#footerArea .nav {
		margin-right: 5%;
	}
	

	
	#promoVideo {
		margin-bottom: 15px;
	}
	
	.flexslider {
		margin-bottom: 15px!important;
	}
	.job li {
		width: 100%;
	}
	
	
	.rec p img {
		width: 100%;
	}
	.rec table th {
		width: 4em;
	}
	.rec-type2-photos li {
		width: 100%;
		margin-bottom: 5px;
	}
	
	.flow-content .flow-inner .title {
		padding: 10px;
	}
	.flow-content .flow-inner .rows > .row {
		width: 100%;
	}
	.flow-content .flow-inner:nth-of-type(2n) .rows {
		flex-direction: column-reverse;
	}
	
	.company table th {
		width: 4em;
	}
	
	
	
	.recruiting ul {
		flex-direction: column;
	}
	.recruiting li {
		width: 100%;
	}
	
	.message-content p.title {
		font-size: 1.5rem;
	}
	.message-content {
		padding: 15px;
	}
	
	.reason h3 {
		padding-bottom: 5px;
	}
	.reason ul li .thumb {
		padding: 0;
		margin-top: 10px;
	}
	.reason ul li {
		flex-direction: column;
	}
	.reason ul li:nth-of-type(2) {
		flex-direction: column;
	}
	.reason ul li .main,
	.reason ul li .thumb {
		width: 100%;
	}
	.shop-message .content {
		flex-direction: row;
	}
	.shop-message .content .thumb {
		width: fit-content;
		margin-right: 5px;
		text-align: center;
	}
	.shop-message .content .arrow_box {
		margin: 0 0 0 0;
	}
	.shop-message .content:nth-of-type(2n) .arrow_box {
		margin-right: 0;
	}
	.shop-message .content:nth-of-type(2n) .thumb {
		margin-left: 5px;
		margin-right: 0;
	}

	.system-main .fee {
		flex-direction: column;
	}
	.system-main .fee .title {
		font-size: 1rem;
		margin-right: 0;
	}
	.system-main .fee .title .big {
		font-size: 1rem;
	}
	.system-main .fee .title .big {
		font-size: 1rem;
	}
	.system-main .fee .title::after {
		content: none;
	}
	.system-main .info li {
		display: flex;
		box-sizing: border-box;
	}
	.system-main .info {
		flex-direction: column;
	}
	.system-main .info li {
		width: 100%;
		margin-bottom: 10px;
	}
	.beginner .message .pop {
		font-size: 1.2rem;
	}
	.beginner .message .rows {
		flex-direction: column-reverse;
	}
	.beginner .message .rows:nth-of-type(2n) {
		flex-direction: column-reverse;
	}
	.beginner .message .thumb {
		width: 100%;
	}
	.beginner .message .body {
		width: 100%;
		margin-bottom: 15px;
	}
	.beginner .safety {
		flex-direction: column;
	}
	.beginner .safety li {
		width: 100%;
		margin-bottom: 15px;
	}
	.faq .index {
		padding: 5px;
	}
	.faq .index .rows {
		flex-direction: column;
	}
	.faq .index ul {
		max-width: 100%;
		width: 100%;
		margin-bottom: 0;
	}
	.faq .index li {
		margin: 0 0 5px 0;
		display: block;
	}
	.faq .index li a {
		width: 100%;
	}
	.faq .index .thumb {
		width: 50%;
		margin-left: 50%;
	}
	.faq .body {
		margin: 0 5px;
	}
	.contactArea {
		margin-left: 5px;
		margin-right: 5px;
		padding: 5px;
	}
	.contactArea form {
		margin-bottom: 10px;
	}
	.contact table th {
		width: 4em;
	}
	.contactArea input[type="reset"], .contactArea input[type="submit"], .contactArea input[type="button"] {
		width: 100%;
		margin: 15px 0 !important;
	}
	.salary > .message {
		flex-direction: column;
	}
	.salary > .message .title {
		font-size: 1.2rem;
	}
	.salary > .message .thumb {
		margin-left: 0;
		width: 100%;
		margin-top: 15px;
	}
	.salary .secondary-title {
		font-size: 1.2rem;
	}
	.count #box ul li input[type="submit"] {
		margin-top: 20px;
	}
	.voice-top {
		flex-direction: column;
	}
	.voice-top p {
		margin: 0;
		width: 100%;
		font-size: 1.2rem;
		text-align: center;
	}
	.voice-top .thumb {
		width: 100%;
	}
	.voice h3 {
		font-size: 1.1rem;
	}
	.rows {
		flex-direction: column-reverse;
	}
	.voice .case .rows .thumb {
		width: 100%;
	}
	.voice .arrow_box {
		margin-left: 0;
		width: 100%;
		margin-bottom: 15px;
		margin-top: 15px;
	}
	.voice .arrow_box::after {
		bottom: -30px;
		border-right: ;
		border-right-color: transparent;
		border-top-color: var(--base-color);
		left: 0;
		right: 0;
		top: auto;
		margin: auto;
	}
	.voice .salary span {
		display: block;
		font-size: 1.5rem;
	}
}