@charset "UTF-8";

/*============================================================================================
↓firstView===================================================================================
============================================================================================*/
#firstViewWrap {
	position:relative;
	overflow:hidden;
}

/*============================================================================================
↓動画・代替画像==============================================================================
============================================================================================*/
#movieWrap,
#imageWrap {
	position:absolute;
	top:0;
	left:50%;
	-webkit-transform:translate(-50%,0);
	transform:translate(-50%,0);
	z-index: -1;
	min-height: 100%;
	min-height: 100vh;
	min-width: 100%;
	min-width: 100vw;
	overflow: hidden;
}
#movieWrap::before,
#imageWrap::before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:430px;
	background-image:url(../../assets/images/common/bg-header.png);
	background-repeat:repeat-x;
	background-position:bottom left;
	background-size:contain;
}
#movieWrap::after,
#imageWrap::after {
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:40px;
	background-color:rgba(236,236,236,1);
}
@media screen and (max-width: 768px) {
#movieWrap::before,
#imageWrap::before {
	height:320px;
}
#movieWrap::after,
#imageWrap::after {
	height:0px;
}
}

#video {
	min-height: 100%;
	min-height: 100vh;
	min-width: 100%;
	min-width: 100vw;
	background: rgb(255,255,255);
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 10%,rgba(255,255,255,1) 10%,rgba(236,236,236,1) 90%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 10%,rgba(255,255,255,1) 10%,rgba(236,236,236,1) 90%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ececec',GradientType=0 );
}

/*モバイル用代替画像↓↓↓*/
#imageWrap {
	background-image:url(../../assets/images/common/bg-movie-sp.jpg);
	background-size:cover;
	background-position:center top;
}

/*============================================================================================
↓ロゴとコピー（アニメーション20秒）==========================================================
============================================================================================*/
/*中央配置*/
.scene .fixedCenter {
	position: absolute;
    top: 50%;
    left: 50%;
	text-align:center;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
}
@media screen and (max-width: 480px) {
.scene .fixedCenter {
    top: 45%;
}
}

/*各シーン*/
.scene {
	position: absolute;
	left: 0;
	top: 0;
	min-height: 100%;
	min-height: 100vh;
	min-width: 100%;
	min-width: 100vw;
	overflow: hidden;
}

