/*
Theme Name:EZLOGIマニュアル
Autor:Depot
Description:EZLOGIマニュアル用テーマです。
*/

html, body{
	padding: 0;
	margin: 0;
	width: 100%;
	color: #393E46;
	background: #fff;
	line-height: 1.6;
	font-family: "system-ui",Quicksand,"ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-size-adjust: 100%;
	letter-spacing: 0.1em;
}
h1, h2, h3, h4, h5, ul {
  padding: 0;
  margin: 0; 
}
img{
	max-width:100%;
	height:auto;
}
p, a {
  -webkit-font-smoothing: antialiased;
}
a {
  color: #393E46;
  text-decoration: none;
  transition: .3s;
}
a:hover {
  color: #ffa500;
  transition: .3s;
}
ul {
  list-style: none;
}
.contents{
	display:flex;
}
#main{
	width:75%;
	min-height:100vh;
	box-sizing:border-box;
	padding:20px;
}
#sidebar{
	width:25%;
	box-sizing:border-box;
	min-height:100vh;
	background:#f6f5f4;
	padding:10px;
}
#header{
	width:100%;
	background:#f6f5f4;
	height:100px;
}
#footer{
	width:100%;
	background:#f6f5f4;
	position:relative;
	bottom:0;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
}
@media (max-width: 745px) {
	.contents{
		display:block;
	}
	#main{
		width:100%;
	}
	#sidebar{
		width:100%;
		min-height:initial;
		text-align:center;
	}
}
/*=================
ヘッダー
==================*/
.header-content{
	padding-left:10px;
	box-sizing:border-box;
	display:flex;
	justify-content:flex-start;
	position:relative;
}
.header-logo{
	min-width:100px;
	max-width:100px;
	height:60px;
	padding-right:20px;
	padding-top:20px;
}
.header-title{
	line-height:100px;
	padding-right:30px;
}
.page_item{
	font-size:15px;
	font-weight:bold;
	text-align:center;
	margin:25px 10px;
	line-height:50px;
	display: inline-block;
	transition:.3s;
	border-radius:5px;
	box-shadow:0 3px 5px 0 rgba(0,0,0,0.4); 
}
.page_item>a{
	display:block;
	height:50px;
	padding:0 20px;
}
.page-item-564{
	background:#fff;
}
.page-item-566{
	background:#F9C67C;
}
.page_item:hover{
	transition:.3s;
	transform:translateY(-5px);
}
.header-nav-icon{
	visibility:hidden;
}
.header-nav-icon:hover{
	cursor:pointer;
}
@media (max-width: 940px) {
	.header-nav{
		display:none;
	}
	.header-nav.active{
		display:block;
		background:#f6f5f4;
		opacity:0.9;
		top:0;
		left:0;
		width:100%;
		height:100vh;
		z-index:10;
		position:fixed;
	}
	.page_item.active{
		font-size:24px;
		box-shadow:none;
		background:none;
		margin:none;
		display:flex;
		flex-direction:column;
		border-bottom:1px solid #fbb03b;
		padding-bottom:20px;
		padding-top:20px;
	}
	.page_item:hover{
		transform:initial;
	}
	.header-nav-icon{
		visibility:visible;
		font-size:40px;
		color:#393E46;
		position:absolute;
		right:50px;
		top:30px;
		z-index:15;
	}
}
@media (max-width: 600px) {
	.header-title{
		font-size:60%;
	}
	.header-nav-icon{
		font-size:36px;
		right:20px;
		top:35px;
	}
}
@media (max-width: 430px) {
	.header-title{
		visibility:hidden;
	}
}
/*=================
フッター
==================*/

.footer-logo{
	width:100px;
	height:60px;
}

