@charset "utf-8";

/* CSS Document */



header {
	background-repeat: no-repeat;
	background-position: right 10px;
	height: 200px;
	position: relative;
	margin-bottom: 25px;
}


#logo {
	width: 60vw;
	max-width: 615px;
	position: absolute;
	left: 0px;
}
.gnavi li a {
	text-decoration: none;
	color: #333333;
}

.gnavi li a:hover {
	color: #336633;
}
h1#logo span {
    display: none;
}
h1#logo {
	height: 100px;
	margin-top: 18px;
	background-image: url(../img/logoback01.gif);
	background-repeat: no-repeat;
	background-size: contain;
}
#logo h2 {
	margin-top: 115px;
	color: #5f5f5f;
	font-size: 1.33rem;
	margin-left: 170px;
}



h2 {
	text-align: left;
	clear: right;
	color: #336633;
	font-size: 1.75rem;
	margin-top: 10px;
}

h3 {
	color: #336633;
}

#logo p {
	color: #001c58;
	font-size: 90%;
	margin: 0px;
	padding-left: 115px;
	font-weight: bold;
	line-height: 1.8;
	padding-top: 125px;
}
#logo p .br-header-respo {
	display: none;
}
.list1 a .br-navi-respo {
	display: none;
}

@media screen and (min-width: 835px) {
aside .box-aside.box-aside-center .p-aside-pc {
	margin-left: 12%;
}
}

@media screen and (max-width: 896px) and (min-width: 561px) {
	#logo p {
	padding-left: 2.7rem;	
	}
}
.titlebox1,.titlebox2,.titlebox3,.titlebox4,.titlebox5,.titlebox6,.titlebox7,.titlebox8,.titlebox9,.titlebox10 {
	position: absolute;
	left: 60%;
	width: 40%;
	/* max-width: 310px; */
	height: 150px;
	top: 20px;
    padding-left: 3.3%;
	background-position: right 21% bottom;
	text-align: left;
	
}
/*.titlebox1,.titlebox2,.titlebox3,.titlebox4,.titlebox5,.titlebox6,.titlebox7,.titlebox8,.titlebox9,.titlebox10 h2 {
	text-indent: 10%;

} */





.titlebox1 {
	background-image: url(../img/btn_web_b3.gif);
	background-repeat: no-repeat;
	height: 160px;
	background-position: right 22% bottom;
}   

.titlebox2 {
	background-image: url(../img/btn_trans_b1.gif);
	background-repeat: no-repeat;
	text-align: right;
}

.titlebox3 {
	background-image: url(../img/btn_pc_b3.gif);
	background-repeat: no-repeat;
}

@media screen and (min-width: 769px) {
	.titlebox3 {
		padding-left: 5%;
		background-position: right 0% bottom;
	}
}
@media screen and (max-width:768px) {
	.titlebox3 {
		padding-left: 0;
		background-position: right -15% bottom;
	}
}

@media screen and (max-width:648px) {
	.titlebox3 {
		background-position: right -22% bottom;
	}
	.titlebox3 h2 {
		padding-left: 0;
		margin-left: -30px;
	}
}

.titlebox4 {
	background-image: url(../img/btn_data_b3.gif);
	background-repeat: no-repeat;
}

.titlebox5 {
	background-image: url(../img/btn_ebook_b5.gif);
	background-repeat: no-repeat;
	background-position: right 22% bottom -15%;
	height: 155px;
}
.titlebox6 {
	background-image: url(../img/btn_book_b11.gif);
	background-repeat: no-repeat;
	background-position: right 10% bottom;
}