/*シーン1（alfresa）*/
.scene1 {
	opacity:0;
	z-index:9;
	-webkit-animation-name:scene1;
	-webkit-animation-duration:15s;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count: infinite;
	animation-name:scene1;
	animation-duration:15s;
	animation-delay:0s;
	animation-iteration-count: infinite;
}
@-webkit-keyframes scene1 { 
	0% {opacity: 1;}
	10% {opacity: 1;}
	15% {opacity: 0;}
	95% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes scene1 { 
	0% {opacity: 1;}
	10% {opacity: 1;}
	15% {opacity: 0;}
	95% {opacity: 0;}
	100% {opacity: 1;}
}

/*シーン2（hhs）*/
.scene2 {
	opacity:0;
	z-index:8;
	-webkit-animation-name:scene2;
	-webkit-animation-duration:15s;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count: infinite;
	animation-name:scene2;
	animation-duration:15s;
	animation-delay:0s;
	animation-iteration-count: infinite;
}
@-webkit-keyframes scene2 { 
	0% {opacity: 0;}
	10% {opacity: 0;}
	15% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes scene2 { 
	0% {opacity: 0;}
	10% {opacity: 0;}
	15% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}

/*hhsロゴ、コピーのセット*/
.copyset {
	width:100%;
	max-width:600px;
}

/*hhsロゴ*/
.copyset .hhsLogo {
	width:200px;
	text-align:center;
	margin:0 auto 20px;
	-webkit-animation-name:hhs;
	-webkit-animation-duration:15s;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count: infinite;
	animation-name:hhs;
	animation-duration:15s;
	animation-delay:0s;
	animation-iteration-count: infinite;
}
.copyset .hhsLogo img {
	width:100%;
	height:auto;
	display:inline-block;
}
@-webkit-keyframes hhs { 
	0% {opacity: 0;}
	30% {opacity: 0;}
	40% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes hhs { 
	0% {opacity: 0;}
	30% {opacity: 0;}
	40% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}

/*日本語コピー*/
.mask1 { width:100%;height:50px;}
.copyset .copyJP {
	position:relative;
	bottom:-50%;
	color:rgba(255,255,255,1);
	font-size: 2.6em;
	line-height:1.6em;
	letter-spacing:0.1em;
	margin:0 0 5px;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	opacity:0;
	animation-name:copyJP;
	animation-duration:15s;
	animation-delay:0s;
	animation-iteration-count: infinite;
	-webkit-animation-name:copyJP;
	-webkit-animation-duration:15s;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes copyJP {
	0% {opacity: 0;bottom:-30%;}
	35% {opacity: 0;bottom:-30%;}
	45% {opacity: 1;bottom:0;}
	90% {opacity: 1;bottom:0;}
	100% {opacity: 0;bottom:-30%;}
}
@keyframes copyJP {
	0% {opacity: 0;bottom:-30%;}
	35% {opacity: 0;bottom:-30%;}
	45% {opacity: 1;bottom:0;}
	90% {opacity: 1;bottom:0;}
	100% {opacity: 0;bottom:0;}
}

/*英語コピー*/
.mask2 { width:100%;height:30px;}
.copyset .copyEN {
	position:relative;
	bottom:-30%;
	color:rgba(255,255,255,1);
	font-size:1.2em;
	line-height:1.6em;
	-webkit-animation-name:copyEN;
	-webkit-animation-duration:15s;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count: infinite;
	animation-name:copyEN;
	animation-duration:15s;
	animation-delay:0s;
	animation-iteration-count: infinite;
}
@-webkit-keyframes copyEN { 
	0% {opacity: 0;bottom:-30%;}
	40% {opacity: 0;bottom:-30%;}
	50% {opacity: 1;bottom:0;}
	90% {opacity: 1;bottom:0;}
	100% {opacity: 0;bottom:0;}
}
@keyframes copyEN { 
	0% {opacity: 0;bottom:-30%;}
	40% {opacity: 0;bottom:-30%;}
	50% {opacity: 1;bottom:0;}
	90% {opacity: 1;bottom:0;}
	100% {opacity: 0;bottom:0;}
}

/*白背景*/
.bgWh {
	position: absolute;
	left: 0;
	top: 0;
	min-height: 100%;
	min-height: 100vh;
	min-width: 100%;
	min-width: 100vw;
	overflow: hidden;
	background: rgba(255,255,255,1);
	background-image:url(../../assets/images/common/bg-gradient.png);
	background-repeat:repeat-x;
	background-position:top left;
	background-size:100% 100%;
}

/*アルフレッサロゴ*/
.alfresaLogo {
	width:240px;
	text-align:center;
	margin:0 auto;
}
.alfresaLogo img {
	width:100%;
	height:auto;
}

@media screen and (max-width: 480px) {
.copyset .hhsLogo {
	width:140px;
	margin:0 auto 10px;
}
.copyset .copyJP {
	font-size: 2em;
}
.copyset .copyEN {
	font-size: 1em;
}
.alfresaLogo {
	width:160px;
}
.mask1 {height:70px;}
.mask2 {height:20px;}
}

/*============================================================================================
↓リクルートバナー============================================================================
============================================================================================*/
.fixedRight {
	position: absolute;
    bottom: 130px;
    right: 40px;
	z-index:9;
}
#recruitBnr {
	width:160px;
	height:160px;
	border-radius:80px;
	text-align:center;
	overflow: hidden;
}
#recruitBnr a:link,
#recruitBnr a:visited {
	width: 100%;
    height: 100%;
	display:table;
	background-color:rgba(34,196,253,1);
	transition: all 0.3s ease 0s;
}
#recruitBnr a:hover,
#recruitBnr a.hover {
	opacity:0.7;
}
#recruitBnr a span {
	display:table-cell;
	vertical-align:middle;
	background-image:url(../../assets/images/common/bnr-recruitbg.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
#recruitBnr a span img {
	width:80%;
	height:auto;
}
@media screen and (max-width: 1080px) {
.fixedRight {
    right: 20px;
}
}
@media screen and (max-width: 768px) {
.fixedRight {
    bottom: 20px;
    right: 20px;
}
#recruitBnr {
	width:120px;
	height:120px;
}
}