/*====================
サイドバー検索
=====================*/
.searchform{
	margin-bottom:50px;
	display:flex;
}
.searchfield{
	width:70%;
	height:40px;
	font-size:16px;
	border:none;
	border-radius:5px 0 0 5px;
	box-shadow:0 3px 7px 0 rgba(0,0,0,0.4);
}
.searchfield:focus{
	outline:none;
}
.searchbtn{
	width:40px;
	height:42px;
	background:#393E46;
	color:#fff;
	border:none;
	cursor:pointer;
	transition:.3s;
	border-radius:0 5px 5px 0;
	box-shadow:0 3px 7px 0 rgba(0,0,0,0.4); 
}
.searchbtn:hover{
	transition:.3s;
	background:#ffa500;
}
.searchbtn:focus{
	outline:0;
}
.fa-search{
	font-size:100%;
}
@media (max-width: 745px) {
	.searchform{
		width:300px;
		margin:0 auto;
		padding-top:30px;
		padding-bottom:50px;
	}
	.searchfield{
		width:100%;
	}
}
/*====================
サイドバーカテゴリ
======================*/
.sidebar-title{
	background:#393E46;
	color:#fff;
	max-width:400px;
	padding:5px;
	border-radius:5px;
	margin-bottom:5px;
	box-sizing:border-box;
	margin-top:20px;
}
.category-icon{
	float:left;
	color:#fff;
	padding:10px;
}
.cat-item{
	padding-left:10px;
	padding-bottom:2px;
}
.children{
	padding-left:10px;
	font-size:90%;
}
.children .cat-item::before{
	content:'-';
}
@media (max-width: 745px) {
	.sidebar-title{
		width:300px;
		margin:0 auto;
		text-align:center;
		position:relative;
		display:inline-block;
	}
	.category-icon{
		position:absolute;
		color:#fff;
		z-index:10;
	}
	.cat-item{
		text-align:center;
	}
	
}
/*====================
サイドバー緊急連絡先
======================*/
.sidebar-contact{
	margin:50px 5px;
}
.fa-exclamation-triangle{
	padding-right:10px;
}
.fa-envelope,.fa-phone{
	padding-right:5px;
}
@media (max-width: 745px) {
.contact-list{
	text-align:center;
}
.fa-exclamation-triangle{
	position:absolute;
	padding-top:5px;
	left:10px;
}
}
/*=================
マニュアルTOP
===================*/
.manual-top-title{
	font-size:28px;
	text-align:center;
	padding:5px;
	position:relative;
	margin-bottom:20px;
	margin-top:20px;
}
.manual-top-title:before, .manual-top-title:after{
	content:'';
	background:#393E46;
	width:40px;
	height:3px;
	margin:10px 20px;
	display:inline-block;
	border-radius:5px;
}
.manual-list{
	max-height:950px;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	margin:20px;
	word-wrap: break-word; 
	align-items: flex-start;
}
.manual-list-row{
	width:50%;
	box-sizing:border-box;
}
.manual-list-category{
	font-size:24px;
	background:#fffaf4;
	border-left:solid 5px #ffaf58;
	padding:5px 20px;
	border-radius:0 5px 5px 0;
	width:400px;
	margin-top:10px;
	margin-bottom:10px;
}
.manual-list-title{
	padding-left:15px;
	word-wrap: break-word;
	overflow-wrap: break-word;
	width:100%;
}
@media (max-width: 1240px) {
	.manual-list{
	  max-height:initial;
	}
}
@media (max-width: 506px) {
	.manual-top-title:before, .manual-top-title:after{
		display:none;
	}
	.manual-list-row{
		width:100%;
		box-sizing:border-box;
	}
	.manual-list-category{
	  width:90%;
	}
}

