@charset "utf-8";

/* ---------------------------------------------------------
    HTML5 Bones
    This stylesheet contains print styling and a section for
    you to simply add your own. This is a basic template
    after all.
   ---------------------------------------------------------*/

html,body{
	height:100%;
}

body.sp_tgl_opn {
	position: fixed;
    width: 100%;
}



/* Default link styling */
a{text-decoration:none;}
a:link { color:#FF7800;}
a:visited { color:#FF7800;}
a:hover, a:focus {
	text-decoration:none;
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}
a:active { color:#FF7800; }


::selection {
	background: #eee;
	color: #333;
}
.ico_blank_sp,
.ico_blank{
	position: relative;
	display: inline-block;
}
.ico_blank_sp:after,
.ico_blank:after{
	content: "";
	display: inline-block;
	position: relative;
	width: 15px;
	height: 13px;
	margin-left: 10px;
	vertical-align: middle;
	background: url(/shared/images/ico_blank.png) center / contain no-repeat;
}
/* pankuzu */
#pankuzu,
#pankuzu ul{
	display: none;
	max-width: 1100px;
	width: 95%;
	padding: 15px 0 0;
	margin: 0 auto;
}
#pankuzu li{
	position: relative;
	padding-right: 30px;
}
#pankuzu li a{
	text-decoration: underline;
}
#pankuzu li a:after,
#pankuzu li.middle_list:after{
	content: "";
	display: inline-block;
	position: absolute;
	width: 8px;
	height: 8px;
	top: 0;
	right: 12px;
	bottom: 0;
	margin: auto;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	transform: rotate(-45deg);
}
.main,main{
    padding-top: 70px;
}

@media screen and (min-width:960px) {
	.ico_blank_sp:after{
		content: none;
	}
	.main,main{
		padding-top: 90px;
	}
}

.for_pc{display: block;}
.for_sp{display: none;}
@media screen and (max-width:960px) {
	.for_pc{display: none;}
	.for_sp{display: block;}
}

/* ---------------------------------------------------------
    Author's styles
   ---------------------------------------------------------*/

body {
	color:#333;
	font-family: 'メイリオ', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size:14px;
	line-height:1.6;
}


@media screen and (max-width:760px) {

body {
	background:none;
	}

}

/* ---------------------------------------------------------
    clear
---------------------------------------------------------*/

.clear{
	clear:both;
}

.clearfix:after {
	content: ".";  /* 新しい要素を作る */
	display: block;  /* ブロックレベル要素に */
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}



/* ---------------------------------------------------------
    wrap
---------------------------------------------------------*/

#wrap{
	position: relative;
	height:auto !important; /* IE6対策 */
	height: 100%; /* IE6対策 */
	min-height: 100%;
	width:100%;
}

#contents{
	width:100%;
	/* padding-bottom:563px; */
	box-sizing:border-box;
}



@media screen and (max-width:860px) {

	#contents{
		padding-bottom:155px;
	}

}


@media screen and (max-width:600px) {

	#contents{
		padding-bottom:0;
	}

}



/* ---------------------------------------------------------
    main
---------------------------------------------------------*/

main{
	display: block;
	width:100%;
}

#mainContent{
	width:100%;
	margin-bottom:70px;
}

.mainContentInner{
	width:1100px;
	margin:0 auto;
}



@media screen and (max-width:1140px) {

	.mainContentInner{
		width:100%;
		margin:0;
		padding:0 20px;
		box-sizing:border-box;
	}

}



/* ---------------------------------------------------------
    mainTitle
---------------------------------------------------------*/

/* h2 */

.mainTitle01{
	width: 100%;
	margin-bottom:30px;
    background: #3333CB;
    padding: 27px 0 21px 0;
    box-sizing: border-box;
}

.mainTitle01 h2{
	font-size: 20px;
    color: #FFF;
    text-align: center;
    line-height: 100%;
    font-weight: bold;
}

.mainTitle01 h2 span{
	display:block;
	font-size: 13px;
	padding-top:3px;
}


/* h3 */

.mainTitle02{
	width:100%;
	margin-bottom:25px;
}

.mainTitle02 h3{
	padding:0;
	border-bottom:3px solid #3333CC;
	font-size:1.6em;
	font-weight: bold;
	text-align:center;
	box-sizing:border-box;
	width:100%;
	margin:0;
}


/* h4 */

.mainTitle03{
	width:100%;
	background:#F8F8F8;
	margin-bottom:20px;
}

.mainTitle03 h4{
	border-left:5px solid #3333CB;
	padding:10px 15px;
	font-size:1.1em;
	font-weight:bold;
}

h4 img{
	max-width:100%;
	height:auto;
	display:block;
	margin:0 auto 40px auto;
}


/* h5 */

