/*====================================================================================
	Sidebar Setting
====================================================================================*/
.sidebar {
	width: 300px;
	height: auto;
	float: right;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	        box-sizing: border-box;
}

.manager-sidebar {
	width: 300px;
	height: auto;
	margin-right: 20px;
	float: left;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	        box-sizing: border-box;
}

#advertisement_top {
	width: 300px;
	height: 185px;
	margin-bottom: 12px;
	background-color: #CCC;
}

#advertisement {
	width: 300px;
	height: 185px;
	margin-bottom: 12px;
	background-color: #CCC;
}

#advertisement_etc {
	width: 298px;
	height: 248px;
	margin-bottom: 12px;
	background-color: #CCC;
	border: #CCC solid 1px;
}

.sidebar .banner_area {
	width: 300px;
	height: auto;
	margin-bottom: 12px;
}

.sidebar .banner_area img,
.sidebar .banner_area iframe {
	vertical-align: bottom;
	width: 100%;
	height: auto;
}

.sidebar .banner_area iframe {
	margin-bottom: 12px;
}

.sidebar .banner_area iframe:last-child {
	margin-bottom: 0;
}

.follow-me {
	width: 300px;
	height: 100px;
	margin-bottom: 20px;
	background-image: url('/img/btn/follow_me.png');
	background-repeat: none;
	background-position: 0 0;
}

.follow-me a {
	color: #ffffff;
	font-size: 22px;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	width: 300px;
	height: 92px;
	padding: 6px 0;
	display: inline-block;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	        box-sizing: border-box;
}

.follow-me a span {
	font-size: 48px;
}

.i_mobile_side {
	width: 300px;
	max-height: 600px;
	margin-bottom: 12px;
}
/*------------------------------------------------------------------------------------
	Info Area
------------------------------------------------------------------------------------*/
/*.info {
	line-height: 140%;
	width: 260px;
	height: auto;
	padding: 19px;
	margin-bottom: 12px;
	border: #CCC solid 1px;
}

.info h3 {
	width: 260px;
	height: 16px;
	padding-bottom: 12px;
	margin-bottom: 12px;
	background-image: url('/img/line_slash.png');
	background-position: left bottom;
	background-repeat: repeat-x;
	display: block;
}

.info h3 img {
	margin-right: 7px;
	vertical-align: bottom;
}*/

.info a {
	color: #262729;
	width: 100%;
	height: auto;
	display: inline-block;
}

.info-icon {
	width: 25px; 
	float: left;
	margin-bottom: 3px;
	border-radius: 50%;
}

.info-ibispaint {
	float: left;
	margin-bottom: 3px;
	margin-top: 3px;
}

.info-date {
	height: 25px;
	float: right;
	margin-bottom: 3px;
	margin-top:3px;
}

.info-title {
	font-weight: bold;
}

.info-image-trim {
	margin: 6px 0;
	border: #D9E0E6 solid 1px;
	background-color: white;
}

.info-image {
	width: 266px;
}

.info-url {
	 color:blue;
	 text-decoration:underline;
}

.info-footer {
	overflow: hidden;
}

.info-show-detail {
	float: right;
	color: #0B649B;
}

.info-show-more {
	display: list-item;
	vertical-align: bottom;
	overflow: hidden;
	padding: 12px 16px;
}

.info-show-more span{
	float: right;
	color: #0B649B;
}

.info li {
	line-height: 1.6;
	width: 298px;
	height: auto;
	padding: 12px 16px;
	background-image: url('/img/line_dot.png');
	background-position: left bottom;
	background-repeat: repeat-x;
}

.setLinkColor {
	color: #236795;
	padding-left: 12px;
}

.margin-none {
	margin-bottom: 0;
}
/*------------------------------------------------------------------------------------
	Info Area End
------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------
	Info Area
------------------------------------------------------------------------------------*/
.info {
	line-height: 1.5;
	width: 300px;
	height: auto;
	padding: 4px 0 0 0;
	margin-bottom: 12px;
	border: #D9E0E6 solid 1px;
}

.info h3 {
	font-size: 16px;
	line-height: 1;
	width: 266px;
	height: 40px;
	padding: 12px 0;
	margin: 0 16px 16px 16px;
	background-image: url('/img/line_slash.png');
	background-position: center bottom;
	background-repeat: repeat-x;
	display: block;
}

.info h3 span {
	padding-left: 24px;
	background-image: url('/img/icon/h_img.png');
	background-position: 0 0;
	background-repeat: no-repeat;
}

/*------------------------------------------------------------------------------------
	Info Area End
------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------
	Menu List Area Start
------------------------------------------------------------------------------------*/
.menu-list {
	line-height: 1.4;
	margin-bottom: 12px;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	        box-sizing: border-box;
}

.menu {
	border-radius: 6px;
	overflow: hidden;
}

.menu-list .from_management {
	font-size: 15px;
	font-weight: bold;
	padding: 25px;
	line-height: 2em;
}

.menu-list .from_management img {
	margin-right: 13px;
	float: left;
	display: block;
}

.menu-list .sns {
	height: 85px;
	width: 300px;
	background-color: #f4f6f9;
	position: relative;
}

