@charset "UTF-8";
/* CSS Document */

/*======================================

1: body
2: header
3: common
4: footer
5: #pagetop
6: .clearfix

=======================================*/

/* pc */
@media only screen and (min-width:768px) {



	/* ---------------------------------------------------------
	1:body
	----------------------------------------------------------*/
	body {
		color: #131313;
		font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-size: 13px;
		line-height: 1.5;
		min-width: 960px;
		width: 100%;
		background-color: #fff;
		height: 5000px;
		overflow: hidden;
	}

	img { vertical-align: top;}

	a {	color: #131313; text-decoration: none;}

	.sp { display: none !important;}


	#anime-wrapper {
		position: fixed;
		width: 100%;
		height: 100%;
	}

	#bar-red {
		position: fixed;
		width: 100%;
		height: 4px;
		top: 0;
		background-color: #d00235;
		z-index: 3;
		display: none;
	}

	#anime-bottom {
		position: absolute;
		width: 100%;
		top: 1200px;
	}


	/* ---------------------------------------------------------
	2:header
	----------------------------------------------------------*/
	header {
		position: fixed;
		width: 100%;
		height: 85px;
		background-color: #fff;
		border-top: 4px solid #d00235;
		z-index: 3;
	}

	header .btn-sdgs,
	header .btn-newgrad,
	header .btn-baito,
	header .btn-erecruit,
	header .btn-english {
		position: absolute;
		top: 14px;
		right: 35px;
		text-align: center;
		background-color: #000;
		z-index: 3;
	}
	header .btn-sdgs a,
	header .btn-newgrad a,
	header .btn-baito a,
	header .btn-erecruit a,
	header .btn-english a {
		display: block;
		width: 90px;
		height: 22px;
		font-size: 12px;
		color: #fff;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 2px 0 0;
	}
	header .btn-sdgs a:hover,
	header .btn-newgrad a:hover,
	header .btn-baito a:hover,
	header .btn-erecruit a:hover,
	header .btn-english a:hover {
		background-color: #9e9e9e;
	}
	header .btn-sdgs {
		font-family: minmoji;
		right: 404px;
  }
  header .btn-newgrad {
		font-family: minmoji;
		right: 312px;
  }
	
	header .btn-erecruit {
		font-family: minmoji;
		right: 219px;
	}
	header .btn-baito {
		font-family: minmoji;
		right: 127px;
	}
	header .btn-english {
		font-family: "Times New Roman", Times, serif;
	}
	header nav {
		position: relative;
		width: 100%;
		padding-top: 37px;
		z-index: 2;
	}
	header nav ul {
		position: absolute;
		right: 35px;
	}
	header nav li {
		font-family: minmoji;
		font-size: 13px;
		float: left;
		line-height: 1;
		background: url(../img/common/nav_border.png) no-repeat left 20px;
	}
	header nav li a {
		display: block;
		padding: 8px 0;
	}

	header nav li.cr a,
	header nav li a:hover {
		color: #d00235;
		border-bottom: 1px solid #d00235;
	}
	header nav li:nth-child(2) a:hover img {
		padding-bottom: 5px;
		border-bottom: 1px solid #d00235;
	}
	header nav li:first-child {
		background: none;
		padding: 8px 17px;
	}
	header nav li:first-child { background: none;}
	header nav li:nth-child(2) {	padding: 8px 16px 8px 18px;}
	header nav li:nth-child(3) {	padding: 8px 16px 8px 19px;}
	header nav li:nth-child(4) {	padding: 8px 15px 8px 16px;}
	header nav li:nth-child(5) {	padding: 8px 14px 8px 15px;}
	header nav li:nth-child(6) {	padding: 8px 0 8px 14px;}

	header {
		position: absolute;
		top: 0;
		z-index: 10;
	}

	h1 {
		position: absolute;
		top: 0;
		left: 50%;
		width: 429px;
/*		margin-left: -555px;*/
		margin-left: -432px;
	}
	.tagline {
		position: absolute;
		top: 146px;
		left: 50%;
		width: 425px;
/*		margin-left: -104px;*/
		margin-left: 19px;
		z-index: 2;
	}
	h1 .small,
	.tagline .small { display: none;}
	h1.small .big,
	.tagline.small .big { display: none; top: 0;}
	h1.small .small,
	.tagline.small .small{ display: block;}
	h1 img,
	header .tagline img { width: 100%; height: auto; -ms-interpolation-mode: bicubic;}

	article {
		width: 100%;
		margin: 4px auto 0;
		border-top: 4px solid #d00235;
	}
	#contents {
		background-color: #f5f5f5;
	}

	#anime-inner {
		position: absolute;
		width: 100%;
		height: 600px;
		top: 259px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		overflow: hidden;
	}
	#anime-inner .txt-first {
		position: absolute;
		left: 50%;
		top: 94px;
		margin-left: -459px;
	}
	.icon-scroll {
		position: absolute;
		bottom: 28px;
		left: 50%;
		margin: 0 0 0 -25px;
	}

	.icon-current {
		position: absolute;
		bottom: 19px;
		left: 50%;
		width: 50px;
		height: 12px;
		margin-left: -614px;
		margin-left: -487px;
		z-index: 3;
		overflow: hidden;
	}
	.icon-current div {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}
	.icon-current div:first-child { display: block;}

	#red-block {
		position: relative;
	}
	#red-block .txt {
		font-family: minmoji;
		font-size: 18px;
		color: #fff;
		opacity: 0;
		display: none;
	}
	#red-block .txt .big {
		font-size: 33px;
	}
	#red-block .btn {
		padding-top: 20px;
		opacity: 0;
		display: none;
	}
	#red-block .btn a {
		display: block;
		width: 256px;
		height: 52px;
		font-size: 16px;
		color: #fff;
		line-height: 1;
		background: url(../img/top/icon_red_arrow.png) no-repeat 232px center;
		background-size: 6px auto;
		text-align: center;
		padding-top: 16px;
		border: 2px solid #fff;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.bg-red {
		position: relative;
		width: 55%;
		height: 100%;
		background: url(../img/top/bg_red.png) no-repeat right top;
		background-size: cover;
		z-index:2;
	}

	.txt-red0,
	.pic-red0 { display: none;}

	.txt-red1,
	.txt-red2,
	.txt-red3 {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -610px;
		margin-left: -487px;
		z-index: 3;
	}

	.pic-red1,
	.pic-red2,
	.pic-red3 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.pic-red1 .bg,
	.pic-red2 .bg,
	.pic-red3 .bg {
		width: 100%;
		height: 100%;
		background: url(../img/top/pic_red_01.jpg) no-repeat right top;
		background-size: cover;
	}
	.pic-red2,
	.pic-red3 {
		display: none;
	}
	.pic-red2 .bg {
		background: url(../img/top/pic_red_02.jpg) no-repeat right top;
		background-size: cover;
	}
	.pic-red3 .bg {
		background: url(../img/top/pic_red_03.jpg) no-repeat right top;
		background-size: cover;
	}


	/* ---------------------------------------------------------
	1:#main
	----------------------------------------------------------*/
	#main {
		position: relative;
		width: 100%;
		height: 600px;
		background: url(../img/top/bg_first.jpg) no-repeat 48% top;
		background-size: cover;
		overflow: hidden;
		z-index: 2;
	}
	#main.ie9 {
		width: 100%;
		height: 330px;
		background: url(../img/top/bg_cookie.jpg) no-repeat center top;
	}
	#main h2 {
		line-height: 1;
	}
	#main .slide {
		position: absolute;
		width: 100%;
		top: 0;
		height: 600px;
		overflow: hidden;
		display: none;

		top: 200px;
	}
	#main .slide:first-child {
		display: block;
	}
	#main .slide .pic {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 600px;
	}
	#main .slide .pic img { width: 100%; height: auto; min-width: 1150px;}
	#main .txt {
		position: relative;
		background-color: rgba(255,255,255,0.72);
		margin-top: 218px;
		height: 262px;
		margin-top: 400px;
	}
	#main .slide h2 {
		position: absolute;
		top: 28px;
		left: 50%;
		margin-left: -477px;
	}
	#main .slide:nth-child(2) h2 { margin-left: -468px;}
	#main .slide:nth-child(3) h2 { margin-left: -478px;}
	#main .slide:nth-child(4) h2 { margin-left: -478px;}
	#main .slide p {
		position: absolute;
		top: 128px;
		left: 50%;
		margin-left: -471px;
	}
	#main .btn-detail {
		position: absolute;
		bottom: 28px;
		left: 50%;
		z-index: 2;
		margin-left: -108px;
	}

	/* ---------------------------------------------------------
	2:#subnav
	----------------------------------------------------------*/
	#subnav {
		position: relative;
		width: 100%;
		height: 155px;
		background-color: #d00235;
		z-index: 2;
	}
	#subnav .block-box {
		width: 942px;
		margin: 0 auto;
		padding: 15px 0 14px;
	}
	#subnav .block {
		float: left;
		margin-left: 10px;
		cursor: pointer;
	}
	#subnav .block:first-child { margin: 0;}
	#subnav .block p {
		text-align: center;
		line-height: 1;
		padding-top: 13px;
	}
	#subnav .pic {
		background-color: #000;
	}
	#subnav .pic img { opacity: 0.6;}
	#subnav .cr .pic img { opacity: 1;}


	#contents h2 {
		font-size: 25px;
	}
	#contents h2 .eng-txt {
		font-family: "Times New Roman", Times, serif;
		display: block;
		font-size: 13px;
		color: #d00235;
	}
	#msg h2 { letter-spacing: 0;}
	#msg .eng-txt { letter-spacing: 0.08em;}


	/* ---------------------------------------------------------
	3:#supply
	----------------------------------------------------------*/
	#bg-supply {
		width: 100%;
		background-color: #fbfbfb;
	}
	#supply {
		max-width: 1200px;
		margin: 0 auto;
	}
	#supply a {
		width: 100%;
		display: table;
	}

	#msg,#voice { background-color: #fbfbfb;}

	#supply .pic,
	#corporate .pic,
	#msg .pic,
	#voice .pic,
	#newgrad .pic,
	#recruit .pic,
	#corporate-top .pic {
		position: relative;
		display: table-cell;
		width: 50%;
		vertical-align: top;
		overflow: hidden;
	}
	#supply .pic img,
	#corporate .pic img,
	#msg .pic img,
	#voice .pic img,
	#newgrad .pic img,
	#recruit .pic img,
	#corporate-top .pic img { width: 100%; height: auto;}

	#supply .pic .tri,
	#corporate .pic .tri,
	#msg .pic .tri,
	#voice .pic .tri,
	#newgrad .pic .tri,
	#recruit .pic .tri,
	#corporate-top .pic .tri {
		position: absolute;
		display: block;
		width: 20px;
		height: 35px;
		top: 50%;
		right: 0;
		margin-top: -17px;
		background: url(../img/top/icon_tri_white.png) no-repeat right center;
		background-size: 20px 35px;
		z-index: 2;
	}
	#supply .pic .tri {
		background: url(../img/top/icon_tri_gray.png) no-repeat right center;
		background-size: 20px 35px;
	}
	#voice .pic .tri,
	#corporate-top .pic .tri {
		right: inherit;
		left: 0;
		background: url(../img/top/icon_tri_white_02.png) no-repeat right center;
		margin-left: -1px;
	}

	#supply .txt,
	#corporate .txt,
	#msg .txt,
	#voice .txt,
	#recruit .txt,
	#newgrad .txt,
	#corporate-top .txt {
		display: table-cell;
		width: 50%;
		padding-top: 52px;
	}
	#supply h2 {
		width: 505px;
		width: 85%;
		font-size: 37px;
		border-bottom: 1px solid #ebebeb;
		padding-bottom: 23px;
		margin: 0 auto 28px;
	}
	#supply .eng-txt { font-size: 15px;}
	#supply p {
		width: 505px;
		width: 85%;
		font-size: 18px;
		line-height: 1.56;
		margin: 0 auto;
	}

	/* ---------------------------------------------------------
	4:#corporate,#msg,#voice,#recruit
	----------------------------------------------------------*/
	#col2 {
		max-width: 1200px;
		background-color: #fff;
		margin: 0 auto;
	}
	#corporate a,
	#voice a,
	#newgrad a,
	#recruit a {
		float: left;
		display: table;
		width: 50%;
	}
	#msg a,
	#corporate-top a {
		float: right;
		display: table;
		width: 50%;
	}
	#corporate .txt,
	#msg .txt,
	#voice .txt,
	#newgrad .txt,
	#recruit .txt,
	#corporate-top .txt {
		padding-top: 47px;
	}
	#corporate h2,
	#msg h2,
	#voice h2,
	#newgrad h2,
	#recruit h2,
	#corporate-top h2  {
		width: 79%;
		border-bottom: 1px solid #ebebeb;
		padding-bottom: 27px;
		margin: 0 auto 28px;
	}
	#corporate p,
	#msg p,
	#voice p,
	#newgrad p,
	#recruit p,
	#corporate-top p {
		width: 233px;
		width: 79%;
		font-size: 15px;
		line-height: 1.67;
		margin: 0 auto;
	}

  #sdgs-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #f5f5f5;
  }
  #sdgs-wrapper section {
    width: 50%;
  }
  #sdgs-wrapper section a {
    width: 100%;
    background-color: #FFF;
  }

	/* ---------------------------------------------------------
	5:#closeup
	----------------------------------------------------------*/
	#closeup {
		position: relative;
		clear: both;
		width: 100%;
		background-color: #ececec;
		padding-bottom: 80px;
	}
	#closeup .inner {
		max-width: 1200px;
		background: url(../img/top/closeup_bg.png) no-repeat 128px top;
		margin:  0 auto;
	}
	#closeup h2 {
		text-align: center;
		padding: 65px 0 45px;
	}
	#closeup .wrapper {
		width: 942px;
		margin: 0 auto;
	}
	#closeup .left-col {
		float: left;
		position: relative;
		width: 456px;
	}
	#closeup .right-col {
		float: right;
		position: relative;
		width: 456px;
	}
	#closeup .pic {
		position: absolute;
		top: 0;
		width: 456px;
	}
	#closeup .pic img { width: 100%; height: auto;}
	#closeup .txt {
		position: relative;
		width: 372px;
		margin: 140px auto 0;
		color: #fff;
		background-color: rgba(0,0,0,0.68);
		padding: 23px 22px 25px;
	}
	#closeup h3 {
		font-size: 26px;
		font-weight: normal;
		line-height: 1.2;
		background: url(../img/common/icon_arrow_red.png) no-repeat left 8px;
		background-size: 9px 13px;
		margin-bottom: 33px;
		padding-left: 22px;
	}
	#closeup p {
		font-size: 14px;
	}
	#closeup .btn-list a {
		position: absolute;
		left: 50%;
		top: 66px;
		line-height: 1;
		display: block;
		width: 160px;
		text-align: center;
		background: url(../img/common/icon_arrow_black.png) no-repeat 137px 12px;
		padding: 11px 0 13px;
		background-size: 7px 12px;
		border: 2px solid #3a3a3a;
		margin-left: 311px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#closeup .btn-list a:hover {
		background-color: #9e9e9e;
		border-color: #9e9e9e;
	}

	/* ---------------------------------------------------------
	6:#info
	----------------------------------------------------------*/
	#info {
		position: relative;
		width: 100%;
		border-top: 1px solid #ececec;
	}
	#info h2 {
		font-size: 32px;
		color: #fff;
	}
	#info .eng-txt {
		font-family: "Times New Roman", Times, serif;
		display: block;
		font-size: 15px;
		color: #d4d4d4;
	}
	#info .bg-gray {
		position: absolute;
		left: 0;
		width: 30%;
		height: 100%;
		background-color: #8e8e8e;
		z-index: -1;
	}
	#info .inner {
		display: table;
		max-width: 1200px;
		margin: 0 auto;
	}
	#info .left-col {
		display: table-cell;
		width: 30.6%;
		background-color: #8e8e8e;
		text-align: center;
		padding: 82px 0 92px;
		vertical-align: middle;
	}
	#info .right-col {
		display: table-cell;
		width: 69.4%;
		vertical-align: middle;
		padding: 20px 0;
	}
	#info .btn-list a {
		font-family: minmoji;
		font-size: 14px;
		color: #fff;
		line-height: 1;
		display: block;
		width: 158px;
		text-align: center;
		background: url(../img/common/icon_arrow_white.png) no-repeat 137px 12px;
		padding: 11px 0 13px;
		background-size: 7px 12px;
		border: 2px solid #fff;
		margin: 56px auto 0;
	}
	#info .btn-list a:hover {
		background-color: #9e9e9e;
		border-color: #9e9e9e;
	}
	#info dl {
		width: 100%;
		padding: 20px 0 0 50px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#info dt {
		clear: left;
		float: left;
		width: 280px;
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 20px;
	}
	#info dt .date {
		display: inline-block;
		width: 140px;
		letter-spacing: 0;
	}
	#info .icon {
		font-family: minmoji;
		display: inline-block;
		width: 99px;
		height: 25px;
		font-size: 13px;
		line-height: 2;
		background-color: #f0f0f0;
		margin: 0 0 0 15px;
		text-align: center;
	}
	#info dd {
		float: left;
		width: 500px;
		font-size: 16px;
		margin-bottom: 20px;
	}
	#info dd a {
		display: block;
		background: url(../img/common/icon_arrow_red.png) no-repeat left 5px;
		background-size: 9px 13px;
		padding-left: 22px;
	}
	#info dd a:hover {
		text-decoration: underline;
	}

	/* ---------------------------------------------------------
	4:#contact
	----------------------------------------------------------*/
	#contact {
		text-align: center;
		padding-bottom: 53px;
		box-shadow: 0 -6px #d00235;
		background: url(../img/common/bg_contact.png) repeat-x top;
		background-color: #fff;
		border-bottom: 4px solid #fff;
		margin-top: 6px;
	}
	#contact h2 {
		font-family: minmoji;
		font-size: 30px;
		color: #131313;
		line-height: 1;
		padding: 44px 0 8px;
	}
	#contact .eng-contact {
		font-family: "Times New Roman", Times, serif;
		font-size: 14px;
		line-height: 1;
		color: #d00235;
		margin-bottom: 18px;
	}
	#contact .txt {
		font-family: minmoji;
		font-size: 16px;
		color: #686868;
		line-height: 1;
	}
	#contact .wrapper {
		width: 942px;
		margin: 32px auto 0;
	}
	#contact .left-col {
		float: left;
		width: 456px;
		height: 140px;
		background-color: #f7f7f7;
	}
	#contact .right-col {
		float: right;
		width: 456px;
		height: 140px;
		background-color: #f7f7f7;
	}
	#contact .left-col p {
		font-family: minmoji;
		font-size: 14px;
		line-height: 1;
	}
	#contact .left-col p.txt-tel1 {
		color: #131313;
		text-align: left;
		background: url(../img/common/icon_contact_tel.png) no-repeat 116px 8px;
		background-size: 24px auto;
		padding: 17px 0 14px 159px;
	}
	#contact .left-col .num {
		font-family: minmoji;
		display: inline-block;
		font-size: 46px;
		line-height: 1;
		color: #d00235;
		padding-bottom: 10px;
		border-bottom: 1px solid #d00235;
	}
	#contact .left-col p.txt-tel2 {
		text-align: center;
		color: #d00235;
		padding-top: 7px;
	}
	#contact .right-col p {
		font-family: minmoji;
		font-size: 14px;
		line-height: 1;
		text-align: left;
		background: url(../img/common/icon_contact_mail.png) no-repeat 111px 16px;
		background-size: 27px auto;
		padding: 18px 0 18px 161px;
	}
	#contact .btn {
		padding-left: 64px;
	}
	#contact .btn a {
		font-family: minmoji;
		display: block;
		width: 336px;
		height: 61px;
		font-size: 16px;
		text-align: center;
		line-height: 1;
		color: #fff;
		background: url(../img/common/icon_contact_arrow.png) no-repeat 313px 26px;
		background-color: #d00235;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 22px 0 0 0;
	}
	#contact .btn a:hover {
		background-color: #9e9e9e;
	}

	/* ---------------------------------------------------------
	5:footer
	----------------------------------------------------------*/
	footer {
		position: relative;
		height: 70px;
		background-color: #d00235;
		border-top: 4px solid #fff;
	}
	footer:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	footer { min-height: 1px; }
	footer #pagetop {
		text-align: center;
		margin-top: -26px;
	}
	footer ul {
		float: left;
		padding: 8px 0 0 28px;
	}
	footer li {
		float: left;
		list-style: none;
		margin-right: 51px;
	}
	footer li a {
		color: #fff;
		background: url(../img/common/icon_arrow_white.png) no-repeat left 2px;
		padding-left: 17px;
		background-size: 5px 8px;
	}
	footer li a:hover {
		text-decoration: underline;
	}
	footer address {
		font-family: "Times New Roman", Times, serif;
		float: right;
		text-align: right;
		color: #fff;
		font-style: normal;
		padding: 8px 35px 0 0;
	}
}


