@charset "utf-8";
/*google fontsの読み込み*/
@import url('https://fonts.googleapis.com/css?family=Poiret+One&display=swap');


/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body,html {width: 100%;height: 100%;}
body {
	margin: 0px;
	padding: 0px;
	color: #FFFFFF;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 14px;	
	background:linear-gradient(to top, #EAFFFF 0%, #00A0EE 100%) no-repeat;
	background-color:#EAFFFF;
	-webkit-text-size-adjust: 100%;
}
/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #00F;		
}
a:hover {
	color: #C0C;
	text-decoration: none;
}
a:hover img{
    
 filter: alpha(opacity=60);
-ms-filter: alpha(opacity=60);
 opacity: 0.6;
 
}
/*（全般）設定
--------------------------------------------------------------------------img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
-*/
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,input,textarea {margin: 0px;padding: 0px;font-weight: normal;}
ul {list-style-type: none;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}
input[type=radio] { width:20px; height:20px;vertical-align: middle;}

.bd  {font-weight:bold;}
.br {color: #930;}
.bl {color:#00F;}
.grv {color:#C06;}
.gr {color:#060;}
.b {color: #000;}
.wh {color:#FFF;}
.sb {color: #0DB3AA;}
.pu {color: #F0F;}
.rd {color:#C00;}
.bcpu {background-color: #906;}
.cl {clear: both;}
.ce {text-align: center;}
.ri {text-align: right;}
.lf {text-align: left;}
.f80{font-size:80%;}
.f90 {font-size:90%;}
.f100 {font-size:100%;}
.f120 {font-size:120%;}
.f140 {font-size:140%;}
.pt50 {padding-top:40%;}
.w100 {width:100%;}
.pb80 {width:85%;}
.pb60 { width:55%;}
.pb45 {width:42%; padding:2px 4%;}
.w90 {width:90%;}
.w80 {width:80%;}
.w70 {width:70%;}
.w60 {width:60%;}
.w65 {width:65%;}
.w50 {width:50%;}
.w40 {width:40%;}
.w45 {width:45%;}
.w33 {width:33%;}
.w30 {width:30%;}
.w20 {width:20%;}
.w25 {width:25%;}
.w10 {width:10%;}
.w6 {width:6%;}
.w5 {width:5%;}
.ltsp1 {letter-spacing:1px;}
.ims8 {width:8%;}
.ims30 {width:30%;}
.ims40 {width:40%;}
.ims45 {width:45%;}
.mag {margin:0 auto;}
.mgt5 {margin-top:5%;}
.mgt10 {margin-top:12%;}
.mgt30 {margin-top:30%;}
.pd {padding:3px; box-sizing:border-box;}
.pdt10 {padding-top:15%;}
.nobr {display: none;}
.lh2 {line-height:2em;}
.pd5 {padding:5%; box-sizing:border-box;}
.pdb15 {padding-bottom:15%;}
.ya {width:80%}
.dgr {color:#333;}
.mr {color:#930;}
.whi {color:#FFF;}
.pr {font-size: 10px;}
.f130 {font-size:130%;}
.fl {float: left;}
.fr {float: right;}
.lic {background-color:#379BFF;}
.f14 {font-size:14px;}
.f18 {font-size:18px;}
.f150 {font-size:150%;}
.bcg {background-color:#d8d8d8;}
.w20 {width:20%;}
.w25 {width:25%;}
.w22 {width:22%;}
.w4 {width:4%;}

/*全般設定
---------------------------------------------------------------------------*/
#wrapper{
margin:0;
width:100%;
padding:0;
	background: url(../image/kb_top.gif) repeat-x;
overflow:hidden;
position: absolute;
}
h1{
	font-size:100%;
	padding:2px 0 0 150px;
	margin:0px;	
	color:#fff;	
	
}
h2{
	width:80%;
	margin:20px auto; 
        font-size:140%;
        font-weight:bold;
        color:#FFFFFF;
        text-align:center;
   	padding: 8px;
background-image : url(../image/bk_content.gif);
background-repeat : repeat-x;
}
h3{
	width:90%;
	margin:10px auto;
	font-size: 120%;	
	font-weight:bold;	
	padding:8px 0;
	color:#fff;	
background-image : url(../image/bk_content.gif);
background-repeat : repeat-x;
}
h4 {
	width:100%;
	padding:5px;
	margin:10 0;
	font-size:120%;
	font-weight:bold;
	text-align:left;
	color:#FFF;
	letter-spacing:2px;
	background-color:#900;
	box-sizing:border-box;
}
/*ヘッダー
---------------------------------------------------------------------------*/
header{
	width:1000px;
	margin:-4px auto 0 auto;
	overflow:hidden;
	padding:0;
}
header .im10{
	width:35%;
	float:left;
	margin-top:10px;
}
header .im2{
	width:36%;
	text-align:center;
	float:left;
	margin-top:5px;
}
header .im3{
	width:26%;
	float: right;
}


/*ベース
-----------------------------------------------------------------*/

#baseBlock1{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	margin-left:auto;
	margin-right:auto;
	margin-top:14px;
	color: #333; 
	width:947px; 
	background: url(../image/kb_top2.gif) no-repeat;
	background-siz : 100%;
	background-color:#FFF;	 
	text-align:left;	
	font-size:96%;  
	line-height : 120%;
	overflow:hidden;
}
/*トップメニュー
-----------------------------------------------------------------*/
.menu {
   width:100%;
   overflow:hidden;
   margin:0 auto;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
   list-style-type:none;
}
.menu ul {
	width:100%;
	display: flex;
  flex-direction: row;
}
.menu li {
   font-size:14px;
   width:20%;
   
   color:#333;
}

.menu li a {
   display:block;
   color:#fff;
   padding:15px 0;
   text-align:center;
   text-decoration:none;
   background:url(../image/images/bg_list.gif) 100% 0 no-repeat;
}

.menu li a.current {
}

.menu li a:hover {
   padding:20px 0px -5px 0px;
position:relative;
   background:url(../image/images/bg_list_on.gif) 100% 0 no-repeat;
}
/***EX工房************************************/
#top-mid{
	width: 88%;
	margin:5px auto;
	border: #00F solid 3px;
	border-radius:55px;
	overflow:hidden;
}
#top-mid .mj{
	width:81%;
	font-size : 130%;  
	line-height :2em;
	font-weight: bolder;
	
       padding-top: 26px; 
       padding-right : 3%;
 	 	color:#000066;
	float: right;
	box-sizing:border-box;
}
#top-mid .im{
	margin:10px;
	width:15%;
	float:left;
	box-sizing:border-box;
}
/**INDEX************************************/
#main{
	width: 100%;
	margin-top: 6px;
	overflow:hidden;
	padding-bottom:20px;
	display: flex;
  flex-direction: row;
} 
.FF{
	width:80%;
	margin:0 auto;
font-size : 130%;
line-height :2em;

}
#main img {
	margin:3px;
	width:100%;
}
.main-left{
   width:40%;
    text-align: center;
	overflow:hidden;
	margin:3px;
	padding:5px;
	border:#00F solid 2px;
	box-sizing:border-box;
   
}
.main-right{
	width: 20%;
	margin:3px;
}
.main-right ul{
	width: 90%;
	margin:0 auto;
	position: relative;
	
}
.main-right li{
	width: 100%;
	text-align:center;
	line-height: 20px;
	font-size: 14px;
	padding-bottom: 8px;
	padding-left: 1px;
	vertical-align: top;
}
.main-right li a {
       background-color:#00cccc;
       border-width:1px 5px 1px 5px;
        border-style:solid;
        border-color:#000066;
	padding-bottom:3px;	
        text-decoration:none;
        color:#ffff66;
        display:block;
        font-weight:bold;

}
.main-right li a:hover {
       background-color:#cc6600;
       border-left-style:solid;
        border-color:#000080;
        border-left-color:#FF6666;
        border-right-color:#CC3333;
        border-top-color:#FF6666;
        color:#FFFFFF;
        text-decoration:none;
        display:block;
        font-weight:bold;
        
}
.main-right li a:visited {
        color:#ffff66;
        width:100%;
        display:block;
        font-weight:bold;
        
}
.menu0 {
	line-height: 32px;
	text-align: center;
	width:100%;
	font-size: 16px;
	color: #ffffff;
	font-weight: bold;
	background: url(../image/bk_content.gif) repeat-x;
/*        background-color:#ffffff;*/
        
}
.border{
	border: 2px solid #000099;	
	padding: 5px;
	text-align: center;
	color: #909;
	font-weight: bold;
	
}
.main-btoom{
	width: 100%;
}
.main-btoom .innr {
	width: 99%;
	font-size:110%;
	line-height:1.5em;
	border-left: #00C dashed 8px;
	border-right:#00C dashed 8px;
	padding:10px 8px;
	margin:-16px 5px 5px 5px;
	box-sizing:border-box;
	z-index:10;
	position:relative;
}
.main-btoom .box {
	width:100%;
	overflow:hidden;
	border:#00C solid 2px;
	margin-top:10px;
	box-sizing:border-box;
}
.main-btoom .box .in {
	float:left;
	overflow:hidden;
	width:50%;
	text-align:center;
	padding:10px;
	box-sizing:border-box;
}
.mida {
	width:90%;
	margin:10px auto;
	font-size:130%;
	font-weight:bold;
	padding:8px 0;
	background-image:url(../image/bk_content.gif);
}
/**吹き出し*************************************/
.balloonoya {
  position   : relative; 
}
.balloonoya:hover .balloon {
  display: inline; 
}
.balloon {
  position: absolute; 
  display: none; 
  padding: 2px;    
background-color: #0055ff;
	color:#ffffff;	
	border-left:5px solid #0000cc;
  width: auto; 
  left: -90%;
  top:-70%; 
  font-size: 120%;    
}
.balloon:after{
  border-left: 12px solid #0055ff; 
  border-top: 22px solid transparent;  
  border-bottom: 0px solid transparent;
  content: "";   
  position: absolute;   
}
/*コンテンツ
-----------------------------------------------------------------*/
#contente {
	width:100%;
	text-align: center;
	letter-spacing:1px;
	line-height:1.6em;
}
.box1 {
	width:90%;
	margin:10px auto;
	text-align:center;
}
.box1 ul {
	width:100%;
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.box1 li {
	width:33%;
	margin-top:12px;
}
.box2 {
	width:90%;
	margin:0 auto;
	font-size:110%;
	line-height:1.4em;
	letter-spacing:2px;
}
.box3 {
	width:80%;
	margin:8px auto;
	padding:6px;
	color:#FFF;
	background-color: #00C;
}
.box4 {
	margin:0 auto;
	width:98%;
	border:#00C solid 2px;
	padding:5px;
	box-sizing:border-box;
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.box5 {
	margin:0 auto;
	width:99%;
	box-sizing:border-box;
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow:hidden;
}
.box6 {
	margin:0 auto;
	box-sizing:border-box;
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow:hidden;
}

.hdl {
	width:96%;
	margin:3px auto;
	font-size:120%;
	font-weight:bold;
	text-align:left;
	padding:8px;
	background-color:#FF9;
	overflow:hidden;
}
.hdr {
	width:96%;
	margin:3px auto;
	font-size:100%;
	font-weight:bold;
	text-align:left;
	padding:9px 5px;
	background-color: #C6E2FF;
	color:#00F;
	overflow:hidden;
}
.inbox {
	color:#C06;
	letter-spacing:2px;
	padding:8px;
	line-height:1.6em;
	box-sizing:border-box;
	overflow:hidden;
}
.umtop {
	width:50%;
	float:left;
	text-align:right;
}
/*#contente p {
	padding:10px 0;
	font-size:120%;
}
#contente p span {
	font-weight:bold;
}
***************************************/

/*フッター
-----------------------------------------------------------------*/
#fbox {
	width:50%;
	margin:10px auto;
	text-align:center;
	border:#00C solid 2px;
	padding:8px;
	font-size:130%;
	line-height:1.6em;
	font-weight:bold;
	color: #C09;
}
footer{
    width:100%;
	clear:both;	      	
	text-align: center;	
	padding:5px 0;
	color:#000;	
	background:url(../image/bk_content.gif)
	
}
footer a{
	color: #FFF; 
	text-decoration:none;
	
}
footer p{
	margin-top:10px;
	font-size:70%;

}
footer .abox {
	width:100%;
	padding:8px 0;
	text-align:center;
}
footer .abox ul {
	width:700px;
	margin:0 auto;
	display: flex;
  flex-direction: row;
}
footer .abox li {
	padding-right:15px;
	font-size:70%;
	line-height:1.8em;
}
/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
#pagetop {
	clear: both;
}
#pagetop a {
	display: block;
	text-decoration: none;
	text-align: center;
	z-index: 80;
	position: fixed;
	width: 40px;		/*ボタンの幅*/
	line-height: 40px;	/*ボタンの高さ*/
	bottom: 20px;		/*ウィンドウの下から20pxの場所に配置*/
	right: 3%;			/*ウィンドウの右から3%の場所に配置*/
background:rgba(0,128,255,0.2);
	color: #03F;		/*文字色*/
	border: 1px solid #06F;	/*枠線の幅、線種、色*/
	border-radius: 50%;	/*円形にする指定*/
}
/*マウスオン時*/
#pagetop a:hover {
background:rgba(0,128,255,0.8);
	color: #FFFF;			/*文字色*/
}

/******************************************/
.hamburger-menu {
	display: none;
}
.imgtebl { display:none;}
/******************************************/
/*コンタクト
-----------------------------------------------------------------*/
#contact {
	width:80%;
	margin:20px auto;
	border:#00F solid 2px;
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#contact .lbox {
	width:30%;
	padding:6px 0 6px 15px;
	font-size:100%;
	border-bottom:#00F solid 2px;
	border-right:#00F solid 2px;
	background-color:#006DA2;
	color:#FFF;
	box-sizing:border-box;
}
#contact .rbox {
	width:70%;
	padding:2px;
	border-bottom:#00F solid 2px;
	box-sizing:border-box;

}
#contact .ubox {
	width:100%;
	text-align:center;
	line-height:1.5em;
}
.fcon{
	font-size: 18px;
	font-weight: bold;
	color: #990033;
	padding: 8px;
}
#contact .ubox input[type=tel] { width:20%; margin:0 auto; font-size:120%; background-color: #F4F4F4;}
#contact input[type=text] { width:99%; font-size:120%; background-color:#F4F4F4;}
#contact input[type=tel] { width:99%; font-size:120%; background-color:#F4F4F4;}
#contact textarea {width:99%; height:200px; background-color:#F4F4F4;}
#contact select { background-color:#E7E7E7; font-size:130%;}
/******************************************/


/*１０２４以下
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1024px){
/*ヘッダー
---------------------------------------------------------------------------*/
header{
	width:100%;
}
.imgtebl {display:block;}
.imgmap {display:none;}
/*ベース
-----------------------------------------------------------------*/
h4 {font-size:110%;}
#baseBlock1{
	width:100%;
	padding:1%;
	font-size:96%;    
	line-height : 120%;
	overflow:hidden;
	box-sizing:border-box;
}
.imgtebl table {
	border: #03F solid 5px;
}
.imgtebl td {
	background-color:#006;
	padding:15px;
}
#pagetop a {
background:rgba(0,128,255,0.8);
	color: #FFFF;			/*文字色*/
}
	

}
/*５００以下
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:500px){
body {
	font-size:12px;
}
	
#baseBlock1{
	background-image:none;
}
h1{ padding-left:8px;}
h2{width:100%;margin:5px 0;font-size:110%;}
h3 {font-size:100%;}
.f150 {font-size:120%;}
.f100 {font-size:130%; padding-bottom:8px;}
.w90 {width:95%;}
.w80 {width:100%;}
.w70 {width:90%;}
.w60 {width:100%;}
.w65 {width:100%;}
.w50 {width:100%;}
.w40 {width:100%;}
.w45 {width:90%; margin:0 auto;}
.w33 {width:90%; margin:0 auto;}
.w30 {width:90%; margin:0 auto;}
.w20 {width:100%; text-align:center;}
.w25 {width:90%; margin:0 auto;}
.w10 {width:20%; margin:0 auto; text-align:center;}
.w6 {width:30%; margin:0 auto; text-align:center; transform:rotate(90deg);}
.tf { transform:rotate(90deg);}
.w5 {width:20%; margin:0 auto;}
.ims40 {width:90%; margin:0 auto;}
.mgt30 {margin-top:2%;}
.mgt10 {margin-top:1%;}
.mgt5 {margin-top:0;}
.nobr {display:block;}
.ya {width:10%}
header .im10{ width:40%;}
header .im2{ display:none;}
header .im3{ width:40%; float:left; margin-left:8px;}
.menu { display:none;}
/* ハンバーガーメニュー
-------------------------------------------------------------------------------------------------------------------------------------*/
.hamburger-menu {
	display:block;
}

