@charset "UTF-8";

/* ポートフォリオ　－　手描きイラストページ PC */


/*************************************
基本
*************************************/
.content_title {
    margin: 20px 0 40px 0;
}


/*************************************
イラストページ　共通
*************************************/
#menu_box {
    margin: 0 auto;
}
.menu_inner {
    justify-content: space-between;
}
.menu_inner .flex_items {
    width: 45%;
    margin-bottom: 80px;
}
.menu_inner .flex_items:last-child {
    margin-bottom: 0;
}
.menu_inner .menu_detail {
    width: 100%;
    height: auto;
}
.menu_inner .menu_detail .menu_detail_title {
    color: #ff6023;
    background-color: #fde49b;
}


/*************************************
イラストエッセイ・演劇教室　共通
*************************************/
/* 冒頭のイントロダクション */
.introduction {
    margin-bottom: 20px;
}
.introduction p {
    line-height: 1.4;
    margin-bottom: 14px;
}
/* 冒頭のアドバイス */
.advice {
    width: 78%;
    margin: 10px auto;
    font-size: 0.9rem;
    line-height: 1.3;
    border: 1px solid #ccc;
    color: #164b09;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 40px;
}
.advice p.mb_20 {
    margin-bottom: 20px;
}

#illust_analog_essay .menu_inner,
#illust_analog_flyer .menu_inner {
    flex-wrap: wrap;
}
#illust_analog_essay .menu_inner .flex_items,
#illust_analog_flyer .menu_inner .flex_items {
    display: flex; /* flexボックスにする（横並びの親要素） */
    flex-wrap: wrap; /* はみ出したら折り返す */
    justify-content: space-between; /* 左右に均等に余白を配置 */
    width: 100%; /* 親要素の幅いっぱい */
    margin-bottom: 25px; /* 下側の余白 */
    position: relative; /* 子要素（No.）の基準位置 */
}

#illust_analog_essay .menu_inner .flex_items::after,
#illust_analog_flyer .menu_inner .flex_items::after {
    content:"";
    display: block;
    width: 31%;
}

#illust_analog_essay .menu_detail,
#illust_analog_flyer .menu_detail {
    border: 2px solid #164b09;
    border-radius: 16px;
    box-shadow: none;
    width: 31%;
    overflow: hidden;
    height: auto;
    margin-bottom: 30px;
}

/* 文字部分 */
#illust_analog_essay .menu_detail .menu_detail_title,
#illust_analog_flyer .menu_detail .menu_detail_title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    font-size: 1rem;
    color: #164b09;
    background-color: #fff;
    line-height: 1.3;
    padding: 12px;
}
.caption_text {
    width: 100%;
}
.caption_text li {
    display: block;
    margin-bottom: 5px;
}

.caption_text li:last-child {
    margin-bottom: 0;
}

/* 日付 */
#illust_analog_essay .menu_detail .caption_time,
#illust_analog_flyer .menu_detail .caption_time {
    font-size: 0.875rem;
}

.color_blue {
    color: #2124c5;
}
.color_black {
    color: #0B1F32;
}
.color_green {
    color: #164b09;
}


/*************************************
イラストエッセイ　各記事
*************************************/
.is-hidden {
    display: none !important;
}

#illust_analog_essay .menu_detail {
    position: relative;
    padding-bottom: 14px;
}

/* タイトル */
.caption_text .title {
    font-weight: bold;
}
/* キャプション */
.caption_text .sub_title {
    font-size: 0.9rem;
}

/* No. */
#illust_analog_essay .number {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.9rem;
    line-height: 1;
    background-color: rgba(250, 140, 177, 0.712);
    border-radius: 5px;
    padding: 5px 10px;
    z-index: 10;
}

/* 日付 */
#illust_analog_essay .menu_detail .caption_time {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 0.875rem;
    text-align: right;
}

/* タグ */
#illust_analog_essay .menu_detail .tag {
    display: inline-block;
    font-size: 0.875rem;
    color: #0B1F32;
    background-color: #fab689;
    border-radius: 5px;
    padding: 4px 6px;
    margin-bottom: 10px;
}

/* タグの色 */
/* イラスト・キャラクター */
#illust_analog_essay .menu_detail .tag_イラスト,
#illust_analog_essay .tag_list_group .tag_button .tag_イラスト {
    background-color: #bde998; 
}

/* 家族 */
#illust_analog_essay .menu_detail .tag_家族,
#illust_analog_essay .tag_list_group .tag_button .tag_家族 {
    background-color: #fab689; 
}

/* 料理 */
/* #illust_analog_essay .menu_detail .tag_料理,
#illust_analog_essay .tag_list_group .tag_button .tag_料理 {
    background-color: #b8d3fa; 
} */

/* 健康 */
#illust_analog_essay .menu_detail .tag_健康,
#illust_analog_essay .tag_list_group .tag_button .tag_健康 {
    background-color: #e4b6ff; 
}

