@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.mlt {color:#fff;width: 260px;
	height: 38px;
	margin-left: auto;
  }
.mlt a{color:#fff!important;}
.gr {color:#3fd58b; font-weight:bold;}
.rd {color:#ff3333; font-weight:bold;}
.lbl {color:#2cbdec; font-weight:bold;}
.widget-sidebar a:hover {
    color: #2c8dec;
}
.su-post-meta {display:none;}
.su-post-title a {text-decoration: none;}

.article-footer, .entry-footer {
  background: none;
}
.pager-post-navi {
  background: none;
}

.bb-red {border:1px solid #ccc!important;}

h1{
 text-align: left;
 background-color: #fff; /* 背景色 */
 color: #000; /* 文字色 */
 overflow: hidden;
 padding: 20px; /* 余白 */
 position: relative;
}
h1:before{
 background-color: #a1a1a1; /* 大きな円の色 */
 border-radius: 50%;
 content: '';
 display: block;
 opacity: 0.2; /* 大きな円の不透明度 */
 position: absolute;
 top: -25px;
 left: 0px;
 width: 120px; /* 大きな円の幅 */
 height:120px; /* 大きな円の高さ */
}
h1:after{
 background-color: #4080dd; /* 小さな円の色 */
 border-radius: 50%;
 content: '';
 display: block;
 opacity: 0.3; /* 小さな円の不透明度 */
 position: absolute;
 bottom: -38px;
 left: 90px;
 width: 60px; /* 小さな円の幅 */
 height: 60px; /* 小さな円の高さ */
}

.article h2 {
  border-bottom: solid 3px #6c6c6c;
  position: relative;
  padding-left:0.4em;
}

.article h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #00c1bc;
  bottom: -3px;
  width: 30%;
}

.article h3 {
  border-bottom: solid 3px #6c6c6c;
  position: relative;
}

.article h3:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #00c1bc;
  bottom: -3px;
  width: 30%;
}

a img:hover {
    opacity: 0.7;
}

h4 {
	position: relative;
	padding: 0 .5em .5em 2em;
	border-bottom: 1px solid #ff5a5f;
}
h4::before,
h4::after {
	position: absolute;
	content: '';
	border-radius: 100%
}
h4::before {
	top: .2em;
	left: .2em;
	width: 18px;
	height: 18px;
	background-color: rgba(255,90,95,.5);
	z-index: 2;
}
h4::after {
	top: .7em;
	left: .7em;
	width: 13px;
	height: 13px;
	background-color: rgba(255,90,95,.2);
}

.article a:hover {
	opacity: 0.6;
	transition: all 0.8s ease;
}

h5{
 text-align: left;
 background-color: #fff; /* 背景色 */
 color: #000; /* 文字色 */
 overflow: hidden;
 padding: 20px; /* 余白 */
 position: relative;
}
h5:before{
 background-color: #a1a1a1; /* 大きな円の色 */
 border-radius: 50%;
 content: '';
 display: block;
 opacity: 0.2; /* 大きな円の不透明度 */
 position: absolute;
 top: -25px;
 left: 0px;
 width: 120px; /* 大きな円の幅 */
 height:120px; /* 大きな円の高さ */
}
h5:after{
 background-color: #4080dd; /* 小さな円の色 */
 border-radius: 50%;
 content: '';
 display: block;
 opacity: 0.3; /* 小さな円の不透明度 */
 position: absolute;
 bottom: -38px;
 left: 90px;
 width: 60px; /* 小さな円の幅 */
 height: 60px; /* 小さな円の高さ */
}

.icon {
        background: url("https://www.ozak.co.jp/images/icon_exlink.gif")
        no-repeat;padding-left:16px;
}
a[href$='.pdf'] { 
	padding: 5px 0px 5px 17px;
	background: transparent url(https://www.ozak.co.jp/css/icons/icon_pdf.gif) no-repeat center left;
}
a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'], a[href$='.bzip'], a[href$='.ace'] { 
	padding: 5px 0px 5px 17px;
	background: transparent url(https://www.ozak.co.jp/css/icons/icon_archive.gif) no-repeat center left;
}
a[href$='.html?height=345&width=565'] { 
	padding: 5px 0px 5px 20px;
	background: transparent url(https://www.ozak.co.jp/css/icons/youtube.gif) no-repeat center left;
}

.tl2 {
  width: 500px;
 
  padding: 10px 0;
  font-family: sans-serif;
  font-size: 20px;
  color:#3cb3e4;
}
.heading {
  margin: 10px 0
}
.tl22 .heading {
  position: relative;
  height: 50px;
  padding: 0;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #3cb3e4;
  line-height: 50px;
}
.tl22 .heading .caption{
  position: absolute;
  right: 0;
  top: 0;
  padding-left: 25px;
  padding-right: 40px;
  background: #3cb3e4;
  color: #fff;
}
.tl22 .heading .caption:before{
  display: block;
  content: ' ';
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  right: 99.9%;
  top: 0;
  border: 0 solid transparent;
  border-width: 50px 37px 0 0;
  border-right-color:#3cb3e4;
}
.tl22 .heading .title{
  float: left;
  padding-left: 20px;
}

/*ボックス用２*/
#itembox {
  display: flex;
  margin: 0 5px;
  flex-wrap: wrap;
  background: #fcfcfc;
}

@media screen and (max-width: 580px) {
  .archive-grid {
    width: calc(100% / 2)
  }
}

@media screen and (min-width: 581px) {
  .archive-grid {
    width: calc(100% / 3);
  }
}

@media screen and (min-width: 900px) {
  .archive-grid {
    width: calc(100% / 4);
  }
}

@media screen and (min-width: 1300px) {
  .archive-grid {
    width: calc(100% / 5);
  }
}


.post-inner {
  margin: 5px;
  padding: 10px;
  background: #fff;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 0;
  font-size:12px;
  text-align:center;
}

.post-thumbnail {
  position: relative;
}

.post-thumbnail img {
  width: 100%;
  height: 100%;
}

.post-date {
  position: absolute;
  top: 0;
  left: -15px;
  padding: 4px 8px;
  background: #3b8dbd;
  color: #fff;
  font-family: Lato, Arial, sans-serif;
  line-height: normal;
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.post-date::before {
  content: '';
  position: absolute;
  top: calc(50% + 4px);
  left: -8px;
  z-index: -1;
  border: 8px solid transparent;
  border-right-color: #3b8dbd;
}
.post-title {
 font-size: 18px;
 line-height: 1.4;
}
.post-title a {
 text-decoration: none;
 color: #111;
 transition: all .2s;
}
.post-title a:visited { color: #111 }
.post-title a:hover, .post-title a:focus, .post-title a:active { color: #3b8dbd }


.mobile-footer-menu-buttons {
  background-color:#333;

}




.su-column-size-1-4 h3 {font-size:12px;}
.su-column-size-1-4 {border:1px solid #ccc;
padding:0 5px 5px 5px;
font-size:13px;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
}






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

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

/*480px以下*/
@media screen and (max-width: 480px){
	.su-column-size-1-4 {width:43.8%!important;
	margin:10px!important;	
}
.su-row {display: flex;
	flex-wrap: wrap;}
.mlt {color:#fff;width: 150px;
	height: 26px;
	font-size:11px;
	margin-left: auto;
  }
.mlt a{color:#fff!important;}
}

.footer-left {
  width: 49.99%;
}
.footer-center {
  width: 24.99%;
}
.footer-right {
  width: 24.99%;
}
/* グローバルナビを1行に収める */
#navi .navi-in > ul > li > a {
    padding-left: 14px !important;
    padding-right: 14px !important;
}