html{ font-size: 16px;}
body{ background: #fff; margin: 0; padding: 0; font-size: 1rem;}
.site-header{ background: #fff; display: flex; position: fixed; justify-content: space-between; width: 100%; height: 2.5rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5); z-index: 50; top: 0;}
.site-logo{ display: flex; align-items: center; justify-content: center; text-decoration: none;}
.site-logo>img{ width: auto; margin: 0 0 0 5%; height: 100%;}
.site-logo>div{ display: flex; flex-flow: column; align-items: center; justify-content: center; height: 100%; width: auto;}
.site-logo>div>p{ margin: 0; font-size: 0.5rem; color: #000; font-weight: blod; text-align: center; animation-name: main; animation-duration: 1s; animation-timing-function: ease; animation-fill-mode: both;}
.site-logo>div>p:nth-child(2) { animation-delay: 1s;}
.site-logo>div>p:nth-child(3) { animation-delay: 2s;}
@keyframes main { 0% { opacity: 0;} 100% { opacity: 1;}}
.header-bottom{ width: 100%; height: 2.5rem; z-index: 30; position: relative;}

.gnav{ margin: 0; padding: 0 0 0 0; height: 100%; display: flex; align-items: center;}
.gnav>ul{ list-style: none; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0;}
.gnav>ul>li{ margin: 0 0 0 0; padding: 0 0; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; height: 100%;}
.gnav>ul>li>a{ color: #333; text-decoration: none; height: 100%; margin: 0; padding: 0 0.5rem; display: flex; align-items: center; justify-content: center; background: #fff; border-left: double 1px rgba(0,0,0,0.3);}
.gnav>ul>li>a:hover { background: #f4f4f4; border-left: double 1px rgba(0,0,0,0.3); transform: translateY(0.3rem);}
.search{ display: flex; height: 100%; align-items: center; justify-content: flex-end; padding: 0;}
.search>button{ height: 100%; border: none; background: transparent; margin: 0;}
.search>button>img{ height: 50%; opacity: 0.5; display: block;}
.search-form{ background: #fff; position: fixed; justify-content: space-around; width: 100%; height: 2.5rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5); z-index: 55; top: 0; display: none;}
.search-active{ display: flex;} .none{ display: none;}
.ar-good{ width: 100%; height: 3rem;}
.ar-good>button{ width: 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 1rem; font-weight: bold; color: #333; height: 3rem; background: #fff; border: solid 1px #aaa; border-bottom: transparent;}
.visited{ background: #f4f4f4 !important;}
.search-form>button{ height: 100%; border: none; background: transparent;}
.search-form>button>img{ height:50%; opacity:0.5; display:block;}
.search-form>form{ display: flex;}
.search-form>form>input{ font-size: 1.25rem; margin: auto 1rem; width: 80%; border: none; outline: none; border-bottom: 2px solid #aaa;}
.search-form>form>button{ height: 100%; border: none; background: transparent;}
.search-form>form>button>img{ height: 50%; opacity: 0.5; display: block;}

.head-img{ background-image: url(data/wa.jpg); height: 10rem; margin-top: 2.5rem; background-size: cover; background-position: center; position: relative; z-index: 40;}
.head-img div{ height: 10rem; width: 75%; background: rgba(255, 255, 255, 0.7); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.head-img p{ color: #000; font-size: 1rem; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap;}
.head-img p span{ font-size:1.25rem; background:linear-gradient(to bottom, rgba(255,255,255,0) 70%, #FFFF00 0%);}


.main-btn{ display: flex; justify-content: space-around; height: 3rem; align-items: center;}
.main-btn>a{ text-decoration: none; font-size: 1rem; font-weight: bold; color: #333; display: inline-block; text-align: center; justify-content: center; width: 20%; height: 3rem; background-color: #fff; border: solid 1px #aaa; border-bottom: transparent;}
.main-btn>a:hover{ transform: translateY(3px); background-color: #f4f4f4;}
.main-ms{ font-size: 1rem; font-weight: bold; margin: 0.5rem;}


.frame2{ display: flex; justify-content: center; align-items: flex-start;}
.frame{ background: #f4f4f4; width: 50%;}
.frame-pc{ background: #f4f4f4; width: 25%;}
@media screen and ( max-width:560px) { .sm{ display: block;} .pc{ display: none;}}
@media screen and ( min-width:560px) { .sm{ display: none;} .pc{ display: block;}}
.main-frame{ height: auto; margin: 0.5rem 0.25rem; padding: 0 0; background: #fff; border-radius: 40px; box-shadow: 0 0 1px 1px rgba(0,0,0,0.5);}
.main-frame:hover { box-shadow: 0 0 1px 1px rgba(0,0,0,0.5); transform: translateY(3px);}
.main-view{ text-decoration: none; margin: 0 0; padding: 0; width: 100%; height: auto; border-radius: 40px 40px 0 0; display: block; text-align: center;}
.main-title{ padding: 0.25rem 2.25rem 0 2.25rem; margin: 0 0 0.25rem 0; font-weight: bold; text-align: center; font-size: 1rem; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: auto;}
.main-body{ padding: 0.25rem 0.25rem 0 0.25rem; margin: 0; text-align: center; font-size: 1rem; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; overflow: hidden; height: auto;}
.main-iframe{ width: 98%; aspect-ratio: 16/9; border-radius: 0.5rem;}
.main-mp4{ width: 98%; height: auto; border-radius: 0.5rem; box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);}
.main-jpg{ width: 98%; height: auto; border-radius: 0.5rem; box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);}
.main-frame>div{ display: flex; justify-content: flex-end; width:100%;}
.good , .nogood{ -webkit-appearance: none; -moz-appearance: none; appearance: none; z-index: 45; width: auto; height: 1.25rem; background: transparent; font-size: 1rem; border: none; padding: 0; margin: 0.125rem 0 0.125rem 0; white-space: nowrap;}
.good{ color: rgba(255,0,0,0.7); } .nogood{ color: #777; }
.good>p , .nogood>p{ display: inline; white-space: nowrap;}
.good-visited , .nogood-visited{ }
.gd-ct{ display: flex; justify-content: flex-end; width: 90%; margin:0 auto;}
.caution{ -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background: transparent; z-index: 45; width: 0.875rem; height: 1.25rem; padding: 0; margin: 0.2rem 0 0 0.5rem;}
.caution>img{ height: 0.875rem; width: 0.875rem; opacity: 0.5; display: block;}
.main-ac{ text-decoration: none; height: 2.5rem; border-radius: 0 0 40px 40px; display: flex; align-items: center; justify-content: center; background: #f4f4f4; box-shadow: 0 0 0 0.5px gray; padding: 0 2rem;}
.main-ac>img{ width:  2rem; height: 2rem; border-radius: 50%; margin: 0 0.25rem 0 0; box-shadow: 0 0 0 0.5px gray;}
.main-ac>p{ color: #000; font-size: 1rem; display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: 2; overflow: hidden;}


.account-img{ width:  2rem; height: 2rem; border-radius: 50%; margin: 0 0.25rem 0 0; box-shadow: 0 0 0 0.5px gray;}
.account-name{ display: flex; align-items: center; justify-content: center;}
.account-name>p>a{ color: #000; text-decoration: none;}
.account-articles{ width: 100%; height: 1.5rem; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: space-between; position: relative;}
.bkgr-f4{ background: #f4f4f4;} .bkgr-fff{ background: #fff;}
.account-articles>a{ color:#000; text-decoration:none !important;}
.account-articles-p{ font-size: 0.75rem; font-weight: bold; padding: 0 1rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.ac-good{ text-decoration: none; font-weight: blod; display: inline-block; text-align: center; font-size: 0.75rem; color: #000; padding: 0.25rem 0.25rem; width: fit-content; height: fit-content; background-color: #f4f4f4; border-radius: 7px; border: 1px solid #000;}

.nav_content{ width: 4rem; height: 1.5rem; z-index: 49; background-color: #f4f4f4;}
.nav_content>ul{ list-style: none; width: 4rem; height: 1.5rem; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;}
.nav_content>ul>li{ font-size: 0.75rem; width: 2rem; height: 1.5rem;}
.nav_content>ul>li>a{ box-shadow: 0 0 0 0.5px rgba(0,0,0,0.5); color: #000; font-weight: bold; text-decoration: none; width: 2rem; height: 1.5rem; display: flex; align-items: center; justify-content: center;}
.nav_content>ul>li>a:hover{ background-color: #333; color: #fff;}
.delete{ font-size: 1rem; text-decoration: none; color: #000;}


form{ width: 100%; text-align: center;}
.form-label{ text-align: center; font-weight: bold; width: 100%; font-size: 1rem; margin: 0.5rem 0; display: inline-block;}
.write-title{ font-size: 1rem; margin: auto 1rem; width:90%; text-align: center;}
.write-title:disabled{ color: #000; background: #fff;}
.write-title:disabled::value{ color: #000;}
.write-ps{ font-size: 1rem; width:85%;}
.ps-hidden{ -webkit-text-security:disc;}
.ps-button{ font-size: 0.75rem; width:15%; padding: 0.125rem 0;}
.ps{ margin: auto auto; width:90%; display:flex; justify-content: center; align-items: center;}
.write-body{ font-size: 1rem; margin: auto 1rem; width: 90%; height: 20rem; text-align: center;}
.write-body:disabled{ color: #000; background: #fff;}
.write-button{ font-size: 0.875rem; font-weight: bold; color: #000; margin: 0.25rem 0; width: 4rem; height: 1.5rem; display: inline-block; text-align: center; background-color: #f4f4f4; border-radius: 3px; border: 1px solid #777;}
.write-button:hover{ transform: translateY(3px);}
.form-file{font-size: 0.875rem; font-weight: bold; color: #fff; background-color: #777; cursor: pointer; border-radius: 3px; border: 1px solid #777; padding: 0.25rem 0.5rem; margin: 0 0 1rem 0;}
.none{display: none;}
.view-iframe{ width: 90%; aspect-ratio: 16 / 9;}
.view-mp4{ width: 90%; height: auto;}
.view-jpg{ width: 90%; height: auto;}
#preview>img{ width: 90%; margin: 10px;}
#preview>video{ width: 90%; margin: 10px;}

.comment-label{ text-align: center; font-weight: bold; width: 100%; font-size: 0.75rem; margin: 0.5rem 0; display: inline-block;}
.comment-body{ font-size: 0.75rem; margin: auto 1rem; width: 90%; height: 5rem;}
.articles-comments{ width: 100%; height: auto; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.5); background: #f4f4f4; display: flex; align-items: center; justify-content: space-between; position: relative;}
.articles-comments-p{ font-size: 0.75rem; padding: 0.5rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;}
.articles-comments-p>span{ font-weight: bold;}
.nav_comments{ width: 1.5rem; height: 3rem; position: absolute; left: 90%; z-index: 49; transition: .3s; background-color: #f4f4f4;}
.nav_comments>ul{ list-style: none; width: 1.5rem; height: 3rem; margin: 0; padding: 0;}
.nav_comments>ul>li{ font-size: 0.75rem; width: 1.5rem; height: 3rem; display: flex; align-items: center; justify-content: center;}
.nav_comments>ul>li>a{ box-shadow: 0 0 0 0.5px rgba(0,0,0,0.5); color: #000; font-weight: bold; text-decoration: none; width: 1.5rem; height: 3rem; display: flex; align-items: center; justify-content: center;}
.nav_comments>ul>li>a:hover{ background-color: #333; color: #fff;}

.site-footer2 { background: #fff; height: 2rem;}
.site-footer { background: #333; padding: 1rem 0;}
.copyright { color: #fff; font-size: 1rem; text-align: center;}