/*============================================================================================
↓おしらせ 最新のタイトル=====================================================================
============================================================================================*/
.fixedBottom {
	position: absolute;
    bottom: 0;
    left: 0;
	z-index:9;
	width: 100%;
	transition: all 0.3s ease 0s;
}
#latestPost {
	width: 100%;
    height: 80px;
    margin: 0 auto;
    overflow: hidden;
	display:table; 
}
#latestPost .rightBox,
#latestPost .leftBox {
	display:table-cell;
	vertical-align:middle;
}
#latestPost .rightBox {
	width:90px;
}
#latestPost .leftBox {
}
#latestPost .leftBox a:link,
#latestPost .leftBox a:visited {
	text-decoration:none;
	display:block;
	padding:15px;
	overflow:hidden;
	background-color: rgba(255,255,255,1);
	transition: all 0.3s ease 0s;
}
#latestPost .leftBox a:hover,
#latestPost .leftBox a.hover {
	background-color: rgba(255,255,255,0.9);
}
#latestPost .leftBox a .meta {
	font-size:1.2em;
	line-height:1.6em;
}
#latestPost .leftBox a .meta .catLabel,
#latestPost .leftBox a .meta .upDate {
	display:inline-block;
}
#latestPost .leftBox a .postTtl {
	font-size:1.4em;
	font-weight:normal;
	line-height:1.6em;
	margin:5px 0 0;
}
@media screen and (max-width: 768px) {
.fixedBottom {
    bottom: -100%;
}
}

/*============================================================================================
↓全体ブロック================================================================================
============================================================================================*/
#contentsWrap-index {
	width:100%;	
}

/*============================================================================================
↓おしらせ 最近の5件==========================================================================
============================================================================================*/
#news {
	background-color:rgba(236,236,236,1);
	padding-bottom:50px;
}
#recentPost {
	width: 100%;
	max-width: 1080px;
    margin: 0 auto;
	list-style:none;
}
#recentPost li {
	display:block;
	border-top:solid 1px rgba(236,236,236,1);
}

#recentPost li a:link,
#recentPost li a:visited {
	text-decoration:none;
	display:block;
	padding:15px;
	overflow:hidden;
	background-color:rgba(255,255,255,1);
	transition: all 0.3s ease 0s;
}
#recentPost li a:hover,
#recentPost li a.hover {
	background-color:rgba(255,255,255,0.5);
}
#recentPost li a .meta {
	font-size:1.2em;
	line-height:1.6em;
}
#recentPost li a .meta .catLabel,
#recentPost li a .meta .upDate {
	display:inline-block;
}
#recentPost li a .postTtl {
	font-size:1.4em;
	font-weight:normal;
	line-height:1.6em;
	margin:5px 0 0;
}
@media screen and (max-width: 768px) {
#news {
	padding:30px 0;
}
}

/*トグルボタン ブロック*/
.btnToggleBox-block {
	position:relative;
	width:90px;
	height:90px;
	background-color:rgba(255,51,153,1);
	cursor:pointer;
	overflow:hidden;
}
.btnToggleBox-block .btnToggleSwitch {
	width:100%;
	position:absolute;
	bottom:0;
	transition: all 0.3s ease 0s;
}
.btnToggleBox-block .btnToggleSwitch.is-visible {
	bottom:-100%;
}
.btnToggleBox-block .btnToggleOpen,
.btnToggleBox-block .btnToggleClose {
	font-size:1.2em;
	color:rgba(255,255,255,1);
	width:100%;
	height:90px;
	display:table;
	text-align:center;
}

