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

/************************************************************************
** 子テーマ用のスタイルを書く
*************************************************************************/

body, input, textarea, button, select {
font-family: "Noto Sans JP", 
             -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic",
             "游ゴシック Medium", "游ゴシック体", "メイリオ", Meiryo, 
             "Hiragino Kaku Gothic ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", 
             "ＭＳ Ｐゴシック", "MS PGothic", Osaka, Arial, Helvetica, sans-serif;
}

/************************************
** ブログ名の上を埋める
************************************/
.logo {
  padding-top:10px;
}

/************************************
** ブログ名の下を埋める
************************************/
.logo-header{
  padding-bottom:0px;
}

.tagline{
  margin-top:0px;
  padding-top:0px;
}

/************************************
** 太さ　＆　色
************************************/
.font-bold{
font-weight:bold;
}

.font-red{
font-weight:bold;
color:#D32F2F;
}

/************************************
** タイトルの上の隙間埋める
************************************/
#main{
padding-top:10px;
padding-bottom:0;
}

.main{
padding-top:10px;
padding-bottom:0;
}

/************************************
** 真ん中詰め
************************************/
div#main-center{
text-align:center;
margin-top:0;
margin-bottom:0;
padding:0;
}

div#main-center p a:hover img{
opacity: 0.8;
}

/************************************
** メインコンテンツとフッタこうの間の隙間は0
************************************/
p {
font-size:14px;	
}

.entry-content{
	margin:0;
	padding:0;
}
.entry-content p{
	font-size:16px;
	padding:0;
}

/************************************
** 記事内カテゴリボタン抹消
************************************/
.entry-categories-tags{
display: none;
}

/************************************
** 記事タイトルちょっとずらず
************************************/
.entry-title {
margin-left:5px;
}

/************************************
** 更新情報フォントサイズ
************************************/
.update-info{
margin:0;
padding:0;
font-size: 15px;
}

/************************************
** 140x210
************************************/
.list-main {
display: inline-block;
line-height: 120%;
font-size: 13px;
height: 270px;
vertical-align: top;
}

.list-main a{
display: inline-block;
text-decoration: none;
}

.list-main a:hover img{
opacity: 0.8;
}

.list-main-cari {
width: 19.5%;
margin: 2px 0;
padding:0;
display: inline-block;
}

.list-main-cari a{
display: inline-block;
}

.list-main-cari img{
vertical-align: middle;
margin-right:0;
margin-left:0;
padding-left:0;
padding-right:0;
}

.list-main-cari a:hover img{
opacity: 0.8;
}

.list-main-cari-p{
margin-top: 25px;
color:#ff0000;
font-weight:bold;
}

/************************************
** 140x130
************************************/
.list-main140130 {
display: inline-block;
line-height: 120%;
font-size: 80%;
height: 130px;
vertical-align: top;
}

.list-main140130 a{
display: inline-block;
text-decoration: none;
}

.list-main140130 a:hover img{
opacity: 0.8;
}

/************************************
** 111x167
************************************/
.list-main-111 {
display: inline-block;
line-height: 120%;
font-size: 80%;
height: 215px;
width: 140px;
vertical-align: top;
}

.list-main-111 a{
display: inline-block;
text-decoration: none;
}

.list-main-111 a:hover img{
opacity: 0.8;
}

/************************************
** 237x133
************************************/
.list-main-237 {
display: inline-block;
line-height: 120%;
font-size: 80%;
width: 31%;
height: 193px;
vertical-align: top;
}
.list-main-237 a{
display: inline-block;
text-decoration: none;
}
.list-main-237 a:hover img{
opacity: 0.8;
}

/************************************
** サイドメニュー
************************************/
div#side-menu{
width: 100%;
margin:0;
}
div#side-menu h2{
width: 100%;
font-weight:bold;
margin:0;
padding:10px 0 10px 0;
text-indent: 15px;
background-color: #2971A9;
border-right: 1px solid #2971A9;
border-left:  1px solid #2971A9;
color:#FFFFFF;
font-size:20px;
}

div#side-menu ul{
width: 100%;
margin:0;
padding:0;
border-right: 1px solid #CCCCBB;
border-bottom:  1px solid #CCCCBB;
border-left:  1px solid #CCCCBB;
list-style-position: outside;
list-style-type: none;
text-align: left;
}

