@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
/*   
  font-family: "Crimson Text", serif;
  font-weight: 600;
  font-style: italic; 
*/

/* list.php  */

.List_Header{width:100%;padding:20px;}
.List_Header>h1{text-align:center;font-weight:700;color:#1a1a1a;font-size:3em;}

.list_button {width:100%;height:50px;padding:10px 0 10px 26px;display:flex;justify-content: flex-start;align-items: center;}
.list_button span {display:inline-block;width:20px;height:30px;margin-right:10px;line-height:30px;text-align: center;}


.His_Bg{width:100%;padding:7% 10%;background: url(../../../img/His_Bg.jpg) no-repeat center center;background-attachment : fixed;
-webkit-background-size: cover;
background-size: cover;}
.His_Bg>h1{color:#fff;font-size:5em;font-weight:700;text-align:center;;padding:10px;text-shadow:1px 1px 3px #0a0a0a}
.His_Bg>h3{text-align:center;padding:10px;color:#fff;font-weight:500;;line-height:1.55}

.sort-btn {color: #333;font-size:0.85rem;}
.sort-btn.active {color:#FF0000;}

.samo_list {width:100%;padding:10px 50px;}
.samo_list li {width:100%;padding:0 10px;}
.samo_list li:nth-child(odd) {display:flex;justify-content: space-between;align-items: flex-start;}
.samo_list li:nth-child(even) {display:flex;flex-direction: row-reverse;justify-content:space-between;align-items: flex-start;}
.samo_list li:nth-child(even) .listbox01 {padding-left:20px;}
.samo_list li:nth-child(odd) .listbox01 {text-align: right; padding-right:40px;}
.samo_list li:nth-child(even) .listbox03 {border-right:1px solid #ddd;padding-right:40px; text-align:right;position:relative;}
.samo_list li:nth-child(odd) .listbox03 {border-left:1px solid #ddd;padding-left:40px;margin-right:1px;position:relative;}
.samo_list li .listbox03 span {font-size:20px;position:absolute;}
.samo_list li:nth-child(even) .listbox03 span {top:20px; right:-11px;}
.samo_list li:nth-child(odd) .listbox03 span {top:20px; left:-11px;}

.listbox01 {width:50%;padding-top:0px;padding-bottom:0px;}
.listbox01 span {display:none;}
.listbox02 {width:25%;overflow:hidden;display:none !important}
.listbox03 {width:50%;min-height:210px;padding-top: 13px;  padding-bottom: 20px;}
.listbox03 p:nth-child(odd) {padding:0px;font-weight:700;font-size:0.85rem;}
.listbox03 p:nth-child(even) {padding:0;font-size:17px;color:#5a5a5a;line-height: 1.5;}
.listbox01 span.date_wr {display:inline-block; font-size:3rem;font-weight:600;;color:#222}


.listbox03>article{display:flex;display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;padding-bottom:20px}

.listbox03>article>b{width:60px;font-size:25px;font-weight: 400;}
.listbox03>article>p{font-size:17px;width:calc(100% - 80px);}


.samo_list li:nth-child(2n) .listbox03  article{flex-direction: row-reverse !important}

.listbox01 span.subject_wr {display:block;font-size:0.95rem;font-weight:500; color:#4d4c4c}
.listbox02 .thumbs {width:100%;height:100%;object-fit:cover;}
.listbox02 .tube {width:30px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.listbox02 .no_img {border:1px solid #f1f1f1;}

/* view.skin.php */
.view_content {width:100%;height:auto; margin:15px 0 50px 0;padding:12px;font-size:0.85rem;line-height:2;background-color: #f1f1f1;border-radius:10px;}
.images_box {display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:minmax(150px, auto);grid-gap:10px;margin-bottom:30px;}
.img_container {position:relative;overflow: hidden;display:flex;align-items: flex-end;background:#F4F4F4;}
.img_file {width: 100%;height: auto;object-fit:cover;}
.file_text {position:absolute;right:0;bottom:0;width:100%;height:40px;background:rgba(0, 0, 0, .8);padding-left:8px;color:#FFF;line-height:40px;}
.file_text::before {content:"•";padding:0 5px;}
.tag-item {display: inline-block;background-color: #f1f1f1;color: #333;padding: 2px 6px;border-radius: 5px;font-size: 0.75rem;margin: 3px;}
.tag-item::before {content:"#";padding:0 3px;}

/* write.skin.php */
.v_container169 {width:100%;height:auto;position:relative;margin-bottom:56.25%;}
.v_container169 video {width:100%;height:auto;position:absolute;left:0;top:0;object-fit:contain;}
.video_container43 {width:100%;height:auto;position:relative;margin-bottom:75%;}
.video_container43 video {width:100%;height:auto;position:absolute;left:0;top:0;object-fit:contain;}

.date_ul {display:flex;justify-content:flex-start;align-items: center;margin-top:20px;}
.date_ul li {padding:5px}

.youtube_id {margin-bottom:10px;}
.youtube_id p {padding:5px;margin-bottom:4px;}
.youtube_con {width:100%;margin-bottom:30px;}
textarea.sm_text {width:100%;background-color: #f2f2f2;border-radius:10px;border:1px solid rgb(152, 203, 252);padding:10px;}

.write_cate {width:100%;border:1px solid #CCC;border-radius:6px;padding:20px;position:relative;}
.write_cate div {position:absolute;top:-12px;left:30px;padding:5px 10px;background-color:#FFF;}

.info_input {padding:12px 18px; border:1px solid #DDD;background:#f2f2f2;color:#000;vertical-align:middle;border-radius:3px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    }






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

.His_Bg{width:100%;padding:4% 5%;background: url(../../../img/His_Bg.jpg) no-repeat center center;background-attachment : fixed;
-webkit-background-size: cover;
background-size: cover;}
.His_Bg>h1{color:#fff;font-size:3em;font-weight:700;text-align:center;;padding:10px;text-shadow:1px 1px 3px #0a0a0a}
.His_Bg>h3{text-align:center;padding:10px;color:#fff;font-weight:500;;line-height:1.55;font-size:14px}


    .samo_list {padding:10px 0 0 10px;}
    .samo_list li:nth-child(odd) {flex-direction:column;padding-left:10px}
    .samo_list li:nth-child(even) {flex-direction:column; padding-left:10px;} 
    .samo_list li .listbox01 {order:1;}
    .samo_list li .listbox02 {order:3;}
    .samo_list li .listbox03 {order:2;}
    .samo_list li div {border-left:1px solid #292929;}
    .samo_list li:nth-child(odd) .listbox01 {text-align: left; padding-left:20px;padding-right:0;}
    .samo_list li:nth-child(even) .listbox03 {border-right:none;padding-left:20px;padding-right:0; text-align:left;position:relative;}
    .samo_list li:nth-child(odd) .listbox03 {border-left:none;padding-left:20px;margin-right:0;position:relative;}
    .samo_list li .listbox03 span {display:none;}
    .listbox01 {width:100%;padding-top:10px;padding-bottom:5px;position:relative;}
    .listbox01 span.circle {display:block;position:absolute;left:-8px;top:20px;font-size:14px;}
    .listbox02 {width:80%;overflow:hidden;padding-bottom:30px;padding-left:10px;}
    .listbox03 {width:100%;min-height:80px;padding-top:10px;}
    .samo_list li:nth-child(odd) .listbox03 {border-left:1px solid #292929;}

    .listbox03 p:nth-child(odd) {padding:5px;font-weight:700;font-size:0.85rem;}
    .listbox03 p:nth-child(even) {padding:0px;font-size:0.85rem;color:#4d4c4c}
    .listbox01 span.date_wr {display:inline-block;font-size:2rem;font-weight:600;}
    .listbox01 span.subject_wr {display:block;font-size:0.95rem;font-weight:500; color:#4d4c4c}
    .listbox02 .thumbs {width:100%;height:100%;object-fit:cover;}
    /* .listbox02 .tube {width:30px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} */
    .listbox02 .no_img {border:1px solid #f1f1f1;}

.listbox03 > article > b {
  width: 60px;
  font-size: 20px;

}


.samo_list li:nth-child(2n) .listbox03 article {
  flex-direction: row !important;
}


}