/*
Theme Name: Java cord
Description:Java cord 入門
Theme URI: java-code.jp
Author: Ryo Sakuma
Author URI: java-code.jp
Version: 1.0
*/


/* ----------------------------------------------------------------------------
RESET
---------------------------------------------------------------------------- */

html, body {
font-family:"メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, sans-serif;
margin:0;
padding:0;
width:100%;
height:100%;
}

a img, img { 
border:0;
padding:0;
margin:0;
vertical-align:top;
}

p {
text-align:justify;
text-justify:inter-ideograph;
}

blockquote, dd, div, dl, dt, h1, h2, h3, h4, h5, h6, li, ol, p, pre, span, td, th, ul {
margin:0;
padding:0;
}

address, caption, cite, code, dfn, em, th, strong, var {
font-style:normal;
font-weight:normal;
}

h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
display:inline;
}

ol, ul {
list-style:none;
}

q:before, q:after {
content:'';
}

table {
border-collapse:collapse;
border-spacing:0;
font-size:100%;
}



/* ----------------------------------------------------------------------------
COMMON
---------------------------------------------------------------------------- */
html, body {
-webkit-text-size-adjust: 100%;
}

body {
background:#fafafa;
font-size:12px;
line-height:22px;
color:#221815;
}

#header {
background:#ffffff;
width:100%;
border-top:solid 3px #000000;
}

#headerIn {
max-width:1100px;
height:136px;
margin:0 auto;
position:relative;
}

#headerIn h1 {
display:inline-block;
font-size:10px;
color:#a6a6a6;
margin:24px 0 0 295px;
}

#headerIn h2 {
display:inline-block;
position:absolute;
top:21px;
left:0;
}

#headerIn ul {
position:absolute;
top:72px;
left:295px;
height:48px;
overflow:hidden;
}

#headerIn li {
height:45px;
float:left;
overflow:hidden;
display:block;
}

#headerIn #gmenu01 {
width:150px;
margin:0 40px 0 0;
}

#headerIn #gmenu02 {
width:150px;
}

#headerIn li a {
height:45px;
display:block;
}

#headerIn li:hover {
border-bottom:solid 3px #000000;
}

#header #headerSocial  {
position:absolute;
top:27px;
right:0;
overflow:hidden;
width:400px;
}

#headerSocial #headerSocial_fb {
width:100px;
float:right;
}

#headerSocial #headerSocial_tw {
width:75px;
float:right;
}

#headerSocial #headerSocial_gg {
width:70px;
float:right;
}

#headerSocial #headerSocial_ht {
width:115px;
float:right;
}

#search {
background:#522966;
width:100%;
height:50px;
z-index:9999;
}

#searchIn {
background:url(images/common/bg01.gif) no-repeat left 8px;
width:470px;
height:34px;
margin:0 auto;
padding:8px 0 0 40px;
overflow:hidden;
}

#searchIn #searchForm {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
background:#ffffff;
border:none;
float:left;
width:390px;
height:34px;
padding:0 10px;
color:#221815;
vertical-align:middle;
outline:none;
border-radius:0;
-webkit-border-radius: 0;
}

#searchIn #searchBtn {
float:left;
outline:none;
width:60px;
border-radius:0;
-webkit-border-radius: 0;
}

#content {
max-width:1100px;
overflow:hidden;
margin:40px auto 0;
}

#cleft {
width:200px;
float:left;
margin:0 40px 0 0;
}

#cleft ul {
border-bottom:solid 1px #e0e0e0;
width:200px;
overflow:hidden;
}

#cleft li {
border-top:solid 1px #e0e0e0;
width:200px;
height:30px;
line-height:32px;
display:block;
overflow:hidden;
}

#cleft li a {
background:url(images/common/icon01.gif) no-repeat 187px 13px;
width:180px;
display:block;
color:#221815;
text-decoration:none;
padding:0 10px;
}

#cleft li a:hover {
background:#f0f0f0 url(images/common/icon01.gif) no-repeat 187px 13px;
}

#cleft .cleft01 a {
background:#000000 url(images/common/icon02.gif) no-repeat 187px 13px;
width:180px;
display:block;
color:#ffffff;
text-decoration:none;
padding:0 10px;
}

#cleft .cleft01 a:hover {
background:#383838 url(images/common/icon02.gif) no-repeat 187px 13px;
}

#cleft .cleft02 a {
background:#ebebeb;
width:180px;
display:block;
color:#221815;
text-decoration:none;
padding:0 10px;
text-align:right;
}

#cleft .cleft02 a:hover {
background:#e0e0e0;
}

#ccenter {
width:auto;
overflow:hidden;
}

#ccenter dl {
border-bottom:solid 1px #e0e0e0;
}

#ccenter dt {
width:auto;
height:31px;
line-height:32px;
overflow:hidden;
}

#ccenter dd {
border-top:solid 1px #e0e0e0;
width:auto;
height:30px;
line-height:32px;
overflow:hidden;
}