div#side-menu li{
margin:0;
padding:0;
text-align: left;
list-style-type: none;
}

div#side-menu li a{
display: block;
font-size:12px;
text-indent: 12px;
padding: 1px 0 0 0;
border-top: 1px solid #CCCCBB;
text-align: left;
}

/************************************
** sime menu 下の隙間埋め
************************************/
#sidebar{
margin:0;
padding:0;
}
.sidebar{
margin:0;
padding:0;
}

/************************************
** bottom menu
************************************/
div#bottom-menu{
width: 195px;
margin: 0 auto;
padding: 0;
background-color: #2971A9;
color:#FFFFFF;
font-size: 12px;
line-height:24px;
text-align: left;
}

div#bottom-menu a{
color: #FFFFFF;
}

div#bottom-menu h3 {
width:195px;
margin: 0;
padding: 10px 10px;
border: 2px solid #FFFFFF;
font-size: 20px;
font-weight: bold;
text-align: center;
}

/************************************
**　フッタメニューとコピーライトの隙間埋め
************************************/
.footer-bottom{
margin:0;
padding:0;
}

/************************************
**　フッタコピーライト
************************************/
.copyright a{
	text-decoration:none;
}

/************************************
**　おりじなるメニュー
************************************/
.paipan-menu{
width:100%;
text-align: center;
margin: 1px auto 10px auto;
padding: 0;
}
.paipan-menu a{
display: inline-block;
margin: 2px 1px 2px 0;
width: 48%;
height: 60px;
line-height: 60px;
background-color: #2971A9;
color:#ffffff;
font-weight: bold;
font-size:17px;
border-radius: 5px;
text-decoration: underline;
}
.paipan-menu a:hover{
color:#ffffff;
background-color: #204898;
text-decoration: none;
}

/************************************
**　Topページへ戻るメニュー
************************************/
.paipan-top-menu{
width:100%;
text-align: center;
margin: 0 auto;
padding: 0;
text-decoration: none;
}
.paipan-top-menu a{
display: inline-block;
margin: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #2971A9;
color:#ffffff;
font-weight: bold;
font-size:16px;
border-radius: 5px;
text-decoration: none;
}
.paipan-top-menu a:hover{
color:#ffffff;
background-color: #204898;
text-decoration: none;
}

/************************************
**　cari 1ponページへ戻るメニュー
************************************/
.back-menu{
text-align: center;
margin: 0 auto;
padding: 0;
text-decoration: none;
}
.back-menu a{
display: inline-block;
margin: 0;
padding-right:20px;
padding-left:20px;
height: 60px;
line-height: 60px;
background-color: #2971A9;
color:#ffffff;
font-weight: bold;
font-size:16px;
border-radius: 5px;
text-decoration: none;
}
.back-menu a:hover{
color:#ffffff;
background-color: #204898;
text-decoration: none;
}

/************************************
** ヘッダメッセージ(PCとモバイルで共通のスタイル設定)
************************************/
.welcome-message {
color: #ffffff; 
background-color: #3271a7; 
width: 100%; 
padding: 5px 5px; 
text-align: center; 
}

/* スマホ・タブレット向けのメッセージを非表示にする(デフォルト設定) */
.welcome-message .mobile-only {
  display: none;
}

/************************************
ボタンをセンターに
************************************/
.button-center{
	font-size:16px;
	margin:20px 0 0 0;
	padding:0;
	text-align:center;
}

/************************************
画像の基本設定 
************************************/
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15%, 1fr));
  max-width: 865px;
  gap: 15px 5px;
  margin: 0 auto;
  width: 100%;
  justify-content: center;
}

/************************************
140px
************************************/
.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0; /* 縮むのを邪魔させない */
}

.grid-item a, 
.grid-item img {
  width: 100%;
  max-width: 140px;
  aspect-ratio: 140 / 210;
  object-fit: cover;
  display: block;
  height: auto;
}

.grid-item a:hover{
	opacity: 0.8;
}

.grid-item p, 
.grid-item {
  margin-top: 2px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.3;
  word-break: break-all;
  color: #333;
}

/************************************
140px Covert
************************************/
.covert-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0; /* 縮むのを邪魔させない */
}

