@charset "utf-8";


/*---------------------------------------------------------------------------------------------- */
/* 全共通 -------------------------------------------------------------------------------------  */
/*---------------------------------------------------------------------------------------------- */

#map-canvas{
width:100%;
height:300px;
}



/*---------------------------------------------------------------------------------------------- */
/* スマホ以外共通 -----------------------------------------------------------------------------  */
/*---------------------------------------------------------------------------------------------- */

.codesp{ display   : none;}
.codepc{ display   : inline;}


#jsswitch { float  : none;}


p{
 margin            : 20px 0 40px 0;
 padding           : 0 0 0 0;
 text-align        : left;
}


body {
 font-size         : 0.9em;
 line-height       : 200%;
}


/* ----- ヘッダ ----- */
header{
 position          : fixed;
 top               : 0;
 left              : 0;
 height            : 40px;
 z-index           : 70;
 width             : 98%;
 text-align        : center;
 padding           : 20px 0 0 2%;
 margin            : 0;
 background-color  : rgba( 255, 255, 255, 0.55 );
}

header span{
 display           : none;
}

header #dropmenu{
 clear             : both;
 display           : block;
 margin            : 0px auto;
 width             : 800px;
 padding           : 0 0 0 300px;
 text-align        : left;
 background-image: url("../img/head_logo.png");
 background-repeat: no-repeat;
}

#dropmenu li {
 display           : inline-block;
 margin            : 0 40px 0 0;
}
#dropmenu li a span{
 display           : none;
}

#dropmenu li a{
 text-decoration   : none;
 color             : #000;
}
#dropmenu li a:hover{
 opacity           : 0.5;
 filter            : alpha(opacity=50);
 -moz-opacity      : 0.5;
 -ms-filter        : "alpha(opacity=50)";
 -webkit-transition: 0.4s;
 -moz-transition   : 0.4s;
 -o-transition     : 0.4s;
 -ms-transition    : 0.4s;
 transition        : 0.4s;
}

#dropmenu li.active{
 opacity           : 0.3;
 filter            : alpha(opacity=30);
 -moz-opacity      : 0.3;
 -ms-filter        : "alpha(opacity=30)";
}


/* ----- フッタ ----- */
footer{
 clear             : both;
 display           : block
 width             : 100%;
 text-align        : center;
 padding           : 120px 0 20px 0;
 margin            : 0 0 0 0;
 font-size         : 11px;
 line-height       : 130%;
 color             : #666666;
}



/* ----- コンテンツ見出し ----- */
.content h1{
 text-align        : left;
 font-size         : 21px;
 color             : #00B3ED;
 font-family       : 'Meiryo',Arial,sans-serif;
 font-weight       : 700;
}

.content h2{
 text-align        : left;
 font-size         : 28px;
 color             : #00B3ED;
 font-family       : 'Noto Sans Japanese','Meiryo',Arial,sans-serif;
 font-weight       : 700;
 padding           : 31px 0 10px 50px;
 background-image  : url("../img/bg_h2.png");
 background-repeat : no-repeat;
 background-position:left bottom;
}

.conceptST{
 text-align        : left;
 font-size         : 32px;
 color             : #00B3ED;
 font-family       : 'Noto Sans Japanese','Meiryo',Arial,sans-serif;
 font-weight       : 700;
 padding           : 31px 0 10px 0;
}


/* ----- CONCEPT ----- */
.concept{
 min-height        : 500px;
 background-image  : url("../img/bg_concept.png");
 background-repeat : no-repeat;
 background-position:right top;
}



/* ----- COMPANY ----- */
/* ----- CONTACT ----- */
.companyCell_b{
 float             : left;
 display           : inline;
 width             : 100%;
 background        : #E9F8FF;
}
.companyCell_w{
 float             : left;
 display           : inline;
 width             : 100%;
 background        : #ffffff;
 text-align        : center;
}