.menu-btn {
    position: fixed;
    top: 1px;
    right: 0;
    display: flex;
    height: 30px;
    width: 40px;
    justify-content: center;
    align-items: center;
    z-index: 100;
    background-color: #03F;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #FFF;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

#menu-btn-check {
    display: none;
}
#h-text {
	width:100px;
	font-size:10px;
	margin-top:40px;
	color: #FFF;
	text-align:center;
	display:	block;
	background-color: #03F;
}

.menu-cont {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 60px;
    left: 0;
	padding-bottom:10px;
    z-index: 90;
    background: url(../image/hbm-kb.png);
}
.menu-cont ul {
	text-align:center;
	margin-top:5px;
	overflow:auto;
 -webkit-overflow-scrolling: touch;
    padding: 5px 10px 0;
	text-align:center;
	line-height:2em;
}
.menu-cont ul li {
    list-style: none;
}
.menu-cont ul li a {
    display: block;
    width: 100%;
	padding:15px 0;
	text-align:center;
    font-size: 150%;
    box-sizing: border-box;
    color:#FFF;
    text-decoration: none;
	background:url(../image/hbm-likb.png);
    position: relative;
    border: solid 1px #ffffff;
}
.menu-cont {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
	display:none;
	overflow:auto;
 -webkit-overflow-scrolling: touch;
    z-index: 80;
    background-color: #51A8FF;
    transition: all 0.5s;
}
#menu-btn-check:checked ~ .menu-cont {
/*	opacity: 1;*/
	display:inline-block;
}

