@charset "utf-8";

/*-------------- 消去・編集不可 ---------------------------------------------

License: GNU General Public License
License URI: license.txt
Theme URI: https://templx.com/
Theme Name: template-x3h
Author: TEMPLX
Author URI: https://templx.com/
Description: レスポンシブウェブデザイン(Responsive Web Design)｜TEMPLX

 『こちらのテンプレートは編集、再販、譲渡を許可していますが
 購入後でも著作権は TEMPLX にあります。
 上記、著作権者やURL等の変更、消去を禁止します。』

--------------- 消去・編集不可 --------------------------------------------- */


/* 【content】 --------------- */

.subpage #wrap {
padding-bottom:50px;
}

#main {
width:840px;
float:right;
}

#main h1.title,
#main h2.title {
width:100%;
margin-bottom:50px;
text-align:center;
font-size:30px;
position:relative;
}

#main h1.title:before,
#main h2.title:before {
width:100%;
border-top:1px solid #4c4c4c;
position:absolute;
top:50%;
left:0;
content:"";
}

#main h1.title span,
#main h2.title span {
display:inline-block;
padding:0 20px;
background:#fff;
position:relative;
}

#main-single h1.title {
font-size:18px;
}

.content {
width:100%;
text-align:left;
float:left;
}

/************** category **************/

.archive-description {
width:100%;
margin-bottom:50px;
float:left;
}

#main-archive {
float:left;
}

#main-archive .content-in {
width:100%;
margin-bottom:50px;
padding-bottom:50px;
border-bottom:1px solid #4c4c4c;
float:left;
}

#main-archive h2.post-title {
width:100%;
margin-bottom:10px;
border-bottom:3px dotted #f0f0f0;
float:left;
}

.content-left {
width:30%;
float:left;
position:relative;
text-align:center;
overflow:hidden;
}

.content-right {
width:70%;
float:right;
}

.content-right-in {
width:96%;
float:right;
}

.archive-date {
width:100%;
padding-top:15px;
float:left;
}

.archive-cat {
width:50%;
text-align:left;
font-size:12px;
float:left;
}

.postdate {
width:50%;
text-align:right;
font-size:12px;
float:right;
}

.content-hover {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:5;
}

.content-hover a {
width:100%;
height:100%;
float:left;
box-sizing:border-box;
}

.content-hover a span {
width:50px;
height:50px;
background:url(images/icon4.png) no-repeat;
position:absolute;
top:0;
left:0;
}

.pagenavi {
width:100%;
padding-bottom:20px;
float:left;
}

.pagenavi .page-numb {
text-align:left;
}

.pagenavi span.current {
font-weight:bold;
}

.pagenavi .page-numbers {
height:22px;
margin-right:5px;
padding:4px 8px;
border:1px solid #f0f0f0;
text-align:center;
float:left;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}

.pagenavi .page-numbers:hover {
background:#fafafa;
border:1px solid #d3d3d3;
}

.pagenavi span.current {
background:#fafafa;
border:1px solid #4c4c4c;
}

.tag-nav {
width:100%;
margin-bottom:10px;
float:left;
}

.navidate {
margin-bottom:10px;
text-align:right;
float:right;
}

.posttags {
height:auto;
font-size:11px;
float:left;
}

.posttags p {
margin-right:5px;
margin-bottom:2px;
padding:0 5px;
border:1px solid #4c4c4c;
float:left;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
transition:0.6s;
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
-ms-transition:0.6s;
}

.posttags p span {
width:14px;
height:14px;
margin-top:4px;
background:url(images/icon3.png) no-repeat left center;
float:left;
}

.posttags a {
padding:2px 3px 2px 2px;
float:left;
}

/************** category **************/

/************** page single **************/

#main-page,
#main-single {
width:100%;
float:left;
}

#ps-content {
width:auto;
margin:0 auto;
padding-bottom:20px;
}

#ps-content p {
margin:13px 0;
}

#ps-content h1,
#ps-content h2,
#ps-content h3,
#ps-content h4,
#ps-content h5,
#ps-content h6,
#ps-content strong,
#ps-content em {
font-weight:bold;
}

#txsingle-thumbnail {
width:100%;
height:auto;
padding-bottom:10px;
text-align:center;
float:left;
}

#txsingle-thumbnail img {
width:auto;
height:auto;
max-width:100%;
}

#ps-content img.alignnone,
#ps-content img.alignleft,
#ps-content img.aligncenter,
#ps-content img.alignright {
width:auto;
height:auto;
max-width:100%;
}

.alignleft {
display:inline;
float:left;
}

.alignright {
display:inline;
float:right;
}

.aligncenter {
display:block;
margin-right:auto;
margin-left:auto;
}

blockquote.alignleft,
.wp-caption.alignleft,
img.alignleft {
margin:0.4em 1.6em 1.6em 0;
}

blockquote.alignright,
.wp-caption.alignright,
img.alignright {
margin:0.4em 0 1.6em 1.6em;
}

blockquote.aligncenter,
.wp-caption.aligncenter,
img.aligncenter {
clear:both;
margin-top:0.4em;
margin-bottom:1.6em;
}

.wp-caption.alignleft,
.wp-caption.alignright,
.wp-caption.aligncenter {
margin-bottom:1.2em;
}

#navidate-single {
width:100%;
margin-bottom:10px;
text-align:right;
float:left;
}

#posttags-single {
width:100%;
height:auto;
margin-bottom:15px;
font-size:11px;
float:left;
}

