@charset "utf-8"; /*------------------------ blog-page-wrap ----------------------------*/ .ez-toc-section{ width: 100%; height: 2px; display: block; pointer-events: none; position: absolute; left: 0; top: 0; margin-top: 94vh;} #blog-page-wrap{ width: 100%; display: flex; flex-direction: column; justify-items: flex-start; align-items: center;} #blog-page-wrap main .main-colum{ width: calc(100% - 200px); display: flex; flex-direction: column; align-items: center; justify-items: flex-start;} #blog-page-wrap main #blog-main *{ font-size: 15px; color: #222; font-weight: 300; margin-bottom: 20px;} #blog-page-wrap main #blog-main * a{ color:steelblue; text-decoration: underline;} #blog-page-wrap main #blog-main * a:hover{ color:#333; text-decoration: none;} #blog-page-wrap main #blog-main b{ font-weight: bold;} #blog-page-wrap main #blog-main p{line-height: 1.8em; letter-spacing: 1px;} #blog-page-wrap main #blog-main p.img-border img{border: solid 1px #ddd;} #blog-page-wrap main #blog-main p.gray{border: solid 1px #ddd; padding: 20px; background: #eee; border-radius: 4px;} #blog-page-wrap main #blog-main p *{line-height: 1.8em; letter-spacing: 1px; } #blog-page-wrap main #blog-main h2{ display: block; padding: 15px 0; border-bottom: solid 1px #000; margin: 30px 0; position: relative;} #blog-page-wrap main #blog-main h2 span, #blog-page-wrap main #blog-main h3 span, #blog-page-wrap main #blog-main h4 span{ opacity: 1 !important; -webkit-transform: translateY(0px) !important; transform: translateY(0px) !important; transition: 0 !important;} #blog-page-wrap main #blog-main h2, #blog-page-wrap main #blog-main h2 .tSpan, #blog-page-wrap main #blog-main h2 .setTit, #blog-page-wrap main #blog-main h2 .setTit span{ font-size: 28px; font-weight: 500; color: #000; line-height: 1.2em; position: relative;} #blog-page-wrap main #blog-main h3{ display: block; padding: 10px 0; position: relative; margin-bottom: 20px;} #blog-page-wrap main #blog-main h3, #blog-page-wrap main #blog-main h3 .tSpan, #blog-page-wrap main #blog-main h3 .setTit, #blog-page-wrap main #blog-main h3 .setTit span{ font-size: 22px; letter-spacing: 0; color: #000; font-weight: 500; line-height: 1.2em;} #blog-page-wrap main #blog-main h4{ display: block; padding: 5px 0;} #blog-page-wrap main #blog-main h4, #blog-page-wrap main #blog-main h4 span, #blog-page-wrap main #blog-main h4 .setTit, #blog-page-wrap main #blog-main h4 .setTit span{ font-size: 20px; color: #000; font-weight: bold; line-height: 1.2em;} #blog-page-wrap main #blog-main h2.border{ padding: 15px 10px 20px; border: solid 2px #111; border-radius: 6px;} #blog-page-wrap main #blog-main h3.border{ padding: 10px 10px 18px; border: solid 2px #111; border-radius: 6px;} #blog-page-wrap main #blog-main h4.border{ padding: 6px 10px 12px; border: solid 1px #111; border-radius: 6px;} @media screen and (max-width: 1020px) { #blog-page-wrap main .main-colum{ width: 100%;} } @media screen and (max-width: 800px) { #blog-page-wrap{ margin-top: 50px;} #blog-page-wrap main #blog-main *{ font-size: 14px;} #blog-page-wrap main #blog-main h2, #blog-page-wrap main #blog-main h2 .tSpa, #blog-page-wrap main #blog-main h2 .setTit, #blog-page-wrap main #blog-main h2 .setTit span{ font-size: 26px;} #blog-page-wrap main #blog-main h3, #blog-page-wrap main #blog-main h3 .tSpan, #blog-page-wrap main #blog-main h3 .setTit, #blog-page-wrap main #blog-main h3 .setTit span{ font-size: 20px; font-weight: bold;} #blog-page-wrap main #blog-main h4, #blog-page-wrap main #blog-main h4 span, #blog-page-wrap main #blog-main h4 .setTit, #blog-page-wrap main #blog-main h4 .setTit span{ font-size: 18px;} } /*------------------------ blog-page-wrap ----------------------------*/ #blog-page-wrap main{ width: 100%; display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-start;} #blog-page-wrap main #blog-main{ max-width: 740px; width: 90%; margin:0 5%; display: flex; flex-direction: column; justify-content: center; align-items: center;} #blog-page-wrap main #blog-main > *{ width: 100%;} /*--------- writerID -----------*/ @media screen and (min-width: 1021px) { #blog-page-wrap, #blog-page-wrap main{ overflow: visible;} /**/ #blog-page-wrap main #writerID { width: 160px; margin: 0 20px; position: sticky; top: 20vh; left: 0; margin-top: 100px;} #blog-page-wrap main #writerID .image{ width: 50px; height: 50px; position: absolute; left: 0; top: 5px; border-radius: 100%; padding: 10px; border: solid 1px #ccc; background: #fff; display: flex; justify-content: center; align-items: center;} #blog-page-wrap main #writerID .txtBox{ width: 100%; margin-bottom: 10px; display: flex; flex-direction: column;} #blog-page-wrap main #writerID .txtBox .tit{ display: flex; width: 100%; min-height: 50px; align-items: center; justify-content: center;padding-left: 60px; flex-direction: column-reverse; margin-bottom: 10px;} #blog-page-wrap main #writerID .txtBox .tit h4{ width: 100%; display: block; font-size: 8px; color: #555; font-weight: 300; letter-spacing: 0;} #blog-page-wrap main #writerID .txtBox .tit h5{ width: 100%; display: flex; font-size: 18px; font-weight: 400; margin-bottom: 1px;} #blog-page-wrap main #writerID .txtBox .tit p{ width: 100%; display: block; font-size: 20px; font-weight: 400;} #blog-page-wrap main #writerID .txtBox .info{ width: 100%; display: block;} #blog-page-wrap main #writerID .txtBox .info p{ font-size: 11px; line-height: 1.6em; width: 100%; display: block; color: #999;} /**/ #blog-page-wrap main #writerID .txtBox .info ul{ width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 6px;} #blog-page-wrap main #writerID .txtBox .info ul li{ width: 100%; display: block; margin: 5px 0;} #blog-page-wrap main #writerID .txtBox .info ul li a{ display: flex; width: 100%; height:26px; align-items: center; justify-content: center; font-size: 9px; letter-spacing: 0; border-radius: 4px; border: solid 1px #ddd; color: #999; line-height: 1em;} #blog-page-wrap main #writerID .txtBox .info ul li a:hover{ background: #555; color: #fff; border: solid 1px #555;} #blog-page-wrap main #writerID .txtBox .info ul li.contact{ width: 100%;} #blog-page-wrap main #writerID .txtBox .info ul li.contact a{ background: var(--cursor_color4); border:solid 1px var(--color1); color: #fff;} #blog-page-wrap main #writerID .txtBox .info ul li.contact a:hover{ background:var(--cursor_color1); border:solid 1px var(--cursor_color1);} #blog-page-wrap main #writerID #writerID_btn{ width: 30px; height: 30px; position: absolute; left: 0; top: -30px; font-size: 20px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.4s; border-radius: 100%; padding-bottom: 2px;} #blog-page-wrap main #writerID #writerID_btn:hover{ box-shadow: 0 0 0 2px #ccc;} #blog-page-wrap main #writerID #writerID_btn.open::before{ content: "×"; font-size: 30px;} #blog-page-wrap main #writerID #writerID_btn.close::before{ content: "＋"; font-size: 30px; opacity: 0.3;} #blog-page-wrap main #writerID #writerID_btn:hover.close::before{ opacity: 1;} #blog-page-wrap main #writerID.hide .image, #blog-page-wrap main #writerID.hide .txtBox { opacity: 0; pointer-events: none;} } @media screen and (max-width: 1021px) { #blog-page-wrap main{ flex-direction: column; align-items: center;} #blog-page-wrap main #writerID { width: 90%; max-width: 740px; margin: 80px 0% 20px; display: flex; flex-direction: row; border: solid 1px #ddd; border-radius: 4px; padding: 20px; justify-content: space-between;} #blog-page-wrap main #writerID .image{ width: 80px; height: 80px; border-radius: 100%; padding: 10px 10px 12px; border: solid 1px #ccc; background: #fff; display: flex; justify-content: center; align-items: center;} #blog-page-wrap main #writerID .txtBox{ width: calc(100% - 120px); display: flex; flex-direction: column;} #blog-page-wrap main #writerID .txtBox .tit{ width: 100%; display: flex; flex-direction: row-reverse; align-items: flex-end; justify-content: flex-end;} #blog-page-wrap main #writerID .txtBox .tit h4{ font-size: 11px; font-weight: 300; margin:0 0 5px 10px; color: #000;} #blog-page-wrap main #writerID .txtBox .tit h5{ font-size: 18px; font-weight: 400;} #blog-page-wrap main #writerID .txtBox .info{ display: flex; flex-direction: column;} #blog-page-wrap main #writerID .txtBox .info p{ font-size: 12px; line-height: 1.2em; margin: 10px 0; color: #777;} /**/ #blog-page-wrap main #writerID .txtBox .info ul{ display: flex; flex-wrap: wrap;} #blog-page-wrap main #writerID .txtBox .info ul li{ display: block; margin:5px 10px 5px 0;} #blog-page-wrap main #writerID .txtBox .info ul li a{ display: flex; padding: 0 8px; height: 24px; border-radius: 2px; align-items: center; justify-content: center; background: #e5e5e5; border: solid 1px #e5e5e5; color: #777; font-size: 12px;} #blog-page-wrap main #writerID .txtBox .info ul li a:hover{ background: #fff; border: solid 1px #aaa; color: #000;} #blog-page-wrap main #writerID .txtBox .info ul li.contact{ } #blog-page-wrap main #writerID .txtBox .info ul li.contact a{ padding: 0 15px; background: var(--cursor_color1); border:solid 1px var(--cursor_color1); color: #fff;} } @media screen and (max-width: 600px) { #blog-page-wrap main #writerID .txtBox .tit{ flex-direction: column-reverse; align-items: flex-start;} #blog-page-wrap main #writerID .txtBox .tit h2{ margin:0 0 5px;} #blog-page-wrap main #writerID .txtBox .info p{ font-size: 11px; margin: 5px 0;} #blog-page-wrap main #writerID .txtBox .info ul{ flex-direction: column;} #blog-page-wrap main #writerID .txtBox .info ul li{ width: 100%; margin: 5px 0;} #blog-page-wrap main #writerID .txtBox .info ul li a{ width: 100%; padding: 0; height: 30px; color: #555;} } /*============================================== 下層 MV ================================================*/ #titleArea{ width: 90%; max-width: 740px; margin: 0 5%; padding-top:120px; display: flex; flex-direction: column; position: relative; z-index: 8;} #titleArea h1{ width: 100%; display: flex; justify-items: center; align-items: center;} #titleArea h1 span{ font-size: 28px; font-weight: 300; line-height: 1.4em;} #titleArea ul{ width: 100%; display: flex; justify-items: flex-start; flex-wrap: wrap; align-items: center; padding: 30px 0 30px;} #titleArea ul li{ display: block; font-size: 12px; margin:0 8px 2px 0; letter-spacing: 0; word-break: keep-all;} #titleArea ul li.cate2{ padding:2px 4px; border:solid 1px #ccc; border-radius: 4px;} #titleArea ul li:first-child::after{ content: " ― ";} @media screen and (max-width: 600px) { #titleArea{ padding:60px 0 40px;} } /*--------- breadcrumb -----------*/ #blog-page-wrap .breadcrumb{ width: 90%; max-width: 740px; margin: 0 5% 20px; display: flex; flex-direction: column; position: relative; z-index: 8;} #blog-page-wrap .breadcrumb ul{ width: 100%; display: flex; justify-items: center; align-items: center; flex-wrap: wrap;} #blog-page-wrap .breadcrumb ul li{ display: flex; align-items: center; } #blog-page-wrap .breadcrumb ul li::after{ content:">"; font-size: 9px; color: #aaa;} #blog-page-wrap .breadcrumb ul li:last-child::after{ display: none;} #blog-page-wrap .breadcrumb ul li a{ display:flex; align-items: center; justify-items: center; padding: 2px 5px; background: #f0f0f0;} #blog-page-wrap .breadcrumb ul li a span{ font-size: 9px; line-height: 0; line-height: 1em; color: #777;} #blog-page-wrap .breadcrumb ul li a:hover span{ color: #000; text-decoration:underline;} #blog-page-wrap .breadcrumb ul li br{ display: none;} /*--------- 目次：プラグイン -----------*/ #blog-page-wrap main #toc_container { padding: 10px 10px 10px 20px; background: #f0f0f0; border-radius: 2px; margin-bottom: 40px;} #blog-page-wrap main #toc_container *{ font-size: 14px !important;} #blog-page-wrap main #toc_container > ul, #blog-page-wrap main #toc_container > ul > ul{ width: 100%; display: flex; flex-direction: column;} #blog-page-wrap main #toc_container > ul > li { width: 96%; display: block; margin:10px 0 6px 4%; line-height: 1.2em; } #blog-page-wrap main #toc_container > ul > li{list-style: decimal !important; display: list-item !important;} #blog-page-wrap main #toc_container > ul > li > a{ font-weight: 500; color: #000;} #blog-page-wrap main #toc_container > ul > li a:hover{ color: #000; text-decoration: underline;} #blog-page-wrap main #toc_container > ul > li > ul li{ } #blog-page-wrap main #toc_container > ul > li > ul li{ width: 98%; margin:6px 0 2px 2%; line-height: 1.2em; list-style: disc !important; overflow: visible !important; display: list-item !important; padding: 2px 0;} #blog-page-wrap main #toc_container > ul > li > ul li a{ font-size: 90%; color: #555 !important; font-weight: 300;} #blog-page-wrap main #toc_container ul li::marker{ font-family: Arial, Helvetica, "sans-serif"; font-weight: bold; position: relative; z-index: 99999999999999999999; opacity: 1;} @media screen and (max-width: 600px) { #blog-page-wrap main #toc_container *{ font-size: 15px;} #blog-page-wrap main #toc_container { padding: 20px 10px 20px 25px;} #blog-page-wrap main #toc_container > ul > li{ width: 94%; margin:10px 0 5px 6%;} } /*今回の目次*/ #blog-page-wrap #ez-toc-container { background: #f0f0f0; border: none !important;border-radius: 4px;-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow:none !important; display: table; margin-bottom: 1em; padding: 10px 10px 10px 20px !important; position: relative; width: auto;} #blog-page-wrap div#ez-toc-container .ez-toc-title-container{ padding-right: 100px; position: relative;} #blog-page-wrap div#ez-toc-container .ez-toc-title-container .ez-toc-title-toggle{ position: absolute; right: 0; top: 0;} #blog-page-wrap div#ez-toc-container .ez-toc-title{ font-size: 13px; font-weight: bold;} #blog-page-wrap div#ez-toc-container .ez-toc-list li a{ font-size: 12px !important;} #blog-page-wrap div#ez-toc-container .ez-toc-list li a:hover{ color: #000 !important; text-decoration: underline;} #blog-page-wrap div#ez-toc-container .ez-toc-list > li { margin: 10px 0 !important; line-height: 1.1em !important; } #blog-page-wrap div#ez-toc-container .ez-toc-list > li > a{ font-weight: 500; color: #000;} #blog-page-wrap div#ez-toc-container .ez-toc-list > li ul li{ width: 95%; margin:0 0 5px 5%; line-height: 1.1em; list-style: disc !important; overflow: visible !important; display: flex !important; align-items: center; justify-items: flex-start; padding: 2px 0; position: relative;} #blog-page-wrap div#ez-toc-container .ez-toc-list > li ul li::before{ content: "・"; font-size: 11px; position: absolute; left: -11px; top: 2px;} #blog-page-wrap div#ez-toc-container .ez-toc-list > li ul li a{ font-size: 90%; color: #555 !important; font-weight: 300;} /*--------- シリーズ -----------*/ #blog-page-wrap main #blog-main .series{ width: 100%; display: flex; flex-direction: column; padding: 15px 3%; border: solid 2px #eee; border-radius: 2px;} #blog-page-wrap main #blog-main .series > * {width: 100%; display: flex; flex-direction: column;} #blog-page-wrap main #blog-main .series p{ font-size: 13px; font-weight: bold;} #blog-page-wrap main #blog-main .series ul li{ width: 100%; display: block; padding: 4px 0 4px 35px; position: relative; margin:3px 0 ; } #blog-page-wrap main #blog-main .series ul li a{ color: #555; text-decoration: underline; font-size: 12px;} #blog-page-wrap main #blog-main .series ul li a:hover{ color: var(--cursor_color1); text-decoration: none;} #blog-page-wrap main #blog-main .series ul li.now::before{ content: "now"; width: 30px; height: 30px; line-height: 28px; vertical-align: middle; border-radius: 100%; background:var(--color1); color:#fff; text-align: center; font-size: 12px; letter-spacing: 0; position: absolute; left: -1px; top: 50%; margin-top: -15px; text-align: center;} #blog-page-wrap main #blog-main .series ul li.now{ border: solid 1px #777; color: #fff; background: #777; border-radius: 30px; font-size: 13px;} @media screen and (max-width: 600px) { #blog-page-wrap main #blog-main .series{ padding: 15px 4%;} #blog-page-wrap main #blog-main .series p, #blog-page-wrap main #blog-main .series ul li.now, #blog-page-wrap main #blog-main .series ul li a{ font-size: 15px;} } /*--------- パーツデザイン -----------*/ #blog-page-wrap main .dlbox { display: flex; flex-direction: column; padding: 20px; border-radius: 12px; background: #f5f5f5; border: solid 1px #999;} #blog-page-wrap main .dlbox > *{ width: 100%; display: flex; font-weight: 300;} #blog-page-wrap main .dlbox dt{ font-size: 16px; font-weight: bold; margin-bottom: 10px; border-bottom: solid 3px #ccc; padding-bottom: 5px;} #blog-page-wrap main .dlbox dd { font-size: 16px; margin-bottom: 5px;} #blog-page-wrap main .dlbox dd b{ display: block; margin-right: 5px; letter-spacing: 0; font-size: 14px; color: #000;} #blog-page-wrap main .dlbox dd span { flex:1; display: block; letter-spacing: 0; font-size: 14px;} /*------------------- ページリンク関連 ----------------------*/ /*次へボタン*/ #blog-post-bottom{ padding-top: 80px; width: 92%; margin: 0 4%;} #blog-post-bottom .pageInner{ width: 100%; max-width: 650px; display: flex; flex-direction: column; justify-content: center; align-items: center;} #blog-post-bottom #blog_page_link { width: 100%; margin: 40px 0 100px;} #blog-post-bottom #blog_page_link ul{ display: flex; flex-direction: row; justify-content: space-between;} #blog-post-bottom #blog_page_link ul li{ display: block; width: 20%; margin: 0 3%; } #blog-post-bottom #blog_page_link ul li.list{ width: 38%;} #blog-post-bottom #blog_page_link ul li > *{ line-height: 50px; text-align: center; display: block; font-size: 13px; border-radius: 2px;} #blog-post-bottom #blog_page_link ul li a{ border: solid 1px #555; text-decoration: none; color: #111; font-weight: 300; position: relative;} #blog-post-bottom #blog_page_link ul li a span{ font-size:13px;} #blog-post-bottom #blog_page_link ul li a:hover{ background: #f0f0f0; border: solid 1px 000; box-shadow: 0 0 0 2px #000;} #blog-post-bottom #blog_page_link ul li > span{ background: #e5e5e5; color: #888;} /*icon*/ #blog-post-bottom #blog_page_link ul li.list a span, #blog-post-bottom #blog_page_link ul li.list a span::before, #blog-post-bottom #blog_page_link ul li.list a span::after{ content: ""; display: block; width: 20px; height: 2px; position: absolute; background: #111; transition: 0.3s;} #blog-post-bottom #blog_page_link ul li.list a span{ margin-top: -1px; left: 15%; top: 50%;} #blog-post-bottom #blog_page_link ul li.list a span::before{ margin-top: -6px; left: 0; top: 0;} #blog-post-bottom #blog_page_link ul li.list a span::after{ margin-top: 6px; left: 0; top: 0;} #blog-post-bottom #blog_page_link ul li.list a:hover span::before{ margin-top: -4px;} #blog-post-bottom #blog_page_link ul li.list a:hover span::after{ margin-top: 4px;} #blog-post-bottom #blog_page_link ul li a::before{ width: 10px; height: 10px; display: block; content: ""; position: absolute; border-bottom: solid 3px #111; top: 50%; margin-top: -7px; transition: 0.4s;} #blog-post-bottom #blog_page_link ul li:nth-child(1) a::before{ left: 8%; border-left: solid 3px #111; transform:rotate(45deg);} #blog-post-bottom #blog_page_link ul li:nth-child(1) a:hover::before{ left:6%;} #blog-post-bottom #blog_page_link ul li:nth-child(2) a::before{ display: none;} #blog-post-bottom #blog_page_link ul li:nth-child(3) a::before{ right: 8%; border-right: solid 3px #111; transform:rotate(-45deg);} #blog-post-bottom #blog_page_link ul li:nth-child(3) a:hover::before{ right:6%;} @media screen and (max-width:800px) { #blog-post-bottom #blog_page_link { margin: 0px 0 100px;} #blog-post-bottom #blog_page_link ul li{width: 28%; margin: 0;} #blog-post-bottom #blog_page_link ul li.list a span{ left: 8%;} } @media screen and (max-width:600px) { #blog-post-bottom #blog_page_link ul li a span{ display: none;} #blog-post-bottom #blog_page_link ul li a::before{ width: 8px; height: 8px; margin-top: -5px;} #blog-post-bottom #blog_page_link ul li{width: 25%; margin: 0; } #blog-post-bottom #blog_page_link ul li.list a{ padding-left: 8%;} #blog-post-bottom #blog_page_link ul li.list a, #blog-post-bottom #blog_page_link ul li:nth-child(1) a::after, #blog-post-bottom #blog_page_link ul li:nth-child(3) a::after{ font-size: 13px;} /* #blog-post-bottom #blog_page_link ul li:nth-child(1) a::after{ content: "前へ";} #blog-post-bottom #blog_page_link ul li:nth-child(3) a::after{ content: "次へ";} */ }