@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
body {
  background-image: linear-gradient(to left,#bb192d 50%,#231815 50%);
	background-size: 20px;
	background-repeat: repeat;
}

p {
  padding: 0 1em;
}

#header-container {
	margin-top: 10px;
}

#container {
	background: #fff;
}

#navi .navi-in a:hover {
	background-color: #231815;
}

#content h1 {
	padding: 10px;
	border-left: 5px solid #b51423;
	border-bottom: 1px solid #b51423;
}

.article h2 {
	padding: 15px;
  margin-top: 40px;
}
.article h3,
.article h4,
.article h5,
.article h6 {
  margin-top: 40px;
}

table tr:nth-of-type(2n+1),
.page-numbers.dots,
.a-wrap:hover,
.pagination a:hover,
.pagination-next-link:hover,
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.pager-links a:hover span,
.tag-link:hover,
.tagcloud a:hover{
	background-color: rgba(210, 210, 210, 0.2);
}

.btn-m, .btn-wrap.btn-wrap-m > a {
  padding: 14px 30px;
}

/* ウィジェット */
.widget-sidebar ul li {
  border-bottom: 1px dotted;
}
.widget-sidebar ul li:last-of-type {
  border-bottom: none;
}
.widget_cta_box {
  text-align: center;
}
.main-widget-label {
  font-size: 1.17em;
  font-weight: bold;
  color: #fff;
  background: #bb192d;
  padding: 16px 10px;
  margin: 30px 0 16px;
}
@media only screen and (max-width: 780px) {
  .twitter-wrap{
    overflow: hidden;
  }
  .twitter-wrap iframe{
    /* 20pxの部分は埋め込んだタイムラインの左右に必要な余白の総計を記載 */
    width: calc(100vw - 20px)!important;
  }
}

/* ナビゲーション */
.navi-in > ul .sub-menu {
  min-width: auto;
  width: 100%;ß
}

/* 送信ボタン */
input[type='submit'], #bbp_reply_submit, .bp-login-widget-register-link a {
  display: block;
  width: 200px;
  margin: 0 auto;
}

/* 固定ページSNS・日付・投稿者非表示 */
.page .sns-share,
.page .sns-follow,
.page .date-tags,
.author-info{
    display: none;
}

/* 制作実績の関連記事非表示 */
.single-work .related-entries {
  display: none;
}

/* スマホナビゲーション */
.mobile-menu-buttons {
	background-color: #231819;
}
.mobile-menu-buttons .menu-button:nth-child(odd){
	background-color: #B51423;
	color: #fff;
}

.menu-close-button::before {
	color: #444;
}

.mobile-menu-buttons .menu-button > a {
	color: #fff;
}

.mobile-menu-buttons .menu-button:hover {
	background: none;
}

.nwa .author-box {
	color: #444;
	font-size: 0.8em;
}

#navi-menu-content ul.menu-drawer {
  padding-left: 20px;
  padding-right: 20px;
}
ul.menu-drawer > li {
  border-bottom: 1px solid #aaa;
}

/************************************
** Contact Form7用
************************************/
#wrap_contact table{
width: 100%;
border-collapse: collapse;
border: solid #CCC;
border-width: 1px;
}
#wrap_contact table tr th,
#wrap_contact table tr td{
padding: 0.5em;
text-align: left;
vertical-align: top;
border: solid #CCC;
border-width: 1px;
}
#wrap_contact table tr th{
width: 35%;
background: #eee;
}
#wrap_contact input[type="text"],
#wrap_contact input[type="email"],
#wrap_contact textarea{
padding: 0.7em;
width: 100%;
font-size:16px;
border:1px solid #CCC;
}
.wpcf7-form-mode-edit #wrap_contact input[type="button"].button-confirm,
.wpcf7-form-mode-confirm #wrap_contact input[type="submit"] {
    background: #ee5656;
    height: 60px;
    font-size: 20px;
    letter-spacing: 0.1em;
    width: 300px;
    display: inline;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    border: 0;
    border-radius: 5px;
}
.wpcf7-form-mode-confirm #wrap_contact input[type="button"].button-rewrite {
    background: #666666;
    height: 60px;
    font-size: 20px;
    letter-spacing: 0.1em;
    width: 300px;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    border: 0;
    border-radius: 5px;
}
#wrap_contact table th span{
color: #fff;
background: #DC0003;
padding: 3px 3px;
font-size: 11px;
margin-left: 10px;
border-radius: 3px;
letter-spacing: 0.2em;
}
.wpcf7-form-mode-confirm #wrap_contact table th span,
.wpcf7-form-mode-confirm #wrap_contact .txt_edit,
.wpcf7-form-mode-confirm #wrap_contact .txt_sent{
  display:none;
}
.wpcf7-form-mode-edit #wrap_contact .txt_confirm,
.wpcf7-form-mode-edit #wrap_contact .txt_sent{
  display:none;
}
.sent #wrap_contact .txt_confirm,
.sent #wrap_contact .txt_edit,
.sent #wrap_contact table,
.sent #wrap_contact h2,
.sent #wrap_contact .buttons-area{
  display:none !important;
}
.sent #wrap_contact .txt_sent{
  display:block;
}
div.wpcf7-mail-sent-ok {
    display: none !important;
    padding:0;
    margin:0;
}
@media screen and (max-width:768px){
#wrap_contact{
width: 100%;
}
#wrap_contact table,
#wrap_contact table tbody,
#wrap_contact table tr,
#wrap_contact table tr th,
#wrap_contact table tr td{
display: block;
}
#wrap_contact table{
width: 100%;
border-width: 0 0 1px 0;
}
#wrap_contact table tr th,
#wrap_contact table tr td{
width: 100%;
padding: 3% 5%;
}
#wrap_contact table tr td{
border-width: 0px 1px 0px 1px;
}
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
  #header-container {
    box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
  }
  #header-container .logo-image {
    padding-bottom: 0;
  }
}
/*768px以上*/
@media screen and (min-width: 768px){
  input[type='submit'], #bbp_reply_submit, .bp-login-widget-register-link a {
    font-size: 20px;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}