/* 恥ずかしいから見ないでネ */

*{margin:0;padding:0;}
@font-face{
    /*
    やさしさゴシック (YasashisaGothic)
    Download: http://www.fontna.com/blog/379/
    License: SIL Open Font License, IPAフォントライセンス v1.0
    Note: この派生フォントをIPAフォントに戻す場合、「https://moji.or.jp/ipafont/ipa00303/」より「ipag00303.zip」をダウンロード・システムにインストールし、ブラウザ上で優先フォントをIPAゴシックに変更してください。
    */
    font-family:YasaC;
    font-style:normal;
    src:url(fonts/yasac.woff2) format("woff2"),
        url(fonts/yasac.woff) format("woff")
}
body{
    font-family: YasaC;
    background-color: bisque;
    color: #444;
}
main{
    display: flex;
    flex-direction: column;
    align-items: center;
}
hr{
    width: 85%;
    border:0;
    border-top: dashed 3px #777;
    margin:15px auto;
}
hr:before{
    font-family: 'Font Awesome 6 Free';
    font-weight: 501;
    content:"\f0c4";
    position: absolute;
    margin-top: -10px;
    margin-left: -1em;
    color: #777;
}
h1{
    background-color: cornsilk;
}
h2{
    background-color:sandybrown;
}
h1,h2{
    border-radius: 10px;
    padding:0.5em 1em;
}
h1,h2,p{
    margin:0.5em 0.5em;
    text-align: center;
}
h1,h2,p,li,.conf_center{
    transform: rotate(0.03deg);
}
ul{
    padding:0 2em;
}
input[type="text"]{
    border-radius:5px;
}
input[type="submit"],
input[type="button"]{
    appearance: none;
    box-sizing: content-box;
    -webkit-appearance: none;
    -webkit-box-sizing: content-box;
    background-color: white;
    color:#444;
    border-radius:5px;
    border:1px solid #444;
    cursor: pointer;
}

#modal{
    background-color:rgba(0,0,0,0.7);
    position: fixed;
    top:-7%;
    left:-7%;
    right:-7%;
    bottom:-7%;
    display:none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
}
#modalInsideWrap{
    background-color:white;
    margin:10%;
    padding:3vh;
    border-radius: 10px;
    position: relative;
    cursor:default;
    text-align: center;
    min-width: 0;
    min-height: 0;
}
#modalInside{
    width:100%;
    height:100%; /* 可変 */
}
#modalInside > p,#modalTweetButton,#modalPublishButton,#modalButterflyPublishButton{
    font-size:small;
    max-width:fit-content;
}
#modalInside > a > img{
    width:100%;
    height:100%;
}
#modalClose{
    position: absolute;
    font-size:34px;
    width:30px;
    height:30px;
    border-radius:17px;
    background-color: #444;
    color:white;
    top:-0.5em;
    right:-0.5em;
    cursor: pointer;
}
#modalClose i{
    vertical-align: top;
    margin-top:-2px;
    margin-left:-2px;
}
#modalPassMsg{
    width: 100%;
    max-width: 300px !important;
}
#modalPass{
    height: 30px;
    padding:0 5px;
    border:1px solid #444;
}
#modalPassBtn,#r18CheckBtn{
    height:30px;
    padding:0 10px;
    background-color: #1b95e0;
    color:white;
    margin-left:5px;
}
#contents{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#shareButton{
    display:flex;
}
#shareButton > div{
    margin:0 1em;
}
#modalShareButton{
    width:100%;
    text-align: left;
}
#tweetButton a,#modalTweetButton a,#publishButton a,#modalPublishButton a,#butterflyPublishButton a,#modalButterflyPublishButton a{
    background-color: #000;
    text-decoration:none;
    display:inline-block;
    color:white;
    padding:0.25em 0.5em;
    border-radius:5px;
    cursor:pointer;
    font-size: 90%;
}
#modalTweetButton,#modalPublishButton,#modalButterflyPublishButton{
    display:inline-block;
}
#tweetButton a img,#modalTweetButton a img,#publishButton a img,#modalPublishButton a img,#butterflyPublishButton a img,#modalButterflyPublishButton a img{
    height:1.2em;
    width:auto;
    filter:invert(1);
    vertical-align: middle;
}
#publishButton a,#modalPublishButton a{
    background-color: #6364FF;
}
#butterflyPublishButton a,#modalButterflyPublishButton a{
    background-color: #0085ff;
}
#publishButton a img,#modalPublishButton a img{
    filter:none;
}


.gallery{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
.thumb{
    padding:15px;
    display:inline-block;
}
.thumbImg{
    width: 300px;
    height:300px;
    object-fit: cover;
    border:2px #444;
    border-style: dashed;
    border-radius:10px;
    cursor: pointer;
}
.conf_center{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    align-content: center;
}
.man{
    border: 1px solid #444;
    margin: 1em;
    display: inline-block;
    padding: 0.5em;
}
.more_pyuru{
    background-color: lightcoral;
    padding: 1em 3em;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    text-underline-offset: 2px;
    text-decoration: underline
}
.notice{
    font-weight:bold;
    color:salmon;
}
.warn{
    border: 3px solid #e88;
    padding: 0.5em 1em;
    border-radius: 10px;
    background-color: #FEC;
}
.info{
    border: 3px solid #68F;
    padding: 0.5em 1em;
    border-radius: 10px;
    background-color: #DEF;
}
.tips{
    border: 3px solid #6C8;
    padding: 0.5em 1em;
    border-radius: 10px;
    background-color: #DFE;
}
.link{
    list-style: none;
    display: inline-flex;
    padding:0;
    flex-wrap: wrap;
    justify-content: center;
}
.link li{
    margin:0.5em;
}
.link > li > a{
    color:#444;
    text-decoration: underline;
    font-size: 120%;
    padding: 1em 2em;
    border-radius: 10px;
    background-color: gold;
    display:inline-block;
}
.link.icons > li > a{
    font-size:3em;
    padding:0;
    display:flex;
    width:2em;
    height:2em;
    justify-content: center;
    align-items: center;
    border-radius:1em;
}
.link.icons > li > a > i:before{
    display: inline-block;
}
.link > li > a > img{
    width: auto;
    height: 1em;
    filter: invert(18%) sepia(7%) saturate(19%) hue-rotate(57deg) brightness(107%) contrast(75%);
}
.external:after{
    font-family: 'Font Awesome 6 Free';
    font-weight: 501;
    content:"\f08e";
    text-decoration: none;
    font-size:75%;
    display: inline-block;
    padding-left:0.2em;
}
.profile{
    background-color: lemonchiffon;
    text-align:center;
    padding-top:1em;
    border-radius:15px;
    margin:0 1em;
}
.profile > img{
    max-width:150px;
    border-radius:10px;
}
.profile > div{
    margin:0.5em 4vw;
    padding: 0.5em;
    background-color:khaki;
    border-radius:15px;
}