/***************************************************************
ロゴエリア
***************************************************************/
    /* .headerを絶対配置の基準にする */
    .header{
      position:relative;
height: 70px;
    }
    /* .logoを絶対配置する */
    .logo{
      position:absolute;
      left:15px;
      top:0px;
      color:#fff;
float:left
    }
    /* 通常のアイコンを消す */
    .slicknav_menu .slicknav_icon{
      display:none;
    }

/***************************************************************
画像大小切り替え
***************************************************************/
.switch {/*画像非表示*/
    visibility: hidden;
}


/***************************************************************
トップボタン
***************************************************************/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 0px;
}

/***************************************************************
基礎設定
***************************************************************/
a:hover img{
filter: alpha(opacity=80);
-moz-opacity:0.6;
opacity:0.6;
}


a:hover { 
color: #de3d5d;
}

a{
color:#0153a6;
text-decoration: none;
}

img{
vertical-align:top;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 100%;
height: auto;
}

body {
line-height:1.8em;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin: 0;
text-align: center;
}

p.resizeimage img { width: 100%; }

.back-area {
width: 100%;
background: url(top/main-back01.png);
text-align: center;
padding: 20px 0px;
}


/***************************************************************
ヘッダー　メニュー
***************************************************************/
#menu-all {
width: 35%;
padding: 0;
margin: 0px 0px;
display: block;
float: left;
}



/***************************************************************
PC/モバイルの切り替えボタン
***************************************************************/
header {
	width: 100%;
	height: 54px;
	background-color: #111;
	padding: 0;
	margin: 0;
}

header div {
	width: 100%;
	margin: 0 auto;
}


h2 {
	float: left;
	padding: 15px 0px 0px 0px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	margin: 0px;
}

header nav {
	float: right;
	padding: 0;
	margin: 0;
}

header li {
	float: left;
	border-right: solid 1px #111;
	margin: 0px;
}

header li a {
	display: block;
	padding: 5px;
	margin: 0;
	width: 60px;
	color: #fff !important;
	text-decoration :none !important;
	text-align: center;
}

