@charset "utf-8";

/* iOSでのデフォルトスタイルをリセット */
#usersManuals input[type="submit"],
#usersManuals input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
#usersManuals input[type="submit"]::-webkit-search-decoration,
#usersManuals input[type="button"]::-webkit-search-decoration {
  display: none;
}
#usersManuals input[type="submit"]::focus,
#usersManuals input[type="button"]::focus {
  outline-offset: -2px;
}
#usersManuals input[type=text], #usersManuals input[type=email], #usersManuals input[type=tel], #usersManuals select , #usersManuals textarea {
 padding: .5em .5em;
 box-sizing: border-box;
 border: solid 1px #D9D9D9;
 border-radius : 3px;
 font-size: 1.6rem;
}
#usersManuals input:placeholder ,
#usersManuals input:-ms-input-placeholder ,
#usersManuals input:-ms-input-placeholder { color: #d0d0d0 !important; }

#downloadbutton,
.agreement input[type="submit"],
.agreement input[type="button"] ,
.agreement button[type="button"] {
 display: block;
 padding: 1em 1.5em;
 box-sizing: border-box;
 border-radius : 3px;
 text-align:center;
 font-size: 1.2rem;
 cursor: pointer;
 color: #fff;
 background-color: #716f63;
}


@media screen and (min-width: 769px){
.agreement input[type="submit"],
.agreement input[type="button"] ,
.agreement button[type="button"] {
  font-size: 1.2rem;
 }
}
@media screen and (max-width: 768px){
.agreement input[type="submit"],
.agreement input[type="button"] ,
.agreement button[type="button"] {
  font-size: 0.875rem;
 }
}

.notice { text-align: left; line-height: 1.6; }
.notice > li { position: relative; margin-top: 5px; padding-left:1rem; }
.notice > li:before { position: absolute; top:0; left:0; }
.notice > li:before { content: "*"; }

@media screen and (min-width: 769px){
 .notice { margin-top: 35px; }
}
@media screen and (max-width: 768px){
 .notice { margin-top: 25px; }
.notice > li { font-size: .875rem; }
}


/*
User’s Manuals result
/downloads/manuals/result.html
================================================ */
#usersManuals div > input:not([type="submit"]) , #usersManuals dd input , #usersManuals dd select {
 width: 100%;
 color: #707070;
 font-size: 1.25rem;
}

#usersManuals dd .haf {
  width: 50%;
 }

#usersManuals .result dd { margin-top: 1em; }
#usersManuals .result a { color: inherit; text-decoration: none; }

/*::::::::::::: Contents Etc :::::::::::::*/

.btnArea ul{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}


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

#usersManuals form > div { position: relative; padding: 0 2rem;}
#usersManuals .onbg {}


#usersManuals .choicemodel{padding:1rem;display: flex; justify-content: space-between; flex-wrap: wrap; color: #fff;background-color:  #eae9d8;}
#usersManuals .choicemodel h3{color: #5b6771;font-size: 1.4rem;}
#usersManuals .choicemodel h3 span{color: #716F63;font-size: 1.4rem;font-weight: normal;}
#usersManuals .choicemodel .back{background-color: #959283;line-height: 1;margin: 0;padding: 10px;}
#usersManuals .choicemodel .back a{color: #fff;text-decoration: none;}