#ccenter dt a {
background:#000000 url(images/common/icon06.gif) no-repeat right 13px;
color:#ffffff;
display:block;
text-decoration:none;
padding:0 10px 0 20px;
width:auto;
height:31px;
}

#ccenter dt a:hover {
background:#383838 url(images/common/icon06.gif) no-repeat right 13px;
}

#ccenter dd a {
background:url(images/common/icon07.gif) no-repeat right 13px;
display:block;
text-decoration:none;
padding:0 10px 0 20px;
width:auto;
height:30px;
color:#221815;
}

#ccenter dd a:hover {
background:#f0f0f0 url(images/common/icon07.gif) no-repeat right 13px;
}

#cright {
width:160px;
float:right;
margin:0 0 0 40px;
}

#cright p {
margin:0 0 20px;
}

#footer {
width:100%;
margin:50px 0 0;
display:block;
}

#pagetop p {
width:100%;
height:40px;
position:relative;
}

#pagetop img {
position:absolute;
left:50%;
margin:0 0 0 -41px;
}

#pagetop a {
background:#e0e0e0;
width:100%;
height:40px;
display:block;
}

#pagetop a:hover {
background:#c7c7c7;
}

#footerbottom {
background:#000000;
width:100%;
height:120px;
}

#footerbottomIn {
max-width:1100px;
height:120px;
margin:0 auto;
position:relative;
}

#footerbottomIn em {
position:absolute;
top:38px;
left:0;
}

#footerbottomIn ul {
position:absolute;
right:0;
top:50px;
}

#footerbottomIn li {
float:right;
margin:0 0 0 30px;
}

#footerbottomIn li a {
color:#ffffff;
text-decoration:none;
}

#footerbottomIn li a:hover {
color:#b3b3b3;
}

#footerbottomIn p {
font-family:Arial, Helvetica, sans-serif;
position:absolute;
right:0;
bottom:10px;
color:#666666;
font-size:8px;
}

#path {
background:#e0e0e0;
width:100%;
height:30px;
}

#path ul {
max-width:1100px;
margin:0 auto;
}

#path li {
color:#999999;
display:inline;
line-height:30px;
}

#path li a {
background:url(images/common/bg02.gif) no-repeat right top;
color:#522966;
text-decoration:none;
padding:0 25px 0 0;
margin:0 7px 0 0;
height:30px;
display:inline-block;
}

#path li a:hover {
color:#7f4c99;
}

#ccenterContents {
margin:0 0 60px;
word-break:break-all;
word-wrap:break-word;
overflow:hidden;
}

#ccenterContents h3 {
font-family:Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
border-top:solid 3px #000000;
border-bottom:solid 1px #e0e0e0;
font-size:35px;
line-height:42px;
width:auto;
display:block;
padding:26px 0 20px;
font-weight:bold;
}

#ccenterContents p {
width:auto;
font-size:14px;
line-height:26px;
margin:20px 0 0;
}

#ccenterContents span {
font-weight:bold;
color:#b30077;
}

#ccenterContents span.small {
font-weight:normal;
font-size:11px;
color:#221815 !important;
}

#ccenterContents .pre {
margin:20px 0 0;
}

.ccenterContents01 {
background:#522966;
width:auto;
display:block;
color:#ffffff;
font-size:15px;
line-height:16px;
padding:10px 20px 8px;
font-weight:bold;
}

.ccenterContents02 {
background:#e0e0e0;
width:auto;
display:block;
color:#663380;
font-size:14px;
line-height:16px;
padding:10px 20px 8px;
font-weight:bold;
margin:60px 0 0;
}

.ccenterContents03 {
margin:60px 0 0;
display:block;
}

.ccenterContents04 {
margin:20px 0 0;
font-size:12px;
line-height:26px;
}

.ccenterContents04 span {
background:#8c468c;
font-size:14px;
color:#ffffff !important;
padding:0 10px;
}

.ccenterContents04 span.ccenterContents04_01 {
background:none;
border:none;
padding:0;
color:#221815 !important;
font-size:12px;
}

#ccenterContents .ccenterContents05 {
margin:5px 0 0;
font-size:11px;
}

#ccenterContents table {
background:#ffffff;
border:solid 1px #e0e0e0;
width:100%;
margin:20px 0 0;
font-size:14px;
table-layout:fixed;
}

#ccenterContents table th {
border:solid 1px #e0e0e0;
color:#663380;
font-weight:bold;
text-align:left;
padding:1px 0 1px 10px;
}

#ccenterContents table th.tableTitle {
background:#e0e0e0;
border:solid 1px #e0e0e0;
color:#221815;
font-weight:bold;
text-align:center;
padding:4px 0;
}

#ccenterContents table th.tableTitle span {
font-size:10px;
font-weight:normal;
color:#221815 !important;
}