.covert-item a, 
.covert-item img {
  width: 100%;
  max-width: 140px;
  aspect-ratio: 140 / 79;
  object-fit: cover;
  display: block;
  height: auto;
}

.covert-item a:hover{
	opacity: 0.8;
}

.covert-item p, 
.covert-item {
  margin-top: 2px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.3;
  word-break: break-all;
  color: #333;
}


/************************************
139px GRAVURE
************************************/
.gravure-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0; /* 縮むのを邪魔させない */
}

.gravure-item a, 
.gravure-item img {
  width: 100%;
  max-width: 139px;
  aspect-ratio: 139 / 210;
  object-fit: cover;
  display: block;
  height: auto;
}

.gravure-item a:hover{
	opacity: 0.8;
}

.gravure-item p, 
.gravure-item {
  margin-top: 2px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.3;
  word-break: break-all;
  color: #333;
}

/************************************
111px MetArt
************************************/
.metart-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0; /* 縮むのを邪魔させない */
}

.metart-item a, 
.metart-item img {
  width: 100%;
  max-width: 111px;
  aspect-ratio: 111 / 167;
  object-fit: cover;
  display: block;
  height: auto;
}

.metart-item a:hover{
	opacity: 0.8;
}

.metart-item p, 
.metart-item {
  margin-top: 2px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.3;
  word-break: break-all;
  color: #333;
}

/************************************
メディアクエリ
************************************/
@media screen and (max-width: 1024px) {
	
	.grid-item p, 
    .grid-item,
	.covert-item p, 
    .covert-item,
	.gravure-item p,
	.gravure-item {
    font-size: 12px;
    }


}

@media screen and (max-width: 570px) {

	.gallery-grid {
    /* 570px以下では1枚あたりを少し大きくして、自然に4枚並びへ */
    grid-template-columns: repeat(auto-fill, minmax(22%, 1fr));
	gap: 10px 0;
	}

	.grid-item a:hover,
	.covert-item a:hover,
	.gravure-item a:hover {
	opacity: 1.0;
	}

}

@media screen and (max-width: 415px){

	.paipan-menu a{
	font-size:15px;	
	}

}

@media screen and (max-width: 375px){

   .gallery-grid {
    /* 375px以下では1枚あたりを少し大きくして、自然に3枚並びへ */
    grid-template-columns: repeat(auto-fill, minmax(31%, 1fr));
	gap: 10px 0;
	}
	
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){

.welcome-message .mobile-only {
	/* スマホ・タブレット向けのメッセージを表示する */
	display: inline; 
	}

}

	
/*934px以下*/
@media screen and (max-width: 934px){

.list-main {
	display: inline-block;
	line-height: 120%;
	width: 23%;
	font-size: 12px;
	height: 250px;
	}

.list-main-111 {
	display: inline-block;
	line-height: 120%;
	width: 23%;
	height: 207px;
	}

.list-main-237 {
	display: inline-block;
	line-height: 120%;
	width: 23%;
	height: 173px;
	}

.list-main140130 {
	width: 23%;
	height: 120px;
	}

}

/*591px以下*/
@media screen and (max-width: 591px){

.list-main {
	display: inline-block;
	line-height: 120%;
	width: 23%;
	font-size: 12px;
	height: 230px;
	}

.list-main-111 {
	display: inline-block;
	line-height: 120%;
	font-size: 50%;
	width: 23%;
	height: 190px;
	}

.list-main-237 {
	display: inline-block;
	line-height: 120%;
	font-size: 70%;
	width: 31%;
	height: 120px;
	}

.list-main140130 {
	width: 23%;
	height: 100px;
	}

}

/*451px以下*/
@media screen and (max-width: 451px){

	/*スマホへのQRコード表示消す*/
#custom_html-6{
	display: none;
	}

.list-main {
	display: inline-block;
	line-height: 120%;
	font-size: 55%;
	width: 24.5%;
	height: 160px;
	}

.list-main-111 {
	display: inline-block;
	line-height: 120%;
	font-size: 60%;
	width: 23%;
	height: 160px;
	}

.list-main-237 {
	display: inline-block;
	line-height: 120%;
	font-size: 70%;
	width: 31%;
	height: 110px;
	}

.list-main140130 {
	width: 23%;
	height: 80px;
	}

}