.menu-list .sns p {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.menu-list .sns span {
	padding-left: 29px;
}

.menu-list .sns span:first-child {
	padding-left: 19.7px;
}

.menu-list .sns span a {
	padding: 0;
}

.menu-list .sns span a img:hover {
	opacity: 0.5;
	transition: 0.3s;
}

.menu-list .sns a:hover {
	background-color: #f4f6f9;
}

.menu-list li {
    width: 100%;
    height: auto;
    display: table;
	background-color: #f4f6f9;
	border-bottom: #D9E0E6 solid 1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	 -ms-box-sizing: border-box;
		 box-sizing: border-box;
}

.menu-list p:last-child {
	border-bottom: none;
}

.menu-list li a {
    color: #3B3D40;
    vertical-align: middle;
    width: 100%;
    height: 60px;
    padding: 0 25px;
    display: table-cell;
}

.menu-list a div {
	display: table;
}

.menu-list a img {
	display: table-cell;
	vertical-align: middle;
	width: 20px;
	height: auto;
	padding-right: 12px;
	padding-bottom: 2px;
}

/* メニューの装飾アイコン */
.menu-list ul li a div::before {
	display: table-cell;
	vertical-align: middle;
	background-size: contain;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	padding-right: 12px;
	padding-bottom: 2px;
}

.menu-list ul li#about-page-link a div::before {
	content: url('/img/about/link-icon_about.png');
	padding-right: 10px;
	padding-left: 2px;
}

.menu-list ul li#prime-page-link .menu-list-title::before {
	content: url('/img/about/link-icon_prime.png');
}

.menu-list ul li#newFeature-page-link .menu-list-title::before {
	content: url('/img/about/link-icon_newFeature.png');
}

.menu-list ul li#lecture-page-link .menu-list-title::before {
	content: url('/img/about/link-icon_lecture.png');
}

.menu-list ul li#guidebook-page-link .menu-list-title::before {
	content: url('/img/about/link-icon_guidebook.png');
}

.menu-list ul li#campaign-page-link .menu-list-title::before {
	padding-right: 10px;
	padding-left: 2px;
	content: url('/img/about/link-icon_campaign.png');
}

.menu-list ul li#stylus-page-link .menu-list-title::before {
	content: url('/img/about/link-icon_stylus.png');
}

.menu-list ul li#info-page-link .menu-list-title::before {
	content: url('/img/about/link-icon_info.png');
}

.menu-list ul li#product-page-link .menu-list-title::before {
	content: url('/img/about/link-icon_product.png');
}

.menu-list ul li#productEdu-page-link .menu-list-title::before {
	content: url('/img/about/link-icon_productEdu.png');
}

.menu-list ul li#faq-page-link .menu-list-title::before {
	content: url('/img/about/link-icon_faq.png');
}

.menu-list a span {
	display: table-cell;
	vertical-align: middle;
}

.menu-list span.no-icon{
	padding-left: 32px;
}

.menu-list li a:hover,
.menu-list label:hover {
    background-color: #e1e7ec;
    text-decoration: none;
	transition: 0.5s;
}

.table-continue-item {
	border-bottom: #D9E0E6 solid 1px;
}

.menu-list input {
	display: none;
  }

.menu-list .menu-list-btnbox {
	display: table;
	position: relative;
	width: 100%;
	height: 60px;
}

.menu-list .menu-list-btnbox a {
	color: #3B3D40;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    padding: 0 25px;
    display: table-cell;
}

.menu-list label {
	display: table;
    position: relative;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: #f4f6f9;
    cursor: pointer;
}

.menu-list label:hover .arrow{
	transform: translateY(2px);
	transition: 0.2s;
}

/* .menu-list label a {
    color: #3B3D40;
    vertical-align: middle;
    width: 230px;
    height: 60px;
    padding: 0 25px;
    display: table-cell;
	text-decoration: none;
} */

.menu-list div.arrow-box {
	position: absolute;
	top: 14px;
	right:7px;
	background-size: 50px 50px;
}

.menu-list .arrow {
	display: block;
	position: absolute;
	right: 9px;
	top: 49%;
	width: 16px;
	flex-shrink: 0;
	transform-origin: center 43%;
	transition: 0.7s;
}

.menu-list .arrow::before,
.menu-list .arrow::after {
	content: "";
	position: absolute;
	display: block;
	width: 10px;
	height: 2px;
	background-color: #262729;
}

.menu-list .arrow::before {
	left: 0;
	transform: rotate(45deg);
}

.menu-list .arrow::after {
	right: 0;
	transform: rotate(-45deg);
}

.accordion ul li {
	background-color: #f4f6f9;
	border-bottom : none;
}

.accordion ul li a {
	border-radius: 6px;
	color: #3B3D40;
	text-decoration: none;
	padding: 12px 20px;
	margin: 0 20px 20px 20px;
	background-color: #ffffff;
	border-radius: 6px;
	display: inline-block;
	width: 260px;
	height: 40px;
	font-size: 11px;
}

.accordion ul li a:hover {
	background-color: #ffa000;
	color: #ffffff;
	transition: 0.25s;
}

.accordion ul li:first-child {
	padding-top: 20px;
}

.menu-list .accordion {
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	transition: 0.5s;
	overflow: hidden;
}

.menu-list input:checked ~ .accordion {
	max-height: 1000px;
	opacity: 1;
	visibility: visible;
	transition: 1s;
}

.menu-list input:checked ~ .menu-list-btnbox .arrow {
	transform: rotate(180deg);
	}

/*------------------------------------------------------------------------------------
	Menu List Area End
------------------------------------------------------------------------------------*/