/*=================
記事内容ページ
===================*/
.article-category{
	font-size:10px;
	display:inline-block;
	background:#ffa500;
	border-radius:5px;
	padding:5px;
	transition:.3s;
}
.article-category:hover{
	opacity:.7;
	transition:.3s;
	cursor:pointer;
}
.article-category a{
	color:#fff;
}
.article-item{
	max-width:100%;
	margin:30px;
	min-height:50vh;
}
.article-title{
	font-size:32px;
	padding:10px;
	border-bottom:1px solid gray;
}
.category-article-list{
	margin-top:30px;
	padding:10px;
	border-top: 4px double gray;
	min-height:200px;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
}
.pagenation-button{
	display:flex;
	position:relative;
}
.prev{
	position:absolute;
	left:0;
	bottom:0;
}
.next{
	position:absolute;
	right:0;
	bottom:0;
}
/*=================
検索＆カテゴリ一覧ページ
===================*/
.manual-index{
	width:100%;
	margin:10px;
}
.manual-index-title{
	border-bottom:1px dotted gray;
	border-right:1px dotted gray;
	margin:5px;
}
.manual-index-title::before{
	content:'▶︎ ';
	font-size:12px;
}
/*=================
初めてのお客様
===================*/
.stepmanual{
	text-align:center;
}
.steplist {
  padding: 10px;
  box-sizing:border-box;
  margin-bottom:10px;
  margin-right:auto;
  margin-left:auto;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  width: 60%;
}
  @media (max-width: 1200px) {
    .steplist {
      	width: 100%; 
	  }
}
  @media (max-width: 700px) {
    .steplist {
      display: block;
	  }
}
  .steplist--blue {
    background-color: #cce2f2;
}
  .steplist--gleen {
    background-color: #e9f6dc;
}
  .steplist--yellow {
    background-color: #fff2cc;
}
  .steplist--orange {
    background-color: #fbe5d6; 
}
  .steplist__buttonImg {
    max-height: 150px;
    margin-right: 100px;
    margin-top: auto;
    margin-bottom: auto;
}
    @media (max-width: 700px) {
      .steplist__buttonImg {
        margin-left: auto;
        margin-right: auto; 
		} 
}
  .steplist__listbox {
    width: 60%;
    margin-top: auto;
    margin-bottom: auto;
}
    @media (max-width: 700px) {
      .steplist__listbox {
        width: 100%; 
		}
}
  .steplist__list {
    display: block;
    max-width: 800px;
    height: 40px;
    border-radius: 6px;
    color: #fff;
    font-size: 24px;
    line-height: 40px;
    position: relative;
    margin-bottom: 30px;
}
    .steplist__list:last-child {
      margin-bottom: 0; 
}
    .steplist__list:hover {
      opacity: 0.5;
      transition: .3s;
}
    @media (max-width: 700px) {
      .steplist__list {
        font-size: 18px;
		text-align:center;
		}
}
    .steplist__list span {
      display: block;
      width: 10%;
      height: 75%;
      background-color: #fff;
      position: absolute;
      top: 13%;
      left: 1%;
      border-radius: 6px; }
    .steplist__list--blue{
      background-color: #0070c0; 
}
      .steplist__list--blue span {
        color: #0070c0;
}
    .steplist__list--gleen {
      background-color: #92d050;
}
      .steplist__list--gleen span {
        color: #92d050; 
}
    .steplist__list--yellow {
      background-color: #ffc000; 
}
      .steplist__list--yellow span {
        color: #ffc000; 
}
    .steplist__list--orange {
      background-color: #ed7d31; 
}
      .steplist__list--orange span {
        color: #ed7d31; 
}
  .steplist__arrow {
    width: 10%;
    height: auto;
    margin-bottom: 10px;
}
    @media (max-width: 700px) {
      .steplist__arrow {
        width: 30%; 
		} 
}
/*=================
サイドバー初めてのお客様
===================*/
.sidebar-beginner{
	margin:50px 5px;
}
.fa-check{
	padding-right:10px;
}
.sidebar-stepmanual{
	margin:0 auto;
	text-align:center;
}
.sidebar-steplist{
	margin:0 auto;
}
.sidebar-steplist_list{
	display:block;
	font-size:16px;
	text-align:center;
	font-weight:bold;
	max-width:300px;
	margin:initial;
}
.sidebar-arrow{
	max-width:300px;
}
.sidebar-steplist__arrow{
	width:50px;
	margin-top:10px;
}
@media(max-width:1250px) and (min-width:745px){
	.sidebar-steplist_list{
		font-size:12px;
	}
}
@media(max-width:745px){
	.fa-check{
		position:absolute;
		padding-top:5px;
		left:10px;
	}
	.sidebar-steplist{
		width:300px;
	}
	.sidebar-arrow{
		margin:0 auto;
	}
}
/*=================
エラーページ
===================*/
.error-comment{
	margin-bottom:100px;
}
.error-solution-box{
	border:1px solid gray;
	border-radius:5px;
	padding-bottom:50px;
	padding-right:50px;
	padding-left:50px;
}
.error-solution{
	background:#fffaf4;
	border-left:solid 5px #ffaf58;
	padding:10px 20px;
	margin-top:80px;
}
@media(max-width:560px){
	.error-solution-box{
		padding-right:10px;
		padding-left:10px;
	}
	.error-solution{
		margin-top:30px;
	}
}