/*
Theme Name: 1024px
Theme URI: http://andreasviklund.com/wordpress-themes/
Description: A light and extremely simple theme with 2 columns. It is based on Andreas' <a href="http://andreasviklund.com/templates/1024px/">1024px CSS template</a>. Updated to support tags, category descriptions, gravatars and more. Validates as XHTML 1.0 Strict. Public domain.
Version: 2.7
Author: Andreas Viklund
Author URI: http://andreasviklund.com/
Tags: fixed width, two columns, white, blue, widgets, 1024px, andreas, valid CSS, valid XHTML
*/

/* Body */
body {
 background:#ccc;
 color:#333;
 font-size: 95%;
 font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3",Arial,"Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
 line-height:1.5em;
 padding: 0;
}

*{margin:0; padding:0;}

/* Main wrap */
#wrap {
 background: #fff;
 margin: 0 auto;
 padding: 0;
 width: 980px;
}

/* Common */

p{
 padding: 5px 0;
}

a{
 color: #c9171e;
 text-decoration: none;
}

a:hover{
 background: #c9171e;
 color: #fff;
 font-weight: bold;
 padding: 2px 8px;
 border-radius: 10px; /* CSS3草案 */
 -webkit-border-radius: 10px; /* Safari,Google Chrome用 */
 -moz-border-radius: 10px; /* Firefox用 */ 
}

.index_inner .works_list li a.no_deco:hover,
.home .slides .flex-prev a:hover, 
.home .slides .flex-next a:hover{
 background: none;
 color: none;
 padding: 0;
 font-weight: normal;
 text-decoration: none;
}

.hidden{
 display: none;
}

h2{
 margin: 30px 0 20px 0;
}

h2#title_topics{
 margin: 0 0 0 25px;
 padding: 30px 0 20px 0;
 border-bottom: 1px solid #ddd;
}

.archive h2{
 box-shadow:1px 1px 3px 0px  #999 ;
}

h3{
 margin-left: -20px;
}

.clear{
 clear: both;
}

.small a,
.small{
 font-size: 90%;
}

.x-small{
 font-size: 75%;
}

.large{
 font-size: 110%;
}

.x-large{
 font-size: 125%;
}

table{
}

th, td{
 padding: 10px 20px;
 border-bottom: 1px solid #ccc;
}

.half_left{
 float: left;
 width: 45%;
}

.half_right{
 float: right;
 width: 45%;
}

dt{
 font-weight: bold;
 font-size: 105%;
 margin-bottom: 5px;
 border-bottom: 1px solid #ccc;
}

.align_center{
 text-align: center;
}

.align_right{
 text-align: right;
}

.align_left{
 text-align: left;
}

ul{
 list-style-type: none;
}

.contenttext2 ul,
.topics_area .contenttext ul{
 list-style-type: disc;
 margin: 15px 0;
 padding-left: 20px;
}

li{
 line-height: 1.7em;
}

.contenttext2 h3{
 margin: 10px 0 10px -35px;
 padding: 0 10px 0 35px;
 background: #eee;
 font-weight: bold;
 line-height: 1.8em;
 border-radius: 10px; /* CSS3草案 */
 -webkit-border-radius: 10px; /* Safari,Google Chrome用 */
 -moz-border-radius: 10px; /* Firefox用 */ 
}

.float_right{
 float: right;
}

.float_right img{
 margin-left: 15px;
}

.float_left{
 float: left;
}

.float_left img{
 margin-right: 15px;
}

img{
 margin: 5px 0;
}

/* Headers */
#header{
 padding: 10px 15px;
 position: relative;
 border-bottom: 1px solid #eee;
 line-height: 2.5em;
}

h1 a:hover{
 background: none;
 color: #c9171e;
 padding: 0;
}

h1 a:hover:after{
 content: "!"
}

#header_menu{
 position: absolute;
 right: 10px;
 top: 10px;
 text-align: right;
 font-size: 80%;
}

#header_menu li{
 display: inline;
 margin-left: 10px;
}

/* Sidebar */


/* Content */
#content{
 padding: 25px 0;
}

#news_area{
 padding: 5px 25px 25px 25px;
 background: #eeeaec;
 margin-top: -25px;
}

.topics_area{
 position: relative;
 margin: 0;
 padding: 0;
}