/*トグルボタン ワイド*/
.btnToggleBox-wide {
	position:relative;
	width:100%;
	max-width:1080px;
	height:50px;
	margin:0 auto;
	background-color:rgba(255,51,153,1);
	cursor:pointer;
	overflow:hidden;
	display:none;
}
.btnToggleBox-wide .btnToggleSwitch {
	width:100%;
	position:absolute;
	bottom:0;
	transition: all 0.3s ease 0s;
}
.btnToggleBox-wide .btnToggleSwitch.is-visible {
	bottom:-50px;
}
.btnToggleBox-wide .btnToggleOpen,
.btnToggleBox-wide .btnToggleClose {
	font-size:1.2em;
	color:rgba(255,255,255,1);
	width:100%;
	height:50px;
	display:table;
	text-align:center;
}

/*ブロック・ワイド共通*/
.btnToggleOpen {
	background-color:rgba(46,75,167,1);
}
.btnToggleClose {
	background-color:rgba(58,167,194,1);
}
.btnToggleOpen span,
.btnToggleClose span {
	display:table-cell;
	vertical-align:middle;
}
.btnToggleOpen span i,
.btnToggleClose span i {
	vertical-align:middle;
	margin: 0 0 0 3px;
}
@media screen and (max-width: 768px) {
.btnToggleBox-wide {
	display:block;
}
}

/*============================================================================================
↓事業一覧====================================================================================
============================================================================================*/
#jobInfo .jobInfo__intro{
	padding: 110px 0 60px;
	color:rgba(46,75,167,1);
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	text-align: center;
	background: url('../../assets/images/common/jobinfo_icon-bg.jpg') no-repeat center/cover;
	position: relative;
}
#jobInfo .jobInfo__intro::before,
#jobInfo .jobInfo__intro::after{
	content: "";
	width: 100%;
	height: 300px;
	display: block;
	position: absolute;
	background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
	background: linear-gradient(0deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
}
#jobInfo .jobInfo__intro::before{
	top: 0;
	    transform: rotate(180deg);
}
#jobInfo .jobInfo__intro::after{
	bottom: 0;
}

#jobInfo .jobInfo__intro h2{
	font-weight: normal;
	position: relative;
	z-index: 1;
}
#jobInfo .jobInfo__intro h2::after{
	content: "";
    display: block;
    width: 6px;
    height: 50px;
	margin: 40px auto 0;
    background-image: radial-gradient(#2e4ba7 20%, transparent 20%);
    background-size: 20px 20px;
    background-position: 13px -6px;

}
#jobInfo .jobInfo__intro span{
	display: inline-block;
	line-height: 1.6;
}

#jobInfo .jobInfo__intro ul{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	padding: 50px 0;
	margin: auto;
	width: 90%;
	max-width: 780px;
}
#jobInfo .jobInfo__intro li{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background :#2e4ba7;
	color: #fff;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	font-size: 1em;
}
#jobInfo .jobInfo__intro li + li{

}
#jobInfo .jobInfo__intro li::before{
	content: "";
	display: block;
	width: 40px;
	height: 36px;
	background: #fff;
	margin-bottom: 10px;
}
#jobInfo .jobInfo__intro li:nth-of-type(1)::before{
	background: url('../../assets/images/common/jobInfo_icon-1.png') no-repeat center/cover;
}
#jobInfo .jobInfo__intro li:nth-of-type(2)::before{
	background: url('../../assets/images/common/jobInfo_icon-2.png') no-repeat center/cover;
}
#jobInfo .jobInfo__intro li:nth-of-type(3)::before{
	background: url('../../assets/images/common/jobInfo_icon-3.png') no-repeat center/cover;
}


