/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/*
@media (min-width: 768px) {
div#primary {
    display: flex;
}
main#main {
flex: 1; 
}
.sidebar-left {
    width: 30%;
    background-color: #f4f4f4; 
    padding: 20px; 
}
}


main#main {
flex: 1; 
}
	}

*/

/* モバイル版ではサイドバー非表示 */
@media (max-width: 768px) {
	#left-sidebar {
    display: none;
}}
/*------------------------------------*/
/*記事一覧*/
/*------------------------------------*/


/* ベーススタイル */



.custompost-thumbnail-wrapper, .custompost-title, .custompost-date {
  width: 100%;
  height: 100%;
}



/* メディアクエリでビューポートの幅が特定のサイズ以上の場合に適用するスタイル　モバイル */
@media (max-width: 768px) {
	
/* サイトロゴ */
    .inside-header {
        padding: 0;
}
/* コンテンツpadding */
.site-content {
    padding: 0 10px;
}
	
.custompost-container {
    display: flex;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
}

.custompost-title {
    order: 2;
    width: 70%;
    height: auto;
    /*  padding: 5px 0 0 0;*/
    width: calc(100% - 90px);
    flex-grow: 1;
}
.custompost-thumbnail-wrapper {
    order: 1;
width: 75px;
    height: 75px;
	/*padding-right: 10px;*/
	margin: 4px 10px 0 0;
}
.custompost-date {
    order: 3;
	height: auto;
	font-size: 12px;
	width: 100%;
    padding-top: 10px;
}
	
	.custompost-date a {
    text-decoration: none;
}
	img.custompost-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
	
	h2.entry-title {
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
}
.entry-title a {
color: #03c;
}
	.custompost-category {
    display: block;
}
	.custompost-tags {
    display: none;
}
	.separate-containers .inside-article {
    padding: 0;
}
		/* 記事ボックス */

body.home.blog .site-main>* {
    margin-bottom: 0;
    padding: 10px 0;
}
body.post-image-above-header .entry-header,
body.post-image-above-header .entry-content  {
    border-color: #f3f3f3;
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
    -o-box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
    -ms-box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 4px rgb(138 128 128 / 20%);
    padding: 10px;
}
	
	body.post-image-above-header .entry-title {
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
}
	.separate-containers .inside-article {
    background-color: #EAEAEA;
}
/* 記事ページメインコンテンツの背景色 */
.custompost-date {
  display: flex;
  height: 100%;
	position: relative;
}
.entry-header,.entry-content {
    background-color: #fff;
}
body.post-image-below-header .inside-article {
    background-color: #fff;
	padding: 10px;
}

/* 記事ページメインコンテンツの背景色ここまで */

.custompost-comments {
  flex-basis: 30%; /* 25% of the container */
}

    .custompost-date-box {
        display: flex;
        flex-wrap: wrap;
    }


.custompost-time, .custompost-category {
  /*flex-grow: 1;*/
}
.custompost-category {
 
		width: 100%;
}

body {
    background-color: #EAEAEA;
}

	
	
	
	
/* comment吹き出し */
	.custompost-comments {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-right: 10px;
}

.custompost-comments a {
    position: relative;
    display: inline-block;
    padding: 10px;
    background-color: #f1f1f1;
    border-radius: 10px;
    text-decoration: none;
    color: black;
}

	/*
a.custom-bubble {
font-size: 14px;
    right: 0;
    position: absolute;
    display: inline-block;
    padding: 6px 10px;
    background-color: #F4F4F4;
    color: #2063ff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s;
    border: solid 1px #000;
}
 */
.custom-bubble {
	font-size: 14px;
	right: 0;
    position: absolute;
    display: inline-flex; /* flexboxを使用してアイテムを横に並べます */
    align-items: center; /* アイコンと数字を中央揃え */
    padding: 5px 10px; /* パディングを調整 */
    color: #5e5e5e; /* 文字色 */
    text-decoration: none; /* 下線を消す */
}

.custom-bubble img {
    margin-right: 5px; /* アイコンと数字の間に余白を設定 */
    width: 20px; /* アイコンのサイズを設定 */
    height: 20px;
}

.custom-bubble:hover {
    background-color: #fff; /* ホバー時の背景色 */
}
.custom-bubble.pc-link {
  display: none;
}
}
/* コメント吹き出し PC版 */
@media (min-width: 769px) {
.custom-bubble.mobile-link {
  display: none;
}}
/* メディアクエリでビューポートの幅が特定のサイズ以下の場合に適用するスタイル PC版 */
@media (min-width: 769px) {
	.site-logo {
  display: none;
}
.custompost-container {
    display: flex;
    flex-direction: row;
    height: auto;
    flex-wrap: wrap;
}

	.site-main>* {
    margin-bottom: 20px;
   /* padding-bottom: 20px; */
    border-bottom: solid 1px #b9b9b9;
}
	

.custompost-title {
background-color: #524c49;
}
.custompost-title {
    width: 100%;
    height: auto;
    order: 1;
}
.custompost-thumbnail-wrapper {
    order: 2;
    width: 40%;
    height: 250px;
    padding-right: 10px;
}
.custompost-date {
    height: auto;
    width: 60%;
    order: 3;
	padding: 5px 0 0 5px;
	display: flex;
}
	
	.custompost-date a {
    text-decoration: none;
}
	img.custompost-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
	
h2.entry-title {
    font-size: 25px;
   /* line-height: 20px;*/
    font-weight: bold;
	padding: 8px;
}
.entry-title a {
color: #FFF;
}
.entry-title a:hover {
    color: #ff9898;
}
.custompost-category {
    display: block;
		width: 100%;
}
.custompost-tags {
    display: none;
}
.separate-containers .inside-article {
    padding: 0px;
}

		/* 記事ボックス */



.custompost-comments {
  flex-basis: 25%; /* 25% of the container */
}

.custompost-date-box {
  display: flex;
  flex-direction: column;
  flex-basis: 75%; /* 75% of the container */
}

.custompost-time, .custompost-category {
/*  flex-grow: 1; */
}


}