@media only screen and (min-width:960px) and (max-width:1024px) {
	#contents h2 {
		font-size: 20px;
	}
	#corporate .txt, #msg .txt, #voice .txt, #recruit .txt,	#newgrad .txt {
		padding-top: 25px;
	}
	#corporate h2, #msg h2, #voice h2, #recruit h2,	#newgrad h2 {
		padding-bottom: 15px;
		margin-bottom: 15px;
	}
}

/* tablet */
@media only screen and (min-width:768px) and (max-width:1024px){

	body {
		width: 1172px;
		height: auto;
		overflow: auto;
	}

	header {
		position: absolute;
		top: 0;
		width: 100%;
		min-width: 1073px;
		height: 85px;
	}

	h1 {
		position: absolute;
		top: 0;
		left: 30px;
		background: url(../img/common/logo.png) no-repeat;
		width: 139px;
		height: 74px;
		margin: 0;
	}
	.tagline {
		position: absolute;
		top: 44px;
		left: 175px;
		background: url(../img/common/tagline.png) no-repeat;
		width: 137px;
		height: 18px;
		margin: 0;
	}
	h1 img,
	.tagline img { display: none;}


	#anime-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
	}
	#anime-inner {
		position: relative;
		width: 100%;
		height: 589px;
		top: 0;
		padding-top: 89px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		overflow: hidden;
	}

	#anime-bottom {
		position: relative;
		top: 0;
		width: 100%;
		z-index: 1;
	}

	#main { display: none;}

	.icon-current {
		width: 69px;
	}

	.bg-red {
		position: relative;
		width: 50%;
		height: 500px;
		background: url(../img/top/bg_red.png) no-repeat right top;
		background-size: cover;
		z-index:2;
		opacity: 0;
	}

	article {
		letter-spacing: 0;
	}
	article h2,
	article h3 {
		letter-spacing: 0;
	}

	.txt-red0,
	.txt-red1,
	.txt-red2,
	.txt-red3 {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -460px;
		z-index: 3;
	}
	.txt-red0 { top: 26%;}

	.txt-red1,
	.txt-red2,
	.txt-red3 {
		display: none;
	}

	#red-block .txt {
		font-family: minmoji;
		font-size: 16px;
		color: #fff;
		opacity: 1;
		display: block;
		margin-top: -100px;
	}
	#red-block .txt .big {
		font-size: 28px;
	}
	#red-block .btn {
		padding-top: 20px;
		opacity: 1;
		display: block;
	}
	.icon-current {
		margin-left: -460px;
	}
	.pic-red0 {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 500px;
	}
	.pic-red0 .bg {
		width: 100%;
		height: 100%;
		background: url(../img/top/pic_red_00_sp.jpg) no-repeat center top;
		background-size: cover;
	}
	.pic-red1,
	.pic-red2,
	.pic-red3 {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 500px;
	}

	#contents h2 {
		font-size: 23px;
	}

	#col2 .pic { overflow: hidden; height: 279px;}

	#corporate .txt {
		display: table-cell;
		width: 50%;
		padding-top: 20px;
	}

}