#posttags-single p {
margin-left:5px;
margin-bottom:2px;
padding:0 5px;
border:1px solid #4c4c4c;
float:right;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
transition:0.6s;
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
-ms-transition:0.6s;
}

#posttags-single p span {
width:14px;
height:14px;
margin-top:4px;
background:url(images/icon3.png) no-repeat left center;
float:left;
}

#posttags-single a {
padding:2px 3px 2px 2px;
float:left;
}

#navi-out {
width:100%;
margin:50px 0 150px;
text-align:center;
float:left;
}

#navinext {
width:50%;
text-align:left;
float:left;
}

#previous {
width:50%;
text-align:right;
float:right;
}

#navinext a,
#previous a {
width:92%;
padding:10px;
border:1px solid #4c4c4c;
text-align:left;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
box-sizing:border-box;
}

#navinext a {
float:left;
}

#previous a {
float:right;
}

#navinext a:hover,
#previous a:hover {
background:#f0f0f0;
border:1px solid #d3d3d3;
}

/************** page single **************/


.breadcrumbs {
width:100%;
height:auto;
margin-bottom:40px;
text-align:left;
float:left;
}

.breadcrumbs p {
float:left;
}

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


/* 【contact】 --------------- */

.contact-box {
width:100%;
margin:10px 0;
float:left;
}

.contact-box p.left {
width:28%;
height:50px;
line-height:50px;
padding:0 1%;
background:#f6f6f6;
float:left;
}

.contact-box p.left span {
height:20px;
line-height:20px;
margin-right:5px;
padding:0 5px;
background:#cc0000;
font-size:12px;
color:#fff;
float:left;
}

.contact-box p.right {
width:68%;
height:50px;
line-height:50px;
float:right;
}

#form-textarea {
height:180px;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="date"],
#contact-form input[type="number"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form select,
#contact-form textarea {
width:100%;
padding:10px 5px;
background:#f0f0f0;
border:1px solid #fff;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
box-sizing:border-box;
transition:0.6s;
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
-ms-transition:0.6s;
}

#contact-form input[type="text"]:hover,
#contact-form input[type="email"]:hover,
#contact-form input[type="date"]:hover,
#contact-form input[type="number"]:hover,
#contact-form input[type="tel"]:hover,
#contact-form input[type="url"]:hover,
#contact-form select:hover,
#contact-form textarea:hover {
background:#fafafa;
border:1px solid #d3d3d3;
}

#contact-form select {
width:60%;
}

#contact-form input[type="range"] {
padding:10px 5px;
background:none!important;
border:0!important;
}

#contact-form input:placeholder-shown {
color:#cdcdcd;
}

#contact-form input::-moz-input-placeholder {
color:#cdcdcd;
}

#contact-form input::-webkit-input-placeholder {
color:#cdcdcd;
}

#contact-form input:-ms-input-placeholder {
color:#cdcdcd;
}

.contact-but {
width:100%;
margin-top:20px;
text-align:right;
float:left;
}

.contact-form-but {
width:100%;
text-align:center;
float:left;
}

.contact-but button,
.contact-but input[type="button"],
.contact-form-but input[type="button"] {
width:230px;
margin-top:10px;
padding:10px 0;
background:#fff;
border:1px solid #4c4c4c;
font-size:16px;
font-weight:bold;
color:#b4b4b4;
cursor:pointer;
outline:none;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
transition:0.6s;
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
-ms-transition:0.6s;
}

.contact-but button:hover,
.contact-but input[type="button"]:hover,
.contact-form-but input[type="button"]:hover {
background:#4c4c4c;
border:1px solid #d3d3d3;
color:#fff;
}

.contact-but p.top {
width:100%;
margin-bottom:20px;
text-align:center;
float:left;
}

.contact-but p.left,
.contact-but p.right {
width:50%;
text-align:center;
float:left;
}

p.form-error {
margin:10px 0;
color:red;
}

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


/* 【company】 --------------- */

.company {
width:100%;
text-align:center;
float:left;
}

table.returned {
width:100%;
text-align:center;
border-collapse:collapse;
float:left;
}

table.returned-in {
width:100%;
margin:0 auto;
border-collapse:collapse;
}

table.returned-in tr,
table.returned-in td {
vertical-align:middle!important;
}

.returned td.returned-left {
width:32%;
height:80px;
padding:10px 0;
text-align:center;
border-bottom:1px solid #4c4c4c;
font-weight:bold;
}

.returned td.returned-right {
width:65%;
height:auto;
padding:10px 0 10px 3%;
border-bottom:1px solid #4c4c4c;
text-align:left;
}

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


/**************************************************
***************************************************
横幅1200px以下
***************************************************
**************************************************/

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

#wrap-sub-in,
#main {
width:100%;
}

.subpage #wrap {
padding:50px 0;
}

.contact-box p.left {
width:98%;
height:auto;
line-height:normal;
margin-bottom:5px;
padding:5px 1%;
}

.contact-box p.right {
width:100%;
height:auto;
margin-bottom:20px;
line-height:normal;
}

.contact-but p.left,
.contact-but p.right {
width:100%;
}

}

/**************************************************
***************************************************
800px以下の場合
***************************************************
**************************************************/

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

#wrap-sub {
padding:40px 0 20px;
}

.txcategory-thumbnail img,
.txcategory-noimage img {
width:100%;
height:auto;
}

.archive-cat,
.postdate {
width:100%;
}

}