@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
*/

/************************************
** 汎用
************************************/
#sb_instagram #sbi_load .sbi_follow_btn {
    display:none!important;
}

/* テキストの禁則処理と横スクロールの非表示 */
body{
line-break:strict!important;
word-break:break-word!important;
overflow-wrap:break-word!important;
word-wrap:break-word!important;
}
/* H1の非表示 */
h1 #archive-title,.archive-title{
	display:none;
}
/* メインwrapのカスタム */
.main {
  border-radius: 0!important;
}
#main .main{
	height:100%!important;
}

/* サイドバーのカスタム */
#sidebar,.sidebar {
  border-radius: 0!important;
　height:100%!important;
}

/* 画像のぼやけ防止 */
img {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

/* アイキャッチ画像をホバー時に少し拡大する */
.card-thumb {
    overflow: hidden;
}
.card-thumb img{
    transition: all .6s ease-out 0.1s;
}
.card-thumb img:hover {
    transform: scale(1.1);
    transition: all .6s ease-out 0.1s;
}

/*ヘッダーロゴの位置調整*/
.logo{
	margin-top:15px!important;
}

/*背景なし*/
.bg-none{
	background:none!important;
}

/* サイトのサブタイトル部のフォント変更 */
div.tagline,div.item-label{
	font-family: 'Roboto', sans-serif;
	font-weight:400!important;
	letter-spacing:0.06rem;
}

/* 記事のタイムスタンプ部のフォント変更 */
.wp-block-latest-posts__post-date{
	font-family: 'Roboto', sans-serif!important;
	font-size:0.8em;
	text-align:right;
	letter-spacing:0.06rem!important;
}

/* リストスタイルの変更 */
ul{
	list-style:none;
	padding:0;
	margin:0;
}

li.cat-item { 
   border-bottom:1px dashed;
   border-color:#cdcdcd; /* 線の色 */
   position: relative;
   margin:0.5em 0 !important;
   padding: 0 1.2em 0.7em 1.2em;
}

#archives-3 ul li{
	padding-left:1.2em;	
}

/************************************
** アピールエリア
************************************/
.appeal{
	background-size:cover!important;
}
.appeal-in {
    display: flex;
	min-height:760px!important;
	margin-bottom:74px!important;
	padding:0!important;
}
/*480px以下*/
@media screen and (max-width: 480px){
	.appeal-in {
    display: flex;
    min-height: 300px!important;
}
}


/************************************
** WEBフォント
************************************/
.wf-roboto{font-family: 'Roboto', sans-serif;}
.wf-hina { font-family: 'Hina Mincho', serif;}
.wf-tang{font-family: 'Tangerine', cursive;}

/************************************
** フォントサイズ
************************************/
.fs-18{
font-size:18px!important;
}

.fs-20{
font-size:20px!important;
}

.fs-36{
font-size:36px!important;
}

/************************************
** 文字間変更
************************************/
.ls-01{
	letter-spacing: 0.1em;
}
.ls-02{
	letter-spacing: 0.2em;
}
/************************************
** 見出しのカスタム
************************************/

/* 見出しリセット用削除不可 */
#header-container, #header-container .navi, #navi .navi-in>.menu-header .sub-menu, .article h2, .sidebar h2, .sidebar h3, .cat-link, .cat-label, .appeal-content .appeal-button, .demo .cat-label, .blogcard-type .blogcard-label, #footer {
    background-color: none!important;
}

/* 見出し2 */
.article h2{
background:none!important;
font-size:24px!important;
font-weight:normal!important;
color:#000!important;
letter-spacing:0.06rem;
padding:1rem 0!important;
margin-bottom:10px!important;
}

/* 見出し3 */
.article h3{
border:none!important;
font-size:20px!important;
font-weight:normal!important;
color:#000!important;
letter-spacing:0.06rem;
margin-bottom:40px!important;
padding: 1rem 1rem;
background: #f4f4f4;
}

.sidebar h3{
	background:#f1f1f1!important;
}


/* 見出し4 */
.article h4{
border-left:none;
border-right:none;
font-size:20px!important;
font-weight:normal!important;
color:#000!important;
letter-spacing:0.06rem;
margin-bottom:40px!important;
padding: 1rem 1rem;
border-top: 1px solid #aaa!important;
border-bottom: 1px solid #aaa!important;
}

/* 見出し5 */
.article h5{
font-size:18px!important;
font-weight:normal!important;
border-top:none;
border-bottom:none;
padding: 0.2rem 1rem;
border-left: 3px solid #aaa;
margin-bottom:40px!important;
}

/* 見出し6 */
.article h6{
border-bottom:none;
padding: 0;
}
/* 見出しリセット用削除不可ここまで */

.cat-label{
	color:#fff!important;
	letter-spacing:0.1em;
}

