/* CSS for SP  */
/* font */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,600&subset=japanese');
@import url('https://fonts.googleapis.com/css2?family=Crete+Round:ital@1&display=swap');
body,input,button,select,textarea{-webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; line-height:1.75; color:#111; font-family:'Noto Sans JP', sans-serif; font-size:16px; font-weight:400;}
input::placeholder,
textarea::placeholder{color:#c8c8c8;}

/* init */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form, label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,summary,time,mark,audio,video,a,input,textarea{ margin:0;padding:0; border:0; font-size:100%; background:transparent; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{ display:block;}
ul li{list-style:none;}
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{ content:''; content:none;}
pre,code,kbd,samp{ font-family:monospace,monospace; font-size:inherit;}
table{ border-collapse:collapse; border-spacing:0;}
img{ border:0;}
address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:normal;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal}
sup{ vertical-align:text-top; font-size:75%;}
sub{ vertical-align:text-bottom; font-size:75%;}
input,textarea,select{ z-index:auto; font-family:inherit; font-size:inherit; font-weight:inherit; vertical-align:middle;}
a{outline:none;}
audio:not([controls]){ display:none;}
time{ display:inline;}
[hidden]{ display:none;}
input::-ms-clear,input::-ms-reveal,input:focus::-ms-clear,input:focus::-ms-reveal{visibility:hidden; display:none;}
button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{ padding:0; border:0;}
button,
input[type=submit],
input[type=button],
input[type=reset]{cursor:pointer;}
small{font-size:85%;}
b,i,em{font-weight:normal; font-style:normal;}

/* mobile setting */
img{max-width:100%; height:auto;}
iframe,
object,
embed{max-width:100%; height:auto; min-height:calc((100vw - 30px) * 0.5625);}


/* header */
#site-header{position:relative;}
#func-navi{border-bottom:1px #ccc solid; height:50px;}
#func-navi .content{}
#func-navi ul.func-navi {display:flex; justify-content:flex-end; align-items:center; padding:5px; margin-right:40px;}
body.Photo #func-navi ul.func-navi,
body.Illust #func-navi ul.func-navi{margin-right:0;}
#func-navi ul.func-navi li{width:40px; height:40px;}
#func-navi ul.func-navi li:first-child{display:none;}
#func-navi ul.func-navi li a{width:100%; height:100%; display:flex; justify-content:center; align-items:center; overflow:hidden; background-repeat:no-repeat; background-position:center; background-size:28px;}
#func-navi ul.func-navi li a img{display:none;}
#func-navi ul.func-navi li:nth-child(2) a{background-image:url("/common/images/icn_tw.png");}
#func-navi ul.func-navi li:nth-child(3) a{background-image:url("/common/images/icn_fb.png");}
#site-header h1{position:absolute; left:15px; top:0; background:url(/common/images/logo_sp.png) no-repeat left center; background-size:contain; text-indent:-9999px; width:150px; height:50px;}
#main-visual{margin:10px 0; height:21.333vw; overflow-y:hidden;}
#global-navi{background:#f5f5f5;}
#global-navi .navi ul{display:flex; justify-content:space-between;}
#global-navi .navi ul li{flex:1;}
#global-navi .navi ul li a{display:block; overflow:hidden; position:relative; font-family:'Crete Round', serif; text-align:center; font-size:16px; color:#000; text-decoration:none; padding:5px; border-bottom:2px #000 solid;}
#global-navi .navi ul li a img{display:none;}
#global-navi .navi ul li:nth-child(1) a::before{content:'Photo';}
#global-navi .navi ul li:nth-child(2) a::before{content:'Journal';}
#global-navi .navi ul li:nth-child(3) a::before{content:'Illustration';}

body.Black #global-navi .navi ul li:nth-child(2) a,
body.Photo #global-navi .navi ul li:nth-child(1) a,
body.Illust #global-navi .navi ul li:nth-child(3) a{background:#c4d2e2;} 

/* body part */
#body{padding:30px 15px; word-break:break-all;}
.main a{color:#369;}
.main .entry{margin-bottom:20px; padding-bottom:20px; border-bottom:1px #ccc solid; font-size:16px; line-height:1.75; clear:both;}
.main .entry::after{content:''; display:block; clear:both;}
.main .entry h2{font-size:18px; font-weight:bold;}
.main .entry h2 a{color:#000; text-decoration:none;}
.main .entry h2 span{background:#c4d2e2;}
.main .entry .entry-date{font-size:12px; margin-bottom:10px; padding-bottom:5px; border-bottom:1px #ddd dotted;}
.main .entry .entry-body{margin-bottom:10px;}
.main .entry .entry-body p{margin-bottom:1em;}
.main .entry .entry-body span{font-size:16px !important;}
.main .entry .entry-body ol,
.main .entry .entry-body ul{margin-left:1.5em;}
.main .entry .entry-category{padding:5px 15px; text-align:right; font-size:12px; background:#f5f5f5; border-radius:20px; clear: both;}
.main .entry ul.entry-sns{padding:10px 0; display:flex; justify-content:flex-start; margin-left:0; clear: both;}
.main .entry ul.entry-sns li{height:20px; overflow-y:hidden;}
#body .photo-entry{max-width:100%; margin-bottom:20px; padding-bottom:20px; border-bottom:1px #ccc solid; font-size:16px; line-height:1.75;}
#body .photo-entry .photo-entry-title{font-size:18px; font-weight:bold;}
#body .photo-entry .photo-entry-title span{background:#c4d2e2;}
#body .photo-entry .photo-entry-date{font-size:12px; margin-bottom:10px;}


/* sub part */
.sub{position:fixed; width:100%; height:0; left:0; top:0;}
.sub .toggle{width:40px; height:40px; position:fixed; right:5px; top:5px; z-index:2;}
.sub .toggle a{display:block; width:100%; height:100%; text-indent:-9999px; overflow:hidden; background:url("/common/images/icn_menu.png") no-repeat center; background-size:30px;}
.sub .toggle a.open{background-image:url("/common/images/icn_menu_close.png");}
#menu{background:#fff; position:fixed; left:0; top:0; width:100%; height:100vh; overflow:auto; padding:50px 0; z-index:1; display:none;}
.sub h2{padding:10px 40px 10px 15px; background:#c4d2e2; position:relative; cursor:pointer; text-align:center;}
.sub h2::after{content:''; width:12px; height:12px; border:#000 solid; border-width:0 2px 2px 0; display:block; position:absolute; right:15px; top:calc(50% - 12px); transform:rotate(45deg);}
.sub h2.open::after{transform:rotate(-135deg); top:calc(50% - 6px);}
.sub h2::before{font-family:'Crete Round', serif; font-size:20px;}
.sub h2 img{display:none;}
.sub .categories{border-bottom:1px #fff solid;}
.sub .categories h2::before{content:'Categories';}
.sub .archives h2::before{content:'Archives';}
.sub .archives p a{display:block; padding:15px; text-align:center; text-decoration:none; font-weight:bold; color:#000;}
.sub .archives p a::before{content:'Archivesの';}
.sub ul li{border-bottom:1px #ccc solid; padding:5px; position:relative; font-size:14px;}
.sub ul li::after{content:''; width:10px; height:10px; border:#000 solid; border-width:0 1px 1px 0; display:block; position:absolute; right:20px; top:calc(50% - 8px); transform:rotate(-45deg);}
.sub ul li a{display:inline-block; padding:4px 0 4px 10px; text-decoration:none; color:#000;}
.sub .categories ul,
.sub .archives ul,
.sub .archives ul + p{display:none;}

/* footer */
#footer{background:#000; color:#fff; padding:15px 15px 40px; text-align:center; position:relative;}
#footer ul.sns{display:flex; justify-content:center;}
#footer ul.sns li{height:20px; overflow-y:hidden;}
#footer .copyright{position:absolute; left:0; bottom:10px; width:100%;}
#footer .return-navi{width:40px; height:40px; position:fixed; right:15px; bottom:20px;}
#footer .return-navi a{width:100%; height:100%; background:url("/common/images/icn_up.png") no-repeat center; background-size:cover; display:block;}
#footer .return-navi a img{display:none;}



/* archive */
#body div.archives{}
#body div.archives h2{text-align:center;}
#body div.archives ul{border-top:1px #ccc solid;}
#body div.archives ul li{border-bottom:1px #ccc solid; padding:6px 15px; position:relative; font-size:14px;}
#body div.archives ul li a{text-decoration:none; color:#000;}
#body div.archives ul li::after{content:''; width:10px; height:10px; border:#000 solid; border-width:0 1px 1px 0; display:block; position:absolute; right:20px; top:calc(50% - 6px); transform:rotate(-45deg);}