#usersManuals .langswitcher {
 position: absolute;
 right:0;
 top:0;
 font-size: 1.6rem;
}
 #usersManuals .langswitcher select { font-size: 1.6rem; }
 #usersManuals h3.ttl {color:#716F63;background: #e6e6e6;font-size: 1.4rem;margin: 30px 0 25px;padding: 5px 10px;}
 #usersManuals h3.ttl2 {color:#716F63;font-size: 1.4rem;margin: 30px 0 0 0;padding: 5px;}
 #usersManuals .onbg dl {font-size: 1.6rem;}
 #usersManuals .onbg .flow dl{width: 31%;}
 #usersManuals .onbg .flow{display: flex; justify-content: space-between; flex-wrap: wrap;}
 #usersManuals .onbg dl > dt {font-size: 1.4rem;font-weight: bold;margin-bottom: 10px;color: #716F63;}
 #usersManuals .onbg dl > dd {}
 #usersManuals h2 + dl > dt { font-size: 1.6rem; }
 #usersManuals .onbg dl > dt:not(:first-of-type) , #usersManuals .onbg dl > dd:not(:first-of-type) { margin-top: 20px; } 
 .searchbt { min-width: 460px; margin: 50px auto 0; }
 #usersManuals .result dl { margin-top: 80px; padding: 0 10%; font-size: 2.5rem; }	
 #usersManuals .result dd { padding-left: 2em; }
 .result .notice { font-size: 2rem; }
 #usersManuals .dllist { margin-left: 1.5rem;}
 
 /*::::::::::::: 20230301 add  :::::::::::::*/
 
  #usersManuals .disp-img{
	/*padding:20px ; */
	margin:10px;
    background-image:url(./image/image_online.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;                /* 画像の繰り返しを指定  */              
    width:300px;                                   /* 横幅のサイズを指定    */
    height:189px;                                 /* 縦幅のサイズを指定    */
}

#usersManuals .p:after {
	white-space: pre;
	content: "複合機の一般的な使い方についてご紹介しています。\A スマートフォンなどモバイル端末をご利用の方はこちらをご覧ください。";
	font-size: 1em;
	
}
 
 /*::::::::::::: 20230301 add  :::::::::::::*/
  
  
 #usersManuals .dllist li + li { margin-top: .8em; }
 #usersManuals .dllist a {
  display: inline-block;
  color: #000;
  text-decoration:none;
  position: relative;
  font-size: 1.6rem;
  padding-left: 18px;
 }
 #usersManuals .dllist a:hover {
  text-decoration:underline;
 }	
	
.dllist a span.filesize {
 padding-left: 1em;
 font-size: 1.3rem;
}	
	
 #usersManuals .dllist a:before {
  display: block;
  width: 6px;
  height: 6px;
  border-right: solid 2px #000;
  border-bottom: solid 2px #000;
  content: "";
  position: absolute;
  top:15px;
  left:0;
  transform: rotate(-45deg);
 }

/*::::::::::::: Contents Etc :::::::::::::*/
#contentsEtc h2{
  font-size: 1.8em;
  text-align: center;
}
	
.contEtcArea{ margin: 5rem 0; }
	
.contEtcArea h4 {
 font-size: 1.2rem;
 padding-bottom: .5em;
 border-bottom: solid 2px #d1d1d1;
}
	
.contEtcArea .btnArea{ margin: 3rem auto 1rem; }
	
.btnArea ul {
 display: flex;
 justify-content: flex-start;	
 flex-wrap: wrap;
}
.btnArea ul li{
  width: 31.3%;
  margin-right: 3%;
  margin-bottom: 1rem;
  border: solid 1px #f4f4f4;
}	

.btnArea ul li:nth-child(3n) {
  margin-right: 0;
 }
	
.btnArea ul li a {
 display: block;
 width: 100%;
 text-align: center;
}

.btnArea ul li img { max-width: 315px; margin: 0 auto; }

