@charset "utf-8";
/* RESET
======================================== */
a, abbr, acronym, address, applet, article, aside, audio, 
b, big, blockquote, body, caption, canvas, center, cite, code,
dd, del, details, dfn, dialog, div, dl, dt, em, embed, 
fieldset, figcaption, figure, form, footer, 
header, hgroup, h1, h2, h3, h4, h5, h6, html, 
i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,
object, ol, output, p, pre, q, ruby, 
s, samp, section, main, small, span, strike, strong, sub, summary, sup, 
tt, table, tbody, textarea, tfoot, thead, time, tr, th, td,
u, ul, var, video { 
 font-family: inherit; 
 font-size: 100%; 
 font-weight: inherit; 
 font-style: inherit; 
 vertical-align: baseline; 
 white-space: normal;
 margin: 0; 
 padding: 0; 
 border: 0; 
 outline: 0;
 background: transparent;
 box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section, main { display: block; box-sizing: border-box; }
ol, ul { list-style: none;box-sizing: border-box; }
blockquote, q { quotes: none;box-sizing: border-box; }
table { 
 border-collapse: collapse; 
 border-spacing: 0; 
 box-sizing: border-box;
}
td,th{text-align: left;}

html {
font-size: 10px;	
}

body { 
 font-size: 10px;
 line-height: 1.8;
 font-family: 'Source Sans Pro', sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 word-break: break-word;
 font-weight: 400;
 color: #707070;
}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
input[type=text], input[type=email], input[type=tel], select , textarea {
 padding: .5em .5em;
 box-sizing: border-box;
 border: solid 1px #D9D9D9;
 border-radius : 3px;
 font-size: 1.6rem;
}
input:placeholder , input:-ms-input-placeholder , input:-ms-input-placeholder { color: #d0d0d0 !important; }

input[type="submit"],input[type="button"] , button[type="button"] {
 display: block;
 padding: .75em 1.5em;
 box-sizing: border-box;
 border-bottom: solid 3px #5a584e;
 background-color: #716f63;
 border-radius : 3px;
 text-align:center;
 font-size: 2rem;
 font-weight:bold;
 color: #fff;
 cursor: pointer;
}

@media screen and (min-width: 769px){
 body { padding-top: 73px; }
}
@media screen and (max-width: 768px){
 body { padding-top: 57px; }
}
/* パン屑リスト
======================================== */
#bread_crumb {
 margin-top: 0;
 width: 100%;
 padding:0 5%;
 background-color: #eeeddf;	
}
#bread_crumb > ol  {
 margin: 0 auto;
 max-width: 1200px;
 padding: 1.5em 0 1em;
}
#bread_crumb > ol > li {
 font-size: 1.2rem;
 line-height: 1.2;
 display: inline-block;
 vertical-align: top;
 padding-left: 0;
 text-indent: 0;
}
#bread_crumb > ol > li + li:before {
 position: relative;
 display: inline-block;
 counter-increment: none;
 content: " > ";
 padding-left: 5px;
 padding-right: 5px;
}

#bread_crumb > ol > li:before { display: inline-block; content: ""; }
#bread_crumb a { color: inherit; text-decoration: none; }


/*
上部カテゴリー表示
================================================ */
.categoriesheader {
 position: relative;
 text-align: center;
}
.categoriesheader .inner {
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
}
.categoriesheader p { white-space: nowrap; }

.categoriesheader ul {
 position: absolute;
 display: flex;
 justify-content: flex-end;
}

.categoriesheader ul a {
 position: relative;
 font-size: 1.2rem;
 color: inherit;
 text-decoration: none;
 padding-left: 1.5em;
}

.categoriesheader ul li:not(:first-child) { margin-left: 1.5em; }
main > .inner { position: relative; }
main > .inner > h1 { font-weight: 700; }