h5{
	font-size:1.1em;
	font-weight:bold;
	color:#3333CB;
	padding-left:22px;
	background:url(../images/ico_02.png) 0 4px no-repeat;
	margin-bottom:10px;
}

@media screen and (min-width:420px) {

	.mainTitle02 h3{
		width:372px;
		margin:0 auto;
	}

}


@media screen and (min-width:600px) {

	.mainTitle01{
		padding: 37px 0 24px 0;
		margin-bottom: 0;
	}
	.mainTitle01 h2{
		font-size: 28px;
	}
	.mainTitle02{
		margin-bottom:30px;
	}

	.mainTitle02 h3{
		padding-bottom:5px;
	}

	.mainTitle03 h4{
		padding:10px 20px;
	}

	h5{
		margin-bottom:15px;
	}
	#pankuzu,
	#pankuzu ul{
		display: flex;
	}
	#pankuzu{
		margin-bottom: 40px;
	}

}




/* ---------------------------------------------------------
    header
---------------------------------------------------------*/
.for_pc_hd{display: none;}
.for_sp_hd{display: block;}
#header{
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 10;
}
#header .flx{
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
	padding: 0 93px 0 20px;
	background: #fff;
}
#header .lft_box #matsuura_logo{
	max-width: 220px;
	width: 100%;
}
#header .lft_box #ml_path_1{
	fill: #3333CC;
}
#header .lft_box #ml_path_2{
	fill: #333;
}
#header .rgt_box{
	display: none;
    position: fixed;
    width: 100%;
    height: calc( 100% - 68px );
    padding: 20px;
    left: 0;
    background: #3333CC;
    overflow: auto;
}
#header .link_group ul a,
#header .link_group ul > li > p{
	display: block;
    padding: 10px 0;
	color: #fff;
	cursor: pointer;
}
#header .link_group ul.menu01 > li > a,
#header .link_group ul.menu01 > li > p{
	border-bottom: 1px solid #fff;
}
#header .link_group ul.menu01 > li.more_link > a,
#header .link_group ul.menu01 > li.more_link > p{
	padding-bottom: 0;
	border: 0;
}
#header .link_group ul.menu02{
	padding: 10px 0;
    border-bottom: 1px solid #fff;
}
#header .link_group ul.menu02 > li > a,
#header .link_group ul.menu02 > li > p{
	padding: 5px 0 5px 10px;
}
#header .other_group{
	margin-bottom: 15px;
}
#header .other_group .tel_num{
	display: flex;
    align-items: center;
    margin: 15px 0 5px;
}
#header .other_group .tel_num svg{
	display: inline-block;
    width: 26px;
    height: 36px;
    margin-right: 6px;
    fill: #fff;
    vertical-align: middle;
}
#header .other_group .tel_num span{
	font-size: 25px;
	font-weight: bold;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
}
#header .other_group .time{
	font-size: 12px;
    color: #fff;
}
#header .sns_group ul{
    display: flex;
    align-items: center;
}
#header .sns_group li{
	flex: 0 0 30px;
	margin-right: 20px;
}
#header .sns_group li img{
	width: 100%;
}
#header .sns_group li svg{
	width: 30px;
	height: 30px;
	fill: #fff;
}
#header #hd_toggle{
	position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    right: 0;
    width: 69px;
    height: 69px;
    background: #3333CC;
	cursor: pointer;
}
#header #hd_toggle span{
	width: 60%;
    height: 3px;
    margin: 0 auto;
    background: #fff;
}
.sp_tgl_opn #header #hd_toggle span{
    background: transparent;
}
#header #hd_toggle span:after,
#header #hd_toggle span:before{
	content: "";
	display: inline-block;
	position: absolute;
	width: 60%;
	height: 3px;
	background: #fff;
	transition: .3s;
}
#header #hd_toggle span:before{
	top: 20px;
}
#header #hd_toggle span:after{
	bottom: 20px;
}
.sp_tgl_opn #header #hd_toggle span:before{
	top: 34px;
    transform: rotate(45deg);
}
.sp_tgl_opn #header #hd_toggle span:after{
	bottom: 33px;
    transform: rotate(-45deg);
}
@media screen and (min-width:1220px) {

}