.btnArea ul.spBtn{ display: none; }

}
@media screen and (max-width: 768px){
#usersManuals .choicemodel{padding:1rem;display: flex; justify-content: space-between; flex-wrap: wrap; color: #fff;background-color:  #eae9d8; }
#usersManuals .choicemodel h3{color: #5b6771;font-size: 1.1rem;}
#usersManuals .choicemodel h3 span{color: #716F63;font-size: 1.2rem;font-weight: normal;}
#usersManuals .choicemodel .back{background-color: #959283;line-height: 1;margin: 1em auto 0;padding: 10px;}
#usersManuals .choicemodel .back a{color: #fff;text-decoration: none;}

#usersManuals .langswitcher {
  margin-top: 1em;
  font-size: 1.2rem;
}
 #usersManuals h3.ttl {color:#716F63;background: #e6e6e6;font-size: 1.1rem;margin: 25px 0;padding: 5px 10px;}
 #usersManuals h3.ttl2 {color:#716F63;font-size: 1.1rem;margin: 25px 0 10px 0;padding: 5px;}	
 #usersManuals .langswitcher select { font-size: 1.2rem; }
 #usersManuals h2 { font-size: 5vw; }
 #usersManuals h2 + dl { margin-top: 10px; }
 #usersManuals h2 + dl > dt { margin-top: 20px; font-size: 3.5vw; }
 #usersManuals h2 + dl > dd + dt { margin-top: 40px; }
 #usersManuals h2 + dl > dd { margin-top: 10px; }
 #usersManuals .onbg dl { font-size: 1.6rem; }
 .searchbt  { width: 80%; margin: 30px auto 0; }
 #usersManuals .flow dt { font-size: 1rem; padding-bottom: .5em; font-weight: 700; }
 #usersManuals .flow dl + dl { margin-top: .5em;  }
 #usersManuals .result dl { margin-top: 40px; padding: 0; font-size: 1.6rem; }
 #usersManuals .result dd { padding-left: 1em; }
 .result .notice { font-size: 1.2rem; }
 #usersManuals .dllist li + li { margin-top: .5em; }
 #usersManuals .dllist a {
  display: inline-block;
  color: #000;
  text-decoration: underline;
  position: relative;
  padding-left: 18px;
 }
 #usersManuals .dllist a {
  display: inline-block;
  color: #000;
  text-decoration: underline;
  position: relative;
  padding-left: 18px;
 }
 #usersManuals .dllist a:before {
  display: block;
  width: 6px;
  height: 6px;
  border-right: solid 2px #000;
  border-bottom: solid 2px #000;
  content: "";
  position: absolute;
  top:8px;
  left:0;
  transform: rotate(-45deg);
 }
 /*::::::::::::: Contents Etc :::::::::::::*/
 #contentsEtc h2,#downloadBtn h2{
  font-size: 1.4em;
  text-align: center;
}
	
.contEtcArea{ margin: 2rem 0; }
	
.contEtcArea h4 {
 font-size: 1.2rem;
 padding-bottom: .5em;
 border-bottom: solid 2px #d1d1d1;
}
	
.contEtcArea .btnArea{ margin: 1.5rem auto 1rem; }
	
.btnArea ul {
 display: flex;
 justify-content: flex-start;	
 flex-wrap: wrap;
}
.btnArea ul li{
  width: 49%;
  margin-right: 2%;
  margin-bottom: 1rem;
  border: solid 1px #f4f4f4;
}	

.btnArea ul li:nth-child(2n) {
  margin-right: 0;
 }
	
.btnArea ul li a {
 display: block;
 width: 100%;
 text-align: center;
}

.btnArea ul li img { max-width: 100%; margin: 0 auto; }

.btnArea ul.pcBtn{ display: none; }
	
	
 .resultPage {
  display: flex;
  flex-wrap: wrap;
 }	
 .resultPage .choicemodel {
  margin-top: 30px;
  width: 100%;
  order: 2;
 }	
 .resultPage .resultlist {
  width: 100%;
  order: 1;
 }	
 #usersManuals h3.ttl2 {
   margin: 0px 0 10px 0;
 }
 
 /*::::::::::::: 20230301 add  :::::::::::::*/
 
 #usersManuals .disp-img{
	/*padding:20px ; */
	margin:10px;
    background-image:url(./image/image_online_sp.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;                /* 画像の繰り返しを指定  */              
    width:180px;                                   /* 横幅のサイズを指定    */
    height:113px;                                 /* 縦幅のサイズを指定    */
}

#usersManuals .p:after {
	white-space: pre;
	content: "複合機の一般的な使い方についてご紹介しています。\A スマートフォンなどモバイル端末をご利用の方はこちらをご覧ください。";
	font-size: 0.8em;
	
}

}


/*
License Agreement
/downloads/manuals/downloadrule.html
================================================ */
#license { padding: 1em; display: none; }
#license.active { display: block; }
#license > .inner { background-color:#FFF;  border: solid 1px #c8c7b8; }
#license iframe { width: 100%; height: 300px; }

.agreement .not {
  color: #716F63!important;
  background-color: #fff!important;
  border:solid 1px #D2D2D2;
}
#downloadtitle , #downloadnotice  { display: none; }
#downloadtitle.active , #downloadnotice.active { display: block; }

#downloaderror {
 display: none;
 max-width: 900px;
 margin: 60px auto 0;
 text-align: center;
 border: solid 1px #ECECEC;
 font-size: 1.2rem;
}
#downloaderror.active { display: block; }