.cat-item{
		letter-spacing:0.1em;
}

#new-entries-4{
	font-size:15px;
}

/************************************
** ■リンクテキスト カスタマイズ
************************************/
a{
  text-decoration: none;
	color:#333;
}
a:hover { /*リンクテキストホバー時アンダーライン表示*/
  text-decoration: none;
	color:#878787;
}
.share-button{ /*シェアボタン装飾無し*/
  text-decoration: none!important;
}
.follow-button{ /*フォローボタン装飾無し*/
  text-decoration: none!important;
}
.cat-link{ /*カテゴリーラベル装飾無し*/
  text-decoration: none!important;
}

li.cat-item a:hover{
	background:#f1f1f1!important;
}

.tag-link{ /*タグラベル装飾無し*/
  text-decoration: none!important;
}

/************************************
** サブタイトルカスタム
************************************/
div.tagline {
color:#a58b6b!important;
}
/************************************
** グローバルナビのスタイル
************************************/
div.item-label {
	color:#333!important;
}
/*グローバルナビメニュー メニュー項目の間隔*/
#navi .navi-in>ul>li>a{
padding: 0 2.0em;
}

/*グローバルナビメニュー マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 1px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #333;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

/************************************
** hrのスタイル
************************************/
hr.wp-block-separator{ 
	border: 0; 
	height: 1px; 
	background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}
hr.separator-half{ 
	border: 0; 
	height: 1px;
	width:50%;
	background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

/************************************
** ■マージンとパディング
************************************/

/*マージンの設定*/
.m-0{
	margin:0!important;
}
.m-10{
	margin:10px!important;
}
.m-15{
	margin:15px!important;
}
.m-20{
	margin:20px!important;
}

.mb-60{
	margin-bottom:60px;
}

.mt-0{
	margin-top:0!important;
}
.mt-5{
	margin-top:5px!important;
}
.mb-0{
	margin-bottom:0!important;
}
.mb-5{
	margin-bottom:5px!important;
}
.mb-10{
	margin-bottom:10px!important;
}
.mb-20{
	margin-bottom:20px!important;
}
.mb-30{
	margin-bottom:30px!important;
}
.p-0{
	padding:0!important;
}
.p-20{
	padding:20px;
}
.pt-0{
	padding-top:0;
}
.pl-10{
	padding-left:10px;
}
.pl-20{
	padding-left:20px;
}
.pr-10{
	padding-right:10px;
}
.pr-20{
	padding-right:20px;
}
.pr-60{
	padding-right:60px;
}

/************************************
** コンテナ・ボックス設定
************************************/
/* コンテナ2のカスタマイズ */
.wp-container-2 {
    background:none!important;
}
/* コンテンツエリア　カスタム */
.content-area1{
width:90%!important;
margin:0 auto!important;
}
.content-area2{
width:80%!important;
margin:0 auto!important;
}
.content-area3{
width:70%!important;
margin:0 auto!important;
}
.content-area4{
width:60%!important;
margin:0 auto!important;
}
.content-area5{
width:50%!important;
margin:0 auto!important;
}

/*834px以下*/
@media screen and (max-width: 834px){
.content-area1,
.content-area2,
.content-area3,
.content-area4,
.content-area5{
width:100%!important;
margin:auto!important;
}
}

.center{
	margin:0 auto!important;
	text-align:center!important;
}

/* 縦横：中央揃え */
.content-center{
display:flex!important;
align-items:center!important;
justify-content:center!important;
}

/* 縦：中央　横：左揃え */
.content-center-left{
display:flex;
align-items:center;
justify-content:flex-start;
}

/* 縦：中央　横：右揃え */
.content-center-end{
display:flex;
align-items:flex-end;
justify-content:center;
}

/* 縦：スタート位置　横：中央 */
.content-top-center{
display:flex;
align-items:flex-start;
justify-content:center;
}

/* 縦：ベースライン　横：左 */
.content-baseline-left{
	display:flex;
	align-items:baseline!important;
	justify-content:flex-start!important;
}

/* 縦：ベースライン　横：右 */
.content-baseline-right{
	display:flex;
	align-items:baseline!important;
	justify-content:flex-end!important;
}

/************************************
** ページトップボタンのカスタマイズ
************************************/
.go-to-top {
  right: 20px; /*右から20px*/
  bottom: 55px; /*下から55px*/
}
.go-to-top-button {
  border-radius: 50%; /*丸くする*/
  width: 50px; /*横幅*/
  height: 50px; /*高さ*/
  font-size: 20px; /*アイコンフォントのサイズ*/
  opacity:0.9; /*透明度*/
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .2); /*影*/
}

/************************************
** about us
************************************/
/* 共通 */
a:hover img {
  opacity: 0.6;
  transition: all 0.8s ease;
}