@media screen and (min-width:960px) {
	.for_pc_hd{display: block;}
	.for_sp_hd{display: none;}
	#header{
		z-index: 10;
	}
	#header::after,
	#header::before{
		content: "";
		display: inline-block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.3));
		z-index: -1;
		transition: opacity .3s;
	}
	#header::after{
		background: linear-gradient(0deg, rgba(275,275,275,0), rgba(275,275,275,0));
		z-index: -2;
	}
	#header.scroll:before{
		opacity: 0;
	}
	#header.scroll::after{
		background: linear-gradient(0deg, rgba(275,275,275,1), rgba(275,275,275,1));
		z-index: -2;
	}
	#header .flx{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 95%;
		padding: 20px 0 40px;
		background: rgba(0,0,0,0);
	}
	#header.scroll .flx{
		padding: 10px 0 10px;
	}
	#header .lft_box{
		flex: 0 0 27%;
		max-width: 345px;
		transition: max-width .3s;
	}
	#header.scroll .lft_box{
		max-width: 275px;
	}
	#header.scroll .lft_box .main_logo svg{
		width: 100%;
	}
	#header .lft_box #matsuura_logo{
		max-width: 100%;
	}
	#header .lft_box #ml_path_1,
	#header .lft_box #ml_path_2{
		fill: #fff;
	}
	#header.scroll .lft_box #ml_path_1,
	#header.scroll .lft_box #ml_path_2{
		transition: fill .3s;
	}
	#header.scroll .lft_box #ml_path_1{
		fill: #3333CC;
	}
	#header.scroll .lft_box #ml_path_2{
		fill: #333;
	}
	#header .rgt_box{
		position: relative;
		display: flex;
		flex-flow: column-reverse;
		flex: 0 0 70%;
		max-width: 700px;
		width: auto;
		height: auto;
		padding: 0;
		left: auto;
		background: transparent;
		overflow: initial;
	}
	#header .link_group ul{
		padding-top: 53px;
		transition: padding .3s;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	#header.scroll .link_group ul{
		padding-top: 0;
	}
	#header .link_group ul a,
	#header .link_group ul > li > p{
		color: #fff;
		transition: color .3s;
	}
	#header .link_group .menu01 > li{
		position: relative;
		flex: 0 0 17%;
		text-align: center;
	}
	#header .link_group .menu01 > li.contact{
		flex: 0 0 28%;
		border: 1px solid #fff;
		margin-left: 4%;
		transition: .3s;
	}
	#header.scroll .link_group .menu01 > li.contact{
		border-color: #333;
	}
	
	#header .link_group ul.menu01 > li a,
	#header .link_group ul.menu01 > li p{
		display: inline-block;
		width: 100%;
		padding: 12px 20px;
		font-size: 16px;
		font-weight: bold;
		border: 0;
	}
	#header .link_group ul.menu01 > li:first-child a{
		padding: 22px 20px 12px;
	}
	#header .link_group ul.menu01 > li:last-child a{
		padding: 12px 20px 22px;
	}
	#header .link_group ul.menu01 > li.more_link > a,
	#header .link_group ul.menu01 > li.more_link > p{
		padding: 12px 20px;
	}
	#header .link_group .menu01 > li.more_link > a:after,
	#header .link_group .menu01 > li.more_link > p:after{
		content: "";
		display: inline-block;
		position: absolute;
		width: 8px;
		height: 8px;
		top: 0;
		bottom: 0;
		right: 5px;
		margin: auto;
		border-right: 2px solid #fff;
		border-top: 2px solid #fff;
		transform: rotateX(0deg) rotateZ(135deg) translate(0px,4px);
		transition: transform .3s;
	}
	#header.scroll .link_group .menu01 > li.more_link > a:after,
	#header.scroll .link_group .menu01 > li.more_link > p:after{
		border-color: #333;
	}
	#header .link_group .menu01 > li.more_link.open > a:after,
	#header .link_group .menu01 > li.more_link.open > p:after{
		transform: rotateX(180deg) rotateZ(135deg) translate(2px,2px);
	}
	#header .link_group ul.menu02{
		position: absolute;
		display: block;
		width: 190px;
		top: 100%;
		left: -100%;
		right: -100%;
		margin: auto;
		padding: 10px 0;
		background: #3333CC;
		border-radius: 5px;
		border: 1px solid #fff;
		box-shadow: 4px 4px 10px rgb(0 0 0 / 16%);
		opacity: 0;
		visibility: hidden;
		transition: .3s;
	}
	#header .link_group .more_link.open ul.menu02{
		opacity: 1;
		top: 90%;
		visibility: visible;
	}
	#header .link_group ul.menu02 > li > a,
	#header .link_group ul.menu02 > li > p{
		padding: 12px 25px;
	}
	#header.scroll .link_group .menu01 > li > a,
	#header.scroll .link_group .menu01 > li > p{
		color: #333;
	}
	#header .other_group{
		margin: 0;
	}
	#header .other_group ul{
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: end;
		top: 0;
		right: 0;
		transition: top .3s;
	}
	#header.scroll .other_group ul{
		top: -70px;
	}
	#header .other_group .tel_num{
		margin-top: 0;
		margin-right: 20px;
	}
	#header .sns_group,
	#header #hd_toggle{
		display: none;
	}
}