/* ゲーム・趣味 */
#illust_analog_essay .menu_detail .tag_ゲーム・趣味,
#illust_analog_essay .tag_list_group .tag_button .tag_ゲーム・趣味 {
    background-color: #f7a9b6; 
}

/* 生活・料理 */
#illust_analog_essay .menu_detail .tag_生活・料理,
#illust_analog_essay .tag_list_group .tag_button .tag_生活・料理 {
    background-color: #fce943; 
}

/* 趣味 */
/* #illust_analog_essay .menu_detail .tag_趣味,
#illust_analog_essay .tag_list_group .tag_button .tag_趣味 {
    background-color: #fd6a6a;
} */

/* 思うこと */
#illust_analog_essay .menu_detail .tag_思うこと,
#illust_analog_essay .tag_list_group .tag_button .tag_思うこと {
    background-color: #7cacf5; 
}

/* その他 */
#illust_analog_essay .menu_detail .tag_その他,
#illust_analog_essay .tag_list_group .tag_button .tag_その他 {
    background-color: #d7b9b9; 
}



/*****************************
タグ別リスト
*****************************/
.tag_list_group {
    width: 100%;
    margin: 0 auto 60px auto;
}
.tag_list_group p {
    color: #2124c5;
    margin-bottom: 10px;
    text-align: center;
}
.tag_list_group .tag_button {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;   
}
.tag_list_group .tag_button .tag_list {
    border: none;
    color: #0B1F32;
    border-radius: 6px;
    padding: 4px 10px;
    margin: 0 10px 10px;
    border: 3px solid;
}
.tag_list_group .tag_button .tag_list:hover {
    cursor: pointer;
}

/* タグの線 */
/* イラスト・キャラクター */
#illust_analog_essay .tag_list_group .tag_button .tag_イラスト {
    border-color: #bde998;
    background-color: #bde998; 
}

/* 家族 */
#illust_analog_essay .tag_list_group .tag_button .tag_家族 {
    border-color: #fab689;
    background-color: #fab689; 
}

/* 料理 */
/* #illust_analog_essay .tag_list_group .tag_button .tag_料理 {
    border-color: #b8d3fa;
    background-color: #b8d3fa; 
} */

/* 健康 */
#illust_analog_essay .tag_list_group .tag_button .tag_健康 {
    border-color: #e4b6ff;
    background-color: #e4b6ff; 
}

/* ゲーム・趣味 */
#illust_analog_essay .tag_list_group .tag_button .tag_ゲーム・趣味 {
    border-color: #f7a9b6;
    background-color: #f7a9b6; 
}

/* 生活・料理 */
#illust_analog_essay .tag_list_group .tag_button .tag_生活・料理 {
    border-color: #fce943;
    background-color: #fce943; 
}

/* 趣味 */
/* #illust_analog_essay .tag_list_group .tag_button .tag_趣味 {
    border-color: #fd6a6a;
    background-color: #fd6a6a;
} */

/* 思うこと */
#illust_analog_essay .tag_list_group .tag_button .tag_思うこと {
    border-color: #7cacf5;
    background-color: #7cacf5; 
}

/* その他 */
#illust_analog_essay .tag_list_group .tag_button .tag_その他 {
    border-color: #d7b9b9;
    background-color: #d7b9b9; 
}

/* すべて */
#illust_analog_essay .tag_list_group .tag_button .all {
    border-color: #ccc;
    background-color: #ccc; 
}


/* クリック後のタグの線 */
/* イラスト・キャラクター */
#illust_analog_essay .tag_list_group .tag_button .tag_イラスト.border_on {
    border-color: #6caf35;
}

/* 家族 */
#illust_analog_essay .tag_list_group .tag_button .tag_家族.border_on {
    border-color: #e9772b;
}

/* 料理 */
/* #illust_analog_essay .tag_list_group .tag_button .tag_料理.border_on {
    border-color: #4f7bbd;
} */

/* 健康 */
#illust_analog_essay .tag_list_group .tag_button .tag_健康.border_on {
    border-color: #a15cc9;
}

/* ゲーム・趣味 */
#illust_analog_essay .tag_list_group .tag_button .tag_ゲーム・趣味.border_on {
    border-color: #fc768c;
}

/* 生活・料理 */
#illust_analog_essay .tag_list_group .tag_button .tag_生活・料理.border_on {
    border-color: #ffac11;
}

/* 趣味 */
/* #illust_analog_essay .tag_list_group .tag_button .tag_趣味.border_on {
    border-color: #e24a4a;
} */

/* 思うこと */
#illust_analog_essay .tag_list_group .tag_button .tag_思うこと.border_on {
    border-color: #2b80ff;
}

/* その他 */
#illust_analog_essay .tag_list_group .tag_button .tag_その他.border_on {
    border-color: #865555;
}

/* すべて */
#illust_analog_essay .tag_list_group .tag_button .all.border_on {
    border-color: #666666;
}