@charset "UTF-8";


/* ▼820px以下の場合に適用（ipad以下）
---------------------------------------------------------------------- */
@media only screen and (max-width: 820px) {

	body {
		overflow: hidden;
		padding-top: 64px !important;
	}

	/* ページトップ に戻る ----------------------------------------------------- */
	.pagetop img {
		width: 48px;
	}

	header {
		height: 64px;
		padding-top: 8px;
	}

	/*ハンバーガーメニュー*/
	.nav {
		display: none;
	}

	.hm_menu_check {
		/* チェックボックスを隠す */
		display: none;
	}

	.hm_wrap {
		display: inline-block;
		position: fixed;
		top: 8px;
		right: 0;
		width: 100%;
		height: 48px;
		box-sizing: border-box;
		z-index: 999;
		padding: 8px 16px;
		/*border-bottom:solid 1px #eee;*/
		/*background:rgba(255,255,255,.85);*/
	}

	/* ▽▽メニューボタン▽▽ */
	.hm_btn {
		position: relative;
		width: 30px;
		height: 30px;
		cursor: pointer;
		display: block;
		float: right;
		z-index: 9999;
	}

	.hm_btn::before {
		-webkit-box-shadow: #fff 0 12px 0;
		box-shadow: #fff 0 12px 0;
	}

	.hm_btn::after {
		bottom: 0;
	}

	.hm_btn::before,
	.hm_btn::after {
		width: 30px;
		height: 6px;
		background: #fff;
		display: block;
		content: '';
		position: absolute;
		-webkit-transition: -webkit-box-shadow 0.2s linear, -webkit-transform 0.2s 0.2s;
		transition: box-shadow 0.2s linear, transform 0.2s 0.2s;
	}

	/* △△メニューボタン△△ */

	.hm_menu_wrap {
		width: 100%;
		height: calc(100vh - 64px);
		background: rgba(7, 38, 75, .95);
		position: fixed;
		right: -100%;
		top: 64px;
		-webkit-transition: left 0.4s;
		transition: right 0.4s;
		z-index: 999;
		overflow-y: auto;
	}

	/* ▽▽開閉時のアニメーション▽▽ */

	.hm_menu_check:checked~.hm_btn::before {
		-webkit-box-shadow: transparent 0 0 0;
		box-shadow: transparent 0 0 0;
		-webkit-transform: rotate(45deg) translate3d(6px, 11px, 0);
		transform: rotate(45deg) translate3d(6px, 11px, 0);
	}

	.hm_menu_check:checked~.hm_btn::after {
		-webkit-transform: rotate(-45deg) translate3d(6px, -11px, 0);
		transform: rotate(-45deg) translate3d(6px, -11px, 0);
	}

	.hm_menu_check:checked~.hm_menu_wrap {
		right: 0;
	}

	/* △△開閉時のアニメーション△△ */

	/* ▽▽メニュー内のリストスタイル▽▽ */
	.hm_list {
		list-style-type: none;
		border-top: dotted 1px #ccc;
	}

	.hm_list li {
		display: block;
		overflow: hidden;
		position: relative;
		text-decoration: none;
		z-index: 1;
		border-bottom: dotted 1px #ccc;
	}

	.hm_list li a {
		color: #fff;
		text-decoration: none;
		display: block;
		padding: 8px 22px;
		transition: .3s;
	}

	.hm_list li a span {
		display: inline-block;
		padding-left: 1em;
		font-size: 12px;
		color: #ccc;
	}

	.hm_list li a:hover {
		color: #fff;
	}

	.hm_wrap img {
		float: left;
		height: 30px;
		width: auto;
	}


	.hm_list li ul li {
		border-bottom: none;
		border-top: solid 1px #444;
		padding-left: 1em;
	}

	/* ページ内リンク */
	.page_nav {
		display: none;
	}

	.scroll {
		display: none;
	}


	/* 社員紹介 */
	.w-o-70 {
		width: 100% !important;
		margin: 0 auto;
	}
	.s-interview__column > * {
		width: -webkit-calc(50% - .5rem);
		width: -moz-calc(50% - .5rem);
		width: calc(50% - .5rem);
	}
	.s-interview__modal-close {
		width: 30px;
	}

}