.titlebox7{
	background-image: url(../img/btn_sp_b3.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	
}
.titlebox8 {
	background-image: url(../img/btn_card_b1.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	
}

.titlebox9 {
	background-image: url(../img/btn_logo_b1.gif);
	background-repeat: no-repeat;
	/* background-position: 100px -5px; */
}

.titlebox9 h2 {
	margin-left: 20px;
}
@media screen and (max-width:800px) {
	.titlebox9 h2 {
		margin-left: -20px;
	}
}

.titlebox10 {
	background-image: url(../img/btn_illust_b1.gif);
	background-repeat: no-repeat;
	background-position: right 8% bottom;
}

@media screen and (max-width:768px) {
	.titlebox10 {
		padding-left: 0;
		margin-left: -10px;
	}
}

header .gnavi {
	text-align: right;
	float: right;
	margin-right: 20px;
	margin-top: 5px;
	text-decoration: none;
	list-style: none;
}

header ul li {
	display: inline;
	list-style: none;
	text-align: right;
	margin-left: 25px;
	font-size: 95%;
}
.navi .list1 a {
	display: block;
	border-top: none;
	list-style: none;
	color: #336633;
	text-decoration: none;
	font-weight: bold;
	padding-left: 15px;
	letter-spacing: 0em;
	padding-top: 6px;
	padding-bottom: 6px;
}
.navi .list1 a:hover {
	color: #001c58;
}
.navi .home {
	list-style: none;
	background-image: none;
	height: 150px;
	margin-top: 30px;
	width: 14.58vw;
	max-width: 140px;
	margin-left: 35px;
}


.navi .home a {
	display: block; 
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 0.5em;
	padding-top: 20px;
	color: #333;
	background-color: none;
	background-image: url(../img/btn_home_a.gif);
	background-repeat: no-repeat; 
	background-position: right top; 
	height: 140px; 
	margin-bottom: 40px; 
}
 .navi .blog {
	list-style-type: none;
}
.navi .blog a {
	height: 80px;
	width: 79.545%;
	font-size: 1.26rem;
	margin-left: 15.9%;
	display: block;
	list-style-type: none;
	background-image: url(../img/dekashelbanner.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	text-decoration: none;
	color: #333;
} 

.navi .home a:hover {
	display: block;
	color: #001c58;
	background-image: url(../img/btn_home_h.gif);
	background-repeat: no-repeat;
	background-position: right top;
	height: 140px;
	text-decoration: none;
	letter-spacing: 0.5em;
	padding-top: 20px;
	font-weight: bold;
	margin-bottom: 40px;
}

@media screen and (max-width: 959px) {
	.navi .home a {
	background-position: right 50%; 	
	}
	.navi .home a:hover {
		background-position: right 50%; 	
	}
}
/* main　*/
main {
	margin-right: auto;
	width: 52.083%;
	max-width: 500px;
	float: left;
	margin-bottom: 30px;
}
/* スマートフォンmenu微調整　*/
@media screen and (max-width:869px){
	.main {
		width: 50.993vw;
	}	
}

main p {
	text-indent: 0;
	padding-left: 100px;
}
@media screen and (max-width: 896px) and (min-width: 561px) {
	main p {
	padding-left: 1.61rem;	
	} 
}


main #intoro {
	margin-bottom: 20px;

}
#intoro p {
	padding-left: 0px;
}
#intoro ol li {
	line-height: 1.4;  /* 130220追加 */
	color: #c1272d;
	font-weight: bold;
	list-style-position: inside;
	margin-left: 80px;
	margin-top: 2px;
	font-size: 1.8rem;
}
@media screen and (max-width: 896px) and (min-width: 561px) {
	#intoro ol li {
	margin-left: 1.4rem;
	}
}

main #slide h3 {
	margin-bottom: 20px;
}

main h4 {
	margin-left: 80px;
	color: #c1272d;
	background-image: url(../img/arrow.gif);
	background-repeat: no-repeat;
	text-indent: 20px;
	background-position: left center;
	margin-bottom: 10px;
	font-size: 1.61rem;
}
@media screen and (max-width: 896px) and (min-width: 561px) {
	main h4 {
	margin-left: 1.61rem;	
	} 
}

.column1 p a {
	text-decoration: none;
	color: #336633;
	font-weight: bold;
}
.column1 p a:hover {
	text-decoration: none;
	color: #001c58;
	font-weight: bold;
}
.box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8,.box9,.box10 {
	margin-bottom: 30px;
	background-repeat: no-repeat;
	background-position: left top;
}

/*.box1 {
	border-left: 1px solid #336633;
	border-bottom: 1px solid #336633;
	border-top: 3px double #336633;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-bottom: 30px;
	background-image: url(../img/case1-02.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

.box2 {
	border-left: 1px solid #336633;
	border-bottom: 1px solid #336633;
	border-top: 3px double #336633;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-bottom: 30px;
	background-image: url(../img/case2.gif);
	background-repeat: no-repeat;
	background-position: left top;
} */
.box3 .column1 {
	border-left: 1px solid #336633;
	border-bottom: 1px solid #336633;
	border-top: 3px double #336633;
	padding-top: 15px;
	padding-bottom: 15px;
}

.box4 .column1 {
	border-left: 1px solid #336633;
	border-bottom: 1px solid #336633;
	border-top: 3px double #336633;
	padding-top: 15px;
	padding-bottom: 15px;
}
.box5 .column1 {
	border-left: 1px solid #336633;
	border-bottom: 1px solid #336633;
	border-top: 3px double #336633;
	padding-top: 15px;
	padding-bottom: 15px;
}
.box6 .column1 {
	border-left: 1px solid #336633;
	border-bottom: 1px solid #336633;
	border-top: 3px double #336633;
	padding-top: 15px;
	padding-bottom: 15px;
}


.box1{
	  background-image: url(../img/case1.gif);
}

.box2 {
	background-image: url(../img/case2.gif);

}

.box3 {
	background-image: url(../img/case3.gif);
	
}
.box4 {
	background-image: url(../img/case4.gif);
	
}
.box5 {
	background-image: url(../img/case5.gif);
}

.box6 {
	background-image: url(../img/case6.gif);
}

