@charset "UTF-8"; /* ! ================================================*/ /* ! Article */ /* ! ================================================*/ /* ! main-section. ================================================ */ .main-section.article{} /* theme block ==================== */ .entry-content > *:not(.alignwide):not(.alignfull) {max-width: var(--wp--style--global--content-size);}/* 幅広・全幅ブロック以外にデフォルトコンテンツ幅を指定 */ .entry-content > *.alignwide {max-width: var(--wp--style--global--wide-size);}/* 幅広ブロックに幅広コンテンツ幅を指定 */ .entry-content > *:not(.alignfull) {margin-right: auto;margin-left: auto;}/* 全幅ブロックを除いて左右にオートマージンを付与する */ /* ! -------------------------------------------------------------- */ /* ! entry header */ /* ! -------------------------------------------------------------- */ .post-header{width:100%;max-width: var(--max-content-width);margin: 0 auto;padding: 0;text-align: center;background: #fff;} /* .image_object */ .image_object{position: relative;padding: 0;width: 100%;overflow: hidden;aspect-ratio:4 / 3;aspect-ratio: 16 / 9;} .image_object.wide{aspect-ratio: 16 / 9;} .image_object.golden{aspect-ratio: 1 / 1.618;} .image_object.half{aspect-ratio: 2 / １;} .image_object img{z-index: 0;} .image_object:after{position: absolute;bottom: -1px;left: 0;width: 100%;height: 80px;padding:0;content:"";z-index: 2;background-size: 100% 100%;background: transparent url('data:image/svg+xml;charset=utf-8,') no-repeat left bottom;} @media screen and (min-width:694px) { .image_object2:after{width: calc( 100% + 2px );height: 58px;} } /* .post-title */ h1.post-title{padding:1.5em 4% 1em;font-size: var(--font-size-ll,32px);line-height: 1.3;} .image_object + h1.post-title{padding:1em 4% 1em;} /* .post-meta */ .post-meta{text-align: right;padding: 0 4% 1.5em;} .post-meta .entry-date{padding: 0;font-size: var(--font-size-s,13px);color:var(--color-base-7);} @media screen and (min-width:694px) { .image_object{max-height: 360px;} .post-meta .entry-date{padding: 0;font-size: var(--font-size,16px);} } /* ! -------------------------------------------------------------- */ /* ! entry footer */ /* ! -------------------------------------------------------------- */ .entry-footer{clear: both;max-width: var(--max-content-width,694px);margin: 0 auto 0;padding: 1.5rem 0;font-size: var(--font-size,15px);line-height: 1.3;background: #fff;} /* entry-meta */ .entry-meta {width: 92%;margin: 0 auto;text-align: right;} .entry-meta .entry-date{width: 100%;margin: 0 auto 0.5rem;text-align: right;} .entry-meta dl{display: inline;border: none;width: auto;} .entry-meta dl dt{display: inline-block;border: none;background: none;width: auto;} .entry-meta dl dd{display: inline-block;border: none;width: auto;text-align: right;} .entry-meta dl dd span{color: var(--color-text);} .entry-meta dl.entry-tag{display: block;text-align: right;} .entry-meta dl.entry-tag dd span{display: block;} .entry-meta dl dd a{padding: 8px 16px 8px 3px;} /* dl.entry-tag */ dl.entry-tag{display: inline-block;margin:0 0 8px;width: auto;} dl.entry-tag .meta-icon:before{display: none} dl.entry-tag .meta-icon a{display: inline-block;margin: 0 0 8px 8px;padding: 4px 8px;background: var(--color-base-2);border-radius: 5px;} /* ! -------------------------------------------------------------- */ /* ! entry content */ /* ! -------------------------------------------------------------- */ /* .entry-content ================================================ */ .entry-content{clear: both;max-width: var(--max-content-width,694px);margin: 0 auto;padding: 1.5em 0 1.5em;background: #fff;} .entry-content:after{display: block;clear:both;content: "\0020"; height: 0;visibility: hidden;} :where(.entry-content) >*{width: 92%;margin: 0 auto 1.5em;padding:0;} :where(.entry-content) >*.alignfull{width:100%;max-width: 100%;padding:0;} :where(.entry-content) >*.alignwide{width:100%;padding:0;} :where(.entry-content) .box{width: 92%;margin: 1em auto;padding: 0;} :is(.box)>p:last-child{margin-bottom:0;} :where(.entry-content) .block{width: 100%;max-width:100%;margin: 0 auto;padding: 0 0;} /* .entry-content basic ================================================ */ /* columns ==================== */ .wp-block-columns{display: grid;justify-content: center;grid-template-columns: repeat(2, 1fr);gap: 5px 5px;font-size: var(--font-size-s,14px);;line-height: 1.2;} :is(.wp-block-columns).has-2-columns{grid-template-columns: repeat(2, 1fr);} :is(.wp-block-columns).has-3-columns{grid-template-columns: repeat(3, 1fr);} :is(.wp-block-columns).has-4-columns{grid-template-columns: repeat(4, 1fr);} :is(.wp-block-columns).has-5-columns{grid-template-columns: repeat(4, 1fr);} .wp-block-column{} /* wp-block-media-text ==================== */ .wp-block-media-text{display: grid;justify-content: center;grid-template-columns: repeat(2, 1fr);gap: 5px 5px;} .wp-block-media-text__media{margin: 0;padding: 0;} .wp-block-media-text__content{margin: 0;padding: 0.5em;font-size: var(--font-size-s,14px);line-height: 1.2;} /*Alignments ==================== */ :where(.entry-content) >.alignleft{width:auto;margin: 0;padding:0 0.5em 0 4%;background: #fff;} :where(.entry-content) >.alignright{width:auto;margin: 0;padding:0 4% 0 0.5em;background: #fff;} :where(.entry-content) .wp-block-image .alignright{padding:0 0 0 0.5em;} :where(.entry-content) .wp-block-image .alignleft{padding:0 0.5em 0 0;} :where(.entry-content) >.wp-block-button.alignleft{padding: 0;background: none;} @media screen and (min-width:694px) { :is(.entry-content) >.alignleft{padding:0 16px 0 0;margin: 0 0 0.5em calc( ( 100% - 694px ) / 2 );} :is(.entry-content) >.alignright{padding:0 0 0 0.5em;margin: 0 calc( ( 100% - 694px ) / 2 ) 0.5em 0;} :where(.entry-content) >.wp-block-button.alignleft{margin: 0 0.5em 0 4%;padding: 0;background: none;} :where(.entry-content) >.wp-block-button.alignright{margin: 0 4% 0 0.5em ;padding: 0;background: none;} } /* headlines ==================== */ :where(h1,h2,h3,h4,h5,h6) {font-size: var(--font-size-l,18px);line-height: 1.3;} :where(.entry-content) >h1{padding: 0.5rem 0;} :where(.entry-content) >h2{padding: 0em 0.5rem 0.75rem 0.5rem;border-left: 4px solid var(--color-primary,#666);} :where(.entry-content) >h3{position: relative;z-index: 0;padding: 8px 8px 8px;background: var(--color-primary,#666);color:#fff;} :where(.entry-content) >h4{padding: 0.5rem 0.5rem;border-bottom: 2px solid var(--color-primary,#666);} :where(.entry-content) >h5{padding: 0.3em 0;color: var(--color-primary,#666);} :where(.entry-content) >h6{padding: 0.3em 0;} /* Anchor ==================== */ :where(.entry-content) a{color: var(--color-primary,#ccc);text-decoration: none;} :where(.entry-content) a:hover{text-decoration: none;} /* Paragraph ==================== */ :where(.entry-content) >p{--content-width:92%;width: var(--content-width);max-width: var(--max-content-width,694px);margin: 0 auto 1.5em;font-size: var(--font-size);line-height: 1.5;} :where(.entry-content) >p.p-center{margin: 1.5em auto;text-align: center;font-weight: bold;font-size: var(--font-size-l,18px);line-height: 1;} :where(.entry-content) >p.p-right{margin: 1.5em auto;text-align: right;font-weight: bold;font-size: var(--font-size-l,18px);line-height: 1;} :is(.note-txt){text-align: right;font-size: var(--font-size-s,14px);line-height: 1.5;} :is(.caption){text-align: right;font-size: var(--font-size-s,14px);line-height: 1.7;} :is(.strong){font-weight: bold;color:#f26356;} :is(.marker){font-weight: bold;background: linear-gradient(transparent 60%, #fec6c1 40%);} /* Separator ==================== */ :where(.wp-block-separator){border: none;border-bottom: 2px solid #8f98a1;margin: 1.65em auto;} .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {max-width: 100px; } /* is-style-wide */ .wp-block-separator.is-style-wide { border-bottom-width: 1px; } :where(hr){clear: both;margin: 3em auto;border-top:3px dotted var(--color-border,#ccc);} /* Lists ==================== */ /* dl */ :where(.entry-content) >dl{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;font-size: var(--font-size-s,14px);line-height: 1.3;border: 1px solid;border-color: var(--color-border,#ccc);border-bottom: none;} :where(.entry-content) >dl dt{width: 20%;padding:0.5em;border-right: 1px solid;border-bottom: 1px solid;border-color: var(--color-border,#ccc);background: var(--color-primary-pale,#ddd);} :where(.entry-content) >dl dd{width: 80%;padding:0.5em;border-bottom: 1px solid;border-color: var(--color-border,#ccc);} /* ul */ :where(.entry-content) >ul{} :where(.entry-content) >ul ol,:where(.entry-content) >ul ul{margin: 0 0 0;padding:0 0 0 0;} :where(.entry-content) >ul li{padding:0.3em 1em;} /* ol */ :where(.entry-content) >ol{counter-reset:li;} :where(.entry-content) >ol li{padding:0.3em 0 0.5em 1em;} :where(.entry-content) >ol>li:before {content: counter(li) ". ";counter-increment: li;} :where(.entry-content) >ol ul,:where(.entry-content) >ol ol{margin: 0;padding:0 0 0 0;} /* Medias ==================== */ /* figure */ :where(.entry-content) >figure{padding: 0;max-width: 100%;} :where(.entry-content) .aligncenter{text-align: center;} :where(.entry-content) figcaption{font-size: var(--font-size-s,14px);line-height: 1.2;margin: 3px 0 5px;} :where(.entry-content) .size-full{} :where(.entry-content) .alignnone{} :where(.entry-content) .alignwide{} :where(.entry-content) .alignfull{} /* images */ :where(.entry-content) >figure.wp-block-image{} :where(.entry-content) img{display:inline-block;max-width: 100%;margin: 0 auto;vertical-align:top;} /* gallery */ .wp-block-gallery{width: 92%;margin: 0 auto 1.5em;} .wp-block-gallery.alignleft{width: 50%;margin: 0 0.5em 0 4%;} .wp-block-gallery.alignright{width: 50%;margin: 0 4% 0 0.5em;} .wp-block-gallery>ul{display: grid;justify-content: center;grid-template-columns: repeat(3, auto);gap: var(--gap-size) var(--gap-size);} .wp-block-gallery.columns-2>ul{grid-template-columns: repeat(2, 1fr);gap:0 8px;} .wp-block-gallery.columns-3>ul{grid-template-columns: repeat(3, 1fr);gap:0 8px;} .wp-block-gallery.columns-4>ul{grid-template-columns: repeat(4, 1fr);gap:0 6px;} .wp-block-gallery.columns-5>ul{grid-template-columns: repeat(5, 1fr);gap:0 5px;} .wp-block-gallery.columns-6>ul{grid-template-columns: repeat(6, 1fr);gap:0 5px;} .wp-block-gallery.columns-7>ul{grid-template-columns: repeat(7, 1fr);gap:0 4px;} .wp-block-gallery.columns-8>ul{grid-template-columns: repeat(8, 1fr);gap:0 4px;} .wp-block-gallery.columns-9>ul{grid-template-columns: repeat(9, 1fr);gap:0 3px;} .wp-block-gallery .wp-block-image{} .wp-block-gallery .wp-block-image figcaption{margin: 0;padding: 3px 0;font-size: var(--font-size-s,14px);line-height: 1.2;} .blocks-gallery-caption{} /* cover */ :is(.wp-block-cover){position: relative;overflow: hidden;display:flex;justify-content:center;align-items:center;aspect-ratio: 16 / 9;background:none;float: none;} :is(.wp-block-cover) .wp-block-cover__background{position: absolute;z-index: 0;top:0;left: 0;width: 100%;height: 100%;background: #333;opacity: 0.6;} :is(.has-background-dim):before{opacity: 1;position: absolute;z-index: 1;top:0;left: 0;width: 660px;content: "";} :is(.wp-block-cover) .wp-block-cover__background.has-pale-pink-background-color{background: #f78da7;} :is(.wp-block-cover) .wp-block-cover__image-background{position: absolute;z-index: 0;top:0;left: 0;width: 100%;max-width: 100%;height: 100%;object-fit: cover;} :is(.wp-block-cover).has-parallax ,:is(.wp-block-cover).has-parallax .wp-block-cover__image-background{background-attachment: fixed;} :is(.wp-block-cover) .wp-block-cover__inner-container{position: absolute;z-index: 0;top:auto;left: auto;right:auto;bottom: auto;padding: 0.5em;font-size: var(--font-size-ll,32px);line-height: 1;font-weight: bold;color: #fff;} .wp-block-cover-text{position: absolute;opacity: 2;display: grid;place-content: center;z-index: 1;top:0;left: 0;width: 100%;height: 100%;color: #fff;background: rgba(0,0,0,0.4);color: #fff;} @media screen and (min-width:694px) { :is(.wp-block-cover).alignright,:is(.wp-block-cover).alignleft{width:50%;max-width:347px;aspect-ratio:1;} :is(.wp-block-cover).alignleft{float: left;margin: 0 1em 0 4%;} :is(.wp-block-cover).alignright{float: right;margin: 0 4% 0 1em;} } /* video */ .wp-block-video{width: 100%;} .wp-block-video video{width: 100%;} /* embed */ .wp-block-embed{width: 92%;margin: 0 auto 1.5em;text-align: center;} .wp-block-embed__wrapper, .wp-block-embed__wrapper>div{text-align: center;margin: 0 auto;} .wp-block-embed__wrapper iframe{display: block;margin: 0 auto;} /* file */ .wp-block-file{} /* audio */ .wp-block-audio{} /* Tables ==================== */ /* table */ :where(.entry-content) >table{font-size: var(--font-size-s,14px);line-height: 1.3;} :where(.entry-content) table th,:where(.entry-content) table td{padding:0.5em 0.2em;vertical-align: middle;} :where(.entry-content) table th{background: var(--color-primary-pale,#ddd);} :where(.entry-content) table td{background: var(--color-white,#fff);} /* wp-block-table */ :where(.entry-content) >.wp-block-table{overflow-x:scroll;} :where(.entry-content) >.wp-block-table table{width:var(--content-width,92%);max-width:var(--max-content-width,694px);margin: 0 auto;} /* scroll-table */ :where(.entry-content) .scroll-table{width:var(--content-width,92%);overflow-x:scroll;} :where(.entry-content) .scroll-table table{position: relative;max-width: none;white-space: nowrap;-webkit-overflow-scrolling: touch;} :where(.entry-content) .scroll-table table td{min-width: 250px;white-space: normal;} /* scroll-table title-left*/ :where(.entry-content) .scroll-table.title-left table th{position: -webkit-sticky;position: sticky;left: 0;z-index: 1;} /* preformatted ==================== */ :where(.entry-content) >pre{background: var(--color-primary-pale,#f1f1f1);margin: 0 auto;padding: 1em;overflow-x:scroll;font-size: var(--font-size-s,14px);line-height: 2;} :is(.entry-content)>pre{margin: 0 auto;} .wp-block-preformatted{} /* code ==================== */ .wp-block-code{} /* button ================================================ */ /* button-area ==================== */ .wp-block-button{text-align: center;} .wp-block-button.btn-small{width: 30%;} .wp-block-button.btn-medium{width: 60%;} .wp-block-button.btn-large{width: 90%;} .wp-block-button.btn-xlarge{width: 100%;} .wp-block-buttons{ display: flex;justify-content: center;align-items: stretch;align-items: flex-end; clear: both; } /* .button ==================== */ :where(#comment_submit), :where(.pushbutton-wide){} .wp-block-button__link{position: relative;display: block;width: auto;padding: 16px;border-radius: 100px;font-weight: 700;background: var(--color-primary,#ccc);color:#fff;} .btn-area>a{position: relative;margin: 0 1%;background: var(--color-primary,#ccc);color:#333;} .wp-block-button.is-style-squared .wp-block-button__link{border-radius: 0px;} .wp-block-button.is-style-outline .wp-block-button__link{background: none;border: 2px solid var(--color-primary,#ccc);} /* ! -------------------------------------------------------------- */ /* ! Navigate */ /* ! -------------------------------------------------------------- */ /* ! Pagination ================================================ */ /* .post-navigation ================================================ */ .comment-navigation, .post-navigation{ width: 100%;max-width: var(--max-content-width,694px); margin: 0 auto 2em;padding: 0; word-wrap:break-word;word-break: break-all; font-size: var(--font-size);line-height: 1.2;font-weight: 700; } .nav-previous,.nav-next{position: relative;width: 100%;max-width: 100%;min-height: 70px;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);background: #fff;} /* nav thumb */ .post-navigation .no-thumb,.nav-links>div>img{background: var(--color-base-1);position: absolute;top:5px;left: 5px;width: 80px;height: 60px;overflow: hidden;} .post-navigation .nav-next .no-thumb,.post-navigation .nav-next>img{left:auto;right: 5px;} .post-navigation .no-thumb:before{top:15px;left: 23px;} /* nav a */ .nav-previous a,.nav-next a{position: relative;z-index: 1;display:flex;align-items:center;width: 100%;height: 100%;min-height: 70px;} .nav-previous a{text-align: left;padding: 0 8px 0 100px;;} .nav-next a{justify-content:flex-end;padding: 0 100px 0 8px;} .nav-previous:hover, .nav-next:hover{color: var(--color-primary);opacity: 0.5;} @media screen and (min-width:694px) { .post-navigation .nav-links{display: grid;grid-template: 1fr / 1fr 1fr;grid-gap: 0;width: 100%;min-height: 70px;} .nav-previous{grid-column: 1 / 2;grid-row:1/1;display: flex;} .nav-next{grid-column: 2 / 3;grid-row:1/1;} .nav-previous a{border-right: 1px solid;border-color: var(--color-border);} } /* .pagination-area ================================================ */ .pagination-area{ position: relative;width: 100%;max-width: var(--max-content-width,694px); display: grid;align-items:center; grid-template-rows: auto 1fr; grid-template-columns:80px 1fr 80px; margin:0 auto;padding: 0 0 2em; word-wrap:break-word;word-break: break-all; text-align: center;background: #fff; } /*.paged ==================== */ .pagination-area .paged{grid-column: 2 / 3;grid-row: 1/ 2;} .pagination-area .paged{display: block;margin: 0 0 1rem;padding: 0;text-align: center;font-weight: 700;line-height: 1;} /*nav-links ==================== */ .pagination-area .nav-links{grid-column: 2 / 3;grid-row: 2 / 3;} .pagination-area .nav-links a{padding: 3px;border: 1px solid var(--color-border);} .pagination-area .nav-links a:hover{background: var(--color-primary);} .pagination-area .nav-links .current{padding: 3px;border: 1px solid var(--color-border);background: var(--color-border);color: #fff;} /*prev-next ==================== */ .pagination-area .btn-prev{grid-column: 1 / 2;grid-row: 1 / 3;} .pagination-area .btn-next{grid-column: 3 / 4;grid-row: 1 / 3;} .pagination-area .btn-next a, .pagination-area .btn-prev a{ display: block; padding:1rem 0.5rem; font-size: var(--font-size,16px);line-height: 1.3;font-weight: 700; background: var(--color-base-2); } .pagination-area .btn-next a{ -webkit-clip-path: polygon(0% 0%, calc( 100% - 20px ) 0%, 100% 50%, calc( 100% - 20px ) 100%, 0% 100%); clip-path: polygon(0% 0%, calc( 100% - 20px ) 0%, 100% 50%, calc( 100% - 20px ) 100%, 0% 100%); } .pagination-area .btn-prev a{ -webkit-clip-path: polygon(20px 0%, 100% 1%, 100% 100%, 20px 100%, 0% 50%); clip-path: polygon(20px 0%, 100% 1%, 100% 100%, 20px 100%, 0% 50%); } .pagination-area .btn-next a:hover, .pagination-area .btn-prev a:hover{background: var(--color-primary);} /* ! -------------------------------------------------------------- */ /* ! Component */ /* ! -------------------------------------------------------------- */ /* Table of contents ================================================ */ .toc-block{} .toc-title label{ display: block;position: relative; padding: 0.7rem 0;margin: 0 auto 3rem; text-align: center;font-size: var(--font-size-l,18px);font-weight: 700; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .toc-title label:after{ position: absolute;top:calc( 50% - 13px );right: 0px; padding: 3px 10px; font-size: var(--font-size-s,14px);font-weight: 700;content: "Open"; background: #ddd;border-radius: 3px; border: 1px solid #ddd; cursor: pointer; } .toc-block>ol{ position: relative;height: 0px;overflow: hidden; margin: 0 auto;padding: 0; font-weight: 700; transition: all 0.3s; } .toc-block ol{counter-reset: section;font-weight: 700;} .toc-block ol{margin: 0;} .toc-block ol li{padding: 0.3rem;} .toc-block ol ol li{padding-left: 1rem;font-weight: 400;} .toc-block ol ol ol li{padding-left: 1.5rem;} .toc-block ol ol ol ol li{padding-left: 2rem;} .toc-block ol ol ol ol ol li{padding-left: 2.5rem;} .toc-block ol li:before { counter-increment: section;content: counters(section, ".") ""; padding: 2px 6px 2px 6px;border-radius: 5px;margin: 0 10px 0 0px; background: var(--color-primary);color: var(--color-white); } .toc-block ol ol li:before{background: transparent;color: var(--color-black);margin: 0 5px 0 0px;} #toc-toggle:checked ~ ol{height: auto;padding: 1rem 0 2rem;margin: 0 auto 3rem;border-bottom: 1px solid var(--color-border);} #toc-toggle:checked ~ .toc-title label{border-bottom: none;margin-bottom: 0px;} #toc-toggle:checked ~ .toc-title label:after{content: "Close";} /* .more-area ================================================ */ .entry-content .more-area{ display:flex;flex-flow:row wrap;justify-content:center;align-items:stretch; width: 100%;max-width: 100%;overflow: hidden; margin: 2% auto ; padding: 1.5rem 0; border-top:1px dotted var(--color-primary); border-bottom:1px dotted var(--color-primary); } .entry-content .box.more .textwidget, .entry-content .box.more p, .entry-content .box.more{ width: auto;height: auto; margin: 0;padding: 0; } .entry-content .box.more p br{display: inline;} .entry-content .box.more img{ width: auto;max-width: 100%;max-height: 250px; margin: 0;padding: 0; } .entry-content .more-title{ display: block; margin: 0;padding: 0; font-size:var(--font-size-l,18px);line-height: 1; } /* Favorite ================================================ */ .favorite{margin: 0 auto;width:92%;max-width: var(--max-content-width);margin: 0 auto var(--margin-section,24px);padding: 0;} .favorite>ul{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;width: 100%;} .favorite>ul>li{width: calc( ( 100% - 10px ) / 2 );height: 30px;} .favorite>ul>li .btn-fav, .favorite>ul>li .btn-like{ display:flex;flex-flow:row wrap;justify-content:center;align-items:center; width: 100%;height: 30px;max-width: 100%; padding: 0; border-radius: 5px; border: 2px solid #6cc655; background: #fff; cursor: pointer;box-shadow: none; } .favorite>ul>li .btn-fav:hover, .favorite>ul>li .btn-like:hover{ opacity: 0.6; } .favorite svg{width: 24px;height: 20px;margin: 0 10px;} /* fav */ .favorite>ul>li .btn-fav.setFav{background: #6cc655;border-color: #6cc655;} .favorite>ul>li .btn-fav svg{fill:#6cc655;height: 24px;} .favorite>ul>li .btn-fav.setFav svg{fill:#fff;} /* like */ .favorite>ul>li .btn-like{border-color: #e72a18;color:#fff;} .favorite>ul>li .btn-like svg{fill:#e72a18;} .favorite>ul>li .btn-like.setLike{background: #e72a18;border-color: #e72a18;color:#fff;cursor: auto;} .favorite>ul>li .btn-like.setLike svg{fill:#fff;} /* Social ==================== */ /*.sns_share */ .sns_share{clear: both;width: 92%;max-width: var(--max-content-width);margin: 0 auto 1.5em;padding: 0;} .sns_share>ul{display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:stretch;width: 100%;} .sns_share li{display: flex;align-items:center;width:calc( ( 100% ) / 4 );height: 24px;margin: 0 0 0.5rem;padding: 0;cursor: pointer;background: #ddd;color:#fff;} .sns_share li.tw{background: var(--color-tw);} .sns_share li.fb{background: var(--color-fb);} .sns_share li.tumblr{background: var(--color-tumblr);} .sns_share li.hb{background: var(--color-hb);} .sns_share li.feedly{background: var(--color-feedly);} .sns_share li.get-pocket{background: var(--color-pocket);} .sns_share li.sns-line{background: var(--color-line);} .sns_share li.btn_copy{background: var(--color-base-6);padding: 4px 0 0;} .sns_share li a{display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;} .sns_share li svg{height: 16px;width: auto;max-width: 100%;} #svg-copy .stroke{fill:none;stroke:#fff;} #svg-copy .fill{fill:#fff;} @media screen and (min-width: 769px) { .sns_share ul{ flex-flow:row nowrap; } .sns_share li{ width:calc( ( 100% - ( 3px * 6 ) ) / 7 );height: 28px; margin: 0 3px 0.5rem 0; padding: 0; border-radius: 2px; } .sns_share li:nth-of-type(8){margin: 0 0 0.5rem 0;} .sns_share li svg{height: 16px;} } .sns_share li:hover{ -webkit-transform: translate3d(0px,3px,1px); transform: translate3d(0px,3px,1px); box-shadow:none; opacity: 0.85; } .sns_share svg.icon{ max-width: 100%; max-height: 100%; background: none; fill: #fff; } /* ! -------------------------------------------------------------- */ /* ! Elements */ /* ! -------------------------------------------------------------- */ /* ! ================================================*/ /* ! Block */ /* ! ================================================*/ /* ! -------------------------------------------------------------- */ /* ! Boxes */ /* ! -------------------------------------------------------------- */ /* blogcard ================================================ */ /* blogcard */ .entry-content .blogcard{border-radius: 5px;border: 2px solid var(--color-primary,#666);} .entry-content .blogcard .blogcard_text{margin: 0;padding: 0;} .entry-content .blogcard .blogcard_text span{padding: 5px 10px;line-height: 1;font-weight: bold;border-radius: 0 0 5px 0;background:var(--color-primary,#666);color: #fff; } .entry-content .blogcard .blogcard_link{margin: 0;padding: 10px;} .entry-content .blogcard .blogcard_link a{display: block;font-size: var(--font-size-s,14px);line-height: 1.3;color:var(--color-text,#333);} .entry-content .blogcard .blogcard_link a:hover{color:#ccc;} /* articlelink */ .box.articlelink{} /* ex-link ================================================ */ .box.ex-link{border: 1px solid var(--gray-4,#666);border-radius: 5px;font-weight: bold;} .box.ex-link a{display: flex;align-items: stretch;color: var(--color-primary,#666);padding: 0px;} .box.ex-link a:hover{background:var(--gray-4,#ccc);} .box.ex-link a:before{display: flex;align-items: center;content: "参照リンク";margin: 0 10px 0 0;padding: 5px 10px;font-size: var(--font-size-s,14px);line-height: 1;white-space: nowrap;border-radius: 5px 0px 0px 5px;background:var(--color-primary,#666); color: var(--white,#fff);} .box.ex-link span{display: flex;align-items: center;padding: 5px 0;font-size: var(--font-size-s,14px);line-height: 1.3;} .external a[href^="http"]:after{position: relative;top: 3px;padding-left: 10px;font: 20px/1 var(--font-icon);content: "\f242";} /* .faq-box ================================================ */ .hidden-checkbox{display:none;} .qa-box{ display: block; margin: 0 auto 1.3em;padding: 1.3em; border: 1px solid #d6d6d6; cursor: pointer; } .qa-box .title{display: flex;font-weight: 700;} .qa-box .title .number { display: flex;justify-content: center;align-items: center; width: 24px;height: 24px; margin-right: 8px; border-radius: 50%; background: #f58383;color: #fff; } .qa-box .text{ display: none; border-top: 1px dashed #d6d6d6; margin-top: 8px; padding-top: 8px; } .qa-box .hidden-checkbox:checked + .text{display:block;} /* .faq-box ==================== */ .faq-box{ display: block; padding: 20px; border: 1px solid #d6d6d6; } .faq-box .title{ display: flex;align-items: center; margin: 10px 0 20px; font-weight: bold; } .faq-box .title .question { display: flex;justify-content: center;align-items: center; width: 24px;height: 24px; margin-right: 8px; border-radius: 50%; background: #f58383;color: #fff; } .faq-box dd.item { position: relative; margin: 0;padding: 0 0 0px 30px; border-top: 1px dashed #d6d6d6; } .faq-box .answer { display: flex;justify-content: center;align-items: center; position: absolute;left: 0;top:18px; width: 24px;height: 24px; margin-right: 8px; font-weight: 700; border-radius: 50%; background: #a9a9a9;color: #fff; } /* supervisor ================================================ */ .box.supervisor{border: 1px solid var(--color-border,#ccc);padding: 1rem;} .supervisor-title{padding: 0rem 1rem 2rem 0rem;font-size: var(--font-size-l,18px);font-weight: bold;} .supervisor-title span{padding: 0.5rem 5rem 0.5rem 3rem;background: var(--black,#ccc);color:var(--white);position: relative;} .supervisor-title span:after {position: absolute;right: 0px;top: 0px;content: "";border: 18px solid transparent;border-right-color:#fff;} .supervisor-profile{display: flex;} .supervisor img{width: 80px;height: 80px;background: #ddd;border-radius: 50%;margin: 0 auto 0.5rem;} .supervisor-text{padding: 1rem 0 1rem 1rem;} .supervisor p{margin: 0;padding: 0;font-size:var(--font-size-s,14px);line-height: 1.4;} .supervisor p.position{font-size:var(--font-size-ss,12px);line-height: 1;font-weight: bold;} .supervisor p.name{font-weight: bold;} .supervisor p.kana{margin: 0 0 1rem;font-size:0.75em;line-height: 1;} /* .box.balloon ================================================ */ /* balloon */ .box.balloon{display: flex;align-items: center;padding: 0;} .box.balloon figure{min-width: 65px;text-align: center;padding: 0;} .box.balloon figcaption{margin: 0;font-weight: bold;font-size: var(--font-size-s,13px);} .box.balloon img{display: block;width: 60px;height: 60px;margin: 0 auto 0.5em;border-radius: 50%;background: #ddd;} .balloon-text{position: relative;margin: 0 0 0 1em;padding: 0.7em 0.7em 0;font-size: var(--font-size,15px);line-height: 1.4;border: 1px solid var(--color-border,#ccc);border-radius: 8px;} .balloon-text>p{margin: 0 0 0.7em;} .balloon-text:before,.balloon-text:after{content: "";position: absolute; left: 0;right: 0;width: 0;height: 0;margin: auto;} .balloon-text:before{left: calc( -100% - 20px );top:calc( 50% - 8px );border:8px solid transparent;border-right: 12px solid var(--color-border,#ccc);} .balloon-text:after{left: calc( -100% - 14px );top:calc( 50% - 6px );z-index: 2;border:6px solid transparent;border-right: 10px solid #fff;} /* .balloon right ==================== */ .box.balloon.right{justify-content: flex-end;} .box.balloon.right figure{order: 2;} .box.balloon.right .balloon-text{margin: 0 16px 0 0 ;} .box.balloon.right .balloon-text:before{left:100%;border:8px solid transparent;border-left:12px solid var(--color-border,#ccc);} .box.balloon.right .balloon-text:after{left: calc( 100% - 0px );border:6px solid transparent;border-left: 10px solid #fff;} /* .box.caution ================================================ */ .box.caution{padding: 0.7em 0.5em 0.7em 70px;background: #fefce5 url('data:image/svg+xml;charset=utf-8,') no-repeat 0.5em center;color:#a38500;border: 1px dotted #a38500;font-weight: 700;} :where(.box).caution>p{margin: 0 0 0.5em;font-size: var(--font-size-s,14px);line-height: 1.4;font-weight: 700;} /* ! -------------------------------------------------------------- */ /* ! More box */ /* ! -------------------------------------------------------------- */ /* more-btn */ .more-check{display: none;} .more-btn{ display: block;position: relative;cursor: pointer; width:300px;padding: 1rem 1rem;margin: 2em auto 2em; text-align: center; background: var(--color-primary); } .more-btn:hover{margin-top:calc( 2em + 2px );margin-bottom:calc( 2em - 2px );} /* excerpt-box */ .more-check:checked ~ .excerpt-box{display: none;} .excerpt-box{} .excerpt-box p{margin: 0 0 2rem;font-size: var(--font-size);line-height: 1.7;} /* more-box */ .more-box{height: 0;overflow: hidden;transition: all .3s;} .more-box p{font-size: var(--font-size);line-height: 1.7;} .more-check:checked ~ .more-box{height: auto;} .bare{background: yellow;} /* ! -------------------------------------------------------------- */ /* ! Side bar */ /* ! -------------------------------------------------------------- */ /* ! -------------------------------------------------------------- */ /* ! Password */ /* ! -------------------------------------------------------------- */ /* ! Password form ================================================ */ .post_password{width: 100%;} .post_password .pass-title{text-align: center;font-size: var(--font-size-l,18px);line-height: 1.2;background: var(--color-primary);color:#fff;padding: 1.0rem;} .post_password p{width:96%;margin: 0rem auto 1.0rem;text-align: center;} .input-pass{display: block;width:90%;max-width: 300px;margin: 0rem auto 1.0rem;padding: 5px;} .btn-pass{display: block;width:60%;max-width: 200px;position: relative;margin: 0rem auto 1.0rem;} .btn-pass:before{position: relative;top:3px;font-family: var(--font-icon);padding-right: 3px;content: "\f173";} /* ! -------------------------------------------------------------- */ /* ! profile block */ /* ! -------------------------------------------------------------- */ .author_bio_section{ background: none repeat scroll 0 0 #F5F5F5; padding: 15px; border: 1px solid #ccc; } .author_name{ font-size:var(--font-size,16px); font-weight: bold; } .author_details img { border: 1px solid #D8D8D8; border-radius: 50%; float: left; margin: 0 10px 10px 0; } /* ! -------------------------------------------------------------- */ /* ! Related block */ /* ! -------------------------------------------------------------- */ .related{} .related .block-content{padding: 0;} .related .archive-area{display: grid;grid-template-columns: repeat(2, 1fr);gap:10px;width: var(--content-width);max-width: var(--max-content-width);margin: 0 auto var(--margin-section,24px);padding: 0;} .related .entry-card{display: block;margin:0;padding:0;border-radius: 10px;overflow: hidden;box-shadow: 0 1px 5px 0px var(--color-shadow);} .related .card-thumb{width: 100%;height: auto;} .related .card-body{width: 100%;height: auto;padding: var(--gap-size,8px);} .related .card-title{font-size:var(--font-size-l,18px);line-height: 1.2;font-weight: 700;margin: 0 auto 0rem;} @media screen and (min-width:768px) { .related .archive-area{display: grid;grid-template-columns: repeat(3, 1fr);gap:14px;} } /* ! -------------------------------------------------------------- */ /* ! favorite */ /* ! -------------------------------------------------------------- */ .favorite-content .btn-delete-like{width: auto;margin: 1em;padding: 8px 5px;font-size: var(--font-size-s,13px);line-height: 1;border-radius: 3px;}