.cell01{
 float             : left;
 display           : inline;
 width             : 20%;
}
.cell02{
 float             : left;
 display           : inline;
 width             : 80%;
 text-align        : left;
}
.cell01 span,
.cell02 span{
 float             : left;
 display           : inline;
 padding           : 12px 0 12px 12px;
}

.cell02 .cell02L{
 float             : left;
 display           : inline;
 width             : 15%;
}
.cell02 .cell02R{
 float             : left;
 display           : inline;
 width             : 85%;
}


.cell02 .cell02L2{
 float             : left;
 display           : inline;
 width             : 25%;
}
.cell02 .cell02R2{
 float             : left;
 display           : inline;
 width             : 75%;
}


.cell02  .cell02L span,
.cell02  .cell02R span,
.cell02  .cell02L2 span,
.cell02  .cell02R2 span{
 float             : left;
 display           : inline;
 padding           : 6px 0 6px 12px;
}





.box05{
 float             : left;
 display           : inline;
 margin            : 0 0 2em 0%;
 width             : 20%;
 background        : #ffffff;
 text-align        : center;
 line-height       : 130%;
 color             : #00B3ED;
 font-size         : 12px;
}


/*PHILOSOPHY*/

.philos{
 float             : left;
 display           : inline;
 width             : 100%;
 background        : #ffffff;
 text-align        : left;
}

.philoST{
 font-size         : 22px;
 color             : #00B3ED;
 font-family       : 'Noto Sans Japanese','Meiryo',Arial,sans-serif;
 font-weight       : 700;
 padding           : 31px 0 10px 0;
}

.philoST2{
 font-size         : 18px;
 font-family       : 'Noto Sans Japanese','Meiryo',Arial,sans-serif;
 font-weight       : 700;
}



.philo01{
 float             : left;
 display           : inline;
 width             : 15%;
}
.philo02{
 float             : left;
 display           : inline;
 width             : 85%;
}
.philoL{
 float             : left;
 display           : inline;
 margin            : 0 0 0 1%;
 width             : 20%;
 text-align        : left;
}
.philoR{
 float             : left;
 display           : inline;
 width             : 79%;
 text-align        : left;
}








/* ----- フォーム ----- */
.fm { width: 550px; height:32px;  background: #ededee;border: solid 1px #ededee;}
.fl { width: 550px; height:320px; background: #ededee; border: solid 1px #ededee;}

.soushin {
 width      : 500px;
 height     : 50px;
 background : #01b3ec;
 color      : #ffffff;
 border     : solid 1px #01b3ec;
 cursor     : "hand";
}











/*---------------------------------------------------------------------------------------------- */
/* ワイドモニター(1024) -----------------------------------------------------------------------  */
/*---------------------------------------------------------------------------------------------- */

.wrap{
 margin            : 0px auto;
 padding           : 80px 2% 0 2%;
 width             : 96%;
 text-align        : center;
}

/* ----- コンテンツ ----- */
.content{
 clear             : both;
 display           : block;
 margin            : 0px auto;
 padding           : 0 0 0 0;
 width             : 1100px;
 color             : #666666;
 text-align:left;
}
.content:after {
 content: "";
 display: block;
 clear: both;
}



/* ----- メインビジュアル ----- */
.mainv{
 width             : 1100px;
 background        : #ffffff;
}
.mainv img{
 width             : 100%;
}



/* -----------------------------------------------------------------------  */




/*---------------------------------------------------------------------------------------------- */
/* ＰＣ ---------------------------------------------------------------------------------------  */
/*---------------------------------------------------------------------------------------------- */
@media (max-width: 1023px) {

body {
 padding           : 0 0 0 0;
}
.wrap{
 margin            : 0px auto;
 padding           : 80px 2% 0 2%;
 width             : 96%;
 text-align        : center;
}

/* ----- コンテンツ ----- */
.content{
 clear             : both;
 display           : block;
 margin            : 0px auto;
 width             : 100%;
 padding           : 0 0 0 0;
 color             : #666666;
 text-align:left;
}
.content:after {
 content: "";
 display: block;
 clear: both;
}



/* ----- メインビジュアル ----- */
.mainv{
 float             : left;
 display           : inline;
 width             : 100%;
 background        : #ffffff;
}
.mainv img{
 width             : 100%;
}



}
/* -----------------------------------------------------------------------  */




/*---------------------------------------------------------------------------------------------- */
/* スマホ -------------------------------------------------------------------------------------  */
/*---------------------------------------------------------------------------------------------- */
@media (max-width: 778px) {

.codesp{ display   : inline;}
.codepc{ display   : none;}


#jsswitch { float  : left; }

.wrap{
 margin            : 0px auto;
 padding           : 80px 0 0 0;
 width             : 100%;
 text-align        : center;
}

p{
 margin            : 10px 0 20px 0;
 padding           : 0 0 0 0;
 text-align        : left;
}


body {
 font-size         : 0.9em;
 line-height       : 200%;
}


/* ----- ヘッダ ----- */
header{
 position          : fixed;
 top               : 0;
 left              : 0;
 height            : auto;
 z-index           : 70;
 width             : 100%;
 text-align        : right;
 padding           : 5px 0 0 0;
 margin            : 0;
 background-color  : rgba( 255, 255, 255, 0.55 );
}

header span{
 display           : inline;
}

header #dropmenu{
 clear             : both;
 display           : block;
 margin            : 0px auto;
 width             : 99%;
 padding           : 45px 0 0 0;
 text-align        : left;
 background-image  : url("../img/head_logo.png");
 background-repeat : no-repeat;
 border-bottom     : 1px solid #01b4ed;
}

#dropmenu li {
 display           : inline-block;
 margin            : 0 0 0 0.5%;
 padding           : 3px 0 3px 0;
 width             : 15%;
 background        : #01b4ed;
 text-align        : center;
 border-top-right-radius : 6px;
 border-top-left-radius  : 6px;
}
#dropmenu li a span{
 display           : inline;
 font-size         : 0.4em;
}
#dropmenu li a img{
 display           : none;
}

