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

/************************************
** 子テーマ用のスタイルを書く
************************************/
.display-posts-listing.grid {
    display: grid;
    grid-gap: 16px;
	font-size:12px;
	        grid-template-columns: repeat( 2, 1fr );

}


.display-posts-listing.grid img{
	display:block;
	margin:auto;
}
 
.display-posts-listing.grid .title {
    display: block;
}
 .display-posts-listing.grid .title {
    display: block;
    max-width: 150px;
    margin: auto;
}
.display-posts-listing.grid img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

.listing-item {
    padding: 5px;
    border: solid 1px #ccc;
}

.table-a th{
border: 1px solid #ccc;
background-color:#FBD246;
	min-width: 80px;
	
}

.table-a td {
    background-color: rgba(251,210,70,0.2);
    color: #555;
	line-height: 2.6;
}

.table-b th{
border: 1px solid #ccc;
background-color:#FFEB3B;
	min-width: 120px;
}

.table-b td {
    background-color: rgba(251,210,70,0.2);
    color: #555;
}

.back-a{
	display: inline-block;
	background-color:#fffcf5;
}

.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #fff33f;
	color: #000;
}

.logo-menu-button.menu-button{
	background-color: #fff33f;
}
div#navi-menu-content {
    background-color: #ffeb3b;
}

.navi-footer-in a:hover {
    border-bottom: solid 1px #000;
}
  
.navi-footer-in a:hover {
        background-color: transparent;
	}


.entry-content h1{
border:none;
background:none;
padding: 0;
}

.entry-content h2{
border:none;
background:none;
}



.entry-content h3{
border:none;
background:none;
padding: 0;
}


.pengin i{
	color:#333;
}


.entry-content {
    margin-bottom: 0;
}

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

h1.entry-title{
position: relative;
    padding: 1rem 1.5rem;
    border: 2px solid #b38a66;
    background-color: #fdf140;
	border-radius:10px;
}

h1.entry-title:before {
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  content: '';
  border: 3px dotted #b38a66;
	border-radius:10px;
}


.video-container {
max-width: none;
}

.sbi_header_text h3 {
    border: unset!important;
}
.mini-f {
  font-size: 12px
}

.small-red-text {
	font-size: 93%;
    color: red;
    font-weight: bold;
    border-bottom: 1px solid red; 
    text-decoration: none;
}

.small-red-text:hover {
    text-decoration: underline; 
}

#sb_instagram .sb_instagram_header, .sb_instagram_header {
    display: block;
    padding: 2em;
	
}

.sbi_feedtheme_header_text
 {
    color: #000;
}

#sb_instagram #sbi_images {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    padding: 12px 12px;
}

.title-front {
    position: relative;
    padding: 1rem 1.5rem;
    border: 2px solid #b38a66;  
    background-color: #fdf140; 
    border-radius: 10px; 
	font-size:20px;
	font-weight:bold;
}

.title-front:before {
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    content: '';
    border: 3px dotted #b38a66;  
    border-radius: 10px;
}
.table-note {
  font-size: 0.9em;
  color: #666;
  margin-top: 8px;
}

.sd-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sd-table {
  min-width: 700px;
}

.sd-table th,
.sd-table td {
  white-space: nowrap;
}

.sd-table-wrap {
  overflow-x: auto;
}

.sd-table {
  min-width: 700px;
}


@media (max-width: 480px){
#sb_instagram.sbi_mob_col_2 #sbi_images .sbi_item {
    width: 50% !important;
}
}

@media (max-width: 600px) {
    .display-posts-listing.grid {
        grid-template-columns: repeat( 2, 1fr );
    }
	.table-a th{
border: 1px solid #ccc;
background-color:#FBD246;
	min-width: 100px;
}


}
 
@media (min-width: 1024px) {
    .display-posts-listing.grid {
        grid-template-columns: repeat( 4, 1fr );
    }
}

.sidebar {
    font-size: 14px;
}

figure.wp-block-table table{
	width:100%;
}
table tr:nth-of-type(2n+1) {
    background-color: #fff;
}
table th, table td {
    border: 1px solid #fbd246;
    padding: 10px;

}
table th {
    border: 1px solid #ccc;
}
table th {
    background-color: #fbd246;
}
.tagline {
    position: absolute;
    top: -1000px;
}
.sp-menu{
	display:none;
}
@media (max-width: 800px) {
.sp-menu{
	display:flex;
	margin-bottom:1px;
}
.sp-menu div {
    width: calc(50% - 2px);
    border: solid 1px #a55217;
    box-sizing: border-box;
    margin-right: 3px;
    margin-bottom: 2px;
	border-radius:10px;
}
	
.sp-menu a {
	font-weight:bold;
	color:#98522a;
    background-color: #ffd900;
    text-decoration: none;
    line-height: 1.6;
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px 10px;
	font-size:14px;
	border-radius:10px;
}
	
	
	.sp-menu .wp-block-kadence-column{
		width:25% !important;
	}
}

.borderd img{
	margin:auto;
	box-shadow:2px 2px 4px #ccc;
	border:solid 1px #ccc;
	border-radius:10px;
}

.entry-content h3 {
    border: none;
    background: none;
    padding: 0;
    border-left: solid 6px #fbd246;
    padding : 15px;
}

.sbi_item.sbi_type_image {
    height: auto;
    max-height: 280px;
}

.menu-drawer a {
    color: #4d4d4d;
	  font-size: 15px;
    text-decoration: none;
    padding: 8px;
}

@media (max-width: 800px){
	.sbi_item.sbi_type_image {
    height: auto;
    max-height: 230px;
}
	table th, table td {
    border: 1px solid #fbd246;
    padding: 10px;
			font-size: 14px;

}
}

            [id^="bfb_content_"].bfb_view_sp {
                position: fixed;
                transition: 0.3s;
                z-index: 9999;
                width: 100%;
                bottom: 0;
                background-color: rgb(0 0 0 / 33%);
                color: #000;
                padding: 5px;
                text-align: center;
                font-family: "Montserrat", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
                font-size: 14px;
            }

.mw800{
	   width: 100%;
    max-width: 800px;
    margin: 1em auto;
}

.kb-button{
border-radius: 10px !important;
}

.listing-item{
	border-radius: 10px !important;
}

.radi{	border-radius: 10px !important;}

/* 初期状態：9:16として定義 */
.youtube-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: auto;
  padding-bottom: 177.78%;
  height: 0;
  overflow: hidden;
}

.youtube-wrap iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
  left: 0;
  top: 0;
}

/* PC：縦長維持、高さ制限 */
@media screen and (min-width: 768px) {
  .youtube-wrap {
    padding-bottom: 0;
    height: 600px;
  }
}

/* スマホ：正方形表示に切り替え */
@media screen and (max-width: 767px) {
  .youtube-wrap {
    padding-bottom: 100%;  /* 正方形：幅に対して高さ100% */
    height: 0;
  }
}
}