#topics_thumb{
 position: absolute;
 left: 30px;
 top: 6px;
 z-index: 10;
 width: 80px;
 height: 80px;
 overflow: hidden;
}

#topics_thumb img{
 width: auto;
 height: 80px;
}

#topics_thumb p{
 margin: 0;
 padding: 0;
}

.topics_inner{
 margin: 0;
 padding: 15px 20px 15px 125px;
 border-bottom: 1px solid #ddd;
 cursor: pointer;
}

.topics_inner h3{
 font-size: 1.8em;
 line-height: 1.8em;
 margin-left: 0;
}

.topics_inner span.topics_subtitle{
 font-size: 1.2em;
 padding: 0 .8em;
}

.topics_area .contenttext h3{
 margin: 10px 0 10px -10px;
 padding: 0 10px;
 background: #eee;
 font-weight: bold;
 line-height: 1.8em;
 border-radius: 10px; /* CSS3草案 */
 -webkit-border-radius: 10px; /* Safari,Google Chrome用 */
 -moz-border-radius: 10px; /* Firefox用 */ 
}

#main_image p, #main_image img{
 margin: 0;
 padding: 0;
}



#link_topics{
 text-align: right;
 margin-right: 10px;
}

.contenttext2{
 padding: 25px;
}

.contenttext2 h2{
 background: #ccc;
 line-height: 1.8em;
 padding: 5px 10px;
}

body.page #content{
 padding: 25px 0;
}

.topics_area .contenttext{
 border-bottom: 1px dotted #ddd;
}

.a_close{
 cursor: pointer;
 text-align: center;
}

.a_close a{
 display: block;
 width: 100%;
}

.a_close a:hover{
 padding: 0;
 font-weight: normal;
 text-decoration: none;
 }

#menu_area{
 margin-left: -14px;
}

#menu_area li{
 float: left;
 width: 200px;
 margin: 0 15px 0 14px;
 border: 1px solid #666;
 text-align: center;
 position: relative;
 backgroud: #fff;;
}

#menu_area h3, #menu_text h3{
 margin-bottom: 15px;
}

#menu_area p{
 text-align:left;
}

.index_inner{
 padding: 15px 25px;
}

#menu_text{
 width: 930px;
 height: auto;
 padding: 0;
 overflow: hidden;
}

#menu_text li{
 width: 843px;
 height: auto;
 padding: 25px;
 border:1px solid #666;
 margin-top: 25px;
}


.index_inner .works_list li{
 position: relative;
 float: left;
 width: 300px;
 padding-bottom: 10px;
 margin: 10px 5px 5px 0;
 border-bottom: 1px dotted #ccc;
}

.index_inner .works_list li img{
 margin: 0;
}

#menu_area div.menu_inner{
  position: relative;
  padding:25px 15px;
  background-color:#fff;
  z-index:11;
}

#menu_area p.menu_arrow{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 35px;
  overflow: hidden;
  text-align: center;
  z-index:10;
}

#menu_area p.menu_arrow span{
  display: inline-block;
  width: 35px;
  height: 35px;
  background: #999;
  font-size: 1.5em;
  line-height: 35px;
  color: #fff;
 }

#menu_area li{
 cursor: pointer;
}

#menu_area h3,
#menu_text h3{
 border-bottom: 5px solid #ccc;
 line-height: 1.8em;
 margin-left: 0;
}

#menu_area li#menu_hp h3,
#menu_text #menu_hp h3{
 border-color: #2ca9e1;
}

#menu_area li#menu_hp p.menu_arrow span{
 background: #2ca9e1;
}

#menu_area li#menu_biz h3,
#menu_text #menu_biz h3{
 border-color: #b8d200;
}

#menu_area li#menu_biz p.menu_arrow span{
 background: #b8d200;
}

#menu_area li#menu_pc h3,
#menu_text #menu_pc h3{
 border-color: #ee7800;
}

#menu_area li#menu_pc p.menu_arrow span{
 background: #ee7800;
}

#menu_area li#menu_sys h3,
#menu_text #menu_sys h3{
 border-color: #f09199;
}

#menu_area li#menu_sys p.menu_arrow span{
 background: #f09199;
}

#menu_text .menu_icon{
 float: right;
 width: 150px;
 margin: 0 -30px 0 25px;
 padding: 5px 0 0 0;
 text-align: center;
}

#iconarea_file{
 background: #f09199;
}