#dropmenu li a{
	text-decoration  : none;
	color            : #ffffff;
}
#dropmenu li a:hover{
 opacity           : 0.5;
 filter            : alpha(opacity=50);
 -moz-opacity      : 0.5;
 -ms-filter        : "alpha(opacity=50)";
 -webkit-transition: 0.4s;
 -moz-transition   : 0.4s;
 -o-transition     : 0.4s;
 -ms-transition    : 0.4s;
 transition        : 0.4s;
}

#dropmenu li.active{
 opacity           : 0.3;
 filter            : alpha(opacity=30);
 -moz-opacity      : 0.3;
 -ms-filter        : "alpha(opacity=30)";
}


/* ----- フッタ ----- */
footer{
 clear             : both;
 display           : block
 width             : 100%;
 text-align        : center;
 padding           : 2em 0 1em 0;
 margin            : 0 0 0 0;
 font-size         : 0.8em;
 line-height       : 120%;
 color             : #666666;
}



/* ----- コンテンツ ----- */
.content{
 clear             : both;
 display           : block;
 margin            : 0px auto;
 padding           : 0 2% 0 2%;
 width             : 96%;
 color             : #666666;
 text-align:left;
}
.content:after {
 content: "";
 display: block;
 clear: both;
}



/* ----- メインビジュアル ----- */
.mainv{
 float             : left;
 display           : inline;
 width             : 100%;
 background        : #ffffff;
}
.mainv img{
 width             : 100%;
}



/* ----- コンテンツ見出し ----- */
.content h1{
 text-align        : left;
 font-size         : 1em;
 color             : #00B3ED;
 font-family       : 'Meiryo',Arial,sans-serif;
 font-weight       : 700;
}

.content h2{
 text-align        : left;
 font-size         : 1.2em;
 line-height       : 100%;
 color             : #00B3ED;
 font-family       : 'Noto Sans Japanese','Meiryo',Arial,sans-serif;
 font-weight       : 700;
 min-height        : 25px;
 padding           : 4px 0 10px 25px;
 background-image  : url("../img/bg_h2_sp.png");
 background-repeat : no-repeat;
 background-position:left top;
}