#ccenterContents table td {
border:solid 1px #e0e0e0;
padding:1px 0 1px 10px;
}

#ccenterContents table .aligncenter {
text-align:center !important;
padding:1px 0 1px 0 !important;
}

#ccenterContents a {
background:url(images/common/icon03.gif) no-repeat left top;
padding:0 0 0 70px;
text-decoration:underline;
color:#d92b74;
min-height:21px;
line-height:21px;
display:block;
}

#ccenterContents a:hover {
background:#ffccd0 url(images/common/icon03.gif) no-repeat left top;
}

#ccenter dt#searchResult {
background:#000000;
color:#ffffff;
display:block;
text-decoration:none;
padding:0 10px 0 20px;
width:auto;
height:31px;
line-height:32px;
overflow:hidden;
font-size:14px;
}

#ccenter dt.categoryTitle {
background:#000000;
color:#ffffff;
display:block;
text-decoration:none;
padding:0 10px 0 20px;
width:auto;
height:31px;
line-height:32px;
overflow:hidden;
font-size:12px;
}

#ccenterContents p.ccenterPoint {
background:#daedf2;
width:auto;
font-size:14px;
line-height:26px;
margin:0;
padding:14px 20px 12px;
}

#ccenterContents p.ccenterAttention {
background:#faefcd;
width:auto;
font-size:14px;
line-height:26px;
margin:0;
padding:14px 20px 12px;
}

.point {
background:#00a2d3;
width:auto;
height:32px;
margin:50px 0 0;
display:block;
}

.attention {
background:#ffc619;
width:auto;
height:32px;
margin:50px 0 0;
display:block;
}

#ccenterContents .arrow01 {
width:29px;
margin:0 auto;
}

#ccenterContents .arrow02 {
width:19px;
margin:0 auto;
}

#spBanner {
display:none;
padding:0 10px;
}

#spBanner p {
margin:20px 0 0;
}



.ma00 { margin-top:0 !important; }
.ma50 { margin-top:50px !important; }
.mab00 { margin-bottom:0 !important; }

/* ----------------------------------------------------------------------------
2016/10/23
---------------------------------------------------------------------------- */
.list {
    color:#666;
}

#ccenterContents strong {
    font-weight:bold;
}

#ccenterContents dl.comand_frame {
    background:#e0e0e0;
    margin:10px 0;
}

#ccenterContents dt.comand_txt {
    background: #111；
    display: block;
    font-size: 16px;
    height: 34px;
    line-height: 38px;
    overflow: hidden;
    padding: 0 10px 0 20px;
    width: auto;
    font-weight:bold;
    border:none;
}

#ccenterContents dd.comand_exp {
    height: 24px;
    line-height: 21px;
    overflow: hidden;
    padding: 0 10px 0 40px;
    width: auto;
    border:none;
}

.note {
    background: #74B757 none repeat scroll 0 0;
    display: block;
    height: 32px;
    margin: 50px 0 0;
    width: auto;
}

#ccenterContents p.ccenterNote {
    background: #dff9cf none repeat scroll 0 0;
    font-size: 14px;
    line-height: 26px;
    margin: 0;
    padding: 14px 20px 12px;
    width: auto;
}


@media screen and (max-width:1100px) {
#headerIn h2 { left:20px; }
#headerSocial { right:20px; }
#footerbottomIn em { left:20px; }
#footerbottomIn ul { right:20px; }
#footerbottomIn p { right:20px; }
#path ul { padding:0 0 0 20px; }
}

@media screen and (max-width:900px) {
#cleft { display:none; }
#headerIn h1 { display:none; }
#ccenterContents h3 { padding:26px 0 20px 20px; }
#ccenterContents p { padding:0 0 0 20px; }
}

@media screen and (max-width:640px) {
#content { margin:20px auto 0; }
#cright { display:none; }
#headerIn ul { display:none; }
#headerSocial {display:none; }
#headerIn { height:110px; }
#headerIn h2 img { width:150px; height:auto; }
#ccenterContents p { padding:0 20px; }
#path { font-size:9px; overflow:hidden; }
#path li a { font-size:9px; }
#searchIn { width:268px; }
#searchIn #searchForm { width:188px; }
#spBanner { display:block; }
#footer { margin:20px 0 0; }
#headerIn h2 { display:inline-block; position:absolute; top:15px; left:50%; margin:0 0 0 -75px; }
#ccenterContents h3 { font-size:25px; line-height:30px; padding:18px 20px 15px 20px; }
#footerbottomIn em { position:absolute; top:65px; left:50%; margin:0 0 0 -99px; }
#footerbottomIn ul { position:static; text-align:center; padding:15px 0 0; display:flex; flex-wrap: wrap-reverse; justify-content: center;}
#footerbottomIn li { display:inline; float:none; margin:0 10px 0 0; width: 30%; }
#footerbottomIn p {  position:static; text-align:center; padding:82px 0 0; }
}