/* sp */
@media only screen and (max-width:767px) {
	/* ---------------------------------------------------------
	1:body
	----------------------------------------------------------*/
	html { font-size: 62.5%; }
	body {
		color: #131313;
		font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		line-height: 1.5;
		width: 100%;
		background-color: #fff;
	}

	img { vertical-align: top;}

	a {	color: #131313; text-decoration: none;}

	.pc { display: none !important;}

	/* ---------------------------------------------------------
	2:header
	----------------------------------------------------------*/
	header {
		position: relative;
		width: 100%;
		background-color: #fff;
		border-top: 2px solid #d00235;
	}
	header nav,
	header .btn-sdgs,
  header .btn-newgrad,
	header .btn-baito { display: none;}
	header .btn-erecruit { display: none;}
	header .btn-english {
		position: absolute;
		top: 26.6%;
		right: 0;
		text-align: center;
	}
	header .btn-english a {
		font-family: "Times New Roman", Times, serif;
		display: block;
		width: 60px;
		font-size: 1.2rem;
		line-height: 1;
		color: #fff;
		background-color: #000;
		padding: 9px 0 8px;
	}
	#logo img,
	.tagline img,
	header .btn-english img { width: 100%; height: auto;}

	body {
		height: auto;
	}

	h1 .sp {
		position: relative;
		left: inherit;
		width: 26.6%;
		padding: 0 0 1.4% 1.9%;
		margin: 0;
	}
	.tagline {
		position: absolute;
		width: 33%;
		top: 53.7%;
		left: 30.7%;
		margin: 0;
	}
	h1 img,
	.tagline img,
	header .btn-english img { width: 100%; height: auto;}

	#anime-block {
		position: relative;
		width: 100%;
		top: 0;
	}
	#anime-inner {
		position: relative;
		width: 100%;
		top: 0;
	}

	/* ---------------------------------------------------------
	1:#red-block
	----------------------------------------------------------*/
	#red-block {
		position: relative;
		width: 100%;
		height: 349px;
	}
	.pic-red0,
	.pic-red1,
	.pic-red2,
	.pic-red3 {
		position: absolute;
		width: 100%;
		height: 205px;
		top: 0;
		left: 0;
	}
	.pic-red0 {
		background: url(../img/top/pic_red_00_sp.jpg) no-repeat center top;
		background-size: cover;
	}
	.pic-red1 {
		background: url(../img/top/pic_red_01_sp.jpg) no-repeat center top;
		background-size: cover;
		display: none;
	}
	.pic-red2 {
		background: url(../img/top/pic_red_02_sp.jpg) no-repeat center top;
		background-size: cover;
		display: none;
	}
	.pic-red3 {
		background: url(../img/top/pic_red_03_sp.jpg) no-repeat center top;
		background-size: cover;
		display: none;
	}
	.bg-red {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 174px;
		background:url(../img/top/bg_red_sp.png) no-repeat center bottom;
		background-size: cover;
		z-index: 2;
	}
	.txt-red0,
	.txt-red1,
	.txt-red2,
	.txt-red3 {
		font-family: minmoji;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		font-size: 1.2rem;
		color: #fff;
		background-size: cover;
		padding: 0 3%;
		z-index: 3;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.txt-red0 {
		font-size: 1.3rem;
		bottom: 22px;
	}
	.txt-red1,
	.txt-red2,
	.txt-red3 {
		display: none;
	}
	#red-block .big {
		font-size: 1.8rem;
	}
	#red-block .btn a {
		display: block;
		width: 168px;
		height: 31px;
		color: #fff;
		font-size: 1rem;
		text-align: center;
		background: url(../img/top/icon_red_arrow_sp.png) no-repeat 157px center;
		background-size: 4px auto;
		border: 1px solid #fff;
		margin: 15px auto;
		padding-top: 7px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}


	article {
		width: 100%;
		margin: 5px auto 4px;
		border-top: 5px solid #d00235;

		background: url(../img/common/bg_contact_sp.png) repeat-x left bottom;
		background-size: 1px auto;
		border-bottom: 34px solid #fff;
		padding-bottom: 10px;
	}

	/* ---------------------------------------------------------
	2:#subnav
	----------------------------------------------------------*/
	#subnav { display: none;}

	/* ---------------------------------------------------------
	3:#supply
	----------------------------------------------------------*/
	#supply a,
	#corporate a,
	#corporate-top a,
	#msg a,
	#voice a,
	#newgrad a,
	#recruit a {
		width: 100%;
		display: table;
	}

	#corporate,
	#voice,
	#newgrad {
		background-color: #ececec;
	}

	#supply .pic,
	#corporate .pic,
	#corporate-top .pic,
	#msg .pic,
	#voice .pic,
	#newgrad .pic,
	#recruit .pic {
		position: relative;
		display: table-cell;
		width: 31.4%;
	}
	#supply .txt,
	#corporate .txt,
	#corporate-top .txt,
	#msg .txt,
	#voice .txt,
	#newgrad .txt,
	#recruit .txt {
		display: table-cell;
		width: 68.6%;
	}

	#contents h2 {
		font-size: 2.2rem;
		line-height: 1.2;
	}
	#contents h2 .eng-txt {
		font-family: "Times New Roman", Times, serif;
		display: block;
		font-size: 13px;
		color: #d00235;
		letter-spacing: 0;
		padding-top: 3px;
	}

  #sdgs-wrapper img {
    max-width: 100%;
    height: auto;
  }


	#supply h2 {
		margin-left: 8.1%;
		padding: 14.9% 0 12%;
	}
	#corporate-top h2,
	#corporate h2,
	#msg h2,
	#voice h2,
	#newgrad h2,
	#recruit h2 {
		margin-left: 8.1%;
		padding: 20% 0 17.3%;
	}
	#msg h2 {
		letter-spacing: 0;
	}

	#supply p,
	#corporate p,
	#corporate-top p,
	#msg p,
	#voice p,
	#newgrad p,
	#recruit p { display: none;}

	#supply .pic img,
	#corporate .pic img,
	#corporate-top .pic img,
	#msg .pic img,
	#voice .pic img,
	#newgrad .pic img,
	#recruit .pic img { display: none;}

	#supply .pic {
		background: url(../img/top/supply_pic.jpg) no-repeat center;
		background-size: cover;
	}
	#corporate .pic {
		background: url(../img/top/corporate_pic.jpg) no-repeat center;
		background-size: cover;
	}
	#corporate-top .pic {
		background: url(../img/top/corporate_top_pic.jpg) no-repeat center;
		background-size: cover;
	}
	#msg .pic {
		background: url(../img/top/msg_pic_sp.jpg) no-repeat center;
		background-size: cover;
	}
	#voice .pic {
		background: url(../img/top/voice_pic.jpg) no-repeat center;
		background-size: cover;
	}
	#newgrad .pic {
		background: url(../img/top/recruit2_pic.jpg) no-repeat center;
		background-size: cover;
	}
	#recruit .pic {
		background: url(../img/top/recruit_pic.jpg) no-repeat center;
		background-size: cover;
	}

	#supply .pic .tri,
	#corporate .pic .tri,
	#corporate-top .pic .tri,
	#msg .pic .tri,
	#voice .pic .tri,
	#newgrad .pic .tri,
	#recruit .pic .tri {
		position: absolute;
		display: block;
		width: 16px;
		height: 27px;
		top: 50%;
		right: 0;
		margin: -8px -1px 0 0;
		background: url(../img/top/icon_tri_white.png) no-repeat right center;
		background-size: 16px 27px;
		z-index: 2;
	}
	#corporate .pic .tri,
	#voice .pic .tri,
	#newgrad .pic .tri,
	#recruit .pic .tri {
		background: url(../img/top/icon_tri_gray.png) no-repeat right center;
		background-size: 16px 27px;
	}

	/* ---------------------------------------------------------
	5:#closeup
	----------------------------------------------------------*/
	#closeup {
		position: relative;
		width: 100%;
		background: url(../img/top/closeup_bg_sp.png) no-repeat 7% top;
		background-size: 31% auto;
		background-color: #ececec;
		padding-bottom: 25px;
	}
	#closeup h2 {
		width: 66.4%;
		margin: 0 auto;
		padding: 11% 0 7%;
	}
	#closeup h2 img { width: 100%; height: auto;}
	#closeup .wrapper {
		padding: 0 5%;
	}
	#closeup .pic img { width: 100%; height: auto;}
	#closeup .txt { background-color: #4c4c4c; margin-bottom: 10px;}
	#closeup h3 {
		font-size: 2rem;
		font-weight: normal;
		line-height: 1.2;
		color: #fff;
		background: url(../img/common/icon_arrow_red.png) no-repeat 4.4% 20px;
		background-size: 6px 10px;
		padding: 13px 8% 0;
	}
	#closeup p {
		font-size: 1.1rem;
		line-height: 1.7;
		color: #fff;
		padding: 8px 8% 13px;
	}
	#closeup .btn-list a {
		line-height: 1;
		display: block;
		width: 66.2%;
		text-align: center;
		background: url(../img/common/icon_arrow_black.png) no-repeat 91.6% center;
		padding: 15px 0;
		background-size: 7px 12px;
		border: 1px solid #3a3a3a;
		margin: 15px auto 0;
	}
	#closeup .btn-list a img { width: 31.4%; height: auto;}

	/* ---------------------------------------------------------
	6:#info
	----------------------------------------------------------*/
	#info {
		width: 100%;
	}
	#info .left-col {
		display: table;
		width: 100%;
		background-color: #8e8e8e;
		text-align: center;
	}
	#info h2 {
		font-size: 1.5rem;
		color: #fff;
		display: table-cell;
		width: 59.2%;
		vertical-align: middle;
		padding-top: 10px;
	}
	#info h2 .eng-txt {
		display: inline-block;
		font-family: "Times New Roman", Times, serif;
		font-size: 1rem;
		color: #d4d4d4;
		letter-spacing: 0;
		padding-bottom: 10px;
		margin-left: 5px;
	}
	#info .btn-list {
		display: table-cell;
		width: 40.8%;
	}
	#info .btn-list a {
		font-family: minmoji;
		display: block;
		width: 96.4%;
		font-size: 1.2rem;
		color: #fff;
		line-height: 1;
		text-align: center;
		background: url(../img/common/icon_arrow_white.png) no-repeat 92% center;
		padding: 13px 0;
		background-size: 4px 7px;
		border: 1px solid #fff;
		margin: 5px 0;
	}
	#info .btn-list a img { width: 51%; height: auto;}
	#info dt {
		font-size: 1.4rem;
		padding: 23px 5% 8px;
	}

	#info .icon {
		font-family: minmoji;
		display: inline-block;
		width: 60px;
		height: 15px;
		font-size: 1rem;
		line-height: 1.4;
		background-color: #f0f0f0;
		margin-left: 3%;
		vertical-align: text-top;
		text-align: center;
	}
	#info .icon img { width: 17.5%; height: auto; vertical-align: text-top; margin-left: 3%;}
	#info dd {
		font-size: 1.5rem;
		padding: 0 5% 25px 8%;
		border-bottom: 1px solid #ececec;
	}
	#info dd a {
		display: block;
		padding-left: 2.8%;
		background: url(../img/common/icon_arrow_red.png) no-repeat 0 7px;
		background-size: 4px 7px;
	}




	/* ---------------------------------------------------------
	3:#contact
	----------------------------------------------------------*/
	#contact { display: none;}

	/* ---------------------------------------------------------
	4:footer
	----------------------------------------------------------*/
	footer {
		position: relative;
		width: 100%;
		padding: 7% 0 15%;
		background-color: #d00235;
		border-top: 4px solid #fff;
	}
	footer #pagetop {
		position: absolute;
		top: 0;
		width: 100%;
		text-align: center;
		margin-top: -26px;
	}
	footer #pagetop + ul {
		display: table;
		width: 100%;
		padding-bottom: 7%;
	}
	footer #pagetop + ul li {
		display: table-cell;
		width: 50%;
		list-style: none;
		text-align: center;
	}
	footer #pagetop + ul li a {
		color: #fff;
		font-size: 1.4rem;
		line-height: 1;
		background: url(../img/common/icon_arrow_white.png) no-repeat left 2px;
		padding-left: 17px;
		background-size: 5px 8px;
	}
	footer address {
		font-family: "Times New Roman", Times, serif;
		text-align: center;
		color: #fff;
		font-size: 1.2rem;
		line-height: 1;
		font-style: normal;
		padding-bottom: 2.8%;
	}

	footer #nav-sp {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 10;
	}

	footer .slide-nav {
		position: absolute;
		bottom: 100%;
		width: 100%;
		background-color: #d00235;
		padding: 0 5% 20px;
		list-style: none;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;

		display: none;
	}
	footer .slide-nav li a {
		display: block;
		font-size: 1.9rem;
		color: #fff;
		padding: 15px 0;
		border-bottom: 1px solid #fff;
	}
	footer .slide-nav li:nth-child(6) a {
		border: none;
	}
	footer .slide-nav li:last-child a {
		background-color: #000;
		border: none;
		font-size: 2rem;
		padding: 10px 4.7%;
	}
	footer .btn-box {
		position: relative;
		display: table;
		width: 100%;
		table-layout: fixed;
	}
	footer .btn-menu {
		display: table-cell;
		width: 50px !important;
		text-align: center;
		vertical-align: middle;
	}
	footer .btn-menu { background-color: #000;}
	footer .close { background-color: #d00235;}
	footer .btn-close {
		background-color: #d00235;
		display: none;
	}
/*	footer .btn-menu img { width: 50%; height: auto;}*/
	footer .btn-tel {
		display: table-cell;
		width: 42%;
		padding: 10px 0;
		text-align: center;
		vertical-align: middle;
		background-color: #424242;
		border-right: 1px solid #000;
	}
/*	footer .btn-tel img { width: 73.2%; height:auto;}*/
	footer .btn-mail {
		display: table-cell;
		width: 42%;
		text-align: center;
		vertical-align: middle;
		background-color: #424242;
	}
/*	footer .btn-mail img { width: 80.4%; height:auto;}*/
	footer .btn-tel a,
	footer .btn-mail a {
		display: block;
		width: 100%;
	}
}

/* ---------------------------------------------------------
4:clearfix
----------------------------------------------------------*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix { min-height: 1px; }