@media screen and (max-width: 768px) {
	#jobInfo .jobInfo__intro{
		font-size: 2rem;
	}
	#jobInfo .jobInfo__intro ul{
		padding: 30px 0;
	}
	#jobInfo .jobInfo__intro li{
		width: 200px;
		height: 200px;
	}
}
@media screen and (max-width: 480px) {
	#jobInfo .jobInfo__intro {
    font-size: 1.2rem;
	}
	#jobInfo .jobInfo__intro li{
		width: 130px;
		height: 130px;
	}
}

#jobInfo .column2 {
	width:100%;
	height: 345px;
	display: flex;
/* 	display:table; */
}
#jobInfo .column2 .col {
	width:50%;
/* 	display:table-cell; */
	vertical-align:middle;
	height: 100%;
}
#jobInfo .column2 .col .boxHover{
	height: 100%;
}
@media screen and (max-width: 768px) {
	#jobInfo .column2 {
		height: 200px;
	}
#jobInfo .column2 .col {
	width:100%;
	display:block;
}
}
@media screen and (max-width: 480px) {
	#jobInfo .column2 {
    height: auto;
    flex-wrap: wrap;
	}
	#jobInfo .column2 .col {
    height: 200px;
	}
}


/*事業イントロダクション*/
#jobInfo h1.introduction {
	color: rgba(255,255,255,1);
    font-size: 1.8em;
    font-weight: normal;
    line-height: 2em;
	letter-spacing:0.1em;
    padding: 30px 20px;
    display: block;
    margin: 0 auto;
    max-width: 320px;
}

/*チェックボックス付きテキスト*/
span[data-icon-pos="left"] {
	font-size:1.2em;
	display: block;
	position: relative;
	color: rgba(255,255,255,1);
	padding: 5px 0 5px 30px;
	margin:5px 0 10px;
	border-bottom:solid 1px rgba(255,255,255,0.3);
}
span[data-icon-pos="left"]:before{
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	font-weight: bold;
	width: 25px;
	height: 20px;
	background-position: center center;
	background-size: contain;
	content: "";
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
span[data-icon="check"]:before {
	background-image:url(../../assets/images/common/checkbox-wh.png);
}

/*医療用医薬品（PC・tab時のみ表示）*/
.medicineWrap {
	width: 100%;
	height:100%;
	overflow: hidden;
    position: relative;
}
.medicineWrap .bgContainer {
    width: 100%;
	height:100%;
	box-sizing:border-box;
	overflow:hidden;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	transition: all 0.3s ease 0s;
}
.medicineWrap .bgContainer.medicine{
	background-image:url(../../assets/images/common/img-medicine.jpg);
}
.medicineWrap .bgContainer.equipment{
	background-image:url(../../assets/images/common/img-equipment.jpg);
}
.medicineWrap .bgContainer:hover {
	opacity:0.6;
}
.medicineWrap .bgContainer img {
	width:100%;
	height:auto;
	vertical-align: bottom;
	display:none;
}


.medicineWrap .ttl {
    width: 70%;
    max-width: 300px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}
.medicineWrap .ttl p {
	color: rgba(255,255,255,1);
    font-size: 2.6em;
    line-height: 2em;
	letter-spacing:0.1em;
	text-align:center;
}
.medicineWrap .btnStyle {
	opacity:1 !important;
}

/*お得意様支援ツール*/
.supportTool {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	padding: 20px;
	color:rgba(46,75,167,1);
	text-decoration: none !important;
	border: solid 1px rgba(236,236,236,1);
	transition: all 0.3s ease 0s;
}
.supportTool:hover {
	opacity: .5;
}
.supportTool .copy {
	text-align: center;
}
.supportTool .copy .copyTtl {
	color:rgba(46,75,167,1);
	font-size:2.2em;
	line-height:1.6em;
	margin-bottom: .3em;
}
.supportTool .copy .copyTxt {
	color:rgba(0,0,0,1);
	font-size:1.4em;
	line-height:1.6em;
}
.supportTool .copy .copyTxt .ico {
	font-size: 80%;
	padding-left: 20px;
	position: relative;
}
.supportTool .copy .copyTxt .ico::before {
	content: '';
	display: inline-block;
	position:  absolute;
	top: 50%;
	left: 0;
	transform: translate(0,-50%);
	width: 15px;
	height: 15px;
	background-image:url(../../assets/images/common/ico-pdf.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size: contain;
}
.supportTool .book {
	max-width: 150px;
	width: 100%;
	height: auto;
	filter: drop-shadow(5px 5px 5px #ccc);
}
@media screen and (max-width: 768px) {
.supportTool .copy {
	text-align: left;
}
}
@media screen and (max-width: 480px) {
.supportTool {
	flex-direction: column;
	gap: 20px;
	padding: 30px;
}
.supportTool .copy {
	text-align: center;
}
}

/*アルフレッサグループ*/
.alfresaGroup dl {
	display:table;
}
.alfresaGroup dl dt {
	width:40%;
}
.alfresaGroup dl dt,
.alfresaGroup dl dd {
	display:table-cell;
	vertical-align:middle;
	font-size:1.4em;
	line-height:1.6em;
	padding:0 10px;
}
.alfresaGroup dl dt a:link,
.alfresaGroup dl dt a:visited {
	width:100%;
	max-width:240px;
	display:block;
	margin:0 auto;
}
.alfresaGroup dl dt .alfLogo {
	width:100%;
	height:auto;
}
@media screen and (max-width: 480px) {
.alfresaGroup dl dt,
.alfresaGroup dl dd {
	width:100%;
	display:block;
	padding:10px 0;
}
}

/*============================================================================================
↓事業所一覧==================================================================================
============================================================================================*/
/*カラム*/
#office .column2 {
	width:100%;
	display:table;
}
#office .column2 .colLeft {
	width:40%;
	display:table-cell;
	vertical-align:middle;
}
#office .column2 .colRight {
	width:60%;
	display:table-cell;
	vertical-align:middle;
}
@media screen and (max-width: 768px) {
#office .column2 .colLeft,
#office .column2 .colRight {
	width:100%;
	display:block;
}
}