.box1 .column1,.box2 .column1,.box3 .column1,.box4 .column1,.box5 .column1,.box6 .column1,.box7 .column1,.box8 .column1,.box9 .column1,.box10 .column1 {
	border-left: 1px solid #336633;
	border-bottom: 1px solid #336633;
	border-top: 3px double #336633;
	padding-top: 15px;
	padding-bottom: 15px;
}


/* aside */

aside {
	/* margin-left: 765px; */
	margin-left: 79.6%;
	padding: 0px;
	width: auto;
	height: auto;
}
aside .box-aside.box-aside-small {
}
aside .box-aside.w-small {
	padding-left: 0px;
	margin-left: 6.5%;
	margin-bottom: 20px;
}
aside .box-aside.w-small .alignleft {
	margin-left: 9%;
}
.w-small .box-aside h4.alignleft {
	margin-left: 4%;
}
aside ul.column_right {
	list-style-type: none;
	width: 71.938%;
	max-width: 145px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	margin-bottom: 0px;
}
aside .notice {
	background-color: #F69;
	font-size: 1.6rem;
	font-weight: bold;
	color: #FFF;
	line-height: 1.5;  /* 130216追加 */
	border-radius: 5px; /*ベンダープレフィックス無し（標準） */
　
	
	/*以下ベンダープレフィックス */　
	-moz-border-radius: 5px; /*Firefox向け */　
　　-webkit-border-radius: 5px; /*GoogleChrome、safari向け */
	-o-border-radius: 5px; /*Opera向け */
	-msborder-radius: 5px;  /*IE向け */
	text-align: center;
	display: block;
	padding: 5px;
	width: 83%;
}

aside .notice_2 {
	background-color: #6666cc;
	font-size: 110%;
	font-weight: bold;
	color: #FFF;
	line-height: 1.5;
	border-radius: 5px; /*ベンダープレフィックス無し（標準） */
　
	
	/*以下ベンダープレフィックス */　
	-moz-border-radius: 5px; /*Firefox向け */　
　　-webkit-border-radius: 5px; /*GoogleChrome、safari向け */
	-o-border-radius: 5px; /*Opera向け */
	-msborder-radius: 5px;  /*IE向け */
	text-align: center;
	display: block;
	padding: 5px;
}

aside img {
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
	margin-top: 0px;
	width: 71.938%;
	max-width: 141px;
	height: auto;

}
aside p {
	/* width: 171px; 
	width: 90%;　*/
	width: 85%;
	font-size: 1.26rem;
	margin-top: 20px;
	margin-left: 9%;
	margin-bottom: 20px;
}
aside .box-aside-noice .p-1paragraph {
	margin-bottom: 10px;
	font-weight: 600;
	width: 92%;
	margin-left: 4%;
}
aside .caption {
	font-size: 1.05rem;
	width: 140px;
	margin-top: -20px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
}
aside .line {
	list-style-type: none;
	font-size: 90%;
}
aside h4 {
	font-size: 1.26rem;
	color: #06C;
	margin-bottom: -10px;
	margin-left: 9%;
	width: 85%;
}
aside h4 a {
	color: #06C;
}
aside h4 a:hover {
	color: #f69;
}
.box-aside-noice {
	border: 1px solid #26364D;
	margin-top: 30px;
	background-color: #F0F65A;
	width: 82%;
	margin-left: 9%; /* 20200521追加　 */
}

aside .h4-aside-notice {
	color: #ffffff;
	background-color: #26364D;
	text-align: center;
	margin-top: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 1.6rem;
	margin-left: 0; /* 20200521追加　 */
	width: 100%;
}

aside h4 a {
	color: #06c;
}



#footer {
	clear: both;
	text-align: center;
	font-size: 80%;
	background-color: #336633;
	color: #ffffff;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	
}
.leftimg {
	margin-left: 10px;
	margin-right: 20px;
	margin-top: 10px;
}

/*Kindle
@media screen and (max-width:800px) {
	.navi {
		width: 20vw;
	}
}*/

/* ipad 9.7
@media screen and (max-width:768px) {
	.navi {
		width: 24.5vw;
	}
}*/
/*iphone8 plus
@media screen and (max-width:767px) and  (min-width:721px) {
	.navi {
		width: 18vw;
	}
	main {
		width: 59%;
	}
} */

/*iphone8
@media screen and (max-width:720px) {
	.navi {
		width: 24vw;
	}
}*/
/* ipad 9.7

@media screen and (max-width:768px) and (min-width:760px){
	.navi {
		font-size: 1.2rem;
	}	
	}*/
@media screen and (max-width: 940px) {
	.list1 a .br-navi-respo {
		display: inline;
	}

}
@media screen and (max-width:940px) and (min-width: 799px) { /* galaxyA7 */
	.list1 a .br-navi-respo.br-navi-respo-tablet {
		display: none;
	}
}
@media screen and (max-width: 735px){  /* iPhone8以下非表示 */
	.list1 a .br-navi-respo.br-navi-respo-tablet {
		display: none;
	}
}

@media screen and (max-width: 960px) and (min-width:575px) {
	.list1 a .br-navi-respo2 {
		display: inline;
	}
}