@charset "utf-8";


/*********************************
↓　全体設定
*********************************/

/* 全体設定 */
*
{
	margin: 0;
	padding: 0;
	border: 0;
	
	-webkit-padding-start: 0;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
}

html
{
	font-size: 1rem;
	font-size: clamp(0.875rem, -0.375rem + 1.56vw, 1rem);
}

body
{
	color: #333;
	
	line-height: 2;
	
	font-family:
		"Segoe UI", 
		"Helvetica Neue",
		Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		'メイリオ',
		Meiryo,
		sans-serif;
	
	position: relative;
}

a
{
	color: #07f;
	text-decoration: none;
}
a:hover
{
	color: #e54412;
	text-decoration: underline;
}

a.button,
button[type="submit"]
{
	display: inline-block;
	font-size: 0.8rem;
	padding: 0.8em 0;
	width: 16em;
	text-decoration: none;
	position: relative;
	color: #333;
	border: 1px solid #333;
	text-align: center;
	cursor: pointer;

	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
}
a.button:hover,
button[type="submit"]:hover
{
	opacity: .8;
	background: #333;
	color: white;
	transition: all .25s;
	border: 1px solid #333;

	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
}

a.button.mail,
a.button.cases
{
	width: auto;
	color: white;
	background-color: #F15A24;
	border: 1px solid white;
	
}
a.button.mail:hover,
a.button.cases:hover,
a.button.cases.on
{
	color: white;
	background-color: #F15A24;
}

a.button.cases
{
	font-size: 1rem;
	width: 40%;
	text-align: left;
	margin: 0 1rem 1rem;
	padding-left: 1rem;
}
a.button.cases.on
{
	cursor: initial;
	pointer-events: none;
}
a.button.cases.on:hover
{
	opacity: 1;
}
a.button.cases:before
{
	content: "＞　";
}


a.button.mail
{
	font-size: 0.75rem;
	line-height: 4;
	padding: 0 0.5rem 0 3rem;
	margin-top: 1rem;
	
	width: 100%;
	border: 1px solid white;
	
	background-color: #F15A24;	
	background-image: url(../images/icon_mail_w.svg);
	background-position: 0.5rem center;
	background-repeat: no-repeat;
	background-size: 2rem 2rem;
}
a.button.mail:hover
{
	color: #F15A24;
	text-decoration: underline;
	border: 1px solid #F15A24;
	background-color: white;
	background-image: url(../images/icon_mail_b.svg);
	background-position: 0.5rem center;
	background-repeat: no-repeat;
	background-size: 2rem 2rem;
	opacity: 1;
}
a.button.mail:after
{
	display: block;
	content: " ";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: transparent;
	transition: all .25s;
	border: 1px solid transparent;
}
a.button.mail:hover:after
{
	border: 1px solid white;
}



/* テーブル */
/*
table, th, td
{
}
*/

table
{
	margin: 0 auto 2rem;
	width: 100%;
	box-sizing: boder-box;
}

th, td
{
	padding: 0.5em;
	font-weight: normal;
	font-size: 1.3rem;
	vertical-align: middle;
	border: 1px solid #ccc;
	background-color: #F15A24;
}

th
{
	background-color: #eee;
	width: 20%;
	min-width: 10em;
}


ul,
ol
{
	list-style-position: inside;
	list-style-type: none;
}
ul > li,
ol > li
{
	padding-right: 1em;
	position: relative;
	right: -1em;
	text-indent: -1em;
}
ol > li
{
	padding-right: 1.25em;
	position: relative;
	right: -1.25em;
	text-indent: -1.5em;
}
ul > li:before
{
	content:"・";
}

.topicPath
{
	font-size: 0.75rem;
	line-height: 2;
	/* サイズ指定は下部にて */
	position: relative;
	bottom: 2rem;
}
.topicPath > li
{
	display: inline;
	padding: 0;
	right: 0;
	text-indent: 0;
}
.topicPath > li:after
{
	content: " > ";
}
.topicPath > li:last-child:after
{
	content: "";
}


