@charset "utf-8";
/*=============================================================
COMMON
=============================================================*/
img{
	line-height: 1.0 !important;
	image-rendering: -webkit-optimize-contrast;
}
img.full{
	max-width: 100%;
	height: auto;
}
.dsib{
	display: inline-block;
}
.section {
 margin: 0 auto 60px auto;
}
#contents.business h4.head2 {
	padding-top: 25px;
}
* > .business sup {
  line-height: 10px;
}
* > .business sub {
	font-size: 75%;
}
.dspPC{
	display: inline-block;
}
.dspSP{
	display: none;
}
/*=============================================================
TTL
=============================================================*/
h3.boxBlue{
	margin: 40px 0 0;
	padding: 10px;
	text-align: center;
	font-size: 125%;
	background-color: #cfe7fa;
}
/*=============================================================
BOXLineUP
=============================================================*/
.lineUp{
	position: relative;
}
.lineUpScl{
	overflow-x: auto;
}
#lineUpSclInner{
	width: 660px;
	position: relative;
}
.lineUpInner{
}




.boxLineUp{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.boxLineUp .box{
	width: 320px;
	margin: 20px 0 0;
}
.boxLineUp .box h4{
	font-size: 115%;
	padding: 8px;
	background-color: #eee;
	margin: 0 0 10px;
	text-align: center;
}

/*=============================================================
BOXCLM
=============================================================*/
.boxClmFlex{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.boxClmFlex.spFlex{
	display: flex;
}
.boxClmFlex.jcCenter{
	justify-content: center;
}
.boxClmFlex .boxL{
	width: 405px;
}
.boxClmFlex .boxR{
	width: 255px;
}
.boxClmFlex .box2Clm{
	width: calc((100% - 20px) / 2);
	margin: 20px 0 0;
}
.boxClmFlex.jcCenter .box2Clm{
	width: 276px;
	padding: 0 10px;
}
.boxClmFlex .box3Clm{
	width: 210px;
	margin: 20px 0 0;
}
.boxClmFlex.jcCenter .box3Clm{
	width: 240px;
	padding: 0 15px;
}
.boxClmFlex .box4Clm{
	width: calc((100% - 45px) / 4);
	margin: 20px 0 0;
	text-align: center;
}
.boxClmFlex:before,
.boxClmFlex:after{
	content: "";
	width: calc((100% - 45px) / 4);
	height: 0px;
}
.boxClmFlex:before{
	order: 1;
}
.boxClmFlex.jcCenter:before,
.boxClmFlex.jcCenter:after{
	content: "";
	width: 0px;
	height: 0px;
}
.boxClmFlex a{
	color: #0099cc;
}
.boxClmFlex figcaption{
	padding: 5px 0 0;
}
.boxW400{
	width:100%;
	max-width: 400px;
	margin: 0 auto;
}
.boxW480{
	width:100%;
	max-width: 480px;
	margin: 0 auto;
}
.boxW580{
	width:100%;
	max-width: 580px;
	margin: 0 auto;
}
.boxMovie{
	width:100%;
	max-width: 560px;
	margin: 30px auto 0;
}
.boxMovie .thum{
	border: 1px solid #ccc;
	position: relative;
}
.boxMovie .thum a{
  display: block;
	position: relative;
}
.boxMovie .thum a:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../corporate/business/images/arw.png);
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.boxMovie .thum img{
	width:100%;
	height: auto;
	line-height: 1.0;
	vertical-align: bottom;
}
.boxMovie .thumCaption{
	text-align: center;
	padding: 8px;
	background-color: #ccc;
}


/*=============================================================
NEWS/STORY
=============================================================*/
.story figure .fig_img {
	width: 210px;
	height: 125px;
	margin: 0 auto;
	text-align: center;
}
.story figure .fig_img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

/*=============================================================
CATALOG
=============================================================*/
.catalog figure img{
	border: 1px solid #ccc;
}


/*=============================================================
BTN
=============================================================*/
.boxBtnTxt{
	padding: 10px 0 0;
	text-align: right;
}
.boxBtnTxt+.boxBtnTxt{
	padding: 0;
}
.boxBtnTxt a{
	display: inline-block;
	color: #0099cc;
	padding: 0 0 0 12px;
	position: relative;
}
.boxBtnTxt a:before{
	content: "";
	width: 6px;
	height: 6px;
	border-top: 1px solid #0099cc;
	border-right: 1px solid #0099cc;
	position: absolute;
	left: -1px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}
/*=============================================================
CONTACT
=============================================================*/
.boxContact{
	margin: 40px 0 20px;
}
.boxContact p.btn{
	width: 248px;
	margin: 0 auto;
}

/*=============================================================
#clm01
=============================================================*/
.section #clm01 .boxClm{
	clear:both;
	margin-top:20px;
	background-color:#e5f5fd;
	padding:10px;
}
.section #clm01 .boxClm:after{
	content: "";
	display: block;
	clear: both;
}
.section #clm01 .boxClm h3{
	display:inline-block;
	position:relative;
	color:#008cd6;
}
.section #clm01 .boxClm h3 img{
	position:absolute;
	bottom:4px;
	right:-150px;
}
.section #clm01 .boxClm .boxL {
	float:left;
	width:460px;
}
.section #clm01 .boxClm .boxR {
	float:right;
	width:174px;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 SP
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:959px) {
/*=============================================================
COMMON
=============================================================*/
#contents.business h2 {
 font-size: 115% !important;
}
#contents.business p {
 font-size: 95%;
}
#contents.business ul, #contents.business ol, #contents.business dl {
 font-size: 95%;
}
#contents.business figcaption {
 font-size: 95%;
}
.dspPC{
	display: none;
}
.dspSP{
	display: inline-block;
}
/*=============================================================
TTL
=============================================================*/
h3.boxBlue{
	font-size: 110%;
}
/*=============================================================
BOXLineUP
=============================================================*/
.boxLineUp{
	display: block;
}
.boxLineUp .box{
	width: 320px;
	margin: 20px auto 0;
}
.boxLineUp .box h4{
	font-size: 110%;
}
/*=============================================================
BOXCLM
=============================================================*/
.boxClmFlex{
	display: block;
}
.boxClmFlex.spFlex{
	display: flex;
}
.boxClmFlex .boxL{
	width: 100%;
}
.boxClmFlex .boxR{
	width: 100%;
}
.boxClmFlex .box2Clm{
	width: calc(100%);
}
.boxClmFlex.jcCenter .box2Clm{
	width: 100%;
	padding: 0;
}
.boxClmFlex .box3Clm{
	width: 100%;
}
.boxClmFlex.jcCenter .box3Clm{
	width: 100%;
	padding: 0;
}
.boxClmFlex .box4Clm{
	width: calc((100% - 15px) / 2);
}
/*=============================================================
NEWS/STORY
=============================================================*/
.story figure .fig_img {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	height: auto;
	text-align: center;
}
.story figure .fig_img img {
	width: auto;
	max-width: 480px;
	margin: 0 auto;
	height: auto;
	max-height: 200px;
}
/*=============================================================
CONTACT
=============================================================*/
.boxContactInner{
	display: block;
}
.boxContactInner p.txt{
	width: calc(100%);
	padding-bottom: 10px;
}
.boxContactInner p.btn{
	margin: 0 auto;
}
/*=============================================================
clm01
=============================================================*/
.section #clm01 .boxClm .boxL {
	float:none;
	clear: both;
	width:100%;
}
.section #clm01 .boxClm .boxR {
	float:none;
	clear: both;
	width:100%;
	padding: 10px 0 0;
	text-align: center;
}
}