/************************************
** フレックスBOX
************************************/
.row-4 {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
.column-4 {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}
.column,.clumn-2,.clumn-4 img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/************************************
** グリッドシステム
************************************/
.grid-container {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr, 1fr, 1fr, 1fr, 300px)
  );
  gap: 10px;
}
.box {
  background: #000;
  width: 100%;
}
img.item {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* グリッドアイテム */
.itemA {
  grid-row: 1/3;
  grid-column: 1/3;
}
.itemB {
  grid-row: 3/4;
  grid-column: 1/2;
}
.itemC {
  grid-row: 3/4;
  grid-column: 2/3;
}
.itemD {
  grid-row: 1/2;
  grid-column: 3/4;
}
.itemE {
  grid-row: 1/2;
  grid-column: 4/5;
}
.itemF {
  grid-row: 2/4;
  grid-column: 3/5;
}

/************************************
** Works Eiichi Misawa専用グリッド
************************************/
.works-e{
	margin-right:84px!important;
	margin-left:84px!important;
}
/*834px以下*/
@media screen and (max-width: 834px){
	.works-e{
	margin-right:0!important;
	margin-left:0!important;
}
}

/************************************
** 各種エフェクト
************************************/

/*画像ホバーでセピアからフルカラー*/
.sepia img{
	filter: sepia(100%);/*セピア具合を変更したい場合はこの数値を変更*/
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.sepia a:hover img{/*hoverした時の変化*/
	filter:sepia(0);
}

/*********************************/ 
/* お問い合わせ
*********************************/ 
.label-1 {
		display:flex;
	align-items:center;
	justify-content:center;
	float:right;
	width:60px!important;
	background:#e8babb;
	border-radius:3px;
	color:#fff;
	font-size:12px;
	padding:4px;
	margin-right:10px;
	font-weight:normal;
}
.label-2 {
	display:flex;
	align-items:center;
	justify-content:center;
	float:right;
	width:60px;
	background:#b9b9b9;
	border-radius:6px;
	color:#fff;
	font-size:12px;
	padding:4px;
	margin-right:10px;
}
.pl-hold{
	color:#dcdcdc!important;
}
.form-item1{
	width:20%;
	text-align:center;
}
.cform th {
	font-size: 16px;
	line-height: 150%;
	border-bottom: solid 1px #ddd;
	padding: 10px 5px;
	font-weight:normal;
}
.cform td {
	font-size: 16px;
	line-height: 150%;
	border-bottom: solid 1px #ddd;
	padding: 10px 5px;
}
.cform {
	width: 100%;
	margin: auto;
}
.cform [type=submit] {
	display: inline-block;
	font-size: 20px;
	padding: 10px 30px;
	text-decoration: none;
	background: #666;
	color: #FFF;
	border-bottom: solid 4px #666;
	border-radius: 3px;
}

.cform option,
.cform textarea,
.cform input[type=text],
.cform input[type=email],
.cform input[type=search],
.cform input[type=url] {
width: 100%;
}

@media only screen and (max-width:767px) {
	.cform th,
	.cform td {
		width: 100%;
		display: block;
		border-top: none;
	}
}

.submit-btn input {
	background: #fff;
	width: 30%;
	max-width: 550px;
	min-width: 220px;
	margin: 30px auto;
	display: block;
	border: 1px  solid;
	text-align: center;
	padding: 12px;
	color: #666;
	transition: all 0.4s ease;
	font-size:16px;
}

.submit-btn input:hover {
	background: #666;
	color: #fff;
}

.back-btn input {
	width: 30%;
	max-width: 550px;
	min-width: 220px;
	margin: 30px auto;
	display: block;
	border: 1px  solid;
	text-align: center;
	padding: 12px;
	transition: all 0.4s ease;
	font-size:16px;
		background: #666;
	color: #fff;
}

.back-btn input:hover {
	background: #fff;
	color: #666;
}

/*********************************/ 
/* フッターカスタム
*********************************/
.footer {
    margin-top: 0!important;
	margin-bottom:20px!important;
    padding: 0!important;
	letter-spacing:0.1em;
	font-family: 'Roboto', cursive;
	    color: #a58b6b!important;
	
}
.menu-footer{
	display:none!important;
}
.footer-bottom {
    margin-top: 0!important;
    padding:0!important;
}
/************************************
** レスポンシブ用のメディアクエリ
************************************/

/*1023px以下*/
@media screen and (max-width: 1023px){
  .go-to-top .go-to-top-button {
    display:none;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
.header div.header-in, .appeal div.appeal-in {
    min-height: 400px;
}
	.sp-none{
		display:none;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
	
/*SP表示の際のロゴの表示サイズと位置の調整*/	
	.logo-header img{
		height:30px;		
	}
}