/*------------------------------------*/
/*コメント欄*/
/*------------------------------------*/

.entry-meta.comment-metadata {
  white-space: normal;
}
.ani-comment-reply {
  display: block;
  font-size: 17px;
  color: #113E93;
}

/*コメント間の設定*/
.comment-list li .comment-body {
 /* padding: 0 0 15px 0;*/
}
.comment-body {
    padding: 0;
}
.comment-content {
    border: none;
}

.entry-meta {
    font-size: 100%;
    line-height: 1.5;
}

.comment-content {
border-bottom: solid 1px #d3d3d3;
padding: 5px 5px 40px 0px;
margin-top: 0;
}

.separate-containers .comments-area {
  padding: 10px 10px;
}

/* 改行の間隔 */
.comment-content p {
  margin-bottom: 1.6em;
}
.comment-content p:first-child {
    margin-top: 0;
}
.comment .children {
    margin-top: 0;
}
/* タブレットなど、画面幅が768px以上の場合 */
@media (min-width: 768px) {
.separate-containers .comments-area {
    padding: 10px 20px;
}
.one-container .site-content {
    padding: 12px;
}
.comment .children {
padding-left: 0px;
margin-left: 0;
}
}

/* 返信 */

.comment-content {
    position: relative;
}

.comment-reply-link:after {
	    content: ''; /* 空のコンテンツ */
    display: inline-block;
    width: 20px;  /* 画像の幅 */
    height: 20px; /* 画像の高さ */
    background-image: url('https://umamusume.net/wp-content/themes/umamusume-theme/assets/icon/reply.png');
    background-size: cover; /* またはcontain */
    background-repeat: no-repeat;
    background-position: center;
}
.comment-reply-link {
    font-size: 0;
}
.comment-reply-link:after {
    font-size: 0;
}
.comment-content {
    position: relative;
}
.comment-content .reply {
    position: absolute;
    bottom: 0;
right: 60px;
}

/* いいね */
.cld-like-dislike-wrap {
    display: initial;
    margin-bottom: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 17px;
}

.cld-like-dislike-wrap .cld-common-wrap {
    margin-right: 0;
}

.cld-common-wrap {
  display: inline-block;
  min-width: 45px;
}


/* 入力フォームの順番入替 */
form#commentform {
    display: flex;
    flex-direction: column;
}
input#author {
    order: 1;
}
.comment-form-comment {
    order: 2;
}
.form-submit {
    order: 3;
}

/* ネスト
.comment .children {
    padding-left: 15px;
}
 */


/* 入力フォームの調整　タブレットなど、画面幅が768px以下の場合 */
@media (max-width: 768px) {
.comment .children {
  padding-left: 0px;
}

.depth-3.parent div#respond.comment-respond{
  margin-left: -15px;
}