.archive #h2_pagetop{
 margin: 0 20px;
}

.archive #h2_pagetop {
    position: relative;
    color: #222 ;
    background: #f5f5f5;
    font-size: 15pt ;
    line-height: 1;
    margin: 20px -10px 20px -10px;
    padding: 10px 5px 10px 25px;
    box-shadow:1px 1px 3px 0px  #999 ;
    border-top:3px solid #c9171e;
}
.archive #h2_pagetop:after, .archive #h2_pagetop:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #333;
}
.archive #h2_pagetop:after {
    left: 0;
    border-right: 5px solid #333;
}
.archive #h2_pagetop:before {
    right: 0;
    border-left: 5px solid #333;
}


/* Footer */

#footer{
 text-align: center;
}



/* Accordion */

.label {
  margin: 1em 0;
  font-size: 1em;
}

.label span {
  font-size: 80%;
}

#content .topics_inner{
  position: relative;
  height: auto;
  margin: 0 auto;
  box-sizing: border-box;
}

.accordion {
  background: #eee;
}

.accordion input {
  display: none;
}

.accordion label {
  cursor: pointer;
}

.accordion .section {
  height: 110px;
  color: #222;
  transition-property: height, background;
  transition-duration: .6s, .6s;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1), ease;
  box-sizing: border-box;
}

.accordion label #section1 {
  border-top: 0;
}
.accordion label #section2 {
}
.accordion label #section3 {
}
.accordion label #section4 {
}
.accordion label #section5 {
  border-bottom: 0;
}

.accordion .section h3 {
  margin: 0;
  padding: .5em;
  font-size: 1.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

.accordion .section .inner {
  padding: .5em 30px 1em;
  opacity: 0;
  transition: opacity 1s;
}

.accordion .section .inner p {
  margin: 0;
  font-size: .9em;
  line-height: 1.6;
}

.accordion #section1:hover {
  background-color: #ccc;
}
.accordion #section2:hover {
  background-color: #ccc;
}
.accordion #section3:hover {
  background-color: #ccc;
}
.accordion #section4:hover {
  background-color: #ccc;
}
.accordion #section5:hover {
  background-color: #ccc;
}

.accordion input:checked + .section {
  height:auto;
}

.accordion input:checked + .section .inner {
  opacity: 1;
  transition-delay: .4s;
}

/* IE8はロールオーバーで開くようにしてます:) */

.ie8 .accordion .section h2 {
  padding: 1em 30px .5em;
}

.ie8 .accordion .section:hover {
  height: 390px;
}

.ie8 .accordion .section .inner {
  filter: alpha(opacity=0);
}

.ie8 .accordion .section:hover .inner {
  filter: alpha(opacity=100);
}


#pr_homepage dt{
 font-size: 1.3em;
 font-weight: bold;
 margin: 0 0 10px 0;
 line-height: 1.5em;
 border-bottom: 1px dotted #666;
}

#pr_homepage dd{
 margin: 0 0 25px ;
}

.home .contenttext{
 padding: 15px 55px;
}

#content .topics-web .topics_inner{
 border-left: 10px solid #2ca9e1;
}

#content .topics-study .topics_inner{
 border-left: 10px solid #b8d200;
}

#content .topics-system .topics_inner{
 border-left: 10px solid #ee7800;
}

#content .topics-etc .topics_inner{
 border-left: 10px solid #f09199;
}

input.wpcf7-submit{
 border: 1px solid #c9171e;
 background: transparent;
 cursor: pointer;
 font-size: 1em;
 padding: 5px 25px;
}

input.wpcf7-submit:hover{
 background: #c9171e;
 color: #fff;
}

input.wpcf7-text, textarea.wpcf7-textarea{
 border: 1px solid #c9171e;
 padding: 5px;
}

#form_contact dt{
 border: none;
 font-weight: normal;
}

#form_contact dd{
 margin-bottom: 10px;
}

.sub_text{
 background: #fff4f9;
 padding: 5px 10px;
}

.wp-caption-text{
 background: rgba( 0, 0, 0, 0.6 );
 color: #fff;
 padding: 2px 4px;
 font-size: 9.5pt;
 width: 292px;
 margin-top: -10px;
}

.archive h2 a{
 color: #333;
}

.archive h2 a:hover{
 background: none;
color: #c9171e;
}