/* ---------------------------------------------------------
    footer
---------------------------------------------------------*/
#footer{
	/*padding: 45px 0;*/
	padding: 0px;
	border-top: 5px solid #3333CC;
	background: #EEEEEE;
}
#footer .ft_in{
	max-width: 1120px;
	width: 90%;
	margin: 5px auto 0;
}
#footer .ft_flx{
	margin-bottom: 30px;
}
#footer .lft_box .icon_group{
	margin-bottom: 20px;
	text-align: center;
}
#footer .lft_box .ft_logo{
	display: inline-block;
	max-width: 265px;
	width: 100%;
	padding-top:30px
}
#footer .obi {
	background-color:#fff;
	padding: 30px 0px;
}

#footer .lft_box .ft_logo svg{
	width: 100%;
}
#footer .lft_box .ft_logo #ml_path_1{
	fill: #3333CC;
}
#footer .lft_box .ft_logo #ml_path_2{
	fill: #333;
}
#footer .lft_box .sns_group{
	display: none;
}
#footer .lft_box .link_group{
	display: none;
}
#footer .rgt_box{
	flex: 0 0 15%;
	max-width: 305px;
	margin: 0 auto;
	text-align: center;
}
#footer .rgt_box .ban01{
	margin: 0 auto;
	font-size: 0;
}
#footer .rgt_box .ban02{
	max-width: 108px;
	margin: 30px auto 0px;
	font-size: 0;
}
#footer .rgt_box .ban03{
	max-width:95px;
	margin: 19px auto 0;
}

#footer .rgt_box .ban04{
	margin: 2px auto 0;
}
#footer .rgt_box .ban04 img{
	max-width: 220px;
}
#footer .rgt_box .ban01 a,
#footer .rgt_box .ban02 a{
	display: inline-block;
}
#footer .rgt_box .ban01 img,
#footer .rgt_box .ban02 img,
#footer .rgt_box .ban03 img{
	width: 100%;
}
#footer .rgt_box .ban01 img{
	max-width: 160px;
}
#footer .rgt_box .ban02 img{
	margin-bottom: 5px;
}
#footer .rgt_box .ban02 .num{
	font-size: 11px;
	color: #057C44;
}
#footer .rgt_box .ban03 p{
	margin-top: 6px;
	text-align: left;
}
#footer .sdgs_group{
	max-width: 305px;
    margin: 0 auto 40px;
}
#footer .rgt_box .sdgs_group{
	margin: 17px auto 0px;
}


#footer .sdgs_group .img{
	max-width: 160px;
	/*margin: 0 auto 10px;*/
	margin: 0 auto;
	font-size:0px;
}
#footer .sdgs_group .img img{
	width: 100%;
}
#footer .sdgs_group .txt{
	font-size: 14px;
}
#footer .copy{
	font-size: 12px;
	color: #999999;
	text-align: center;
	margin: 0px;
	padding: 40px 0px;
}
@media screen and (min-width:960px) {
	#footer{
		/*padding: 45px 0 65px;*/
	}
	#footer .ft_flx {
		display: flex;
		/*justify-content: space-between;*/
		margin-bottom: 0px;
		flex-direction: column;
	}
	#footer .lft_box{
		flex: 0 0 75%;
		max-width: 800px;
	}
	#footer .lft_box .ft_logo{
		margin-right: 40px;
		padding-top:0px
	}
	#footer .obi {
		margin-top: 90px;
		padding: 12px 0px;
	}
	#footer .ft_in {
		position: relative;
		margin-top: 40px
	}
	#footer .lft_box .ft_logo svg{
		margin-bottom: 8px;
	}
	#footer .lft_box .sns_group{
		display: inline-block;
		max-width: 70px;
	}
	#footer .lft_box .sns_group ul{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	#footer .lft_box .sns_group ul li{
		flex: 0 0 40%;
	}
	#footer .lft_box .sns_group ul li img{
		width: 100%;
	}
	#footer .lft_box .link_group{
		display: flex;
		justify-content: space-between;
	}
	#footer .lft_box .link_group ul{
		flex: 0 0 24%;
	}
	#footer .lft_box .link_group ul li{
		margin-bottom: 15px;
	}
	#footer .lft_box .link_group ul li:last-child{
		margin-bottom: 0;
	}
	#footer .lft_box .link_group ul li a,
	#footer .lft_box .link_group ul > li > p{
		font-weight: bold;
		color: #333;
		font-size: 16px;
	}
	#footer .lft_box .link_group ul li.com_chil a{
		position: relative;
		padding-left: 15px;
		font-weight: normal;
		font-size: 14px;
	}
	#footer .lft_box .link_group ul li.com_chil a:before{
		content: "";
		display: inline-block;
		position: absolute;
		width: 6px;
		height: 6px;
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		border-right: 2px solid #3333CC;
		border-bottom: 2px solid #3333CC;
		transform: rotate(-45deg);
	}
	#footer .lft_box .icon_group{
		display: flex;
		align-items: center;
		margin-bottom: 50px;
	}
	#footer .rgt_box{
        display: flex;
		max-width: unset;
		align-items: center;
        max-width: 1120px;
        margin: 0 auto;
		width: 90%;
		padding-right: 110px;
	}
	#footer .rgt_box .ban01{
		margin: 0px;
		flex: 1 1 auto;
		display: flex;
	}
	#footer .rgt_box .ban02{
        max-width: unset;
		margin: 0px 0px 0px 25px;
		flex: 0 0 104px;
	}
	#footer .rgt_box .ban02 img {
		max-width: 82px;
	}
	#footer .rgt_box .ban03{
		max-width:75px;
        margin: 0px 0px 0px 25px;
		flex: 0 0 75px;
		font-size: 0px;
	}
	#footer .rgt_box .ban04{
        /*max-width: unset;*/
        margin: 0px 0px 0px 10px;
        flex: 0 0 220px;
		font-size: 0px;
	}
	#footer .sdgs_group{
		display: flex;
		position: relative;
		top:0px;
	}
	#footer .rgt_box .sdgs_group{
        margin: 0px 0px 0px 20px;
		flex: 0 0 140px;
	}

	#footer .sdgs_group .img{
		font-size: 0;
	}
	#footer .copy{
		text-align: left;
		padding: 53px 0px;
	}
}