.depth-4.parent div#respond.comment-respond,
.depth-5.parent div#respond.comment-respond,
.depth-6.parent div#respond.comment-respond,
.depth-7.parent div#respond.comment-respond,
.depth-8.parent div#respond.comment-respond,
.depth-9.parent div#respond.comment-respond,
.depth-10.parent div#respond.comment-respond {
  margin-left: -30px;
}
	
	
}
/*------------------------------------*/
/*コメント編集中*/
/*------------------------------------*/
/* Flexboxを使用してアイテムを横に並べ、必要に応じて折り返す */
.comment-meta {
    display: flex;
}
.comment-author-info {
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.comment-author-info, .entry-meta.comment-metadata {
  flex: 1 1 auto;
}

.comment-number, .fn, time, .reply {
  margin-right: 2px; /* 各要素間に余白を追加 */
}

ul.children {
    list-style-type: none;
}
a.reply-to-comment {
    text-decoration: none;
}
a.reply-to-comment:hover {
color: #df1b1b;
}
/*------------------------------------*/
/*
.comment-body footer.comment-meta div.comment-author-info {
  display: flex;
}
.comment-author-info {
  display: flex;
  align-items: center;
}
.comment-author-info {
  white-space: nowrap;
  display: inline-block;
}

ol.comment-list {
    list-style-type: decimal;
}

.comment {
  list-style-type: inherit;
}
*/
/*------------------------------------*/
div#comments ol.comment-list {
  padding: 10px;
}


ul.children .depth-2 .comment-body {
    position: relative;
    padding-left: 10px; /* Adjust as needed */
}

.depth-2 .comment-body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  height: 70%;
  width: 5px;
  border-left: 1px solid #d8d8d8;
}

ul.children .depth-3 {
    position: relative;
    padding-left: 15px; /* Adjust as needed */
}

ul.children .depth-4 {
    position: relative;
    padding-left: 15px; /* Adjust as needed */
}

.depth-5,ul.children .depth-6,ul.children .depth-7,ul.children .depth-8,ul.children .depth-9,ul.children .depth-10 {
    position: relative;
    padding-left: 0px; /* Adjust as needed */
}

/* コメント〇件 */
#comments h3.comments-title {
  font-size: 22px;
}

/* 見出し追加に伴う修正 */

.comment-list {
  padding: 10px 10px;
}
.separate-containers .comments-area {
  padding: 0;
}

#comments h3.comments-title {
  font-size: 17px;
  margin-bottom: inherit;
  line-height: initial;
  text-transform: inherit;
  color: #fff;
  font-weight: initial;
  background-color: #333;
  padding: 3px 10px;
}

/* 返信テキスト */
#reply-title {
  font-size: 18px;
  font-weight: initial;
}

h3#reply-title.comment-reply-title {
font-size: 17px;
margin-bottom: inherit;
line-height: initial;
text-transform: inherit;
color: #000;
    font-weight: initial;
    background-color: #fff;
padding: 3px 10px;
}

/* コメントフォーム */
p.comment-form-comment textarea#comment {
  border-color: #a8a8a8;
}
.comment-form-comment {
  margin-bottom: 5px;
  padding: 5px;
}

#commentform.comment-form input#author {
    border-color: #a8a8a8;
    width: 100%; /* Most of the browsers */
    width: -moz-available; /* Mozilla-based browsers */
    width: -webkit-fill-available; /* Chrome and Safari */
    width: fill-available; /* Future-proofing for when this becomes standard */
}

.comment-form #author {
    margin: 5px;
	display: block;
	color: #a8a8a8;
}

#commentform.comment-form p.form-submit {
    margin: 0px 5px;
    padding-top: 10px;
}
#commentform.comment-form p.form-submit input#submit.submit {
    width: 100%; /* Most of the browsers */
    width: -moz-available; /* Mozilla-based browsers */
    width: -webkit-fill-available; /* Chrome and Safari */
    width: fill-available; /* Future-proofing for when this becomes standard */
}

#cancel-comment-reply-link {
  padding-left: 10px;
color: #e00a2c;
}
/*------------------------------------*/
/*コメント全表示*/
/*------------------------------------*/
@media (min-width: 769px) {
    .expand-link,p.more {
        display: none;
    }
}
@media (max-width: 768px) {
    .expand-link {
        float: right;
        color: #fff;
        cursor: pointer;
        display: block;  // 非表示から表示に切り替え
    }
}