@media screen and (min-width: 769px){
 .categoriesheader p { font-size: 20px; }
 .categoriesheader { padding: 1em 5%; }
 .categoriesheader ul { right:0; top: 50%; transform: translateY(-50%); }
	
 main { margin: 50px auto 100px; padding: 0 5%; }
 main > .inner { max-width: 1200px; margin: 0 auto; }
 main > .inner >  h1 { font-size: 36px; }
}
@media screen and (max-width: 768px){
 .categoriesheader p { font-size:5.5vw; }
 .categoriesheader > .inner { padding: 3em 5% 1em; }
 .categoriesheader ul { right:3%; top: 1em; }
 main { margin: 40px auto; padding: 0 10% 30px; }
 main > .inner >  h1 { font-size: 22px; }
}

/*
共通
================================================ */
.triangle1:before , .triangle1:after { display: block; width: 0; height: 0;border-style: solid; border-width: 3px 0 3px 6px; }
.triangle1.bef:before { position: absolute; content: ""; left: 0; top:50%; transform: translateY(-50%); }
.triangle1.aft:after  { position: absolute; content: ""; right: .5em; top:50%; transform: translateY(-50%); }
.triangle1.white:before , .triangle1.white:after { border-color: transparent transparent transparent white; }
.triangle1.gray:before , .triangle1.gray:after { border-color: transparent transparent transparent #707070;}

.brocbg { background-color:#E9E9E9; color: #FFF; } /* #e4405e */
.brocfc { color: #E4405E; } 
.manubg { background-color: #E9E9E9; color: #FFF; } /* #B355B3 */
.manufc { color: #B355B3; }
.ARmabg { background-color: #E9E9E9; color: #FFF; } /* #666666 */
.ARmafc { color: #666666; }
.drivbg { background-color: #E9E9E9; color: #FFF; } /* #96BE44 */
.drivfc { color: #96BE44; }
.softbg { background-color: #E9E9E9; color: #FFF; } /* #2C8BE5 */
.softfc { color: #2C8BE5; }
.applbg { background-color: #E9E9E9; color: #FFF; } /* #E9B930 */
.applfc { color: #E9B930; }

.onbg {
/*
 border: solid 1px #ECECEC;
 background-color: #F8F6F6;
*/
}

.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: 100px; }
}
@media screen and (max-width: 768px){
 .notice { margin-top: 50px; }
}

/*
ダウンロード
/downloads/index
================================================ */

 .categoryList { display: flex; justify-content: flex-start;	flex-wrap: wrap; }
 .categoryList > li { margin-right: 3%; }
 .categoryList > li > a { position: relative; display: block; text-decoration: none; }

 .categoryList > li > a.brocbg div { background-image:url(/products/copier/img/index/ic_brochures.png); }
 .categoryList > li > a.manubg div { background-image:url(/products/copier/img/index/ic_manuals.png); }
 .categoryList > li > a.ARmabg div { background-image:url(/products/copier/img/index/ic_armarkers.png); }
 .categoryList > li > a.drivbg div { background-image:url(/products/copier/img/index/ic_drivers.png); }
 .categoryList > li > a.softbg div { background-image:url(/products/copier/img/index/ic_softwares.png); }
 .categoryList > li > a.applbg div { background-image:url(/products/copier/img/index/ic_applications.png); }
 .categoryList > li div {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  padding-top: 72px;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto 64px;
 }
 .categoryList > li p { display: table; line-height: 1; border-radius : 4px; }
 .categoryList > li span { position: relative; display: inline-block;  padding-right: 1.5em; white-space: nowrap; }

 .categoryList > li > a.brocbg p { background-color: #ae1430; }
 .categoryList > li > a.manubg p { background-color: #783678; }
 .categoryList > li > a.ARmabg p { background-color: #333333; }
 .categoryList > li > a.drivbg p { background-color: #5f870c; }
 .categoryList > li > a.softbg p { background-color: #0f589d; } 
 .categoryList > li > a.applbg p { background-color: #a3780a; }
 .categoryList > li > a:hover { opacity: .8; transition : all 0.5s ease 0s;  }

@media screen and (min-width: 769px){
 .categoryList > li { width: 31.3%; margin-top: 45px; }
 .categoryList > li:nth-child(3n) { margin-right: 0; }
 .categoryList > li > a { font-size: 1.6rem; padding-bottom: 56.5%; }
 .categoryList > li p { padding: 1em 2em; }
}
@media screen and (max-width: 768px){
 #selectCategory.index { padding: 0 5% 60px; }
 .categoryList > li { width:48.5%; margin-top: 20px; }
 .categoryList > li:nth-child(2n) { margin-right: 0; }
 .categoryList > li > a { font-size: 1.6rem; padding-bottom: 120%; }
 .categoryList > li p { padding: .75em .25em .75em .75em; }
}


/*
.langswitcher
================================================ */
@media screen and (min-width: 769px){
.langswitcher {
 position: relative;
 width: 100%;
 max-width: 1200px; margin: 0 auto 10px;
 font-size: 1.2rem;
 text-align: right;
}
.langswitcher p { display: inline; }
.langswitcher select { font-size: 1.2rem; }
}
@media screen and (max-width: 768px){
.langswitcher {
 position: relative;
 margin-top: 1em;
 padding-top: 1em;
 border-top:solid 1px #9e9e9e;
 font-size: 1.2rem;
 text-align: center;
}
 .langswitcher select { margin-top: 1em; min-width: 80%; font-size: 1.2rem; }
}


/*
manuals/select.html
================================================ */
#searchMmanuals { margin-top: 60px; }
#searchMmanuals dd { font-weight: 700; color: #9a965c; }
#searchMmanuals dd input , #searchMmanuals dd select { width: 100%; color: #707070; font-size: 1.6rem; }

@media screen and (min-width: 769px){
 #searchMmanuals { margin-top: 60px; padding: 25px 10%; }
 #searchMmanuals h2 { font-size: 1.75rem; font-weight: normal; padding-bottom: 1.5em; }
 #searchMmanuals dl { margin-top: 0em; }
 #searchMmanuals dl { width: calc(100% - 6em); font-size: 1.8rem; display: flex; justify-content: space-between; flex-wrap: wrap; }
 #searchMmanuals dt { width: 39rem; font-size: 2rem; font-weight: bold; }
 #searchMmanuals dd { width: calc(100% - 40rem); }
 #searchMmanuals dl > dt:not(:first-of-type) , #searchMmanuals dl > dd:not(:first-of-type) { margin-top: 10px; } 
 .searchbt { min-width: 360px; margin: 50px auto 0; }
}
@media screen and (max-width: 768px){
 #selectPage {display: flex; flex-wrap: wrap; }	
 #selectPage .langswitcher { order: 2; width: 100%; }	
 #selectPage #selectContainer { order: 1; width: 100%; }
 #searchMmanuals { margin-top: 20px; padding: 20px 5%; }
 #searchMmanuals h2 { font-size: 3.5vw; font-weight: normal; }
 #searchMmanuals dl { margin-top: 10px; }
 #searchMmanuals dl > dt { margin-top: 20px; font-size: 4vw; font-weight: bold; }
 #searchMmanuals dl > dd + dt { margin-top: 30px; }
 #searchMmanuals dl > dd { margin-top: 5px; font-size: 1.6rem; }
 .searchbt  { width: 80%; margin: 30px auto 0; }
}


/*
manuals/result.html
================================================ */
.choicemodel { background-color: #eae9d8; }
.choicemodel dd { font-weight: 700; color: #9a965c; }

.changebt {
 display: table;
 position: relative;
 color: #FFF;
 background-color: #959283;
 line-height: 1;
 padding: 10px;
 text-align: center;
 }	

.result dd { margin-top: .75em; }
.result a { color: inherit; position: relative; padding-left: 1.5em; }
.result a:hover { text-decoration: underline; }
.result a::before {
position: absolute;
top:4px;
left:0;
display: block;
width: 5px;
height: 10px;
content: "";
 border-right: solid 4px #707070;
 border-bottom: solid 4px #707070;
 transform: rotate(45deg);
}


@media screen and (min-width: 769px){
 .choicemodel { 
  margin-top: 60px; 
  padding: 25px 10%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
 }
 .choicemodel dl { margin-top: 0em; }
 .choicemodel dl { width: calc(100% - 6em); font-size: 1.8rem; display: flex; justify-content: space-between; flex-wrap: wrap; }
 .choicemodel dt { width: 39rem; font-weight: bold; }
 .choicemodel dd { width: calc(100% - 40rem); }
 .choicemodel dl > dt:not(:first-of-type) , .choicemodel dl > dd:not(:first-of-type) { margin-top: 10px; } 
	
.changebt {
 font-size: 1.6rem;
 margin: 0;
 }	
	
 .result dl { margin-top: 60px; padding: 0 10%; font-size: 1.8rem; font-weight: bold;}	
 .result dd { padding-left:0; font-size: 2.2rem; font-weight: normal;}
 .result .notice { font-size: 2rem; }
}
@media screen and (max-width: 768px){
 .choicemodel { margin-top: 20px; padding: 20px 5%; }
 .choicemodel dl > dt { font-size: 4vw; }
 .choicemodel dl > dd + dt { margin-top: .5em; }
 .choicemodel dl > dd { font-size: 1.6rem; }
 .changebt {
  font-size: 4vw;
  margin: 1.5em auto 0;
  min-width: 50%;
 }

 .result dl { margin-top: 40px; padding: 0; font-size: 1.6rem; }
 .result dd { padding-left: 1em; }
 .result .notice { font-size: 1.2rem; }

#resultPage { display: flex; flex-wrap: wrap; }
#resultPage .langswitcher {
 order: 2;
 margin-top: 25px !important;
 padding-top: 25px;
 border-top: solid 1px #9e9e9e;
 width: 100%;
}

 #resultContainer {  display: flex; flex-wrap: wrap; order: 1; }
 #resultContainer h1 { order: 1;  width: 100%;  }
 #resultContainer .choicemodel { order: 3; width: 100%;  }
 #resultContainer .result { order: 2; width: 100%; margin-bottom: 30px; }
}


/*
License Agreement
/downloads/manuals/downloadrule.html
================================================ */
#license { display: none; }
#license.active { display: block; }
#license > .inner { background-color:#FFF; border: solid 1px #c8c7b8; }
#license iframe { width: 100%; height: 400px; }

#agreement #downloadbutton {
 color: #fff;
 background-color: #919191;
 border: none;
 }
#agreement .disagree {
 color: #999;
 background-color: #f2f1e9;
 border:solid 1px #D9D9D9;
}

#downloadnotice , #agreement { display: none; }
#downloadnotice.active , #agreement.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){
.notice.license { margin-top: 30px; }
 #license { margin-top: 20px; }
 #license > .inner {padding: 20px; }
 #downloaderror {padding: 50px 20px 50px; }
 #agreement.active {
   display: flex;
   justify-content: center;
   margin: 30px auto;
   width: 80%;
 }
 #agreement #downloadbutton {
   min-width: none !important;
   background-color: #716f63;
   width: 48%;
   margin: 0 1%;
 }
 #agreement .disagree {
   width: 48%;
   margin: 0 1%;
 }
#downloaderror .backbt {
 margin: 60px auto 0;
 padding: 1em 1.5em;
 max-width: 50%;
}
}
@media screen and (max-width: 768px){
.notice.license { margin-top: 30px; }
 #license { margin-top: 20px; }
		
 #license > .inner { padding: 25px 3% 0; }
 #downloaderror { padding: 25px 3%; }
 #agreement.active {
   margin: 30px auto;
   width: 90%;
 }
 #agreement #downloadbutton {
   width: 100%;
 }
 #agreement .disagree {
   width: 100%;
   margin-top: 1em;
 }
#downloaderror .backbt {
 margin: 30px auto 0;
 padding: .75em 1em;
 max-width: 80%;
}
}