/* ---------------------------------------------------------
    pagescroll.js
   ---------------------------------------------------------*/

@media screen and (min-width:600px) {
	#nav-dock {
		position: absolute;
		width: 50px;
		height: 67px;
		bottom: 10px;
		right: 10px;
		z-index: 20;
	}
	
	#nav-dock a {
		display: block;
		width:100%;
		height:100%;
		text-indent:-9999px;
	}

	#nav-dock #prev{
		position: relative;
		background:url(/shared/images/pagetop_body.png) bottom center / contain no-repeat,
		url(/shared/images/pagetop_arrow.png) top center / contain no-repeat;
		margin-bottom:1px;
	}
	#nav-dock #prev:after{
		content: "";
		display: inline-block;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 50px;
		height: 50px;
		background:url(/shared/images/pagetop_face.png) center / contain no-repeat;
	}
	#nav-dock #prev:before{
		content: "";
		display: inline-block;
		position: absolute;
		width: 50px;
		height: 50px;
		bottom: 0;
		right: 0;
		box-shadow: 4px 8px 16px rgb(0 0 0 / 8%);
		border-radius: 100%;
	}
	#nav-dock #prev:hover{
		opacity: 1;
	}
	#nav-dock #prev:hover:after{
		-webkit-animation: mosface 0.5s linear;
		animation: mosface 0.5s linear;
	}
	@-webkit-keyframes mosface {
		0% {
			transform: rotateY(0deg), translate(0, 0px);
		}
		25% {
			transform: translate(25px, 0px) rotateY(80deg);
			opacity: 1;
		}
		25.1%{
			opacity: 0;
		}
		50% {
			transform: translate(0px, 0px) rotateY(0deg);
		}
		74.9%{
			opacity: 0;
		}
		75% {
			transform: translate(-25px, 0px) rotateY(80deg);
			opacity: 1;
		}
		100% {
			transform: rotateY(0deg), translate(0px, 0px);
		}
	}
	@keyframes mosface {
		0% {
			transform: rotateY(0deg), translate(0, 0px);
		}
		25% {
			transform: translate(25px, 0px) rotateY(80deg);
			opacity: 1;
		}
		25.1%{
			opacity: 0;
		}
		50% {
			transform: translate(0px, 0px) rotateY(0deg);
		}
		74.9%{
			opacity: 0;
		}
		75% {
			transform: translate(-25px, 0px) rotateY(80deg);
			opacity: 1;
		}
		100% {
			transform: rotateY(0deg), translate(0px, 0px);
		}
	}
}
@media screen and (min-width:960px) {
	#nav-dock{
		bottom: 40px;
		right: 40px;
		width: 108px;
		height: 138px;
	}
	#nav-dock #prev:after{
		width: 108px;
		height: 108px;
	}
	@-webkit-keyframes mosface {
		0% {
			transform: rotateY(0deg), translate(0, 0px);
		}
		25% {
			transform: translate(50px, 0px) rotateY(80deg);
			opacity: 1;
		}
		25.1%{
			opacity: 0;
		}
		50% {
			transform: translate(0px, 0px) rotateY(0deg);
		}
		74.9%{
			opacity: 0;
		}
		75% {
			transform: translate(-50px, 0px) rotateY(80deg);
			opacity: 1;
		}
		100% {
			transform: rotateY(0deg), translate(0px, 0px);
		}
	}
	@keyframes mosface {
		0% {
			transform: rotateY(0deg), translate(0, 0px);
		}
		25% {
			transform: translate(50px, 0px) rotateY(80deg);
			opacity: 1;
		}
		25.1%{
			opacity: 0;
		}
		50% {
			transform: translate(0px, 0px) rotateY(0deg);
		}
		74.9%{
			opacity: 0;
		}
		75% {
			transform: translate(-50px, 0px) rotateY(80deg);
			opacity: 1;
		}
		100% {
			transform: rotateY(0deg), translate(0px, 0px);
		}
	}
	#nav-dock #prev:before{
		width: 108px;
		height: 108px;
	}
}