/* ▼496px以下の場合に適用
---------------------------------------------------------------------- */
@media only screen and (max-width: 496px) {


	.pc {
		display: none;
	}

	.sp {
		display: block;
	}

	/* !Margin ------------------------------------------------------------------ */
	.mt10 {
		margin-top: 10px !important;
	}

	.mt20 {
		margin-top: 20px !important;
	}

	.mt40 {
		margin-top: 30px !important;
	}

	.mt60 {
		margin-top: 40px !important;
	}

	.mt80 {
		margin-top: 60px !important;
	}

	.mb60 {
		margin-bottom: 60px !important;
	}

	/* !Padding ------------------------------------------------------------------ */
	.pt10 {
		padding-top: 10px;
	}

	.pt20 {
		padding-top: 20px;
	}

	.pt40 {
		padding-top: 30px;
	}

	.pt60 {
		padding-top: 40px;
	}

	.pt80 {
		padding-top: 60px;
	}

	.pt120 {
		padding-top: 80px;
	}

	.pb60 {
		padding-bottom: 60px;
	}


	/* !Width ------------------------------------------------------------------- */
	.w60per {
		width: 100% !important;
	}

	.w80per {
		width: 100% !important;
	}

	/* ページトップ に戻る ----------------------------------------------------- */
	.pagetop {
		bottom: 48px;
		right: 8px;
	}

	.pagetop img {
		width: 36px;
	}


	/* フッタ */
	.footer_logo {
		max-width: 160px;
	}

	.footer_nav {
		display: none;
	}

	/* Table */
	.table01 th {
		width: 100%;
		border-bottom: none;
		padding: 1em 0 0.2em;
		display: block;
	}

	.table01 td {
		width: 100%;
		border-bottom: dotted 1px #ccc;
		padding: 0.2em 1em 1em;
		display: block;
	}

	.table01 td table th {
		padding: 1em 2em 0.2em 0;
	}

	.table01 td table td {
		padding: 0.2em 0 0 1em;
	}

	.table01 td dd {
		padding: 0 0 0.5em 1em;
	}

	.table01 td p {
		padding-bottom: 0.4em;
	}


	/* 共通 */

	.content_main {
		padding: 60px 3% 0;
	}

	.col {
		padding-bottom: 60px;
	}

	.col h3 {
		width: 90px;
		height: 90px;
		line-height: 90px;
		font-size: 14px;
	}

	/* 見出し下の菱形 */
	.diamond {
		width: 16px;
		height: 16px;
		background: #07264B;
		transform: rotate(45deg);
		margin: 40px auto 0;
	}

	/* 事業内容など */
	.business_txt {
		width: 94%;
		margin: -2em auto 0;
		padding: 4%;
	}

	.business_txt h5 {
		font-size: 20px;
		color: #0070A0;
	}

	.business_txt p {
		padding-top: 1em;
	}

	/* トップページ */

	.video-box02 {
		position: relative;
		overflow: hidden;
		width: 100%;
		padding-top: 56.25%;
		height: auto;
	}

	.video02 {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		min-height: auto;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}


	/* イントロダクション */
	.top_intro {
		padding: 60px 4% 33%;
	}

	.top_intro h2 {
		font-size: 30px;
	}

	.top_intro p span {
		display: inline-block;
	}

	/* AMCOについて */
	.top_about {
		padding: 60px 4%;
		background-image:
			url(common/img/top_about_left.svg),
			url(common/img/top_about_right.svg);
		background-position:
			top left,
			bottom right;
		background-repeat:
			no-repeat,
			no-repeat;
		background-size:
			44%;
	}

	.top_about h2 {
		font-size: 30px;
	}

	.top_about p span {
		display: inline-block
	}

	.top_about_list {
		display: block;
		padding: 60px 4% 0;
	}

	.top_about_list .top_aboutbox {
		width: 100%;
		padding: 40px 2% 20px;
	}

	.top_about_list .top_aboutbox img {
		display: block;
		width: 88%;
		margin: 0 auto;
	}

	.top_about_list .top_aboutbox h3 {
		text-align: center;
	}


	/* Voice */
	.top_voice h2 {
		padding: 48px 4%;
		background-size: cover;
		font-size: 30px;
	}

	.top_voice h2 span {
		font-size: 12px;
	}

	.top_voicebox {
		padding: 60px 4%;
	}

	.top_voicebox h3 {
		font-size: 24px;
		line-height: 1.3em;
	}

	.top_voicebox h3 span {
		display: inline-block;
	}

	.top_voicebox p span {
		display: inline-block;
	}

	.top_voice_img {
		width: 100%;
		max-width: 2000px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
	}

	.top_voice_photo {
		width: 48%;
		margin: 1%;
	}

	.top_voice_img p {
		font-size: 12px;
	}


	/* 会社概要 */
	.rinen p span {
		display: inline-block;
	}

	.link_bn {
		display: block;
	}

	.link_bn .bn_box {
		width: 100%;
		padding: 2%;
	}

	.message {
		padding: 40px 4%;
	}

	.message h3 {
		width: 90px;
		height: 90px;
		line-height: 90px;
		font-size: 14px;
	}

	.message_box {
		padding-top: 3em;
	}

	.message_box h4 {
		font-size: 22px;
	}

	.message_box h4 br {
		display: none;
	}

	.message_box p {
		padding-bottom: 0.5em;
		line-height: 1.8em;
	}

	.message_name {
		padding-top: 2em;
		text-align: right;
		font-size: 20px;
	}

	.message_name .small {
		font-size: 13px;
	}

	.tree {
		padding-top: 80px;
		width: 92%;
		max-width: 960px;
		margin: 0 auto;
	}

	/* 事業内容 */
	.service_about {
		padding-bottom: 60px;
	}

	.service_about h3 {
		font-size: 22px;
	}

	.service_about h4 {
		font-size: 20px;
	}

	.service_about p {
		text-align: center;
		padding-top: 3em;
		line-height: 2em;
	}

	.service_top_box {
		padding: 6%;
		width: 90%;
		margin: 0 auto;
	}

	.service_top_box p {
		padding-bottom: 1em;
	}

	.service_top_box h4 {
		font-size: 30px;
		padding-bottom: 0;
	}

	.service02 .service_top_box {
		margin: 0 auto;
	}

	.service_bn {
		padding-bottom: 40px;
	}

	.esg h4 {
		font-size: 18px;
	}

	/* 採用情報 */
/*
	.recruit {
		display: block;
	}
*/
	.recruit_img {
		width: 100%;
	}

	.recruit_txt {
		width: 100%;
		padding: 30px 0 60px;
	}

	.recruit_txt h5 {
		width: 48px;
		height: 48px;
		line-height: 48px;
	}

	.recruit_txt h6 {
		font-size: 20px;
	}

	.interview_box .img {
		width: 43%;
	}

	.interview_box .txt {
		width: 57%;
	}

	.interview_box .txt .text01 {
		font-size: 10px;
	}

	.interview_box .txt .text02 {
		font-size: 14px;
		padding-top:20px;
	}

	.interview_box .txt .text02 span {
		font-size: 10px;
	}

	.interview_box .txt .button {
		text-align: center;
		width: 75%;
		margin: 0;
		padding-top:20px;
	}

	.interview_box .txt .button span {
		display: block;
		padding: 0.2em 0;
		width: 90%;
		max-width: 360px;
		color: #fff;
		font-size: 10px;
		text-decoration: none;
		background-color: #07264B;
		border: solid 1px #fff;
		transition: 0.3s;
		position: relative;
		margin: 0 auto;
	}

	.name01 {
		font-size: 18px;
	}

	.name02 {
		font-size: 24px;
	}

	.name03 {
		font-size: 16px;
	}

	.job {
		background: #FFF898;
		display: block;
		padding: 4%;
	}

	.job_circle {
		width: 64px;
		height: 64px;
		background-color: #0070A0;
		color: #fff;
		border-radius: 50%;
		margin: 0 auto;
		/* ←円を中央揃え */
		text-align: center;
		/* ←文字を左右に中央揃え */
		line-height: 64px;
		/* ←文字を上下に中央揃え */
		font-size: 20px;
	}

	.job_text {
		width: 100%;
		padding: 4% 0 0;
	}

	.voice_box01 {
		display: block;
		padding: 20px 0;
	}

	.voice_box01 .photo {
		width: 100%;
		padding-bottom: 30px;
	}

	.voice_box01 .text {
		width: 100%;
		padding: 0;
	}

	.voice_box02 {
		display: block;
		padding: 20px 0;
	}

	.voice_box02 .photo {
		width: 100%;
		padding-bottom: 30px;
	}

	.voice_box02 .text {
		width: 100%;
		padding: 0;
	}

	.voice_box01 h4,
	.voice_box02 h4 {
		font-size: 20px;
		color: #0070A0;
	}

	/* 社員紹介 */
	.s-interview__column > * {
		width: 100%;
	}
}