/*拠点イントロダクション*/
#office .introduction {
	position:relative;
}
#office .introduction h3 {
	color:rgba(46,75,167,1);
    font-size: 3em;
    font-weight: normal;
    line-height: 2em;
    letter-spacing: 0.1em;
    margin: 0 auto;
	display: inline-block;
	position:relative;
}
#office .introduction h3:before {
	content: "";
    position: absolute;
    bottom: 10px;
    left: 0;
	z-index:-1;
    width: 100%;
    height: 15px;
    background-color: rgba(240,231,2,1);
}
#office .introduction p {
	font-size:1.6em;
	line-height:2em;
}

/*拠点マップ*/
#office .locationMap {
	max-width: 600px;
    width: 100%;
	margin:0 auto;
	position:relative;
}
#office .locationMap img {
	width:100%;
	height:auto;
}
#office .locationMap .marker1 {
	position:absolute;
	top: 40%;
    left: 31.5%;
	z-index:2;
	width:30px;
	height:30px;
	border-radius:50%;
	border:solid 2px rgba(34,196,253,1);
	opacity:0;
	transform:scale(0.5);
	-webkit-transform: scale(0.5);
}
	/* 点滅 */
	.blinking {
		-webkit-animation:blink .75s ease-in-out infinite;
		animation:blink .75s ease-in-out infinite;
	}
	@-webkit-keyframes blink{
		0% {opacity:0; -webkit-transform:scale(0.5);}
		100% {opacity:1; -webkit-transform:scale(1);}
		100% {opacity:0; -webkit-transform:scale(1);}
	}
	@keyframes blink{
		0% {opacity:0; transform:scale(0.5);}
		90% {opacity:1; transform:scale(1);}
		100% {opacity:0; transform:scale(1);}
	}
