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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
html,
body {
  height: 100%;
}

main.main{padding:0;}

.entry-title {display:none;}

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

.head_bnr img{width:100%;}
.catch {font-weight:bold; color:#FFF; background:#4e8cd3; padding:0 10px 0 10px;}
.row {width:95%; margin:0 auto;}
#toc,.author-info,.ctdt-one-row,#breadcrumb {display:none;}
.koma{width:100%; max-width:600px;}

a.link_card{display: block;}
.lp_coma {text-align:center;}
.lp_content {margin:3% 0; padding:3% 0;}
.lp_content a{text-decoration:none;}
.lp_content:nth-child(n+2){border-top:solid 1px #CCC;}
.lp_content h2{margin:10px 0 10px 0; padding:0;}
.s-item .s-title{font-size:1em;}
.lp_content p{padding:0; margin:0;}
.lp_content .pen {font-size:0.6em;}
.lp_content .pen i{margin-right:5px;}
.lp_content .seel {color:#e80707; font-weight:bold;}
.s-item .seel{font-size:0.8em;}
.lp_content .text {font-size:0.8em;}
.lp_content .float_btn{margin-top:2%;}

.book {width:30%; padding:0; margin:0 auto; display:inline-block;}
.book_data {width:60%; padding:0; margin:0 0 0 5%; display:inline-block; vertical-align: top;}

.s-item {width:33%; padding:1% 0; margin:1% 0; display:inline-block; vertical-align: top; }
.s-item .text{padding:1%;}
.s-item .btn {float:left;}

.mobile-menu-buttons {display:none;}

/*追加*/
:root {
  --ink: #313546;
  --bg: #ffffff;
  --w: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.lp {
  width: var(--w);
  margin: 0 auto;
  background: var(--bg);
  padding-bottom: 24px;
}

.lp__header {
  display: flex;
  flex-direction: column;
}

.banner {
  width: 100%;
  overflow: hidden;
}

.banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.filters {
  display: flex;
  gap: 8px;
  padding: 16px;
  flex-wrap: wrap;
}

.filter {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 2px;
  border: 1px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.filter:focus-visible {
  outline: 2px solid rgba(49, 53, 70, 0.7);
  outline-offset: 2px;
}

.filter--active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  gap: 4px;
  font-weight: 700;
}

.filter__icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter:not(.filter--active) .filter__icon {
  display: none;
}

.filter__icon img {
  width: 100%;
  height: 100%;
}

.results {
  padding:0;
}

.results__bar {
  height: 40px;
  background: var(--ink);
  display: flex;
  padding:10px 0 0 10px;
  margin-top: 0;
}

.results__count {
  margin: 0;
  color: #fff;
  font-family: "Noto Sans JP", "Noto Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
}

.results__section {
  padding: 24px 10px;
  background: #fff;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 8px;
  row-gap: 16px;
}

.grid__item {
  display: block;
  width: 100%;
  aspect-ratio: 586 / 330;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
}

.grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/*834px以下*/
@media screen and (max-width: 834px){
.s-item {width:100%; padding:3% 0; margin:3% 0; display:block;}
.under-entry-content {width:95%; margin:0 auto;}
#custom_html-5 {padding:2%;}
	
.lp {
    padding-bottom: 16px;
  }


  .results {
    padding: 0 12px;
  }

  .results__section {
    padding: 20px 8px;
  }
}


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

  .filter {
    font-size: 14px;
    height: 30px;
    padding: 0 10px;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 6px;
    row-gap: 12px;
  }
}