@charset "utf-8";
/*
Theme Name:StoryVouceBlog
Theme URI:https://hk.storyvoice.net/
Description:StoryVouceBlog from Mitsuo Nakaya @Refuro
Version:1.0
Author:Mitsuo Nakaya @Refuro
Author URI:https://refuro.life/
*/
/*** The new CSS Reset - version 1.3.1 (last updated 28.10.2021) ***/
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}ol, ul{list-style:none}img{max-width:100%}table{border-collapse:collapse}textarea{white-space:revert}
.container{position:relative;width:100%;max-width:1366px;margin:0 auto;padding-left:10px;padding-right:10px}@media (min-width:768px){.container{width:90%}}@media (min-width:1921px){.container{max-width:1800px}}.row{margin-left:-10px;margin-right:-10px;position:relative}.row.float [class*=column-]{float:left}.row.float:after{display:block;clear:both;content:""}.lg-1,.lg-2,.lg-3,.lg-4,.lg-5,.lg-6,.lg-7,.lg-8,.lg-9,.lg-10,.lg-11,.lg-12,.md-1,.md-2,.md-3,.md-4,.md-5,.md-6,.md-7,.md-8,.md-9,.md-10,.md-11,.md-12,.row[class*=columns-] .column,.sm-1,.sm-2,.sm-3,.sm-4,.sm-5,.sm-6,.sm-7,.sm-8,.sm-9,.sm-10,.sm-11,.sm-12,.xl-1,.xl-2,.xl-3,.xl-4,.xl-5,.xl-6,.xl-7,.xl-8,.xl-9,.xl-10,.xl-11,.xl-12,.xs-1,.xs-2,.xs-3,.xs-4,.xs-5,.xs-6,.xs-7,.xs-8,.xs-9,.xs-10,.xs-11,.xs-12{position:relative;width:100%;padding-left:10px;padding-right:10px}.xs-1{max-width:8.33333%;flex:0 0 8.33333%}.xs-2{max-width:16.66667%;flex:0 0 16.66667%}.xs-3{max-width:25%;flex:0 0 25%}.xs-4{max-width:33.33333%;flex:0 0 33.33333%}.xs-5{max-width:41.66667%;flex:0 0 41.66667%}.xs-6{max-width:50%;flex:0 0 50%}.xs-7{max-width:58.33333%;flex:0 0 58.33333%}.xs-8{max-width:66.66667%;flex:0 0 66.66667%}.xs-9{max-width:75%;flex:0 0 75%}.xs-10{max-width:83.33333%;flex:0 0 83.33333%}.xs-11{max-width:91.66667%;flex:0 0 91.66667%}.xs-12{max-width:100%;flex:0 0 100%}@media (min-width:768px){.sm-1{max-width:8.33333%;flex:0 0 8.33333%}.sm-2{max-width:16.66667%;flex:0 0 16.66667%}.sm-3{max-width:25%;flex:0 0 25%}.sm-4{max-width:33.33333%;flex:0 0 33.33333%}.sm-5{max-width:41.66667%;flex:0 0 41.66667%}.sm-6{max-width:50%;flex:0 0 50%}.sm-7{max-width:58.33333%;flex:0 0 58.33333%}.sm-8{max-width:66.66667%;flex:0 0 66.66667%}.sm-9{max-width:75%;flex:0 0 75%}.sm-10{max-width:83.33333%;flex:0 0 83.33333%}.sm-11{max-width:91.66667%;flex:0 0 91.66667%}.sm-12{max-width:100%;flex:0 0 100%}}@media (min-width:1024px){.md-1{max-width:8.33333%;flex:0 0 8.33333%}.md-2{max-width:16.66667%;flex:0 0 16.66667%}.md-3{max-width:25%;flex:0 0 25%}.md-4{max-width:33.33333%;flex:0 0 33.33333%}.md-5{max-width:41.66667%;flex:0 0 41.66667%}.md-6{max-width:50%;flex:0 0 50%}.md-7{max-width:58.33333%;flex:0 0 58.33333%}.md-8{max-width:66.66667%;flex:0 0 66.66667%}.md-9{max-width:75%;flex:0 0 75%}.md-10{max-width:83.33333%;flex:0 0 83.33333%}.md-11{max-width:91.66667%;flex:0 0 91.66667%}.md-12{max-width:100%;flex:0 0 100%}}@media (min-width:1279px){.lg-1{max-width:8.33333%;flex:0 0 8.33333%}.lg-2{max-width:16.66667%;flex:0 0 16.66667%}.lg-3{max-width:25%;flex:0 0 25%}.lg-4{max-width:33.33333%;flex:0 0 33.33333%}.lg-5{max-width:41.66667%;flex:0 0 41.66667%}.lg-6{max-width:50%;flex:0 0 50%}.lg-7{max-width:58.33333%;flex:0 0 58.33333%}.lg-8{max-width:66.66667%;flex:0 0 66.66667%}.lg-9{max-width:75%;flex:0 0 75%}.lg-10{max-width:83.33333%;flex:0 0 83.33333%}.lg-11{max-width:91.66667%;flex:0 0 91.66667%}.lg-12{max-width:100%;flex:0 0 100%}}@media (min-width:1366px){.xl-1{max-width:8.33333%;flex:0 0 8.33333%}.xl-2{max-width:16.66667%;flex:0 0 16.66667%}.xl-3{max-width:25%;flex:0 0 25%}.xl-4{max-width:33.33333%;flex:0 0 33.33333%}.xl-5{max-width:41.66667%;flex:0 0 41.66667%}.xl-6{max-width:50%;flex:0 0 50%}.xl-7{max-width:58.33333%;flex:0 0 58.33333%}.xl-8{max-width:66.66667%;flex:0 0 66.66667%}.xl-9{max-width:75%;flex:0 0 75%}.xl-10{max-width:83.33333%;flex:0 0 83.33333%}.xl-11{max-width:91.66667%;flex:0 0 91.66667%}.xl-12{max-width:100%;flex:0 0 100%}}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.flex-d-row{flex-direction:row}.flex-d-row-reverse{flex-direction:row-reverse}.flex-d-column{flex-direction:column}.flex-d-column-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-nowrap{flex-wrap:nowrap}.flex-flow-rw{flex-flow:row wrap}.flex-flow-rrw{flex-flow:row-reverse wrap}.flex-flow-rnw{flex-flow:row nowrap}.flex-flow-rrnw{flex-flow:row-reverse nowrap}.flex-flow-cw{flex-flow:column wrap}.flex-flow-crw{flex-flow:column-reverse wrap}.flex-flow-cnw{flex-flow:column nowrap}.flex-flow-crnw{flex-flow:column-reverse nowrap}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-baseline{justify-content:baseline}.justify-content-around{justify-content:space-around}.justify-content-between{justify-content:space-between}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.align-self-start{align-self:flex-start}.align-self-end{align-self:flex-end}.align-self-center{align-self:center}.align-self-baseline{align-self:baseline}.align-self-stretch{align-self:stretch}.align-content-start{align-content:flex-start}.align-content-end{align-content:flex-end}.align-content-center{align-content:center}.align-content-between{align-content:space-between}.align-content-around{align-content:space-around}.flex-order-first{order:-1}.flex-order-last{order:1}.flex-order-unordered{order:0}.flex-ml-auto{margin-left:auto}.flex-mr-auto{margin-right:auto}.flex-mt-auto{margin-top:auto}.flex-mb-auto{margin-bottom:auto}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}@media (min-width:0px){.hidden-xs{display:none}.opacity-0-xs{opacity:0}}@media (min-width:768px){.hidden-sm{display:none}.opacity-0-sm{opacity:0}}@media (min-width:1024px){.hidden-md{display:none}.opacity-0-md{opacity:0}}@media (min-width:1279px){.hidden-lg{display:none}.opacity-0-lg{opacity:0}}@media (min-width:1366px){.hidden-xl{display:none}.opacity-0-xl{opacity:0}}
/* BASE */
html,body{height:100%;font:16px/28px 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;letter-spacing:.05em;word-spacing:.1em;line-height:1.3em;color:#333333;word-break:normal;word-wrap:break-word;-webkit-print-color-adjust:exact;-webkit-font-smoothing:subpixel-antialiased}
a,button,a img,a amp-img{cursor:pointer;transition:.7s}
img,amp-img,.wp-caption{max-width:100%;height:auto}
hr{margin:.5rem auto .5rem auto;max-width:80%;border-top:.1rem groove #333333}
.clear{clear:both}.clearfix{zoom:1}.clearfix:after{content:"";display:block;clear:both;height:0;visibility:hidden}
.displaynon{display:none}.fl_left{float:left}.fl_right{float:right}
a:hover,a img:hover,a amp-img:hover,a .card:hover,button:hover,button:active{opacity:.7}
/* FORM */
button{font-weight:bold;color:#fff;font-size:1.1rem;padding:.5rem .75rem;box-shadow:0 .5rem .4rem -.4rem hsl(200 50% 20% / 40%)}
button.btn-outline{background:#ffffff}
button.btn-block{width:100%}

/* LAYOUT */
#header,#contents,#side,#footer{position:relative;}

/* HEADER */
#header-top{padding:.5rem}
#logo{z-index:99999}
#logo amp-img{max-width:30rem}
#OpenNav{position:absolute;top:.25rem;right:.25rem;padding:1.1rem;font-size:1.6rem;transition:right 1s}
#CloseNav{position:absolute;top:1.5rem;right:.5rem;padding:1.1rem;font-size:1.3rem;transition:right 1s}
#OpenNav a,#CloseNav a{font-size:2rem}
.catchcopy{padding-left:1rem}

/* SIDE */
#side h3{margin:1rem 1rem;padding:.75rem 1rem .75rem;font-size:1.4rem;transform:skewX(-10deg);}
#side section:first-child h3{margin:0 1rem}
#side h3 span{display:inline-block;transform:skewX(10deg)}
#side ul{margin-left:1rem}
#side ul li ul{margin-left:2rem}
.wp-block-tag-cloud a{padding:.5rem;}
ul.sns_icons{height:4rem;margin:0 auto}
ul.sns_icons li{float:right;width:3.2rem;text-align:center}
ul.sns_icons li a{display:block;width:3rem;height:3rem;padding:.5rem .25rem;font-size:2rem;color:#fff}
ul.sns_icons li a.youtube{background:#DA1725}
ul.sns_icons li a.facebook{background:#1877f2}
ul.sns_icons li a.twitter{background:#1DA1F2}
ul.sns_icons li a.instagram{background:radial-gradient(circle at 30% 107%, #ffdc80 0%, #fcaf45 5%, #fd1d1d 45%, #c13584 60%, #5851db 90%)}

/* FOOTER */
#footer-content h3{overflow:hidden;text-align:center}
#footer-content h3 span{position:relative;display:inline-block;margin:0 2.5em;padding:0 1em;text-align:left}
#footer-content h3 span::before,#footer-content h3 span::after{position:absolute;top:50%;content:'';width:400%;height:1px;background-color:#ccc}
#footer-content h3 span::before {right:100%}
#footer-content h3 span::after {left:100%}
#footer-menu ul{clear:both;text-align:center;height:2rem}
#footer-menu ul li{float:left;height:2rem;text-align:center}
#footer-menu ul li a{margin-top:.5rem;padding:.5rem .5rem;color:#fff}
#copyright{padding:.5rem;color:#fff}
p.copyright{font-size:.7rem;text-align:center}
p.copyright a{color:#fff}

/* INFO */
#breadcrumb,.post-info{margin-bottom:.5rem;padding:.5rem;font-size:.8rem;}
ul.breadcrumb{margin:0;padding:0 .5rem}
ul.breadcrumb li{position:relative;margin-right:1.5rem;padding-left:.5rem;float:left}
ul.breadcrumb li:before{position:absolute;top:-.05rem;left:-.5rem;font-family:"FontAwesome";content:"\f101"}
ul.post-meta li{float:left;margin-right:1rem}
.more-link{margin:1rem;text-align:right}

/* PAGENAVI */
.wp-pagenavi{margin:1rem 0;text-align:center}
.wp-pagenavi a{padding:.25rem .5rem;color:#fff;text-decoration:none;line-height:2rem}
.wp-pagenavi a:hover{color:#fff}
.wp-pagenavi span.current{padding:.5rem .75rem;color:#fff;font-weight:bold}
ul.pn-nav li a{display:block;padding:.5rem .25rem;}

/* CONTENT */
.post-thumbnail{padding:.5rem;text-align:center}.post-thumbnail img,.post-thumbnail amp-img{margin:0 auto}
.post{padding:.25rem}
.post h1,.post h2,.post h3,.post h4,.post h5,.post h6{margin:.75rem 0 .25rem;line-height:1.5em}
.post h1{padding:.75rem 0 .5rem;font-size:2rem;}
.post h1:not(.title){border-top:1px solid #ccc;border-bottom:1px solid #ccc}
.post h2{position:relative;padding:.5rem 0 .4rem;border-bottom:.25rem solid #ccc;font-size:1.6rem}
.post h2::after{position:absolute;bottom:-.25rem;left:0;z-index:2;content:'';width:20%;height:.25rem;}
.post h3{padding:.4rem 0 .3rem;font-size:1.5rem;border-bottom:.2rem solid #ccc}
.post h4{padding:.3rem 0 .2rem;font-size:1.4rem;border-bottom:.1rem solid #ccc}
.post h5{padding:.2rem 0 .15rem;font-size:1.2rem}
.post h6{padding:.15rem 0 .1rem;font-size:1.1rem}

.article p{margin-bottom:1em;line-height:1.5}
.article ul:not(.nomargin){margin-left:1.5rem}
.article ul li,.article ol li{padding:.5rem .5rem}
.article ul li:not(last-child),.article ol li:not(last-child){margin-bottom:.5rem}

.article blockquote{position:relative;margin:.5rem;padding:3.5rem 2rem;z-index:1}
.article blockquote:before,blockquote:after{position:absolute;color:#fff;font-size:3rem;line-height:1em;font-family:"FontAwesome";z-index:-1}
.article blockquote:before{top:.25rem;left:.25rem;content:"\f10d"}
.article blockquote:after{right:.25rem;bottom:.25rem;content:"\f10e"}
.article blockquote .quotedsource{margin-bottom:0;font-size:.8rem;text-align:right}
.article blockquote .quotedsource,.article blockquote .quotedsource a{color:#888888}
.article blockquote .quotedsource:before{content:"--- "}

.article table tr th,.article table tr td{padding:.5rem}
.article table tr th{font-weight:bold}
.article dl{display:flex;flex-wrap:wrap}
.article dl dt,.article dl dd{margin-bottom:.5rem;}
.article dl dt{font-weight:bold;width:40%}
.article dl dd{width:60%}

ol.commentlist{margin-top:2rem;}
ol.commentlist li.comment{margin:.5rem;padding:.5rem 1rem;border:1px dashed #cccccc}
ol.commentlist .comment-meta,ol.commentlist .comment-edit-link{font-size:.8rem}

/* FORM */
form{margin:.5rem 5%;width:90%;padding:1rem;font-size:1.2em}
input[type="text"],input[type="number"],input[type="password"],input[type="url"],input[type="date"],input[type="time"],input[type="tel"],input[type="email"],textarea,select{padding:.25rem;max-width:100%;background:#ffffff;font-size:1.2rem;border:none;border:1px solid #cccccc}
input:focus,textarea:focus,select:focus{outline:none;box-shadow:#888888 0px 0px .1rem .1rem;-webkit-box-shadow:#888888 0px 0px .1rem .1rem;-moz-box-shadow:#888888 0px 0px .1rem .1rem}
.wpcf7-checkbox .wpcf7-list-item,.wpcf7-radio .wpcf7-list-item{clear:both;display:block;margin-bottom:1.5rem}
input[type="radio"]{appearance:radio;-moz-appearance:radio;-webkit-appearance:radio;display:inline;width:1.5rem;height:1.5rem;vertical-align:middle}
input[type="checkbox"]{appearance:checkbox;-moz-appearance:checkbox;-webkit-appearance:checkbox;display:inline;width:1.5rem;height:1.5rem;vertical-align:middle}
dl.form dd{border-bottom:.1rem dashed #ffffff}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
label{appearance:radio-button}
input[type=radio]{display:none}
.wpcf7-list-item label{display:block;border:1px solid #555555;padding:.5rem}
input[type="radio"]:checked + label{background:#50B0D0;color:#ffffff}
select{border:1px solid #555555;-webkit-appearance:pop-up-menu !important;-moz-appearance:pop-up-menu !important;appearance:pop-up-menu !important}
input[type="submit"]{margin:.5rem;padding:.5rem 1.5rem;background:#ffffff;color:#50B0D0;cursor:pointer;font-size:1.6rem;font-weight:bold;border:.1rem solid #50B0D0}
input[type="submit"]:hover{background:#50B0D0;color:#fff}
input[type="submit"]:disabled{background:#cccccc}

/* CUSTOM */
.indent{padding-left:1em}
.circle{border-radius:100%}
.big{font-size:1.1em}
.bigger{font-size:1.3em}

.fc_default,.fc_theme,.fc_black{color:#333}
.fc_white{color:#fff}
.bg_white{background:#ffffff}
.bd_gray{background:#cccccc}

.card{margin:.5rem 0 1rem;padding:.75rem;background:rgba(255,255,255,.6);border-top:1px solid rgba(100,100,100,.1);border-left:1px solid rgba(100,100,100,.1);border-right:1px solid rgba(100,100,100,.1);box-shadow:0 1rem .5rem -.5rem hsl(100 40% 10% / 10%)}
.column.card{margin:0 0 0}
.card.reverse{background:rgba(120,120,120,.8);color:#fff}
.card-title{text-align:center}
.card-subtitle{text-align:center;font-weight:bold}

.text-border{display:flex;align-items:center;justify-content:center}
.text-border.right{justify-content:right}
.text-border:before,.text-border:after{border-top:1px solid;content:"";flex-grow:1}
.text-border:before{margin-right:1rem}
.text-border:after{margin-left:1rem}

.only_max_767{display:block}
.only_min_768{display:none}
.only_max_1365{display:block}
.only_min_1366{display:none}
@media screen and (max-width:767px){
    .post h1,.post h2,.post h3,.post h4,.post h5,.post h6{line-height:1.3em}
    .post h1{font-size:1.4rem}
    .post h2{font-size:1.3rem}
    .post h3{font-size:1.2rem}
    .post h4{font-size:1.15rem}
    .post h5{font-size:1.1rem}
    .post h6{font-size:1.05rem}
}
@media screen and (min-width:768px){
    .only_max_767{display:none}
    .only_min_768{display:block}
    #side{padding-left:1rem}
}
@media screen and (max-width:1365px){
    #Nav:not(:target){display:none}
    #Nav:target{display:block;position:fixed;top:-.75rem;width:100%;height:100%;background:rgba(255,255,255,.95);padding:.5rem;z-index:9999999}
    #Nav:target ul{margin-top:20vw}
    #Nav:target ul li a{display:block;padding:1.5rem 1rem 1rem;text-align:center;font-size:1.3rem;line-height:1.2em}
}
@media screen and (min-width:1366px){
    .only_max_1365{display:none}
    .only_min_1366{display:block}
    #Nav{position:relative;display:block;z-index:999}
    #Nav ul{width:100%;height:5rem}
    #Nav ul li{list-style:none;float:left;width:25%;height:100%}
    #Nav ul li a{position:relative;display:block;width:100%;height:100%;margin:0 auto;padding:2.4rem 0;text-align:center;font-size:1.2rem;color:#333333}
    #Nav ul li a:hover:before{position:absolute;top:-.5rem;left:10%;width:80%;height:.1rem;content:""}
}
@media screen and (min-width:1680px){
    #Nav ul li{width:16.6%}
}
/* CUSTOM */
video,source,iframe{max-width:100% !important}
.align-center{margin:0 auto}
.alignright{float:right;margin:0 0 1em 1em}
.alignleft{float:left;margin:0 1em 1em 0}
.bright_120 img{filter:brightness(120%)}
.youtube{position:relative;margin:0 1em 1em 0;padding-bottom:56.25%;padding-top:25px;height:0;overflow:hidden}
.youtube iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.text-right{text-align:right !important}
.text-left{text-align:left !important}
.text-center{text-align:center !important}
i,em,.date{font-style:italic}
time{font-size:.8rem;}
small,.small{font-size:.78em}
strong,b,.bold{font-weight:bold}
sup,sub{height:0;line-height:1;vertical-align:baseline;vertical-align:bottom;position:relative}
sup{bottom:1ex;font-size:.7em}
sub{top:.5ex;font-size:.7em}