.conceptST{
 text-align        : left;
 font-size         : 1.6em;
 color             : #00B3ED;
 font-family       : 'Noto Sans Japanese','Meiryo',Arial,sans-serif;
 font-weight       : 700;
 padding           : 31px 0 31px 0;
}

/* ----- CONCEPT ----- */
.concept{
 min-height        : auto;
 background-image  : url("../img/bg_concept_sp.png");
 background-repeat :no-repeat;
 background-position:right bottom;
}


/* ----- COMPANY ----- */
/* ----- CONTACT ----- */
.companyCell_b{
 float             : left;
 display           : inline;
 width             : 100%;
 background        : #E9F8FF;
}
.companyCell_w{
 float             : left;
 display           : inline;
 width             : 100%;
 background        : #ffffff;
 text-align        : center;
}

.cell01{
 float             : left;
 display           : inline;
 width             : 100%;
 text-align        : left;
}
.cell02{
 float             : left;
 display           : inline;
 width             : 100%;
}
.cell01 span{
 float             : left;
 display           : inline;
 padding           : 12px 0 0 12px;
 font-weight       : bold;
}
.cell02 span{
 float             : left;
 display           : inline;
 padding           : 0 0 12px 12px;
}

.cell02 .cell02L{
 float             : left;
 display           : inline;
 width             : 100%;
}
.cell02 .cell02R{
 float             : left;
 display           : inline;
 width             : 100%;
}
.cell02  .cell02L span{
 float             : left;
 display           : inline;
 padding           : 0 0 0 12px;
}
.cell02  .cell02R span{
 float             : left;
 display           : inline;
 padding           : 0 0 0 24px;
}



.cell02 .cell02L2{
 float             : left;
 display           : inline;
 width             : 70%;
}
.cell02 .cell02R2{
 float             : left;
 display           : inline;
 width             : 30%;
}

.cell02  .cell02L2 span{
 float             : left;
 display           : inline;
 padding           : 0 0 0 1em;
}

.cell02  .cell02R2 span{
 float             : left;
 display           : inline;
 padding           : 0 0 0 0;
}






/*PHILOSOPHY*/

.philos{
 float             : left;
 display           : inline;
 width             : 100%;
 background        : #ffffff;
 text-align        : left;
}

.philoST{
 font-size         : 1.6em;
 color             : #00B3ED;
 font-family       : 'Noto Sans Japanese','Meiryo',Arial,sans-serif;
 font-weight       : 700;
 padding           : 31px 0 10px 0;
}

.philoST2{
 font-size         : 1.2em;
 font-family       : 'Noto Sans Japanese','Meiryo',Arial,sans-serif;
 font-weight       : 700;
}

.philo01{
 float             : left;
 display           : inline;
 width             : 98%;
 margin            : 0 0 0 2%;
}
.philo02{
 float             : left;
 display           : inline;
 margin            : 0 0 0 5%;
 width             : 95%;
}
.philoL{
 float             : left;
 display           : inline;
 margin            : 0 0 0 2%;
 width             : 98%;
 text-align        : left;
}
.philoR{
 float             : left;
 display           : inline;
 margin            : 0 0 0 5%;
 width             : 95%;
 text-align        : left;
}



.box05{
 float             : left;
 display           : inline;
 margin            : 0 0 2em 0%;
 width             : 33%;
 background        : #ffffff;
 text-align        : center;
 line-height       : 130%;
 color             : #00B3ED;
}





/* ----- フォーム ----- */
.fm { width: 280px; height:32px;  background: #ededee;border: solid 0px #ededee;}
.fl { width: 280px; height:320px; background: #ededee; border: solid 0px #ededee;}

.soushin {
 width      : 280px;
 height     : 50px;
 background : #01b3ec;
 color      : #ffffff;
 border     : solid 1px #01b3ec;
 cursor     :  "hand";
}





}
/* -----------------------------------------------------------------------  */