@charset 'UTF-8';

/*
Theme Name: BTC
Author: Keita Doi
Author URI: http://bt-c.jp/
*/

.colorOrange{ color: #FABB00;}
.colorBlack{ color: #000;}
.colorRed{ color: #F00;}
.colorGray{ color: #999;}

/* HEADER */
.BTC{ margin :0; font-size: 250%; letter-spacing: 0.05em; font-weight: bold; line-height: 30%;}
.BTC img{ display: block; max-width: 70%;}
.BTC .colorBlack,.BTC .colorRed{ font-size: 70%;}
.BTC .colorGray{ font-size: 43%; font-family: Meiryo UI; font-weight: normal; padding-left: 1px;}
#header{ margin-top: 20px;}
.tel{ font-size: 170%; font-weight: bold; line-height: 100%;}
.headLink{ font-size: 90%;}
.headLink li{ display: inline; padding-left: 10px;}
.headLink li a{ color: #777; text-decoration: underline; background: url(/img/arrow01.png) no-repeat 0 50%; padding-left: 10px;}
.headMenu{ margin: 20px auto 0px auto; font-size: 100%;}
.headMenuUl li{ line-height: 120%; margin-bottom: 20px; padding-bottom: 10px; background: url(/img/headMenuLiBg.jpg) bottom center no-repeat;}
#page_mission .headMenuMission, #page_consulting .headMenuConsulting, #page_seminar .headMenuSeminar, #page_outsourcing .headMenuOutsourcing, #page_it .headMenuIt, #page_company .headMenuCompany{ background-image: url(/img/headMenuLiBgNow.jpg) ; }
.headMenu li a{ color: #777;}
.headMenu li a:hover{ color: #CCC;}
.eng{ font-size: 70%;}

/* MAIN */
#main{ margin-top: 0px;}
#main h1{ height: auto; margin: 0; padding-top: 30px; background: url(/img/h1bg.png) right bottom no-repeat; line-height: 180%;}
@media (max-width: 600px) {
	#main h1{ padding-bottom: 130px;}
}
#main dl{ }
#main dt{ padding: 10px; font-size: 140%; background-color: #FABB00; color: #FFF; }
#main dd{ margin: 0 0 20px 0; padding-top: 20px; line-height: 180%; }
#main dd blockquote{ font-size: 100%; }
#main dd p{ margin: 20px auto 20px auto; line-height: 180%; }
#main dd p img {width:100%;}
#main dd ul{ margin-left: 10px; line-height: 130%;}
#main dd li{ background: url(/img/ulbg.png) left center no-repeat;  padding: 5px 0px 5px 20px; }
#main dd img.pull-right{ margin-left: 10px; max-width: 50%;}


/* HOME */
#page_home .headMenu{ margin-top: 50px;}
#page_home #headMenuDiv{ display: none;}
.headMenuHome{ display: none;}
#philosophy{ margin: 20px auto 20px auto; background: url(/img/philosophyBg.jpg) right top no-repeat; background-size: contain;text-shadow: 1px 0px 0px #FFF , -1px 0px 0px #FFF , 0px 1px 0px #FFF , 0px -1px 0px #FFF;}
#philosophy h1{ font-size: 200%; line-height: 180%; margin: 20px 0 20px 0; padding: 50px 0 50px 0;}
#philosophy p{ font-size: 100%; padding: 0px 0 50px 0; line-height: 250%;}
#philosophy p span{ font-size: 110%; font-weight: bold;}
.news{ height: 450px; overflow-y: scroll; margin-bottom: 40px; list-style: none; padding: 0; line-height: 120%;}
.news li{ border-bottom: 1px solid #EEE; background: #FFF url(/img/arrow01.png) no-repeat 0 50%; padding: 10px 0 10px 15px; margin-left: 5px;}
.date{ color:#777; font-size: 90%;}
.blog{ height: 450px; overflow-y: scroll; margin-bottom: 40px; list-style: none; padding: 0; line-height: 120%;}
.blog img{ float: left; margin-right: 10px; height:50px; width: 50px;}
.blog li{ border-bottom: 1px solid #EEE; padding: 10px 0 10px 5px;}

/* MISSION */
.sign{ text-align: right; font-size: 120%; }

/* CONSULTING */

/* SEMINAR */

/* OUTSOURCING */

/* CONTACT FORM */

/* POST */
#menu h3{ margin-top: 0; }
.code{ padding: 10px; background: #000; color: greenyellow; }
#pagenation a[rel="next"]{ float: left; }
#pagenation a[rel="next"]{ float: right; }



/* PORTFOLIO */

.portfolio_all{
	margin: 0 auto;
	background-color:#fff;}

.portfolio_all h1{
    width: 95%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 1%;
    margin-bottom: unset;
    text-align: left;
    font-size: 200%;
    padding: 10px;
    background-color: #FABB00;
    font-weight: 550;
    color: #FFF;}

.portfolio_all img{
	margin: 0 auto;
}
.list_web img{
	max-width: 100%;
}
.list_flyer img{
	max-width: 70%;
}

.portfolio_title{
	width:100%;
    margin-right: auto;
    margin-left: auto;
	border-bottom: 0.2rem solid #979797;
	margin-bottom: 30px;
    padding-top: 40px;}

.portfolio_title h2,
.portfolio_title p{
	font-size: 30px;
	color:#707070;
    margin-left: 1%;}

.portfolio_title h2{
	text-align: left;
    margin-left: 1%;
    margin-top: unset;
    margin-bottom: unset;
    float:left;}

.portfolio_title p{
	text-align: right;
    margin-right: 1%;}

.portfolio_content {
	width:95%;
    margin-right: auto;
    margin-left: auto;
	padding-bottom: 3%;
	text-align: left;}

.portfolio_content img{
	width:50%;
    margin:0 0 0 auto;
    display: block;}

.portfolio_content_sub {
	width:95%;
    margin-right: auto;
    margin-left: auto;
	border-top: 0.2rem dotted #8B8B8B;
	text-align: left;
	margin-top: 20px;
    padding-top: 30px;
    padding-bottom: 30px;}

.portfolio_content_sub img{
	width:50%;
    margin:0 0 0 auto;
    display: block;}

.portfolio_content_sub_left img{
	width:50%;
    float:left;
    display: block;}

.portfolio_content_sub_logo img{
	width:25%;
    float:left;
    padding-top: 3%;
    display: block;}

.portfolio_content_sub_right img{
	width:70%;
    display: block;}

.portfolio_content_left img{
	width:48%;
    float:left;
	border: 0.1rem solid #8B8B8B;
	margin-top: 1%;
    display: block;}

.portfolio_content_left02 img{
	width:20%;
    margin-left: 15%;
    padding-top: 3%;
    display: block;}

.portfolio_content_left03 img{
	width:40%;
    margin-left: 5%;
    padding-top: 3%;
    display: block;}

.portfolio_content_left04 img{
	width:46%;
    margin-left: 1.5%;
    padding-top: 2.6%;
    display: block;}

.portfolio_content_left05 img{
	width:47%;
    margin-left: 0;
    padding-top: 10%;
    padding-bottom: 5%;
    display: block;}

.portfolio_content_center img{
	width:120%;
	margin: 0;
    text-align: center;
    padding-top: 1.5%;
    display: block;}

.portfolio_content_right img{
	width:48%;
    float:right;
    display: block;}

.portfolio_content_right02 img{
	width:50%;
    float:right;
    display: block;}

.portfolio_content_right03 img{
	width:50%;
    float:right;
	border: 0.1rem solid #8B8B8B;
    display: block;}

.content_title {
	font-size: 140%;}

.content_menu {
	font-size: 100%;
	margin-bottom: 20px;}


@media (max-width: 700px){
	
.portfolio_all h1{
    font-size: 180%;
	margin-top: 2%;}
	
.portfolio_title h2,
.portfolio_title p{
	font-size: 25px;}

.content_title {
	font-size: 120%;}

.portfolio_content img,
.portfolio_content_sub img,
.portfolio_content_sub_left img,
.portfolio_content_left img,
.portfolio_content_right img,
.portfolio_content_right02 img,
.portfolio_content_right03 img {
	float: none;
	width:90%;
	display: block;
	margin:0 auto 0;
	padding-top: 2%
}
.portfolio_content_sub_logo img{
	float: none;
	width:70%;
	display: block;
	margin:0 auto;
	padding-top: 2%
}

.portfolio_content_left02 img{
	float: none;
	width:50%;
	display: block;
	margin:20px auto 0;
	padding-top: 2%
}
}

@media (max-width: 580px){
	
.portfolio_title h2,
.portfolio_title p{
	font-size: 23px;}
}

@media (max-width: 530px){
	
.portfolio_title h2,
.portfolio_title p{
	font-size: 20px;}

.content_title {
	font-size: 110%;
	margin-bottom: 0;}

}


@media (max-width: 460px){
	
.portfolio_all h1{
    font-size: 150%;
	margin-top: 4%;}
	
.portfolio_title h2,
.portfolio_title p{
	font-size: 16px;
	margin-bottom: 1.5%;}

.portfolio_title h2{
    margin-top: 4px;
}
}

	
/* グローバルナビ（サブメニュー） */

.headMenuUl {
    display: flex;
    background-color: #FFF;
	position:relative;
}

.headMenuUl li ul {
    visibility: hidden;
    position: absolute;
    width: 80%;
    padding-top:10px;
	z-index:1;
}

.headMenuUl li ul .sub_menu {
    line-height: 400%;
    background-color: rgba(241,241,241,0.90);
    margin: 0;
    padding: 0;
    transition: .10s;
}

.headMenuUl li ul .sub_menu a{
    color:#727272;
}

.headMenuUl li:hover > ul > li {
    height: auto;
    visibility: visible;
}
.headMenuUl li ul .sub_menu a:hover {
    color: #FABB00;
}


/* ページリスト */
.page_list{
	text-align:center;}

.page_list ul{
	width:20%;
	margin:100px auto 0;
	display:flex;
	justify-content: space-around;}

.page_list ul a li{
	display:inline-block;
	border:1.5px solid #ED0707;
	padding:5px 8px;
	border-radius:3px;
}

.page_list ul a li.next{
	border:none;
}

.page_list ul a:hover li{
	border:1.5px solid #666;
}

.page_list ul a:hover li.next{
	border:none;
}


/* portfolio_02 */
.client{
	margin:10px 0;
	overflow:auto;}

.client img{
	width:100%;
	display:block;}

.client_logo{
	float:left;
	width:30%;
	margin-right:20%;}

.client_web{
	float:right;
	width:50%;}
	
.client_logo_re{
	float:left;
	width:48%;
	margin-right:4%;}

.client_web_re{
	float:right;
	width:48%;}

.client_logo_re img{
	margin-bottom:10px;
	border: 0.1rem solid #ccc;}

.client_logo_re img#logo_himawari{
	border:none;
	width:70%;
	display:block;
	margin:0 auto 0 0;}
	
/* portfolio_03 */
.site_title,
.site_title p{
	text-align:left;
	font-size:18px;
	width:100%;
	margin:20px auto;}

.privat{
	width:95%;
	margin:0 auto;
	display:flex;
	justify-content: space-between;}

.privat .case{
	width:48%;
}

.private_portfolio_title h2{
	text-align:left;
	font-size:18px;}

#empty .case{
	width:48%;
	float:left;
}

@media (max-width: 767px) {
.headMenuUl {
    display: block;
}

.headMenuUl li{
	width:50%;
}

.headMenuUl li a{
	display:block;
	text-align:center;
}

.headMenuUl li ul {
    width: 100%;
    padding-top:10px;
}
.headMenuUl li ul li.sub_menu{
	width:70%;
	margin:0 auto;
}
}

@media (max-width: 700px){
.page_list ul{
	width:60%;}

.client_logo,
.client_logo_re{
	float:none;
	width:80%;
	margin:0 auto;}

.client_web,
.client_web_re{
	float:none;
	width:95%;
	margin:20px auto 0;}
	
.privat{
	width:95%;
	margin:0 auto;
	display:block;}

.privat .case{
	width:100%;
}

#empty .case{
	width:100%;
	float:none;
}
}
.logo_title{
    color: #333;
    line-height: 1.3;
    position: relative;
    font-weight: bold;
    padding: 40px 0 5px;
    margin-bottom: 60px;
    border-bottom: 3px solid #CCC;
    border-radius: 1.5px;
	font-size: 125%;
    display: flex;
    align-items: center;
}
.logo_title:before {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 15%;
    height: 3px;
    content: '';
    background: #ED0707;
}
/*.logo_title{
	text-align: left;
    margin-left: 1%;
	width: 100%;
    border-bottom: 0.2rem solid #979797;
    margin-bottom: 30px;
    padding-top: 40px;
}*/
.list_logo{
	display: flex;
	justify-content: space-between;
	margin-bottom: 80px;
}
.list_logo li{
	width: 20%;
	display: flex;
	align-items: center;
}
.logo_small img{
	width: 70%;
	margin: 0 auto;
}
@media (max-width: 767px) {
.logo_title{
    display: block;
	font-size: 18px;
}
.list_logo{
	display: block;
	margin-bottom: 0;
}
.list_logo li{
	width: 90%;
	margin: 40px auto;
}
.list_logo li.logo_small{
	width: 90%;
	margin: 60px auto;
}
}
.list_flyer{
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
}
.list_flyer li{
	width: 32%;
	margin-bottom: 20px;
}
.flyer_small img{
	width: 70%;
	margin: 0 auto;
}

.flyer_small_border img{
	width: 70%;
	margin: 0 auto;
	border: 0.5px solid #999;
}
@media (max-width: 767px) {
.list_flyer{
	display: block;
	margin-bottom: 0;
}
.list_flyer li{
	width: 90%;
	margin: 0 auto 20px;
}
}
.list_web{
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
}
.list_web li{
	width: 32%;
	margin-bottom: 20px;
}
.list_web li .p_img{
	height:400px;
	background: #f5f5f5;
	position: relative;
	overflow: hidden;
}
.p_img .p_pc_img{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
}
.p_img .p_sp_img{
	position: absolute;
	bottom:10px;
	right:10px;
	width: 25%;
}
.list_web li a h3{
	font-weight: normal;
	font-size: 16px;
	justify-content: center;
	color: #444;
}
.list_web li a:hover h3{
	color: #ED0707;
}
@media (max-width: 1600px) {
	.list_web li .p_img{
	height:300px;
}
}
@media (max-width: 1200px) {
	.list_web li .p_img{
	height:250px;
}
}
@media (max-width: 999px) {
	.list_web li .p_img{
	height:200px;
}
}
@media (max-width: 767px) {
.list_web{
	display: block;
	margin-bottom: 0;
}
.list_web li{
	width: 90%;
	margin: 0 auto 20px;
}
.list_web li .p_img{
	height:420px;
}
.list_web li a h3{
	font-size: 14px;
}
}
@media (max-width: 580px) {
	.list_web li .p_img{
	height:300px;
}
}
@media (max-width: 480px) {
	.list_web li .p_img{
	height:280px;
}
}