@media screen and (max-width: 768px) {
#office .introduction {
	text-align:center;
	margin:0 0 30px;
}
}
@media screen and (max-width: 480px) {
#office .locationMap {
	width:320px;
}
#office .locationMap .marker1 {
	top: 38%;
    left: 30.7%;
    width: 20px;
    height: 20px;
}
}

/*各支店スライダー*/
#office .tickerSlide {
	list-style:none;
}
#office .tickerSlide > li {
	box-sizing:border-box;
	margin:0 10px;
	padding:0 0 20px;
}
#office .tickerSlide > li img {
	width:100%;
	height:auto;
}

/*============================================================================================
↓倉庫========================================================================================
============================================================================================*/
#warehouse > .inner {
	position:relative;
	padding-top:30px;
}
#warehouse .bgContainer img {
	width:100%;
	height:auto;
}
#warehouse .onTextbox {
	width:320px;
	height: 200px;
	position: absolute;
	top:0;
	left:30px;
}
#warehouse .onTextbox::before,
#warehouse .onTextbox::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
}
#warehouse .onTextbox::before {/*重なり下のBOX*/
	background-color:rgba(46,75,167,1);
	top: 10px;
    left: 10px;
}
#warehouse .onTextbox::after {/*重なり上のBOX*/
	background-color:rgba(255,255,255,1);
	border:solid 1px rgba(46,75,167,1);
}
#warehouse .onText {
	color:rgba(46,75,167,1);
	padding:30px;
	position: absolute;
	top:0;
	left:0;
	z-index:2;
}
#warehouse h3 {
	font-size:2em;
	font-weight:normal;
	line-height:1.6em;
	margin-bottom:5px;
}
/*for IE10---11*/
_:-ms-input-placeholder, :root #warehouse h3 {
	letter-spacing:0;
}
#warehouse p {
	font-size:1.4em;
	line-height:1.6em;
}
/*for IE10---11*/
_:-ms-input-placeholder, :root #warehouse p {
	font-size:1.3em;
	line-height:1.6em;
}
@media screen and (max-width: 480px) {
#warehouse > .inner {
	padding-top:0px;
}
#warehouse .onTextbox {
	width:100%;
	height: auto;
	position:inherit;
	top:inherit;
	left:inherit;
}
#warehouse .onTextbox::before,
#warehouse .onTextbox::after {
	display:none;
}
#warehouse .onText {
	padding: 10px 0;
	position:inherit;
	top:inherit;
	right:inherit;
}
}

/*============================================================================================
↓youtube======================================================================================
============================================================================================*/
#youtube {
	width: 100%;
	max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

#youtube .innerWrap {
	height: 0;
    overflow: hidden;
    padding: 0 0 56.25%;
    position: relative;
}

#youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/*============================================================================================
↓ご挨拶======================================================================================
============================================================================================*/
/*カラム*/
#message .column2 {
	width:100%;
	display:table;
}
#message .column2 .col {
	width:50%;
	display:table-cell;
	vertical-align:middle;
}
@media screen and (max-width: 768px) {
#message .column2 .col {
	width:100%;
	display:block;
}
}

/*社長画像*/
#message .bgContainer {
	max-width:360px;
	margin:0 auto;
}
#message .bgContainer img {
	width:100%;
	height:auto;
}

/*テキストボックス*/
#message .floatBox {
	width:100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
}
#message p.message {
	float: right;
    margin-right: 100px;
	font-size:1.6em;
	line-height:2em;
	display: inline-block;
}
#message p.name {
	float:left;
	margin-left: 130px;
	font-size:1.6em;
	line-height:1.6em;
	display: inline-block;
}
#message p.name .status {
	font-size:80%;
	margin-bottom:5px;
	display: inline-block;
}

