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

/* 共通 */
.sp_only{display: none;}
.pc_only{display: block;}
@media only screen and (max-width: 767px) {
	.sp_only{display: block;}
	.pc_only{display: none;}
}
.text-center{
	text-align: center;
}
.border{
	border: 1px solid #d0d0d0;
}
h2{
	font-size: 2rem;
    font-weight: 600;
	text-align: center;
	margin: 1rem 0;
}
h3{
    font-size: 1.2rem;
    font-weight: 600;
}
h4{
    font-size: 1.2rem;
    font-weight: 600;
}
sup{
	color: #00a0e9;
}
.margin-top{
	margin-top: 3rem;
}

/* flex PC3列 */
ul.flex-menu{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
ul.flex-menu li.flex-item{
	margin: 8px auto;
	width: 30%;
}
@media only screen and (max-width: 767px) {
	/* SP2列 */
	ul.flex-menu li.flex-item{
		width: 46%;
	}
	/* SP1列 */
	ul.flex-menu li.flex-item.sp_w100{
		width: 100%;
		margin: 5%;
	}

}

/* トップ */
#maintop{
	padding-bottom: 2em;
	border-bottom: 1px solid #9d9d9d;
	margin: 0 5% 5%;
}
#maintop p.copy{
	font-size: 1.2rem;
	text-align: left;
	line-height: 1.8;
	margin: 2em 0 4em;
	word-break: break-word;
}

/* 使い方のご紹介 */
#use h2{
	color: dimgray;
	letter-spacing: 0.5rem;
	margin-bottom: 2rem; 
}
/* 使い方のご紹介 flex */
#use a { text-decoration: none; display: contents;}
#use ul.flex-menu a li.flex-item {
	border: 1px solid #7b7b7b;
	border-radius: 5px;
	background: #FFF;
	background-image: url(/business/print/solution/optimization/images/card_bg.png);
	background-repeat: no-repeat;
	background-position: bottom right;
	overflow: hidden	
}
#use ul.flex-menu li.flex-item p.cap{
	padding: 0.6rem;
	padding-right: 42px;
	font-size: 1rem;
	
}
#use ul.flex-menu li.flex-item {
    transition: 0.2s;
}
#use ul.flex-menu a:hover li.flex-item {
	opacity: 0.8;
}
#use a:focus {
  outline: none;
}
@media only screen and (max-width: 767px) {
	#use ul.flex-menu a li.flex-item {
		background-image: url(/business/print/solution/optimization/images/card_bg_sp.png);
	}
	#use ul.flex-menu a li.flex-item p.cap{
		padding: 0.4rem;
		padding-right: 26px;
	}
}

/* セクション */
section{
	margin: 5%;
}
.itemBoxWrap {
	margin-top: 3em;
}
.itemBoxWrap h3{
    position: relative;
	margin-bottom: 1rem;
}
.itemBoxWrap p{
	margin: 0 2rem 2rem;
    line-height: 1.8;
}
@media only screen and (max-width: 767px) {
	section p.sp_text-left{
		text-align: left;
	}
}
.itemBoxWrap h3.sectiontitle{
	padding-left: 8px;
	border-left: 5px solid #212529;
	margin-bottom: 1rem;
}

/* セクション 注釈 */
.itemBoxWrap ul{
    padding: 1rem 2rem 0;
}
.indent1 {
    text-indent: -0.5em;
    margin-left: 0.5em;
}
.indent2{
	text-indent: -1em;
	margin-left: 1em;
}
.itemBoxWrap .caption li{
	font-size: 0.86rem;
}
ul.disc li{
	margin-left: 1.5em;
	text-indent: -1.5em;
}
ul.disc li:before{
	content: "\25cf";
	margin-right: 0.5em;
}
.star li {
	margin-left: 1.1em;
    text-indent: -1.1em;
}
ul.star li:before{	
	content: "※";
	color: #00a0e9;
	margin-right: 0.5em;
}

/* セクション img */
.middleImg{
	width: 60%;
	max-width: 600px;
	margin: 0 auto 1rem;
}
.largeImg{
	width: 80%;
	margin: 0 auto 1rem;
}
.cocorooffice{
	width: 50%;
	max-width: 350px;
	margin: 1rem auto;
}
.middleImg h3,.largeImg h3,
.middleImg p,.largeImg p{
	margin-left: 0;
	margin-right: 0;
}

@media only screen and (max-width: 767px) {
	.middleImg{ width: 80%;}
	.largeImg{ width: 100%;}
}
/* セクション howto flex */
.howto p{
	margin: 10px 0 0;
}
#cont02 .howto .flex-item{
	margin: 8px 2em;
}
.howto p span{
	display: inline-block;
	background: #666666;
	width: 28px;
	height: 28px;
	color: #FFF;
	font-size: 1.2rem;
	text-align: center;
	line-height: 28px;
	margin-right: 0.6rem;
	border-radius: 3px;
}
@media only screen and (max-width: 767px) {
	/* sp delay無効化 */
	li.sp_w100.flex-item.transitionDelay_05s,
	li.sp_w100.flex-item.transitionDelay_1s {
	  transition-delay: 0s;
	}

}

/* youtube */
.youtube{
	position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.youtubeBox{
	box-sizing: border-box;
}
.youtube-container{
	text-align: center;
	margin: 0 auto 1rem;
	max-width: 600px;
}
.youtube iframe{
	position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}










/* -----------------------------------------------------------
/* #効果（スクロールの動き）
----------------------------------------------------------- */
/* 上からfadeIn */
.uekara {
  transform: translate(0, -20px);
  -webkit-transform: translate(0, -20px);
  opacity: 0;
  transition: 1.6s;
}
/* 下からfadeIn */
.shitakara {
  transform: translate(0, -20px);
  -webkit-transform: translate(0, 20px);
  opacity: 0;
  transition: 1.6s;
}
/* 左からfadeIn */
.hidarikara {
  transform: translate(-20px, 0);
  -webkit-transform: translate(-20px, 0);
  opacity: 0;
  transition: 0.8s;
}
/* 右からfadeIn */
.migikara {
  transform: translate(20px, 0);
  -webkit-transform: translate(20px, 0);
  opacity: 0;
  transition: 0.8s;
}
/* fadeIn */
.fadeIn {
  opacity: 0;
  transition: 1.6s;
}
/* delay */
.transitionDelay_03s {
  transition-delay: 0.3s;
}
.transitionDelay_05s {
  transition-delay: 0.5s;
}
.transitionDelay_1s {
  transition-delay: 1s;
}
.transitionDelay_2s {
  transition-delay: 2s;
}
.transitionDelay_3s {
  transition-delay: 3s;
}
.transitionDelay_4s {
  transition-delay: 4s;
}

.ef_tt_m {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  opacity: 1;
}

.scroll-in.slide-in-filter .filter1 {
	background-color: #E6000D;
	opacity: .8;
}

.scroll-in.slide-in-filter .filter2 {
	background-color: #FFFFFF;
}

.bg-gray .scroll-in.slide-in-filter .filter2 {
	background-color: white;
}