/* ---------------------------------------------------------
    movie_area 動画のリスト
   ---------------------------------------------------------*/
.movie_area{
	padding: 60px 0;
	background: #F9F9F9;
}
.movie_area .movie_area_in{
    max-width: 1100px;
    width: 90%;
	margin: 0 auto;
}
.movie_area .mos_mov_til{
    display: block;
    max-width: 370px;
    padding: 0 0 5px;
    margin: 0 auto 30px;
    font-size: 22px;
    font-weight: bold;
    border-bottom: 3px solid #3333CC;
    text-align: center;
}
.movie_area .flx_box ul{
	position: relative;
	max-width: 570px;
	margin: 0 auto;
}
.movie_area .flx_box li{
	position: relative;
	margin-bottom: 30px;
}
.movie_area .flx_box li:last-child{
	margin-bottom: 0;
}
.movie_area .flx_box li a{
	position: relative;
	display: inline-block;
	margin-bottom: 15px;
	font-size: 0;
	border-radius: 10px;
	overflow: hidden;
}
.movie_area .flx_box li a svg{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 95px;
	height: 95px;
	fill: #fff;
	margin: auto;
}
.movie_area .flx_box li a:before{
	content: "";
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgb(51 51 204 / 30%);
}
.movie_area .flx_box .mov_til{
	margin-bottom: 10px;
	font-size: 25px;
	font-weight: bold;
	color: #3333CC;
	line-height: 1.4;
}
.movie_area .flx_box .mov_exp{
	line-height: 2;
}
@media screen and (min-width:960px) {
    .movie_area .mos_mov_til {
        margin: 0 auto 60px;
    }
	.movie_area .flx_box ul{
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 100%;
	}
	.movie_area .flx_box li{
		flex: 0 0 46.5%;
		margin-bottom: 0;
	}
	.movie_area .flx_box li a{
		margin-bottom: 15px;
	}
	.movie_area .flx_box .mov_til{
		margin-bottom: 5px;
		font-size: 27px;
	}
}


/* ---------------------------------------------------------
    topと工場・設備紹介 共通css
   ---------------------------------------------------------*/

.factoryBox{
	width:100%;
	background:url(../images/bg_01.gif) repeat;
	margin-bottom:40px;
}

.factoryBox .factoryBoxInner{
	width:1100px;
	margin:0 auto;
	padding:60px 0 80px 0;
	box-sizing:border-box;
}

.factoryBox ul{
	clear:both;
	width:100%;
}

.factoryBox li{
	width:530px;
}

.factoryBox li dl{
	width:100%;
	margin-bottom:25px;
}

.factoryBox li dt{
	text-align:center;
	font-size:1.6em;
	color:#3333CC;
	margin-bottom:3px;
}

.factoryBox li dd{
	text-align:center;
}

.factoryBox li p{
	width:100%;
}

.factoryBox li p a{
	display:block;
	width:100%;
	text-decoration:none;
}

.factoryBox li p img{
	max-width:100%;
	height:auto;
	display:block;
	margin:0 auto;
}

.factoryBox li dt br.sp{
	display:none;
}


/* 工場・設備紹介のみ */

#company .factoryBox{
	margin-bottom:0;
}

.factoryBox .factoryBoxInner{
	padding:60px 0 40px 0;
}



@media screen and (max-width:1120px) {

	.factoryBox .factoryBoxInner{
		width:100%;
		margin:0;
		padding:60px 10px 80px 10px;
	}

	.factoryBox li{
		width:49%;
	}

	.factoryBox .factoryBoxInner{
		padding:60px 10px 40px 10px;
	}

}


@media screen and (max-width:860px) {

	.factoryBox li{
		width:100%;
	}

	.factoryBox li.left{
		float:none;
		margin-bottom:40px;
	}

	.factoryBox li.right{
		float:none;
	}

}


@media screen and (max-width:600px) {

	.factoryBox .factoryBoxInner{
		width:100%;
		margin:0;
		padding:30px 10px 40px 10px;
	}

	.factoryBox li.left{
		margin-bottom:30px;
	}

	.factoryBox li dl{
		margin-bottom:15px;
		padding:0 10px;
		box-sizing:border-box;
	}

	.factoryBox li dt{
		text-align:left;
		font-size:1.6em;
	}

	.factoryBox li dd{
		text-align:left;
	}

}