header li a:link,
header li a:visited {background-color: #444;}
header li a:hover,
header li a:active {background-color: #666;}
header,nav {
	margin: 0;
	padding: 0;
}

ul li {
	list-style-type: none;
	margin: 0;
}

/*---------------------------------------------
	Clearfix
  ---------------------------------------------*/

.clearfix:after {
	display: block;
	clear: both;
}

.clearfix {
	zoom: 1;
}

/*---------------------------------------------
画面幅にあわせてCSSを変更
  ---------------------------------------------*/
@media screen and (min-width: 721px) and (max-width: 960px) {

	header div {width: 700px;}
	#contents {width: 700px;overflow: hidden;}
	article {float: none;}
	aside {float: none;width: 700px;}
	footer {width: 700px;}

}

@media screen and (min-width: 481px) and (max-width: 730px) {

	header div {width: 460px;}
	#contents {width: 460px;overflow: hidden;}
	article {float: none; width: 500px;}
	aside {float: none;width: 460px;}
	footer {width: 460px; text-align: center;}

}

@media screen and (max-width: 480px) {

	header div {width: auto; padding: 0 20px;}
	#contents {width: auto; padding: 0 20px;}
	article {float: none; width: auto;}
	section {float: none; width: auto; margin-right: 0;}
	aside {float: none; width: auto; padding-top: 0px;}
	footer {width: auto; padding: 0 20px 20px; text-align: center;}

}

/***************************************************************
ドロップダウンメニュー 表示/非表示を調整
***************************************************************/
.slicknav_menu {
 display:none;
}
 
@media screen and (max-width: 900px) {
#menu {
 display:none;
}
 
.slicknav_menu {
 display: block;
width: 65%;
float: right;
}

}
/***************************************************************
ボタン
***************************************************************/
.btn01{ /* 茶 */
width: 70%;
text-align: center;
display: block;
padding: 8px;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 1px #666;
border-radius: 10px;
font-weight: bold;
background: #a6815d -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a6815d), to(#a6815d));
background: #a6815d linear-gradient(#a6815d, #a6815d);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
box-shadow: 0 1px 3px rgba(0,0,0,0.6);
border-bottom: 1px solid rgba(0,0,0,0.25);
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}

.btn02{ /* 赤 */
width: 100px;
text-align: center;
display: block;
padding: 2px;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 1px #666;
border-radius: 3px;
font-weight: bold;
background: #ff0000 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#aff0000), to(#ff0000));
background: #ff0000 linear-gradient(#ff0000, #ff0000);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
box-shadow: 0 1px 3px rgba(0,0,0,0.6);
border-bottom: 1px solid rgba(0,0,0,0.25);
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}


.btn03{/* グレー */
width: 80%;
text-align: center;
display: block;
padding: 8px;
margin: 10px;
color: #666;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
border-radius: 3px;
border-top: 1px solid #ccc;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 1px solid #ccc;
font-weight: bold;
-webkit-box-shadow: 1px 1px 2px #e7e7e7;
box-shadow: 1px 1px 2px #e7e7e7;
background: -webkit-gradient(linear, left top, left bottom, from(#fff),         color-stop(0.01, #f1f1f1),
color-stop(0.5, #f1f1f1),
color-stop(0.99, #dfdfdf),
to(#ccc));
background: linear-gradient(#fff, #f1f1f1 1% , #f1f1f1 50% , #dfdfdf 99%, #ccc);
margin-left: auto;
margin-right: auto;
}


/***************************************************************
内容エリア
***************************************************************/
.container {
background-color: rgba(255,255,255,0.8);
width: 100%;
color: #232323;
text-align: center;
padding: 20px 0px;
margin-right: auto;
margin-left: auto;
}




/***************************************************************
テーブル
***************************************************************/
/*----------------------------------------------------
2セルに対応　会社概要やフォーム
----------------------------------------------------*/
section table  { 
width: 100%; 
margin-left: auto;
margin-right: auto;
text-align: center;
}

section th, section td  { padding: 10px; border: 1px solid #ddd; background: #ffffff; text-align: left;}
section th  { background: #f4f4f4; }
 
/*----------------------------------------------------
    .demo01
----------------------------------------------------*/
.demo01 th  { width: 30%; text-align: left; vertical-align:middle;}

@media only screen and (max-width:480px){
    .demo01 { margin: 0 -10px; }
    .demo01 th,
    .demo01 td{
        vertical-align:middle;
        width: 96%;
        display: block;
        border-bottom: 1px solid #ddd;
        text-align: left;
    }
    .demo01 tr:first-child th   { border-top: 1px solid #ddd; }

}


/*----------------------------------------------------
    .demo04
----------------------------------------------------*/
.demo04 th  { width: 30%; text-align: left; }
 
@media only screen and (max-width:480px){
    .demo04 { margin: 0 3px; }
    .demo04 th,
    .demo04 td{
        width: 93%;
        display: block;
        border-top: none;
        text-align: left;
    }
    .demo01 tr:first-child th   { border-top: 1px solid #ddd; }
}



/*----------------------------------------------------
横に長い場合 overflow-x と inline-block を使用
----------------------------------------------------*/

 
/*----------------------------------------------------
    .demo02
----------------------------------------------------*/
.demo02 th  { width: 13%; }
.demo02 td  { text-align: center; }
.demo02 td:first-child  { text-align: left; }
@media only screen and (max-width: 800px) { 
    .demo02 { 
        display: block; 
        width: 100%; 
        margin: 0 -10px;
    }
    .demo02 thead{ 
        display: block; 
        float: left;
        overflow-x:scroll;
    }
    .demo02 tbody{ 
        display: block; 
        width: auto; 
        overflow-x: auto; 
        white-space: nowrap;
    }
    .demo02 th{ 
        display: block;
        width:auto;
    }
    .demo02 tbody tr{ 
        display: inline-block; 
        margin: 0 -3px;
    }
    .demo02 td{ 
        display: block;
    }
}

/*----------------------------------------------------
リスト風にした場合 list-item を使用
----------------------------------------------------*/

.demo03 th, .demo03 td  { text-align: left; width: 48%; }
@media only screen and (max-width: 480px) { 
    .demo03 { margin: 0 -10px; }
    .demo03 tr {
        display:block;
        margin-bottom: 0px;
    }
    .demo03 th {
        display:block;
        width: 100%;
    }
    .demo03 td {
        display: list-item;
        width: 90%;
        margin-left: 10%;
        border-top: none;
    }
}



 /***************************************************************
フォント
***************************************************************/
.px14-b { 
color: #232323;
font-size: 100%;
font-weight: bold;
}

.px14-pink {
color: #cb5472;
font-size: 100%;
}

.px14-brown {
color: #41250b;
font-size: 100%;
}

.px14-blue { 
font-weight: bold;
font-size: 100%;
color: #004ea2;
line-height:1.7em;
}
.px14-red {
color: #ff4378;
font-size: 100%;
}

.px14-or {
font-size: 100%;
color: #f28e12;
font-weight: bold;
}

.px16-pink { 
color: #cb5472;
font-size:114%;
}

.px16-blue {
color: #004ea2;
font-size: 114%;
}


.px18-blue {
color: #004ea2;
font-size: 128%;
}

.px18-pink { 
color: #cb5472;
font-size: 128%;
}

.px18-green {
color: #86c238;
font-size: 128%;
}

.px18-w {
color: #ffffff;
font-size: 128%;
}


.px21-or {
font-size: 150%;
color: #f28e12;
}

.px21-blue {
color: #004ea2;
font-size: 150%;
}

.px200 {
font-size: 200%;
color: #f28e12;
font-weight: bold;
}

.moji-blue { /*青注記の1文字下げ*/
color: #004ea2;
text-indent:-1em;
padding-left:1em;
}

.moji01 { /*注記の1文字下げ*/
padding-left:1em;
}

.moji1 { /*注記の1文字下げ*/
text-indent:-1em;
padding-left:1em;
}


.moji5 { /*注記の5文字下げ*/
padding-left:5em;
}

.space1 { 
padding: 0px 0px 1px 0px;
text-align: center;
clear: both;
}


.space10 { 
padding: 0px 0px 10px 0px;
text-align: center;
clear: both;
}

.space20 { 
padding: 10px 0px 10px 0px;
text-align: center;
clear: both;
}


.space30 { 
padding: 15px 0px 15px 0px;
text-align: center;
clear: both;
}


/***************************************************************
文字エリア　中央ぞろえ
***************************************************************/
.text-area {
width:90%;
text-align: left;
padding: 15px 10px 15px 10px;
clear: both;
margin-left: auto;
margin-right: auto;
}


/***************************************************************
フッタ
***************************************************************/
#footer {
background-color: #004ea2;
color: #ffffff;
width:100%;
font-size:80%;
line-height:1.5em;
text-align: center;
clear: both;
padding: 10px 0px 10px 0px;
margin-top:0px;
margin-right:auto;
margin-left:auto;
}




/***************************************************************
フォーム
***************************************************************/
/* 1.5倍に拡大表示 */
input[type="radio"],
input[type="checkbox"] {
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

input[type="email"],
input[type="tel"],
input[type="number"],
input[type="text"] {
   font-size: 150%;
}

textarea{font-size:150%;}
select{font-size:150%;}

/***************************************************************
リンク色
**************************************************************/
a.orange:link{ /*リンク集-オレンジx*/
font-weight: bold;
color: #f28e12;
line-height:1.8em;
text-decoration: none;
}

a.orange:visited{
font-weight: bold;
color: #f28e12;
}

a.orange:hover{
font-weight: bold;
color:#red;
}

a.orange:active{
font-weight: bold;
color: #f28e12;
}

a.brown:link{ /*リンク集-茶x*/
font-weight: bold;
color: #41250b;
line-height:1.8em;
text-decoration: none;
}

a.brown:visited{
font-weight: bold;
color: #41250b;
}

a.brown:hover{
font-weight: bold;
color:#red;
}

a.brown:active{
font-weight: bold;
color: #41250b;
}