/* clearfix */
.clearfix:after,
.clearfix:before
{
	content: "";
	display: block;
	clear: both;
} 
.clearfix
{
	display: block;
}


/* inline-block */

.inline_block
{
	display: inline-block;
}

.serif
{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.text_left
{
	text-align: left;
}

.text_center
{
	text-align: center;
}

.text_right
{
	text-align: right;
}

.color_red { color: #036eb7; }
.color_blue { color: #036eb7; }
.color_green { color: #036eb7; }
.color_white { color: #ffffff; }

.bg_gray { background-color: #f2f2f2; }


/*********************************************************
 アニメーション定義
**********************************************************/



/*********************************************************
 メイン
**********************************************************/

/* 汎用部品 */
.secondpage h1
{
	font-weight: bold;
	font-size: 3rem;
	text-shadow: #222 1px 0 10px;
	text-align: center;
	padding: 0.8em 0;
	letter-spacing: 0.1em;
}

h2
{
	font-size: 2rem;
}

h3
{
	font-size: 1.25rem;
	font-weight: bold;
}

h4
{
	font-size: 1rem;
	font-weight: bold;
}

.mg-t-1 { margin-top: 1rem; }
.mg-t-2 { margin-top: 2rem; }
.mg-t-3 { margin-top: 3rem; }
.mg-t-4 { margin-top: 4rem; }
.mg-t-5 { margin-top: 5rem; }
.mg-t-6 { margin-top: 6rem; }
.mg-b-1 { margin-bottom: 1rem; }
.mg-b-2 { margin-bottom: 2rem; }
.mg-b-3 { margin-bottom: 3rem; }
.mg-b-4 { margin-bottom: 4rem; }
.mg-b-5 { margin-bottom: 5rem; }
.mg-b-6 { margin-bottom: 6rem; }



/* セクション */

header
{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: fixed; 
	width: 100%;
	background: white;
	top: 0;
	left: 0;
	z-index: 3000;
}

#logo
{
	height: 60px;
	margin-top: 2px;
	margin-left: 1rem;
}
#logo a
{
	display: block;
	width: 100%;
	height: 100%;
}
#logo a:hover
{
	opacity: .6;
	transition: opacity .2s;
}
#logo img
{
	display: block;
	height: 100%;
}

#pc_menu
{
	height: 64px;
	font-size: 0.9rem;
	padding-right: 1.5rem;
}
#pc_menu > a,
#pc_menu > span
{
	position: relative;
	display: inline-block;
	height: 64px;
	padding: 20px 1.5em 0;
	color: #333;
}
#pc_menu > a:hover
{
	color: #F15A24;
	text-decoration: none;
}
#pc_menu > a:after,
#pc_menu > span:after
{
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background-color: #F15A24;
}
#pc_menu > a:hover:after,
#pc_menu > span:after
{
	height: 5px;
	transition: all .1s;
}

#wrap_toggle,
#sm_menu
{
	display: none;
}
#wrap_toggle { z-index: 1000; height: 64px; }
#sm_menu
{
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	
	transition: all .3s;
	z-index: 800;
	
	position: relative;
	box-shadow: 0px 10px 10px -3px rgba(0, 0, 0, 0.2);
}
/*
#sm_menu.opened {}
*/
#sm_menu > span,
#sm_menu > a,
#sm_menu > div
{
	display: block;
	width: 100%;
	text-align: left;
	padding: 1rem 2rem;
	border-bottom: 1px solid #999;
	color: #333;
}
#sm_menu > span:before,
#sm_menu > a:before
{
	content: ">　";
	color: #ccc;
}
#sm_menu > span:first-child,
#sm_menu > a:first-child
{
	border-top: 1px solid #999;
}
#sm_menu > a:hover
{
	text-decoration: none;
}
#sm_menu > span
{
	background: #0894b5;
	color: white;
	text-decoration: none;
}
#sm_menu > span:before
{
	color: white;
}
#sm_menu > div
{
	display: flex;
	justify-content: space-around;
	background: #eee;
	text-align: center;
}
#sm_menu > div > a,
#sm_menu > div > span
{
	display: inline-block;
	width: 64px;
	border: 2px solid white;
}
#sm_menu > div > span { border-color: #ff640a; }
#sm_menu > div > a > img,
#sm_menu > div > span > img
{
	width: 100%;
}

footer
{
	display: flex;
	background: #A4A4A4;
	justify-content: space-between;
	padding: 2.5rem;
	color: white;
}

footer > .left { order: 1; }
footer > .right { order: 2; }

footer > .left { flex-wrap: wrap; display: flex; align-content: space-between; width: 60%; }
footer > .right { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: center; border-top: white 1px solid; border-bottom: 1px solid white; padding: 1.5rem 2rem; }

footer > .left > div { width: 100%; display: flex; flex-wrap: wrap;}
footer > .left > div > img
{
	width: 160px;
	margin-right: 1rem;
}
footer nav a { color: white; }
footer nav
{
	display: block;
	width: 32em;
	font-size: 0.8rem;
	line-height: 1;
}
footer nav > span:after
{
	content: "　/　";
}
footer nav > span:last-child:after
{
	content: "";
}

footer .address
{
	width: 100%;
	font-size: 0.75rem;
}
footer .address > a,
footer .address > span
{
	width: 32px;
}

#copyright
{
	text-align: center;
	font-size: 0.7rem;
}

footer > .right > p { line-height: 1; font-size: 0.75rem; }
footer > .left > p { line-height: 0.8rem; font-size: 0.75rem; }
#telnum { font-size: 2.4rem; line-height: 1; margin-bottom: 0.5rem; }
#telnum_sm { display: none; }


main
{
	padding-top: 64px;
}

main.secondpage
{
	background-image: url("../images/hero_index_01.jpg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	
	position: relative;
}

main.secondpage.cases { background-image: url("../images/hero_index_01.jpg"); }
main.secondpage.service { background-image: url("../images/hero_index_01.jpg"); }

#herovisual
{
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 43.75%;
	background: url("../images/hero_index_01.jpg");
	background-size: cover;
	background-position: center left;
}
#herovisual h1
{
	position: absolute;
	font-size: 2.5rem;
	line-height: 1.8;
	height: 40%;
	max-height: 9rem;
	top: 0;
	bottom: 0;
	left: 1em;
	margin: auto;
	color: white;
	font-weight: normal;
}
#herovisual h1 > img
{
	display: block;
	height: 100%;
	max-height: 9rem;
	width: auto;
}

#second_hero
{
	padding: 3em 0;
	font-weight: normal;
	text-align: center;
	color: white;
	
	text-indent: 0.2em;
	letter-spacing: 0.2em;
}


section
{
	width: 100%;
	margin: 0 auto;
	padding: 6rem 0;
}

.secondpage h1 {
color: white;
}
.secondpage > section,
.secondpage > article
{
	max-width: 1200px;
	background: white;
}
.secondpage > section.full
{
	max-width: initial;
}
.secondpage > section.message
{
	background-image: url(../images/img_message.jpg);
	background-size: cover;
	background-position: center center;
}
.secondpage > section.workflow { padding-bottom: 0; }
.secondpage > section.workflow > div { position: relative;}
.secondpage > section.workflow > div > div { padding: 2.5rem 0 3.5rem; position: relative; }
.secondpage > section.workflow > div > div:after
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4.8rem;
	width: 0;
	height: 0;
	border-top: 2.5rem solid black;
	border-bottom: 2.5rem solid transparent;
	border-left: 2.5rem solid transparent;
	border-right: 2.5rem solid transparent;
	content: " ";
	margin: auto;
	z-index: 1000;
}
.secondpage > section.workflow > div > div:nth-of-type(1) { background: #ebf6f9;}
.secondpage > section.workflow > div > div:nth-of-type(1):after { border-top-color: #ebf6f9;}
.secondpage > section.workflow > div > div:nth-of-type(2) { background: #ceeaf0;}
.secondpage > section.workflow > div > div:nth-of-type(2):after { border-top-color: #ceeaf0;}
.secondpage > section.workflow > div > div:nth-of-type(3) { background: #9cd4e1;}
.secondpage > section.workflow > div > div:nth-of-type(3):after { border-top-color: #9cd4e1;}
.secondpage > section.workflow > div > div:nth-of-type(4) { background: #6bbfd3;}
.secondpage > section.workflow > div > div:nth-of-type(4):after { border-top-color: #6bbfd3;}
.secondpage > section.workflow > div > div:nth-of-type(5) { background: #39a9c4;}
.secondpage > section.workflow > div > div:nth-of-type(5):after { display: none; content: ""; }

.secondpage > section.workflow > div > div > h3,
.secondpage > section.workflow > div > div > p { position: relative; max-width: 1000px; padding-right: 25%;}

.secondpage > section.workflow > div > .images
{
	position: absolute;
	top: 0; bottom: 0; right: 10%;
	width: 20%;
	height: 600px;
	padding: 0;
	z-index: 1500;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
}
.secondpage > section.workflow > div > .images > img { display: block; width: 100%; margin: 0; box-shadow: rgba(255,255,255,.5) 12px 12px 0; }
.secondpage > section.workflow > div > .images > img:nth-of-type(1) { transform: rotate(10deg); margin: 0; }
.secondpage > section.workflow > div > .images > img:nth-of-type(2) { transform: rotate(-10deg); margin: 0; }
.secondpage > section.workflow > div > .images > img:nth-of-type(3) { transform: rotate(0); margin: 0; }
.secondpage > section.workflow > div > .images:after
{
	display: none;
}


.separate
{
	display: flex;
	padding: 0;
}
.separate > div
{
	width: 50%;
	padding: 6rem 0;
}
.separate > .left { order: 1; }
.separate > .right { order: 2; }
.separate.left-20 > .left { width: 20%; }
.separate.left-30 > .left { width: 30%; }
.separate.left-40 > .left { width: 40%; }
.separate.left-60 > .left { width: 60%; }
.separate.left-70 > .left { width: 70%; }
.separate.left-80 > .left { width: 80%; }
.separate.left-20 > .right { width: 80%; }
.separate.left-30 > .right { width: 70%; }
.separate.left-40 > .right { width: 60%; }
.separate.left-60 > .right { width: 40%; }
.separate.left-70 > .right { width: 30%; }
.separate.left-80 > .right { width: 20%; }

.separate > div.bg-recruit-1 { background-image: url(../images/img_recruit.jpg); background-size: cover; background-position: center center;}



.topicPath,
section h2,
section h3,
section h4,
section .half_grid,
section .items_grid,
section .wrap_service,
section p,
section dl,
section table,
section form,
article.cases
{
	width: 90%;
	max-width: 1080px;
	margin: 0 auto;
}
section .wide
{
	width: 96%;
	max-width: 1080px;
}

section h2
{
	color: #888;
	text-align: center;
	line-height: 1.6;
	font-weight: 300;
	padding-bottom: 2rem;
}
section h2 span
{
	display: block;
	font-size: 1rem;
	padding-bottom: 4rem;
	border-bottom: 1px solid #ccc;
}
section h2.no-border span
{
	border-bottom-color: transparent;
	padding-bottom: 2rem;
}

section h3
{
	line-height: 2;
	padding: 1rem 0;
}
section h3 span
{
	display: inline-block;
}

section .half_grid,
section .items_grid
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	flex: 0 1 30%;
}
section .items_grid.cases { display: none; }
section .items_grid.cases.on { display: flex; }

section .half_grid > .left,
section .half_grid > .right
{
	width: 40%;
}
section .half_grid > .left { order: 1; }
section .half_grid > .right { order: 2; }
section .half_grid > .left > img,
section .half_grid > .right > img
{
	display: block;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

section .items_grid .item
{
	width: 30%;
	margin-bottom: 2rem;
}
section .items_grid.spacer .item
{
	width: 20%;
	color: #000;
}
section .items_grid:after
{
	content: " ";
	width: 23%;
	display: block;
}

section .items_grid .item > img,
section .items_grid .item > span
{
	display: block;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

section.message h2,
section.message p { color: #222; }
section h2 span{ border-bottom: 1px solid #222; }


section .wrap_service h4,
section .wrap_service p
{
	width: 100%;
	max-width: auto;
}
section .wrap_service h4
{
	padding: 0.5rem 2rem;
	font-weight: normal;
	border: 1px solid #666;
	border-radius: 2rem;
	margin-bottom: 3rem;
}
/*
section .wrap_service > div
{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
section .wrap_service > div > div { order: 2; width: 72.5%; }
section .wrap_service > div > img { order: 1; width: 22.5%; display: block;}
*/
section .wrap_service > div > .qanda { padding: 0 8rem; position: relative; }

section .wrap_service > div > .qanda:before,
section .wrap_service > div > .qanda:after
{
	content: " ";
	display: block;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	position: absolute;
	background-position: center center;
	background-size: 75%;
	background-repeat: no-repeat;
}
section .wrap_service > div > .qanda:before { background-color: orangered; top: 0; left: 0; background-image: url(../images/services/question.svg); }
section .wrap_service > div > .qanda:after { background-color: royalblue; bottom: 0; right: 0; background-image: url(../images/services/answer.svg); }

section .wrap_service > div > div > .title,
section .wrap_service > div > div > .answer
{
	position: relative;
	font-size: 1.3rem;
	padding: 1rem 2rem;
	border-radius: 1.5rem;
	max-width: fit-content;
}
section .wrap_service > div > div > .title { color: orangered; background: rgb(255, 237, 187); margin-left: 0;}
section .wrap_service > div > div > .answer { color: royalblue; background: rgb(218, 243, 255); margin-right: 0;}


section .wrap_service > div > div > .title:after,
section .wrap_service > div > div > .answer:after
{
	display: block;
	content: " ";
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	
	width: 0;
	height: 0;
	border: 12px solid transparent;
	z-index: 50;
}
section .wrap_service > div > div > .title:after { left: -24px; border-right: 12px solid rgb(255, 237, 187); }
section .wrap_service > div > div > .answer:after { right: -24px; border-left: 12px solid rgb(218, 243, 255); }


section .buttons_cases
{
	margin-bottom: 3rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

section .table_company,
section .table_company tbody,
section .table_company thead,
section .table_company tr,
section .table_company td,
section .table_company th
{
	border: none;
	font-size: 1rem;
}
section .table_company tr
{
	border-bottom: 1px solid white;
}
section .table_company th
{
	color: white;
	background: #F15A24;
	padding: 0.5rem 1.5rem;
	text-align: center;
	width: 8em;
}
section .table_company td
{
	padding: 0.5rem 1.5rem;
	background: white;
}

section .contact_tell strong
{
	font-size: 1.6rem;
	color: orangered;
	line-height: 1;
}


section form ul,
section form ul li
{
	right: 0;
	text-indent: 0;
}
section form ul li::before
{
	content: "";
}
section form label > span
{
	font-size: 0.8rem;
}
section form label.hissu::after
{
	content: "*必須";
	font-size: 0.8rem;
	margin-left: 0.5em;
	color: red;
}
section form label.hissu.en::after
{
	content: "(Required)";
}

section form input,
section form textarea
{
	width: 100% !important;
	border: 1px solid #ccc;
	margin-bottom: 1rem;
    max-width: inherit !important;
}
section form textarea
{
	height: 9em !important;
}

	

/* 事業内容　*/
	
.service_col {
    width: 40%;
    padding: 1em;
    margin-left: 3%;
}

.service_col .col1 {
 	min-height: 5em;
}
.service_col .col1 p {
	font-size: 85%;
}
	
.services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /*4列 */
  gap: 0.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.services dt,
.services dd {
  margin: 0;
  padding: 0;
}

.services dt a {
  display: block;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  color: #111;
}

.services dt img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 0.5rem;
  border-radius: 6px;
}

.services dd {
  line-height: 1.4;
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 1rem;
  padding: 1rem;
  font-weight: bold;
}

.services dd h3 {
  line-height: 1.4;
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 1rem;
  padding: 1rem;
  font-weight: bold;
}

.services dd p {
  padding: 1rem 0 0 0;
  font-weight: normal;
}


/*********************************************************
 メディアクエリ
**********************************************************/

/* PC・タブレット表示（横1199px以下） */
@media screen and (max-width: 1199px)
{
	#pc_menu > a,
	#pc_menu > span
	{
		padding: 20px 1rem;
	}
	
	.secondpage > section,
	.secondpage > article
	{
		max-width: 900px;
	}
	

}

/* PC・タブレット表示（横999px以下） */
@media screen and (max-width: 999px)
{
	#logo
	{
		margin-left: 1.2rem;
	}
	#pc_menu
	{
		padding-right: 0.5rem;
	}
	


/* PC・タブレット表示（横899px以下） */
@media screen and (max-width: 899px)
{
	
}

/* タブレット・スマートフォン表示（横799px以下） */
@media screen and (max-width: 799px)
{
	#pc_menu { display: none; }
	#sm_menu.opened { display: flex; }
	
	
	#wrap_toggle
	{
		display: flex;
		width: 64px;
		justify-content: flex-end;
		
		transition: all 0.3s;
		position: relative;
	}
	/* #wrap_toggle.opened {  } */
	
	#wrap_toggle #toggle
	{
		display: block;
		width: 48px;
		height: 48px;
		margin: auto;
		position: relative;
		cursor: pointer;
	}
	#wrap_toggle #toggle:before
	{
		display: block;
		content: "MENU";
		width: 100%;
		height: 1em;
		font-size: 0.9rem;
		line-height: 1;
		position: absolute;
		bottom: 0;
		left: 0;
		
		text-align: center;
		color: #999;
	}
	#wrap_toggle #toggle:hover:before { color: #ccc; }
	#wrap_toggle #toggle span
	{
		position: absolute;
		display: block;
		width: 32px;
		height: 2px;
		border-radius: 1.5px;
		margin: auto;
		left: 0; 
		right: 0;
		top: 18px;
		background: #666;
		
		transition: all 0.3s;
	}
	#wrap_toggle #toggle span:nth-of-type(2) { transform: translateY(-9px); }
	#wrap_toggle #toggle span:nth-of-type(3) { transform: translateY(9px); }
	
	#wrap_toggle #toggle:hover span { background: #999; }
	#wrap_toggle #toggle:hover span:nth-of-type(2) { transform: translateY(-12px); }
	#wrap_toggle #toggle:hover span:nth-of-type(3) { transform: translateY(12px); }
	header.scrolled #wrap_toggle #toggle:hover span:nth-of-type(2) { transform: translateY(-12px); }
	header.scrolled #wrap_toggle #toggle:hover span:nth-of-type(3) { transform: translateY(12px); }
	
	#wrap_toggle.opened #toggle span:nth-child(1) { background: transparent; transform: rotate(180deg); }
	#wrap_toggle.opened #toggle span:nth-child(2),
	header.scrolled #wrap_toggle.opened #toggle span:nth-of-type(2) { transform: rotate(225deg) translateY(0px); }
	#wrap_toggle.opened #toggle span:nth-child(3),
	header.scrolled #wrap_toggle.opened #toggle span:nth-of-type(3) { transform: rotate(-225deg) translateY(0px); }
	
	
	footer { display: block; border-top: 1px solid #F15A24; background: white; padding: 0;}
	footer > .left { width: 100%; background: #F15A24; padding: 3rem 2rem 3rem; }
	footer > .left > div > img { margin: 0 auto 2rem; }
	footer > .left > div > nav { display: none; }
	footer .globals { display: none; }
	#copyright { margin: 0 auto; line-height: 1; }
	footer > .right { width: 100%; color: #F15A24; padding: 2.5rem 0;}
	footer > .right > p { margin: 0 auto; text-align: center; border-bottom: 3px solid #F15A24;}
	#telnum_sm { display: inline; font-size: 3rem; line-height: 1; margin-bottom: 0.5rem; text-decoration: none; color: #F15A24; }
	#telnum, .button.mail { display: none; }
	
	
	#herovisual
	{
		padding-top: 100%;
	}
	#herovisual h1
	{
		height: auto;
		width: 75%;
		left: 0.5em;
	}
	#herovisual h1 > img
	{
		height: auto;
		width: 100%;
		max-width: 480px;
		max-height: initial;
		margin: 0;
	}
	
	main.secondpage
	{
		background: none;
	}
	#second_hero
	{
		font-size: 2.4rem;
		padding: 2.5em 0;
		background-image: url("../images/hero_index_01.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	main.secondpage.cases > #second_hero { background-image: url("../images/hero_cases.jpg"); }
	main.secondpage.cases > #second_hero { background-image: url("../images/hero_service.jpg"); }
	
	
	section h2,
	section h3
	{
		text-align: center;
	}
	
	
	
	.separate { display: block; padding: 3rem 0; }
	.separate.recruit { padding-bottom: 0; }
	
	.separate > div, 
	.separate.left-20 > .left, 
	.separate.left-30 > .left, 
	.separate.left-40 > .left, 
	.separate.left-60 > .left, 
	.separate.left-70 > .left, 
	.separate.left-80 > .left, 
	.separate.left-20 > .right, 
	.separate.left-30 > .right, 
	.separate.left-40 > .right, 
	.separate.left-60 > .right, 
	.separate.left-70 > .right, 
	.separate.left-80 > .right
	{
		width: 100%;
		margin: 0 auto;
		padding: 3rem 0;
	}
	
	.separate > div.bg-recruit-1 
	{
		width: 100%;
		height: 0;
		padding-top: 60%;
	}
	
	
	section .half_grid,
	section .items_grid
	{
		flex-wrap: wrap;
		justify-content: center;
	}
	section .half_grid > .left,
	section .half_grid > .right,
	section .items_grid .item,
	section .items_grid.spacer .item
	{
		width: 80%;
		margin-bottom: 3rem;
		max-width: 400px;
	}
	section .items_grid:after
	{
		display: none;
	}
	
	section .wrap_service > div
	{
		display: block;
	}
	section .wrap_service > div > img,
	section .wrap_service > div > div
	{
		width: 100%;
	}
	section .wrap_service > div > img
	{
		max-width: 240px;
		margin-bottom: 1rem;
	}
	
	
	section .table_company,
	section .table_company tbody,
	section .table_company thead,
	section .table_company tr,
	section .table_company td,
	section .table_company th
	{
		display: block;
	}
	section .table_company tr
	{
		border: none;
	}
	section .table_company th
	{
		width: 100%;
		background: none;
		color: #F15A24;
		border-bottom: #F15A24 1px solid;
		font-weight: bold;
		text-align: left;
		padding: 0;
	}
	section .table_company td
	{
		margin-bottom: 4px;
	}
	
	
	a.button.cases
	{
		width: 75%;
		min-width: 256px;
		margin: 0 0 1rem;
	}
	a.button.cases:before
	{
		content: "> ";
	}