@media screen and (max-width:480px) {

	.factoryBox li dt br.sp{
		display:block;
	}

}



/* ---------------------------------------------------------
    topと採用情報 共通css
   ---------------------------------------------------------*/

.recruitBox{
	width:100%;
	margin-bottom:60px;
}

.recruitBox ul{
	clear:both;
	width:100%;
}

.recruitBox li{
	width:340px;
}

.recruitBox li.left{
	margin-right:40px;
}


/* recruitDetail */

.recruitBox li .recruitDetail{
	width:100%;
/*
	height:390px;
	margin-bottom:30px;
*/
}

.recruitBox li .recruitDetail dl{
	width:100%;
	margin-bottom:15px;
}

.recruitBox li .recruitDetail dt{
	width:100%;
	margin-bottom:15px;
}

.recruitBox li .recruitDetail dt img{
	max-width:100%;
	height:auto;
	display:block;
	margin:0 auto;
}

.recruitBox li .recruitDetail dd{
	font-size:1.4em;
	font-weight:bold;
	text-align:center;
}

.recruitBox li .recruitDetail p{
	margin-bottom:8px;
}

.recruitBox li .recruitDetail p span{
	font-weight:bold;
}


/* recruitBtn01 */

.recruitBox li .recruitBtn01{
	width:100%;
}

.recruitBox li .recruitBtn01 img{
	max-width:100%;
	height:auto;
	display:block;
	margin:0 auto;
}

.recruitBox li .recruitBtn01 a{
	display:block;
	width:100%;
	border:1px solid #CCCCCC;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
	padding:12px 10px 17px 20px;
	text-align:center;
	color:#333;
	box-sizing:border-box;
	text-decoration:none;
}


/* recruitBtn02 */

.recruitBox li .recruitBtn02{
	width:100%;
}

.recruitBox li .recruitBtn02 a{
	display:block;
	width:100%;
	border:1px solid #CCCCCC;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
	padding:19px 10px 19px 35px;
	text-align:center;
	color:#333;
	box-sizing:border-box;
	background:url(../images/ico_arrow03.png) 28% 49% no-repeat;
	text-decoration:none;
}

/* voiceBanBox */
.voiceBanBox{
	background: #f5f5f5;
	width: 100%;
	border-radius: 15px;
	padding: 30px 0;
	margin-bottom: 40px;
}

.voiceBanBox:hover{
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

.voiceBanBox a{
	color:#333;
	font-size:16px;
	text-decoration:none;
}

.voiceBanBox .voiceBanLeft{
	float:left;
	width:65%;
	box-sizing: border-box;
	padding: 0 2%;
}

.voiceBanBox .voiceBanLeft img{
	width: 100%;
	max-width: 653px;
	margin: 0 auto;
	display: block;
}

.voiceBanBox .voiceBanRight{
	float:right;
	width:35%;
	text-align: center;
	box-sizing: border-box;
	padding: 0 2%;
}

.voiceBanBox .voiceBanRight .voiceBanLogo{
	margin: 10% 0 7% 0;
}

.voiceBanBox .voiceBanRight .voiceBanLogo img{
	width: 100%;
	max-width: 280px;
}

.voiceBanBox .voiceBanRight .voiceBanText{
	text-align: left;
	max-width: 280px;
	margin: 0 auto 7% auto;
}

.voiceBanBox .voiceBanRight .voiceBanBtn{
	background: #3333CC url(/shared/images/ico_arrow07.gif) 10% center no-repeat;
	color: #fff;
	font-weight: bold;
	border-radius: 10px;
	height: 50px;
	max-width: 280px;
	margin: 0 auto;
	line-height: 50px;
}











@media screen and (max-width:1140px) {

	.recruitBox li{
		width:32%;
	}

	.recruitBox li.left{
		margin-right:2%;
	}

}


@media screen and (max-width:750px) {

	.voiceBanBox .voiceBanLeft{
		float: inherit;
		width: 100%;
		margin-bottom: 20px;
	}

	.voiceBanBox .voiceBanRight{
		float: inherit;
		width: 100%;
	}

	.voiceBanBox .voiceBanRight .voiceBanText{
		max-width:100%;
		text-align: center;
	}

	.voiceBanBox .voiceBanRight .voiceBanBtn{
		max-width: 96%;
	}

}


@media screen and (max-width:380px) {

	.recruitBox li{
		width:100%;
	}

	.recruitBox li .recruitBtn02 a{
		padding:19px 10px 19px 20px;
		background:url(../images/ico_arrow03.png) 15px 49% no-repeat;
	}

}



/* ---------------------------------------------------------
    汎用css
   -------------------------------------------------------- */

/* float */
.left{float:left;}
.right{float:right;}


/* margin-bottom */
.mb0{margin-bottom:0px !important;}
.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb40{margin-bottom:40px !important;}
.mb45{margin-bottom:45px !important;}
.mb50{margin-bottom:50px !important;}
.mb60{margin-bottom:60px !important;}
.mb150{margin-bottom:150px !important;}

/* margin-top */
.mt0{margin-top:0 !important}
.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt40{margin-top:40px !important;}
.mt45{margin-top:45px !important;}
.mt50{margin-top:50px !important;}
.mt80{margin-top:80px !important;}

/* margin-right */
.mr0{margin-right:0 !important;}
.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}