#downloaderror .backbt {
 display: block;
 box-sizing: border-box;
 border-radius : 3px;
 text-align:center;
 color: #fff;
 background-color: #716f63;
}


@media screen and (min-width: 769px){
 #license { margin-top: 40px; }
 #license > .inner  {padding: 20px; }
 #downloaderror {padding: 20px; }
 .agreement {
   display: flex;
   justify-content: center;
   margin: 40px auto;
   width: 80%;
 }
 .agreement #downloadbutton {
   width: 53%;
   margin: 0 1%;
   border: none;
 }
 .agreement #downloadbutton + * {
   width: 43%;
   margin: 0 1%;
 }
#downloaderror {
 max-width: 900px;
 margin: 60px auto 0;
 font-size: 1.2rem;
}
#downloaderror .backbt {
 margin: 60px auto 0;
 padding: 1em 1.5em;
 max-width: 50%;
}
	
}


@media screen and (max-width: 768px){
 #license { margin-top: 20px; }
 #license > .inner  {padding: 25px 3% 0; }
 #downloaderror {padding: 25px 3% 25px; }
 .agreement {
   margin: 30px auto;
   width: 90%;
 }
 .agreement #downloadbutton {
   width: 100%;
 }
 .agreement #downloadbutton + * {
   width: 100%;
   margin-top: 1em;
 }
#downloaderror {
 margin: 30px auto 0;
 font-size: 1rem;
}
#downloaderror .backbt {
 margin: 30px auto 0;
 padding: .75em 1em;
 max-width: 80%;
}
}


/*
20210525 追記
==========================================
*/
/*.contents__h1--wrap { text-align: center; }*/

.headline-h2--wrap { 
 margin-bottom: 1.3em;
}
.headline-h2--wrap h2.ttl { 
 color: #716F63; 
 padding-left: .7em;
 border-left: 4px solid #716F63;
}

.producctsname {
 position: relative;
}


input.ic-search {
 display: block;
 background-image: url("/shared_common/images/ic_search.svg");
 background-position: right center;
 background-repeat: no-repeat;
 text-indent: -9999px;
 background-color:#FFF;
 border-left:solid 1px #D9D9D9 !important; 
}

@media screen and (min-width: 769px){
 .contents__h1--wrap { margin-bottom: 3rem; }
 .headline-h2--wrap .ttl { font-size: 2rem; }
 ::placeholder { font-size: .75em; }
 .producctsname input[type=text] { display: block; z-index: 1; padding: .5em 4em .5em .5em!important; }
 input.ic-search { position: absolute; top:.5em; right:3em; z-index: 2; display: block; width: 40px; height: 28px; background-size: auto 28px; }
}
@media screen and (max-width: 768px){
 .contents__h1--wrap { margin-bottom: 1.5rem; }
 .headline-h2--wrap .ttl { font-size: 1.25rem; }
 h4.ttl {
		margin: 1em 0;
 }
 ::placeholder {  font-size: .5em; }
 .producctsname input[type=text] { display: block; z-index: 1; padding: .5em 3em .5em .5em!important; }
 input.ic-search { position: absolute; top:3px; right:.75em; z-index: 2; display: block; padding: 10px 7px 10px 10px; width: 30px; height: calc( 100% - 6px) ; background-size: 70% 70%; }
}

/*
20230224 追記
==========================================
*/
div .later-manuals {
	padding: 1em 1em 1em 1.5em;
	margin:  10px 10px 10px 50px;
	text-align: right; 
	margin-bottom:10px;
	display: flex;
 	justify-content: flex-end;
}

div .later-manuals a { 
	position: relative; 
	display: block; 
	padding-left: 20px; 
	font-size: .875em; 
	text-decoration: none; 
}

div .later-manuals a:hover { 
	text-decoration: underline; 
}

.arrow-l {
 position: relative;
 padding-left: 20px;
 }
.arrow-l:before {
 display: block;
 width: 6px;
 height: 6px;
 border-right: solid 2px #59574c;
 border-bottom: solid 2px #59574c;
 content: "";
 position: absolute;
 top:8px;
 left:0;
 transform: rotate(-45deg);
}