/***EX工房************************************/
#top-mid{
	width: 98%;
	margin:0 auto;
}
#top-mid .mj{
	width:99%;
	font-size : 120%;   
	line-height: 1.2em;
	font-weight: bolder;
       padding:10px; 
	float: none;
	box-sizing:border-box;
}
#top-mid .im{
	display:none;
}
/***************************************/
#main{
	flex-direction: column;
} 

.main-left{
   width:98%;
}
.main-right{
	width: 98%;
}
.FF{
	width:90%;
	margin:0 auto;
font-size : 130%;
line-height :1.5em;
}
.box1 li {
	width:50%;
}
.umtop {
	width:100%;
	float: noneeft;
	text-align: center;
}

.main-btoom .box .in {
	float: none;
	width:100%;
	text-align:center;
}
#fbox {
	width:80%;
	margin:5px auto;
	font-size:110%;
	padding:3px;
}
footer .abox ul {
	width:98%;
	flex-direction: column;
}
footer .abox li {
	width:85%;
	margin:0 auto;
	text-align:center;
	font-size:130%;
	line-height:3em;
	background:url(../image/kb-m.png);
}
#contact {
	width:98%;
	margin:8px auto;
  flex-direction: column;
}
#contact .lbox {
	width:100%;
	text-align:center;
	padding:4px;
	border-right: none;
}
#contact .rbox {
	width:100%;

}
.pt50 {padding-top:1%;}
#contact .ubox input[type=text] { width:50%; margin:0 auto; font-size:120%; background-color: #F4F4F4;}

}
/*３５０以下
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:350px){

}
/*３００以下
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:300px){

}