/*下部補足*/
#message .hhsLogo {
	width: 50px;
    height: 40px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 10px;
}
#message .hhsLogo img {
	width:100%;
	height:auto;
}
#message .add {
	text-align:center;
}
#message .add p {
	font-size:1.4em;
	line-height:2em;
	text-align:center;
	margin:20px auto 0;
}
@media screen and (max-width: 768px) {
#message .bgContainer {
	padding:10px;
}
#message .floatBox {
	width: 70%;
    position: inherit;
    top: inherit;
    left: inherit;
    padding-bottom: 60px;
    margin: 0 auto;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
}
#message p.message {
	float:inherit;
    margin-right:0;
}
#message p.name {
	font-size:1.2em;
	float:right;
	margin-left:0;
}
}
@media screen and (max-width: 480px) {
#message .floatBox {
	width: 100%;
}
}

/*============================================================================================
↓youtube埋め込み================================================================================
============================================================================================*/


/*============================================================================================
↓明祥について================================================================================
============================================================================================*/
#profile img {
	width:100%;
	height:auto;
}

/*下部補足*/
#profile .add {
	text-align:center;
}
#profile .add p {
	font-size:1.4em;
	line-height:2em;
	text-align:center;
	margin:20px auto 0;
}

/*============================================================================================
↓スペシャルコンテンツ========================================================================
============================================================================================*/
/*2カラム*/
#specialContents.column2 {
	width:100%;
	display:block;
}
#specialContents.column2 .col {
	width:50%;
	display:block;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
#specialContents.column2 .col {
	width:100%;
	display:block;
}
}

#specialContents a:link,
#specialContents a:visited {
	width:100%;
	height:260px;
	display:block;
	overflow:hidden;
	transition: all 0.3s ease 0s;
}
#specialContents a:hover,
#specialContents a:active, 
#specialContents a.hover {
	opacity:0.7;
}
#specialContents h1 {
	font-size:1.4em;
	font-weight:normal;
	line-height:1.6em;
	text-align:center;
	padding:15px 0 30px;
}

/*ウェブマガジン*/
#webMagagine {
	position:relative;
	background-color:rgba(225,219,215,1);
}
#webMagagine .bgContainer {
	width:100%;
	max-width:620px;
	min-width:480px;
	height:auto;
	position:absolute;
	top:0;
	left:50%;
	transform:translate(-50%,0);
	-webkit-transform: translate(-50%,0);
}
#webMagagine .bgContainer img {
	width:100%;
	height:auto;
	vertical-align:bottom;
}
#webMagagine .ttl {
	width:100%;
	text-align:center;
	position:absolute;
	top:30px;
	left:50%;
	transform:translate(-50%,0);
	-webkit-transform:translate(-50%,0);
}
#webMagagine .ttl img {
	width:100%;
	max-width:160px;
	height:auto;
}
#webMagagine .ttl p {
	color:rgba(51,51,51,1);
	font-size:1.3em;
	line-height:1.6em;
}

/*採用サイト*/
#recruitSite {
	position:relative;
	background-color:rgba(34,196,253,1);
	overflow:hidden;
}
#recruitSite .bgContainer {
	width:100%;
	height:auto;
	position:absolute;
	top:50%;
	text-align:right;
	-webkit-transform:translate(0,-50%);
	transform:translate(0,-50%);
}
#recruitSite .bgContainer img {
	width:100%;
	height:auto;
	vertical-align:bottom;
	max-width:720px;
}
#recruitSite .ttl {
	color:rgba(255,255,255,1);
	font-size:1.6em;
	font-weight:bold;
	line-height:1.6em;
	width:70%;
	max-width:350px;
	height:auto;
	position:absolute;
	top:30px;
	left:30px;
}
#recruitSite .ttl img {
	width:100%;
	height:auto;	
}
#recruitSite .ttl p {
	margin:0 0 10px;
}
#recruitSite .ttl p span.jp {
	font-size:0.8em;
	font-weight:normal;
	display:block;
}