/* margin-left */
.ml0{margin-left:0 !important;}
.ml5{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml15{margin-left:15px !important;}
.ml20{margin-left:20px !important;}

/* padding-bottom */
.pb0{padding-bottom:0 !important;}
.pb5{padding-bottom:5px !important;}
.pb10{padding-bottom:10px !important;}
.pb15{padding-bottom:15px !important;}
.pb20{padding-bottom:20px !important;}
.pb25{padding-bottom:25px !important;}
.pb30{padding-bottom:30px !important;}
.pb35{padding-bottom:35px !important;}
.pb40{padding-bottom:40px !important;}
.pb45{padding-bottom:45px !important;}
.pb50{padding-bottom:50px !important;}
.pb55{padding-bottom:55px !important;}
.pb60{padding-bottom:60px !important;}
.pb65{padding-bottom:65px !important;}
.pb70{padding-bottom:70px !important;}
.pb130{padding-bottom:130px !important;}
.pb155{padding-bottom:155px !important;}
.pb160{padding-bottom:160px !important;}

/* padding-top */
.pt0{padding-top:0 !important;}
.pt3{padding-top:3px !important;}
.pt5{padding-top:5px !important;}
.pt10{padding-top:10px !important;}
.pt12{padding-top:12px !important;}
.pt15{padding-top:15px !important;}
.pt20{padding-top:20px !important;}

/* padding-right */
.pr0{padding-right:0 !important;}
.pr5{padding-right:5px !important;}
.pr10{padding-right:10px !important;}
.pr15{padding-right:15px !important;}
.pr20{padding-right:20px !important;}

/* padding-left */
.pl0{padding-left:0 !important;}
.pl5{padding-left:5px !important;}
.pl10{padding-left:10px !important;}
.pl15{padding-left:15px !important;}
.pl20{padding-left:20px !important;}
.pl25{padding-left:25px !important;}
.pl30{padding-left:30px !important;}
.pl35{padding-left:35px !important;}
.pl40{padding-left:40px !important;}


/* 解除 */
.borderNone{border:none !important;}
.mgnNone{margin:0 !important;}
.pdgNone{padding:0 !important;}

.btNone{border-top:none !important;}
.brNone{border-right:none !important;}
.blNone{border-left:none !important;}
.bbNone{border-bottom:none !important;}



/* ---------------------------------------------------------
    404error
   ---------------------------------------------------------*/

.errorBox01{
	margin:0 auto;
}

.errorBox01 dl{
	padding:100px 0;
	line-height:200%;
}

.errorBox01 dt{
	font-weight:bold;
	font-size:200%;
	margin-bottom:20px;
	text-align:center;
}

.errorBox01 dd{
	text-align:center;
}

.errorBox01 dd a{
	font-weight:bold;
}



/* ---------------------------------------------------------
    keyframes
---------------------------------------------------------*/
/* mosroop */
@-webkit-keyframes mosroop {
	0% {
		top: -10px;
	}
	50%{
		top: 10px;
	}
	100% {
		top: -10px;
	}
}
@keyframes mosroop {
	0% {
		top: -10px;
	}
	50%{
		top: 10px;
	}
	100% {
		top: -10px;
	}
}

/* bgroop */
@-webkit-keyframes bgroop {
	from {
		background-position: 1099px 0;
	}
	to {
		background-position: 0 0;
	}
}
@keyframes bgroop {
	from {
		background-position: 1099px 0;
	}
	to {
		background-position: 0 0;
	}
}

@media screen and (min-width: 960px){
	/* mosroop */
	@-webkit-keyframes mosroop {
		0% {
			top: -25px;
		}
		50%{
			top: 25px;
		}
		100% {
			top: -25px;
		}
	}
	@keyframes mosroop {
		0% {
			top: -25px;
		}
		50%{
			top: 25px;
		}
		100% {
			top: -25px;
		}
	}

	/* bgroop */
	@-webkit-keyframes bgroop {
		from {
			background-position: 1892.5px 0;
		}
		to {
			background-position: 0 0;
		}
	}
	@keyframes bgroop {
		from {
			background-position: 1892.5px 0;
		}
		to {
			background-position: 0 0;
		}
	}
}