@charset "utf-8"; /* Responsive: yes */ /*-- p2 css */ @charset "UTF-8";/*! Theme: hbm-simple-p2 Author: Hatena Blog Team Responsive: yes */.hatena-module-custom-hidden{display:none}.hatena-module-body__detail{background:#505050}.urllist-see-more a,.SingleContact__btn{background:#505050;border:1px solid #505050}#GoTopBtn{background:#505050}html{font-size:62.5%;box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}body{font-size:1.6rem}html,body{word-wrap:break-word;font-family:Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;line-height:1.5;color:#010101}*{background-repeat:no-repeat;padding:0;margin:0}*,:before,:after{box-sizing:border-box}:before,:after{text-decoration:inherit;vertical-align:inherit}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,[type=button],[type=reset],[type=submit] [role=button]{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}optgroup{font-weight:700}button{overflow:visible}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0}button:-moz-focusring,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{outline:1px dotted ButtonText}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button,select{text-transform:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;height:auto}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}.pc_block{display:block}@media only screen and (max-width: 767px){.pc_block{display:none}}.pc_inline{display:inline}@media only screen and (max-width: 767px){.pc_inline{display:none}}.sp_block{display:none}@media only screen and (max-width: 767px){.sp_block{display:block}}.sp_inline{display:none}@media only screen and (max-width: 767px){.sp_inline{display:inline}}li{list-style:none}a{text-decoration:none;color:inherit;transition:.5s}a:hover{transition:.2s;opacity:.5}button{border:none;background:none}.ft_mid{font-weight:500}.ft_bold{font-weight:700}.hatena-module-search-box .hatena-module-title{display:none}.defFlex,.archive-entries,#entry-footer-secondary-modules .hatena-module-related-entries .related-entries{display:flex;flex-wrap:wrap;gap:24px}@media only screen and (max-width: 767px){#entry-footer-secondary-modules .hatena-module-related-entries .related-entries{flex-direction:column}}.archive-entries section,.urllist-categories,.archive-entries section .categories,.entry-categories,.hatena-module-category .hatena-urllist{display:flex;flex-wrap:wrap;gap:6px}.archive-entries section .category>a,.urllist-categories a,.archive-entries section .categories a,.entry-categories a,.hatena-module-category .hatena-urllist a{display:inline-block;background-color:#fff;color:#505050;font-size:12px;margin:0;padding:.3em .9em;border-radius:6px;border:1px solid #dddddd;line-height:1.5}@media only screen and (max-width: 767px){.archive-entries section .category>a,.urllist-categories a,.archive-entries section .categories a,.entry-categories a,.hatena-module-category .hatena-urllist a{font-size:10px}}.urllist-date-link{margin:0 0 4px}.archive-date a:before,.urllist-date-link a:before,.entry-date a:before{content:"";background-image:url(https://cdn.blog.st-hatena.com/css/theme/hbm-simple-p2/images/data.svg?version=4d776f2b7a248fe0227f52f5e9d786);background-repeat:no-repeat;display:inline-block;height:1.6rem;width:1.6rem;background-position:0 0}.archive-date a:before{margin-top:-2px}.urllist-date-link time{color:#626262;font-size:13px;vertical-align:top}.urllist-title-link{display:-webkit-box;font-size:18px;font-weight:600;line-height:1.6;margin:0 0 8px;width:100%;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}.urllist-entry-body{margin-top:1em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#747474}@media only screen and (max-width: 767px){.urllist-title-link{font-size:16px}}.pager{display:block;margin:auto;position:relative}.pager-next .pager-arrow,.page-archive .pager-next .pager-arrow,.pager-prev .pager-arrow,.page-archive .pager-prev .pager-arrow,.autopagerize_insert_before .pager-prev a:before,.autopagerize_insert_before .pager-next a:before{position:absolute;top:0;bottom:0;width:.5em;height:.5em;margin:auto;border-top:1px solid;border-left:1px solid;text-indent:100%;overflow:hidden}.autopagerize_insert_before .pager-prev a:before,.autopagerize_insert_before .pager-next a:before{content:""}.pager-next .pager-arrow,.page-archive .pager .pager-next .pager-arrow,.autopagerize_insert_before .pager-next a:before{right:-1em;transform:rotate(135deg)}.pager-prev .pager-arrow,.page-archive .pager .pager-prev .pager-arrow,.autopagerize_insert_before .pager-prev a:before{left:-1em;transform:rotate(315deg)}.pager-prev:nth-last-of-type(1){border-right:none;padding:0}.urllist-image{width:100%}.urllist-image-link{display:block;aspect-ratio:16/9}.urllist-image-link .urllist-image{display:block;border-radius:6px;overflow:hidden;margin:0 0 18px;aspect-ratio:16/9;object-fit:cover}@media only screen and (max-width: 767px){.urllist-image-link .urllist-image{margin:0 0 12px}}.defBlock .date span,.archive-entries section .date span,#entry-footer-secondary-modules .hatena-module-related-entries .ele .date span{color:#626262;font-size:12px;line-height:13px;vertical-align:top}@media only screen and (max-width: 767px){.defBlock .date span,.archive-entries section .date span,#entry-footer-secondary-modules .hatena-module-related-entries .ele .date span{line-height:9px}}.defBlock .ttl,.archive-entries section .ttl,#entry-footer-secondary-modules .hatena-module-related-entries .ele .ttl{display:block;font-size:16px;font-weight:700;line-height:1.6;margin:0 0 24px}@media only screen and (max-width: 767px){.defBlock .ttl,.archive-entries section .ttl,#entry-footer-secondary-modules .hatena-module-related-entries .ele .ttl{font-size:14px;line-height:1.5;margin:0 0 9px}}.urllist-see-more a,.SingleContact__btn{display:block;width:78%;max-width:450px;color:#fff;text-align:center;font-size:16px;padding:12px;position:relative;border-radius:6px}@media only screen and (max-width: 767px){.urllist-see-more a,.SingleContact__btn{font-size:14px}}.blog-header{width:100%;padding:8px calc(50% - 600px) 0;background:#fff}@media only screen and (max-width: 1279px){.blog-header{padding:16px 5vw 0}}@media only screen and (max-width: 767px){.blog-header{position:static;height:auto;padding:18px 5vw 14px;border-bottom:1px solid #eee}}.blog-header-inner{position:relative;max-width:1200px;margin:0 auto;padding-right:180px}@media only screen and (max-width: 767px){.blog-header-inner{padding:0 50px 0 0}}#hbm-head-media-logo{width:calc(100% - 240px);font-weight:700;font-size:33px;line-height:1.4;display:block;margin:0 0 10px}@media only screen and (max-width: 1024px){#hbm-head-media-logo{font-size:30px}}@media only screen and (max-width: 767px){#hbm-head-media-logo{width:calc(100% - 30px);font-size:18px;margin:0 0 6px}}.blog-description{font-size:14px;line-height:1.4}@media only screen and (max-width: 767px){.blog-description{font-size:12px;transform:scale(.9);margin:0 0 0 -5%}}.blog-header .header-search{display:block;position:absolute;top:50%;right:0;width:170px;z-index:2;transform:translateY(-50%);width:240px}@media only screen and (max-width: 767px){.blog-header .header-search{display:none}}.header-search .search-module-input,.header-search .search-result-input{font-size:1.2rem;padding:10px 16px;border:none;border-radius:6px;width:100%}@media only screen and (max-width: 1279px){.header-search .search-module-input,.header-search .search-result-input{font-size:14px}}.header-search .search-module-button,.header-search .search-result-button{width:30px}.navbar-toggle-nav{display:none}@media only screen and (max-width: 767px){.navbar-toggle-nav{display:block;position:fixed;top:10px;right:10px;margin:auto;text-align:center;z-index:1000}}.navbar-toggle-btn{display:block;width:52px;height:52px;background-color:#fff;cursor:pointer}.navbar-toggle-btn>span{display:block;position:absolute;top:50%;left:50%;margin-top:-1px;margin-left:-16px;width:32px;height:2px;border-radius:2px;background:#333;content:"";transition:all .3s ease-in-out}.navbar-toggle-btn>span:first-child{top:calc(50% - 8px)}.navbar-toggle-btn>span:nth-child(2){top:calc(50% + 8px)}.navbar-toggle-btn.-open span:first-child{top:50%;transform:rotate(45deg)}.navbar-toggle-btn.-open span:nth-child(2){top:50%;transform:rotate(-45deg)}.navbar-toggle-btn.-open span:nth-child(3){background-color:transparent}.navbar{display:block;position:sticky;padding:0 3vw;box-shadow:0 1px 1px #0000001a;width:100%;z-index:999;background:#fff;top:-1px}@media only screen and (max-width: 767px){.navbar{position:fixed;transition:transform .3s ease-out;transform:translateY(-101%);padding:24px 7vw;top:0;left:0;right:0}.navbar.-open{transform:translateY(0);padding-top:70px;box-shadow:0 4px 4px #0003}}.navbar.not-fixed{position:relative;top:0}.navbar-inner{position:relative;max-width:1240px;margin:0 auto}@media only screen and (max-width: 767px){.navbar-inner{scrollbar-width:none;-ms-overflow-style:none;max-height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch}.navbar-inner::-webkit-scrollbar{display:none}}.navbar-list{display:flex;justify-content:center;align-items:center;margin:0}@media only screen and (max-width: 767px){.navbar-list{margin:0;padding:0;list-style:none;flex-direction:column}}.navbar-list a{display:inline-block;font-size:16px;font-weight:600;line-height:1.5;margin:12px 0;padding:4px 1.5em}@media only screen and (max-width: 767px){.navbar-list a{display:flex;justify-content:center;align-items:center;text-align:center;background:transparent;font-size:16px}}.navbar .header-search{display:none}@media only screen and (max-width: 767px){.navbar .header-search{display:block;padding-bottom:20px;background-color:#fff}}.breadcrumb{width:100%;padding:16px 5vw;background:#f8f8f8;margin-bottom:0!important}@media only screen and (max-width: 767px){.breadcrumb{margin:0;padding:8px 5vw}}@media only screen and (max-width: 767px){.breadcrumb .breadcrumb-inner{padding:0 12px 0 0;position:relative}}.breadcrumb .breadcrumb-inner.active:before{display:inline-block}.breadcrumb a,.breadcrumb span{color:#747474;font-size:12px}@media only screen and (max-width: 767px){.breadcrumb a,.breadcrumb span{transform:scale(.8)}}.hatena-module-custom-pickupSlider{position:relative;margin-bottom:80px;background:#010101}@media only screen and (max-width: 767px){.hatena-module-custom-pickupSlider{margin-bottom:40px}}.hatena-module-custom-pickupSlider .recent-entries-item-inner{position:relative;max-width:100%;margin:auto;display:grid;grid-template-rows:auto;grid-template-areas:"entries-image entries-image" "date-link entry-body" "entries-title entry-body" "entries-categories entry-body";gap:0 4%;grid-template-columns:2fr 1fr;padding:16px}@media only screen and (max-width: 767px){.hatena-module-custom-pickupSlider .recent-entries-item-inner{grid-template-areas:"entries-image" "entries-title" "date-link" "entries-categories" "entry-body";gap:0;grid-template-columns:auto;margin-left:0;margin-right:0;padding:0 0 20px}.hatena-module-custom-pickupSlider .recent-entries-date-link,.hatena-module-custom-pickupSlider .recent-entries-title,.hatena-module-custom-pickupSlider .recent-entries-categories,.hatena-module-custom-pickupSlider .recent-entries-entry-body{margin-left:2vw;margin-right:2vw}}.hatena-module-custom-pickupSlider .recent-entries-image-link{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:entries-image}.hatena-module-custom-pickupSlider .recent-entries-date-link{-ms-grid-row:3;-ms-grid-column:1;grid-area:date-link}.hatena-module-custom-pickupSlider .recent-entries-title{-ms-grid-row:5;-ms-grid-column:1;grid-area:entries-title}.hatena-module-custom-pickupSlider .recent-entries-categories{-ms-grid-row:7;-ms-grid-column:1;grid-area:entries-categories}.hatena-module-custom-pickupSlider .recent-entries-entry-body{-ms-grid-row:3;-ms-grid-row-span:5;-ms-grid-column:3;grid-area:entry-body;font-size:14px}@media only screen and (max-width: 767px){.hatena-module-custom-pickupSlider .recent-entries-image-link{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:1}.hatena-module-custom-pickupSlider .recent-entries-date-link{-ms-grid-row:5;-ms-grid-column:1}.hatena-module-custom-pickupSlider .recent-entries-title{-ms-grid-row:3;-ms-grid-column:1}.hatena-module-custom-pickupSlider .recent-entries-categories{-ms-grid-row:7;-ms-grid-column:1}.hatena-module-custom-pickupSlider .recent-entries-entry-body{-ms-grid-row:9;-ms-grid-row-span:1;-ms-grid-column:1}}.hatena-module-custom-pickupSlider .hatena-module-title{display:none}.hatena-module-custom-pickupSlider .hatena-module-body{background:#222;margin:auto;width:100%;overflow:hidden}.hatena-module-custom-pickupSlider .hatena-module-body:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;z-index:999;width:50px;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(farthest-side,#fff 94%,#0000) top/8px 8px no-repeat,conic-gradient(#0000 30%,#fff);-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);animation:loadingAnime 1s infinite linear}@keyframes loadingAnime{to{transform:rotate(1turn)}}.hatena-module-custom-pickupSlider .hatena-module-body.st-load:before{display:none}@media only screen and (max-width: 767px){.hatena-module-custom-pickupSlider .hatena-module-body{padding:0 10px 12px}.hatena-module-custom-pickupSlider .hatena-module-body.swiper-initialized{padding:0 0 12px}}.hatena-module-custom-pickupSlider .hatena-module-body ul{display:flex;justify-content:center}.hatena-module-custom-pickupSlider .hatena-module-body.swiper-initialized ul{justify-content:flex-start}.hatena-module-custom-pickupSlider .hatena-module-body li{opacity:0;transition:opacity .3s ease}.hatena-module-custom-pickupSlider .hatena-module-body.st-load li{opacity:1}.hatena-module-custom-pickupSlider .hatena-module-body .urllist-item{min-width:100%}@media only screen and (max-width: 767px){.hatena-module-custom-pickupSlider .hatena-module-body .urllist-item{padding-top:16px}}.hatena-module-custom-pickupSlider .hatena-module-body .urllist-item.swiper-slide{min-width:auto;padding-bottom:10px}.hatena-module-custom-pickupSlider .urllist-date-link a,.hatena-module-custom-pickupSlider .urllist-title-link,.hatena-module-custom-pickupSlider time,.hatena-module-custom-pickupSlider .urllist-entry-body{color:#fff}.hatena-module-custom-pickupSlider .hatena-module-title a{display:block;width:90px;height:90px;color:#fff;border:1px solid #ffffff;border-radius:50%;text-align:center;padding:33px 0 0;margin:0 32px 0 0}@media only screen and (max-width: 767px){.hatena-module-custom-pickupSlider .hatena-module-title a{font-size:12px;transform:scale(.9);width:50px;height:50px;margin:0 0 5px;padding:20px 0 0}}.hatena-module-custom-pickupSlider .recent-entries-item-inner .recent-entries-image-link{width:100%;margin-bottom:20px;min-height:46.6875vw}@media only screen and (max-width: 767px){.hatena-module-custom-pickupSlider .recent-entries-item-inner .recent-entries-image-link{max-width:none;position:relative;display:block;width:100%;margin:0 auto 20px}}.hatena-module-custom-pickupSlider .recent-entries-item-inner .recent-entries-image-link:hover{opacity:1}.hatena-module-custom-pickupSlider .recent-entries-item-inner .recent-entries-image-link img{width:100%;border-radius:6px;margin:0}@media only screen and (max-width: 767px){.hatena-module-custom-pickupSlider .recent-entries-item-inner .recent-entries-image-link img{max-width:none;position:absolute;top:0;left:0;object-fit:cover;display:block;width:100%;height:100%}}@media only screen and (min-width: 1200px){.hatena-module-custom-pickupSlider .hatena-module-body .urllist-item.swiper-slide{max-width:800px}.hatena-module-custom-pickupSlider .recent-entries-item-inner .recent-entries-image-link{max-width:800px;min-height:432px}}.hatena-module-custom-pickupSlider .urllist-date-link{margin-bottom:8px}.hatena-module-custom-pickupSlider .urllist-date-link a:before{content:"";background-image:url(https://cdn.blog.st-hatena.com/css/theme/hbm-simple-p2/images/data-white.svg?version=4d776f2b7a248fe0227f52f5e9d786);display:inline-block;height:1.6rem;width:1.6rem;vertical-align:middle;margin-right:2px}.hatena-module-custom-pickupSlider .urllist-title-link{font-weight:700;font-size:20px;line-height:1.7;color:#fff;margin-bottom:8px}@media only screen and (max-width: 767px){.hatena-module-custom-pickupSlider .urllist-title-link{font-size:18px;line-height:1.5}}.hatena-module-custom-pickupSlider .urllist-categories{margin-bottom:8px}.hatena-module-custom-pickupSlider .swiper-pagination{bottom:16px}.hatena-module-custom-pickupSlider .swiper-pagination-bullet{background:#fff}.hatena-module-custom-pickupSlider .hatena-module-body:not(.swiper-initialized) .urllist-item.swiper-slide,.hatena-module-custom-pickupSlider .hatena-module-body:not(.swiper-initialized) .recent-entries-item-inner .recent-entries-image-link{max-width:1200px!important}@media only screen and (min-width: 1217px){.hatena-module-custom-pickupSlider .hatena-module-body:not(.swiper-initialized) .urllist-item.swiper-slide{margin:0 16px}.hatena-module-custom-pickupSlider .hatena-module-body:not(.swiper-initialized) .recent-entries-item-inner{padding:16px 0}}.hatena-module-custom-news{display:block;width:90vw;max-width:1200px;margin:0 auto 72px}.hatena-module-custom-news .hatena-module-title{margin:43px auto 28px;display:flex;align-items:center}.hatena-module-custom-news .hatena-module-title a{font-size:14px}.hatena-module-custom-news .hatena-module-title:before{content:"News";display:inline-block;font-family:Pacifico,cursive;font-size:33px;margin:0 24px 0 0}@media only screen and (max-width: 767px){.hatena-module-custom-news .hatena-module-title:before{font-size:22px;margin:0 16px 0 0}}.hatena-module-custom-news .hatena-module-body{margin:0 auto 72px}@media only screen and (max-width: 767px){.hatena-module-custom-news .hatena-module-body{margin:0 auto}}.hatena-module-custom-news .hatena-module-body .recent-entries{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:24px}.page-index #main-inner .hatena-module-title:before{content:"Articles"}.page-index #main-inner .hatena-urllist{flex-wrap:wrap;gap:24px}.page-index #main-inner .hatena-module-body .hatena-urllist{display:flex;flex-direction:row;justify-content:flex-start;flex-wrap:wrap}.page-index #main-inner .hatena-urllist .urllist-item{width:100%;background-color:#fff;border-radius:6px;padding:20px}.page-index #main-inner .hatena-urllist.urllist-with-thumbnails .urllist-item{width:calc((100% - 48px) / 3)}.page-index #main-inner .hatena-urllist.urllist-with-thumbnails .urllist-title-link{width:100%}.page-index #main-inner .hatena-urllist .urllist-item .urllist-item-inner>*:last-child{margin-bottom:0}@media only screen and (max-width: 1200px){.page-index #main-inner .hatena-urllist{flex-wrap:wrap;gap:12px}.page-index #main-inner .hatena-urllist.urllist-with-thumbnails .urllist-item{width:calc((100% - 24px) / 3)}}@media only screen and (max-width: 767px){.page-index #main-inner .hatena-urllist.urllist-with-thumbnails .urllist-item{width:calc((100% - 12px)/2);padding:10px}}@media only screen and (max-width: 430px){.page-index #main-inner .hatena-urllist.urllist-with-thumbnails .urllist-title-link{font-size:14px}.page-index #main-inner .hatena-urllist.urllist-with-thumbnails .urllist-categories a{font-size:10px}}.page-index #main-inner .hatena-urllist .urllist-image-link{display:block}@media only screen and (max-width: 767px){.page-index #main-inner .hatena-urllist .urllist-image{width:100%}}.hatena-module-custom-news .hatena-module-body li{width:calc(25% - 18px)}#box2 #box2-inner .hatena-module .hatena-urllist{display:flex;flex-wrap:wrap;gap:24px}#box2 #box2-inner .urllist-entry-body{font-size:80%}#box2 #box2-inner .archive-module-year{width:100%}#box2 #box2-inner .hatena-module.hatena-module-category .hatena-urllist{gap:6px 10px}@media (min-width: 768px) and (max-width:900px){.hatena-module-custom-news .hatena-module-body li,.page-index #main-inner .hatena-module-recent-entries.hatena-urllist .urllist-item,#box2 #box2-inner .hatena-module .urllist-with-thumbnails li{width:calc(50% - 12px)}}@media only screen and (max-width: 767px){#box2 #box2-inner .hatena-module .urllist-with-thumbnails{display:block}.hatena-module-custom-news .hatena-module-body li{width:100%;margin-bottom:24px}.hatena-module-custom-news .hatena-module-body li:last-child{margin-bottom:0}}.page-index #main-inner .hatena-module-title{margin:0 auto 28px;display:flex;align-items:center}.page-index #main-inner .hatena-module-title a{font-size:14px}.page-index #main-inner .hatena-module-title:before{display:inline-block;font-family:Pacifico,cursive;font-size:33px;margin:0 24px 0 0}@media only screen and (max-width: 767px){.page-index #main-inner .hatena-module-title:before{font-size:22px;margin:0 16px 0 0}}.page-index #main-inner .hatena-module-custom-special .hatena-module-title:before{content:"Special Feature"}.page-index #main-inner .hatena-module-custom-special .hatena-urllist{flex-direction:column}.page-index #main-inner .hatena-module-custom-special .hatena-module-body .hatena-urllist .urllist-item{position:relative;width:100%;margin-bottom:24px;padding:20px}.page-index #main-inner .hatena-module-custom-special .hatena-module-body .hatena-urllist .urllist-item:last-child{margin-bottom:0}.page-index #main-inner .hatena-module-custom-special .hatena-module-body .hatena-urllist .urllist-item:before{position:absolute;top:0;left:15px;content:"";width:52px;height:55px;background:url(https://cdn.blog.st-hatena.com/css/theme/hbm-simple-p2/images/icon-special.svg?version=4d776f2b7a248fe0227f52f5e9d786) no-repeat;z-index:10}@media only screen and (max-width: 767px){.page-index #main-inner .hatena-module-custom-special .hatena-module-body .hatena-urllist .urllist-item:before{left:10px;background-size:contain}}.page-index #main-inner .hatena-module-custom-special .hatena-urllist .urllist-image-link{width:50%;float:left;margin-right:1em}.page-index #main-inner .hatena-module-custom-special .urllist-with-thumbnails li .urllist-image{margin-right:20px}@media only screen and (max-width: 767px){.page-index #main-inner .hatena-module-custom-special .hatena-urllist .urllist-image-link{width:100%}.page-index #main-inner .hatena-module-custom-special .urllist-with-thumbnails li .urllist-image{margin-right:0}}.page-index #main-inner .hatena-module-custom-special .hatena-urllist .urllist-title-link{font-size:20px;width:auto}@media only screen and (max-width: 767px){.page-index #main-inner .hatena-module-custom-special .hatena-urllist .urllist-title-link{font-size:18px;line-height:1.5}}.page-index #main-inner .hatena-module-custom-special .hatena-urllist .urllist-categories{margin:0 0 12px}@media only screen and (max-width: 767px){.page-index #main-inner .hatena-module-custom-special .hatena-urllist .urllist-categories{margin:0 0 4px}}.page-index #main-inner .hatena-module-custom-special .hatena-urllist .urllist-entry-body{font-size:1.6rem;line-height:1.7}@media only screen and (max-width: 767px){.page-index #main-inner .hatena-module-custom-special .hatena-urllist .urllist-entry-body{font-size:1.4rem}}.page-index #main-inner .hatena-module{margin-bottom:80px}.urllist-see-more{margin-top:40px}@media only screen and (max-width: 767px){.page-index #main-inner .hatena-module{margin-bottom:60px}}.urllist-see-more a{margin:0 auto}.urllist-with-thumbnails li .urllist-image{margin-bottom:1rem}#content-inner{background:#f8f8f8;padding:50px calc(50% - 600px) 90px;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}@media only screen and (max-width: 1279px){#content-inner{padding:50px 5vw 90px}}@media (min-width:768px) and (max-width: 900px){#content-inner{display:block}}@media only screen and (max-width: 767px){#content-inner{flex-direction:column;padding:32px 24px}}#content-inner #wrapper{width:73%}@media only screen and (max-width: 1279px){#content-inner #wrapper{width:68%}}@media only screen and (max-width: 1279px){.static-page-layout-header-footer #content-inner #wrapper{width:100%}.static-page-layout-header-footer #content-inner{padding:56px calc(50% - 540px) 90px}}@media only screen and (max-width: 900px){#content-inner #wrapper{width:100%}}@media (max-width: 767px){.page-static_page #content-inner{padding:16px calc(50% - 540px);background:#fff}}#content-inner #box2{width:23%}@media only screen and (max-width: 1279px){#content-inner #box2{width:28%}}@media only screen and (max-width: 900px){#content-inner #box2{width:100%}}.AboutMedia{background:#ebebeb;border-radius:6px;padding:24px;margin:0 0 32px}@media only screen and (max-width: 900px){.AboutMedia{margin:40px 0 36px}}.AboutMedia__ttl{font-size:18px;font-weight:700;margin:0 0 12px;line-height:1.5}@media only screen and (max-width: 767px){.AboutMedia__ttl{text-align:center;margin:0 0 16px}}.AboutMedia__image{margin:0 0 12px;text-align:center}@media only screen and (max-width: 767px){.AboutMedia__image{text-align:center;margin:0 0 13px}}.AboutMedia__des{font-size:14px;line-height:2}@media only screen and (max-width: 767px){.AboutMedia__des{line-height:1.7}}.AboutMedia__comment{font-size:14px;text-align:center;font-weight:500;margin:24px 0 20px;padding:24px 0 0;border-top:1px solid #bfbfbf}@media only screen and (max-width: 767px){.AboutMedia__comment{margin:20px 0;padding:16px 0 0}}.AboutMedia__links{display:flex;justify-content:center;align-items:center;gap:16px}#box2 .hatena-module-title{font-size:18px;font-weight:700;padding:0 0 16px;border-bottom:1px solid #747474;margin:50px 0 25px}#box2 .hatena-module-title>a{font-weight:700}@media only screen and (max-width: 767px){.page-static_page #box2{padding:0 7%}#box2 .hatena-module-title{margin:32px 0 20px}}#box2 .urllist-item-inner{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:5px 0}#box2 .urllist-with-thumbnails .urllist-item-inner{flex-direction:row;gap:0 15px;align-items:center}@media only screen and (max-width: 767px){#box2 .urllist-item-inner{margin:0 0 18px}}#box2 .urllist-item-inner .urllist-image-link{border-radius:50%;overflow:hidden;margin:0;aspect-ratio:1/1;order:0}@media only screen and (max-width: 767px){#box2 .urllist-image-link{margin:0 10px 0 0}}#box2 .urllist-image-link .urllist-image{margin:0;aspect-ratio:1/1}#box2 .urllist-item-inner>*{order:1}#box2 .urllist-item-inner .urllist-title-link{font-weight:500;font-size:16px;line-height:1.7;margin-bottom:0;order:0}#box2 .urllist-with-thumbnails .urllist-title-link{width:calc(100% - 85px)}@media only screen and (max-width: 767px){#box2 .urllist-item-inner .urllist-title-link{line-height:1.6}#box2 .urllist-with-thumbnails .urllist-title-link{width:calc(100% - 65px)}}#box2 .hatena-module-category .hatena-urllist li{display:inline}#box2 .hatena-module-category .hatena-urllist a{font-size:14px;padding:4px 12px}@media only screen and (max-width: 767px){.archive-header-category{margin-bottom:2em}}.archive-module-calendar th{padding:10px 0}.archive-module-calendar th,.archive-module-calendar td{padding:8px 0}.archive-module-calendar th{font-size:12px;text-align:center}.archive-module-months .archive-module-month{margin-bottom:4px}.archive-module-year>a,.archive-module-month>a{font-size:16px;line-height:1.7}.calendar-day{width:30px;height:30px}.calendar-day a{color:#fff;display:inline-block;width:25px;height:25px;border-radius:50%;background:#222;line-height:26px;text-align:center}.hatena-module-links li{line-height:1.5}.page-index #main-inner .hatena-module-entries-access-ranking .hatena-module-title:before{content:"Ranking"}.entries-access-ranking{counter-reset:ranking}.entries-access-ranking-item{position:relative;counter-increment:ranking;overflow:hidden}.entries-access-ranking-item:before{display:block;position:absolute;top:0;left:0;width:24px;height:24px;background:#333;color:#fff;font-size:14px;font-weight:400;line-height:24px;text-align:center;z-index:1;content:counter(ranking);border-radius:50%}.entries-access-ranking-item.rank-1:before{background:#d1be37}.entries-access-ranking-item.rank-2:before{background:#b1b1b1}.entries-access-ranking-item.rank-3:before{background:#978475}#box2 .hatena-urllist:not(.urllist-with-thumbnails) .entries-access-ranking-item{padding-left:30px}@media (max-width:900px){.side-pickup{text-align:center}}.side-pickup li{margin-bottom:16px}.blog-footer{height:219px;padding:37px calc(50% - 600px) 0}@media (min-width:768px) and (max-width:900px){.blog-footer{height:270px}}@media only screen and (max-width: 767px){.blog-footer{padding:22px 5vw 0;border-top:1px solid #eee}}.blog-footer__logo{display:block;max-width:200px;margin:0 auto 22px;text-align:center}@media only screen and (max-width: 767px){.blog-footer__logo{margin:0 auto 7px}}.blog-footer__nav{text-align:center;margin:0 0 35px}@media only screen and (max-width: 767px){.blog-footer__nav{margin:0 0 18px}}.blog-footer__nav a{color:#747474;font-size:14px;border-right:1px solid #747474;padding:0 10px 0 0;margin:0 10px 0 0}@media only screen and (max-width: 767px){.blog-footer__nav a{font-size:12px;padding:0 7px 0 0;margin:0 7px 0 0}}.blog-footer__nav a:nth-last-of-type(1){border-right:none;padding:0;margin:0}.blog-footer__copy{font-size:12px;text-align:center;color:#747474}@media only screen and (max-width: 767px){.blog-footer__copy{transform:scale(.9)}}#GoTopBtn{opacity:.5;width:50px;height:50px;display:flex;flex-direction:row;justify-content:center;align-items:center;position:fixed;bottom:20px;right:20px;cursor:pointer;transition:.5s}@media only screen and (max-width: 900px){#GoTopBtn{width:35px;height:35px;bottom:20px}}@media only screen and (max-width: 900px){.page-entry #GoTopBtn{bottom:80px}}#GoTopBtn:hover{transition:.2s;opacity:.5}#GoTopBtn img{width:22px}@media only screen and (max-width: 767px){#GoTopBtn img{width:10px}}form.search-form{border:1px solid #747474;border-radius:6px;position:relative}form.search-form input[type=text]{font-size:14px;padding:9px 13px;border:none;border-radius:6px;width:100%}@media only screen and (max-width: 767px){form.search-form input[type=text]{padding:13px}}form.search-form input[type=submit]{width:20px;height:20px;position:absolute;top:.7rem;right:1rem;background:url(https://cdn.blog.st-hatena.com/css/theme/hbm-simple-p2/images/icon-search.svg?version=4d776f2b7a248fe0227f52f5e9d786);color:transparent;border:none}@media only screen and (max-width: 767px){form.search-form input[type=submit]{top:1rem}}#box2-inner form.search-form{margin:40px 0 60px}@media only screen and (max-width: 767px){#box2-inner form.search-form{margin:35px 0}}@keyframes ani_sea{0%{position:fixed;transform:translateY(-70px)}to{position:fixed;transform:translateY(0)}}#box2-inner .hatena-module-search-box:nth-of-type(1).active{animation:ani_sea 1s forwards}#box2-inner .hatena-module-search-box:nth-of-type(1) form.search-form{margin:0}#header-modules .hatena-module-search-box.active,#entry-header-modules .hatena-module-search-box.active{animation:ani_sea 1s forwards}#main-inner h2.archive-heading{font-size:26px!important;font-weight:700;line-height:1.5;margin-bottom:32px}@media only screen and (max-width: 767px){#main-inner h2.archive-heading{font-size:20px!important;margin-bottom:20px}}.page-archive .archive-entries{margin-bottom:24px}.page-archive .pager{margin:40px 0}.archive-entries .archive-entry{display:flex;flex-direction:column;flex-wrap:nowrap;padding-top:0;width:calc(33.3% - 16px)}.archive-entry .archive-entry-header,.archive-entry .categories,.archive-entry .archive-entry-body{order:1}.archive-entries .archive-entry .entry-thumb-link{position:relative;order:0;aspect-ratio:16/9;margin:0 0 1em;border-radius:6px;overflow:hidden;transition:none}.archive-entries .archive-entry .entry-thumb{width:100%;height:100%;margin:0}.archive-entries .archive-entry .entry-title{padding:0;margin:0 0 12px}@media only screen and (max-width: 900px){.archive-entries .archive-entry{width:calc(50% - 12px)}}@media only screen and (max-width: 767px){.archive-entries .archive-entry .entry-title{margin:0 0 8px}}.archive-entries .archive-entry .entry-title a{display:block;font-size:16px;font-weight:700;line-height:1.6}@media only screen and (max-width: 767px){.archive-entries .archive-entry .entry-title a{font-size:14px;line-height:1.5}}@media only screen and (max-width: 767px){.archive-entries .archive-entry .categories{display:none}}.archive-entries .archive-entry .archive-entry-body{display:none}.entry-date{padding:0 0 11px}@media only screen and (max-width: 767px){.entry-date{padding:0 0 5px}}.entry-date img,.entry-date span{display:inline-block;vertical-align:top}.entry-date img{width:16px;margin:0 7px 0 0}@media only screen and (max-width: 767px){.entry-date img{width:9px;margin:0 5px 0 0}}.entry-date span,.entry-date a{color:#626262;font-size:14px}@media only screen and (max-width: 767px){.entry-date span,.entry-date a{font-size:12px}}.entry-title{padding:0 0 16px}@media only screen and (max-width: 767px){.entry-title{padding:0 0 11px}}.entry-title a{font-size:26px;line-height:1.5;font-weight:700}@media only screen and (max-width: 767px){.entry-title a{font-size:20px;line-height:1.4}}.entry-categories{padding:0 0 40px}@media only screen and (max-width: 767px){.entry-categories{padding:0 0 18px}}.entry-content .table-of-contents{margin:0 auto 65px;border:1px solid #d0d0d0;padding:22px 40px;border-radius:6px}@media only screen and (max-width: 767px){.entry-content .table-of-contents{margin:0 auto 40px;padding:16px 16px 16px 40px}}.entry-content .table-of-contents a{display:block;font-size:16px;line-height:2;text-decoration:underline}@media only screen and (max-width: 767px){.entry-content .table-of-contents a{font-size:14px;line-height:1.4;margin:0 0 10px}}@media only screen and (max-width: 767px){.entry-content .table-of-contents a:nth-last-of-type(1){margin:0}}.SingleReader{margin:0 auto 40px;display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;border-radius:6px;overflow:hidden;background:#505050}@media only screen and (max-width: 767px){.SingleReader{flex-direction:column;align-items:center;padding:0 0 8px;margin:0 auto 32px}}.SingleReader__image{overflow:hidden;max-width:50%}@media only screen and (max-width: 767px){.SingleReader__image{margin:0 auto 8px;overflow:inherit;max-width:100%}}.SingleReader__image img{width:100%;max-width:none;height:100%;object-fit:cover}@media only screen and (max-width: 767px){.SingleReader__image img{width:100%;max-width:100%;height:auto}}.SingleReader__detail{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10px 0}@media only screen and (max-width: 767px){.SingleReader__detail{width:100%}}.SingleReader__detail__text{color:#fff;font-size:22px;line-height:1.6;text-align:center;font-weight:500;margin:8px 0}@media only screen and (max-width: 767px){.SingleReader__detail__text{font-size:16px}}.SingleReader__detail__btn{margin:0 auto;text-align:center}.SingleReader__detail__btn span{font-size:14px}@media only screen and (max-width: 767px){.SingleReader__detail__btn span{font-size:12px}}.SingleContact{margin:0 auto 65px;padding:36px 0 40px;border:1px solid #707070;border-radius:6px}@media only screen and (max-width: 767px){.SingleContact{margin:0 auto 30px;padding:18px 1.4rem 20px}}.SingleContact__icon{width:46px;margin:0 auto 20px}@media only screen and (max-width: 767px){.SingleContact__icon{width:32px;margin:0 auto 10px}}.SingleContact__ttl{font-size:22px;font-weight:700;text-align:center;margin:0 0 19px}@media only screen and (max-width: 767px){.SingleContact__ttl{font-size:16px;margin:0 0 11px}}.SingleContact__text{font-size:16px;line-height:2;text-align:center;margin:0 0 25px}@media only screen and (max-width: 767px){.SingleContact__text{font-size:14px;line-height:1.6;margin:0 0 20px;text-align:left}}.SingleContact__btn{margin:0 auto}@media only screen and (max-width: 767px){.SingleContact__btn{width:100%}}#entry-footer-secondary-modules .hatena-module-html .hatena-module-title{display:none}#entry-footer-secondary-modules .hatena-module-related-entries{margin:0 auto 28px}#entry-footer-secondary-modules .hatena-module-related-entries .hatena-module-title{margin:43px auto 28px}#entry-footer-secondary-modules .hatena-module-related-entries .hatena-module-title:before{content:"Released";display:inline-block;font-family:Pacifico,cursive;font-size:33px;margin:0 24px 0 0}@media only screen and (max-width: 767px){#entry-footer-secondary-modules .hatena-module-related-entries .hatena-module-title:before{font-size:22px;margin:0 16px 0 0}}#entry-footer-secondary-modules .hatena-module-related-entries .ele{display:block}@media only screen and (max-width: 767px){#entry-footer-secondary-modules .hatena-module-related-entries .ele .ttl{font-size:12px}}#entry-footer-secondary-modules .hatena-module-related-entries .ele .image{max-height:196px}@media only screen and (max-width: 767px){#entry-footer-secondary-modules .hatena-module-related-entries .ele .image{max-height:95px}}#entry-footer-secondary-modules .hatena-module-related-entries .related-entries .related-entries-item{width:calc((100% - 48px) / 3)}@media only screen and (max-width: 767px){#entry-footer-secondary-modules .hatena-module-related-entries .related-entries .related-entries-item{width:100%}}.SnsIcons{position:fixed;z-index:30;top:43%;left:16px;width:65px}@media only screen and (max-width: 900px){.SnsIcons{width:100%;display:flex;background:#fff;bottom:0;top:auto;left:0;padding:10px 0;align-items:center;justify-content:center;box-shadow:0 -3px 5px -2px #0000001a}}.SnsIcons__text{text-align:center;font-size:12px;line-height:1.3;font-weight:500;margin:0 0 8px}.SnsIcons__list img{width:39px}.sns-icon-fb{background:#fff;border-radius:50%}@media only screen and (max-width: 900px){.SnsIcons__text{width:22%;margin-bottom:0}}.SnsIcons__border{width:50px;margin:0 auto 12px}@media only screen and (max-width: 900px){.SnsIcons__border{display:none}}@media only screen and (max-width: 900px){.SnsIcons__list{display:flex;width:70%}}.SnsIcons__list a{display:block;width:39px;height:39px;margin:0 auto 19px}@media only screen and (max-width: 900px){.SnsIcons__list a{margin:0 auto}}.SnsIcons__list a:nth-last-of-type(1){margin:0 auto}.pager{display:flex;justify-content:space-between;margin:0 7%;background:#fff;padding:24px 40px;border-radius:6px;text-align:center;gap:20px}@media only screen and (max-width: 767px){.pager{padding:16px 24px}}.pager .pager-next,.pager .pager-prev{flex:1 1 50%;position:relative;font-size:16px;color:#505050}@media only screen and (max-width: 767px){.pager .pager-next,.pager .pager-prev{font-size:14px;line-height:1.25}}.pager-prev{text-align:left}.pager-next{text-align:right}@media only screen and (max-width: 767px){.pager .pager-next{margin:0}}.entry{background:#f8f8f8}@media only screen and (max-width: 767px){.page-entry #content-inner{padding:0 calc(50% - 540px) 90px}}@media (min-width: 768px) and (max-width:900px){.entry-inner{width:90vw;margin:auto}}.page-entry .entry-header{position:relative}.entry-header-menu{position:absolute;top:20px;right:20px}.entry-header-menu{background-color:#fff;color:#505050;padding:6px 14px;border-radius:6px;margin:0 5px 5px 0;border:1px solid #dddddd}.entry-header{background:#fff;border-radius:5px 5px 0 0;padding:45px 0 0}@media only screen and (max-width: 767px){.entry-header{border-radius:3px 3px 0 0;padding:16px 0 0}}.entry-header .entry-date,.entry-header .entry-title,.entry-header .entry-categories,.entry-header .social-buttons{width:86%;margin:0 auto}.entry-content{background:#fff;font-size:18px;line-height:2.1}@media only screen and (max-width: 900px){.entry-content{font-size:1.6rem}.entry-content>p:nth-of-type(1) img{border-radius:0;width:100%;max-width:90vw;margin:0}.entry-content .hatena-asin-detail{flex-direction:column;gap:20px 0}.entry-content .hatena-asin-detail .hatena-asin-detail-image{width:9rem}.entry-content .hatena-asin-detail .hatena-asin-detail-info{margin:20px 0 0}}.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{font-weight:700}.entry-content h1{line-height:1.8}@media only screen and (max-width: 767px){.entry-content h1{line-height:1.5}}@media only screen and (max-width: 767px){.entry-content>iframe{min-width:100%!important}}.entry-content>p img{margin:0 auto 35px;border-radius:6px}@media only screen and (max-width: 767px){.entry-content>p img{margin:0 auto 16px}}.entry-content>p a{text-decoration:underline}.entry-content table{border:1px solid #505050;border-collapse:collapse}.entry-content li,.entry-content dt,.entry-content dd{line-height:2.1}.entry-content ul li{list-style:disc}.entry-content ul ul li{list-style:circle}.entry-content ul ul ul li{list-style:square}.entry-content ol li{list-style:decimal}.entry-content ol ol,.entry-content ol ul,.entry-content ul ol,.entry-content ul ul{padding-bottom:0;padding-top:0}.entry-content dd{margin:0 0 1em 1.5em}.entry-content dt,.entry-content th{font-weight:800}.entry-content pre{background:#f7f8f9;padding:.5rem 1rem;border-radius:6px;font-size:.8em;line-height:1.7}.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{padding:2.5em 0 1em;line-height:1.5}.entry-content h2{border-bottom:1px solid #707070}.entry-content h4{border-bottom:1px solid #707070;margin-bottom:16px}.entry-content h5{position:relative}.entry-content h5:before{content:"";display:block;width:15px;border-bottom:1px solid #707070;position:absolute;top:64%;left:-22px}@media only screen and (max-width: 767px){.entry-content h5:before{width:12px;left:-19px}}.entry-content blockquote{position:relative;box-sizing:border-box;font-style:italic;color:#464646;background:#e0e0e0;border-left:none}.entry-content blockquote:before{display:inline-block;position:absolute;top:-6px;left:-15px;content:"“";font-family:sans-serif;color:#e0e0e0;font-size:70px;line-height:1;z-index:2}.entry-content blockquote:after{position:absolute;content:"";left:0;top:0;border-width:0 0 40px 40px;border-style:solid;border-color:transparent #ffffff}.entry-content blockquote p{position:relative;padding:0;margin:10px 0;z-index:3;line-height:1.7}.entry-content blockquote cite{display:block;text-align:right}.entry-content blockquote cite a{color:#888;font-size:14px;line-height:1.5}@media only screen and (max-width: 767px){.entry-content blockquote cite a{font-size:12px}}.entry-footer{padding:0 7%}.entry-footer-section{margin-bottom:1em;font-size:12px;color:#747474}.entry-footer .social-buttons{padding:0 0 40px;margin:0}@media only screen and (max-width: 767px){.entry-footer .social-buttons{padding:0 0 28px}}@media only screen and (max-width: 430px){.entry-footer .customized-footer .urllist-title-link{font-size:14px}.entry-footer .customized-footer .urllist-entry-body{font-size:12px}}.entry-footer .customized-footer .hatena-module:nth-of-type(1){padding:0 0 20px}@media only screen and (max-width: 767px){.entry-footer .customized-footer .hatena-module:nth-of-type(1){padding:0}}.entry-footer .customized-footer .hatena-module:nth-of-type(2){margin:0 auto 60px;border-radius:0 0 6px 6px}@media only screen and (max-width: 767px){.entry-footer .customized-footer .hatena-module:nth-of-type(2){margin:0 auto 18px}}.entry-footer-modules .hatena-module-profile .hatena-module-body{padding:0 0 0 245px;width:80vw;max-width:800px;margin:0 auto;position:relative}@media only screen and (max-width: 767px){.entry-footer-modules .hatena-module-profile .hatena-module-body{padding:0}}.entry-footer-modules .hatena-module-profile .hatena-module-body:before,.entry-footer-modules .hatena-module-profile .hatena-module-body:after{content:"";display:block;position:absolute;width:46px;height:2px;background:#1a1a1a;transform:rotate(-45deg)}@media only screen and (max-width: 767px){.entry-footer-modules .hatena-module-profile .hatena-module-body:before,.entry-footer-modules .hatena-module-profile .hatena-module-body:after{width:23px;height:1px}}.entry-footer-modules .hatena-module-profile .hatena-module-body:before{top:0;left:0}.entry-footer-modules .hatena-module-profile .hatena-module-body:after{bottom:0;right:0}.entry-footer-modules .hatena-module-profile .hatena-module-body .profile-activities{font-size:14px;line-height:2}@media only screen and (max-width: 767px){.entry-footer-modules .hatena-module-profile .hatena-module-body .profile-activities{font-size:12px}}.entry-footer-modules .hatena-module-profile .hatena-module-body .hatena-follow-button-box{margin:16px 0 0}.entry-footer-modules .hatena-module-profile .hatena-module-body .profile-icon-link{display:block;width:194px;position:absolute;top:50%;left:0;transform:translateY(-50%);border-radius:50%;overflow:hidden}@media only screen and (max-width: 767px){.entry-footer-modules .hatena-module-profile .hatena-module-body .profile-icon-link{position:static;transform:translateY(0);width:97px;margin:0 auto 12px}}.entry-footer-modules .hatena-module-profile .hatena-module-body .id{display:block;margin:0 0 16px}@media only screen and (max-width: 767px){.entry-footer-modules .hatena-module-profile .hatena-module-body .id{text-align:center}}.entry-footer-modules .hatena-module-profile .hatena-module-body .id span{font-size:18px;font-weight:700}@media only screen and (max-width: 767px){.entry-footer-modules .hatena-module-profile .hatena-module-body .id span{font-size:14px}}.entry-footer-modules .hatena-module-profile .hatena-module-body .profile-description p{font-size:14px;line-height:2}@media only screen and (max-width: 767px){.entry-footer-modules .hatena-module-profile .hatena-module-body .profile-description p{font-size:12px}}.page-about .entry-content{padding-top:50px}@media (min-width:768px) and (max-width:900px){.variable-rectangle-ad{height:83.5vw;max-height:345px;display:flex;justify-content:center;align-items:center}}.archive-description{font-size:1.6rem}.static-page-layout-header-footer #content-inner{justify-content:center}.urllist-see-more-link,.recent-entries-see-more-link,.SingleContact__btn{position:relative}.urllist-see-more-link:after,.recent-entries-see-more-link:after,.SingleContact__btn:after{width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg);position:absolute;top:0;bottom:0;right:0;left:136px;margin:auto;content:"";vertical-align:middle;transition:all .3s}.urllist-see-more a:hover,.SingleContact__btn:hover{color:#505050;background:#fff;opacity:1}.urllist-see-more-link:hover:after,.recent-entries-see-more-link:hover:after,.SingleContact__btn:hover:after{left:176px;border-top:2px solid #505050;border-right:2px solid #505050}.writer{display:flex;justify-content:space-between;align-items:center}.writer-profile{width:80%}.entry-content .writer-proifle-body{line-height:1.6}.entry-content .writer-image{margin-right:24px}.entry-content .writer-image img{border-radius:50%;font-weight:700}.writer-name-item{font-weight:700}.writer-id{margin-left:16px;display:inline-block}.entry-content .writer-sns{padding-left:0}.entry-content .writer-sns li{list-style-type:none}.writer-sns li img{width:24px;height:24px;vertical-align:text-bottom;margin-right:8px}.profile-card-container{position:relative}.profile-card-container:before,.profile-card-container:after{content:"";width:48px;height:48px;position:absolute}.profile-card-container:before{transform:rotate(315deg);border-top:3px solid #505050;top:16px;left:0}.profile-card-container:after{transform:rotate(135deg);border-top:3px solid #505050;bottom:16px;right:0}.profile-cards-list .profile-card-container{border:none}@media (max-width: 767px){.writer{display:block;text-align:center}.entry-content .writer-image{margin-right:0}.writer-profile{width:100%}.writer-proifle-body,.entry-content .writer-sns{text-align:left}}@media (min-width: 901px){.page-entry #content-inner{padding:20px 100px 90px}#content-inner #wrapper{max-width:900px;margin:0 auto}}.entry-content{padding:0 7% 60px}.entry-content p,.entry-content ol,.entry-content ul,.entry-content dl{padding:1.8rem 0;margin:0}.entry-content,.entry-content .table-of-contents{margin-top:0}.entry-content h1{font-size:2.4rem}.entry-content h2,.entry-content h3{font-size:2.2rem}.entry-content h2{margin-bottom:1.5em;margin-top:0}.entry-content h4,.entry-content h5{font-size:2rem}.entry-content h5{margin-left:24px}.entry-content h5,.entry-content h6{font-size:1.8rem}.entry-content h6{font-weight:400}.entry-content blockquote{border:0;font-size:1.8rem;padding:16px 16px 16px 32px;margin:0}@media only screen and (max-width: 900px){.entry-content,.entry-content blockquote{font-size:1.6rem}}.entry-content blockquote p:first-child{margin-top:10px}.entry-content .table-of-contents li{list-style:inherit}.entry-content table{width:auto;margin:0}.entry-content table th{background-color:#e0e0e0}.entry-content table th,.entry-content table td{border:1px solid #505050;padding:0 .5rem}.entry-content ul,.entry-content ol{padding-left:20px}.entry-content hr{margin:0}.entry-content div.footnote{margin-top:48px}.entry-header-modules .hatena-module-related-entries .related-entries,.entry-header-modules .hatena-module-recent-entries .recent-entries,.entry-header-modules .hatena-module-entries-access-ranking .entries-access-ranking,.entry-footer-modules .hatena-module-related-entries .related-entries,.entry-footer-modules .hatena-module-recent-entries .recent-entries,.entry-footer-modules .hatena-module-entries-access-ranking .entries-access-ranking{display:flex;flex-wrap:wrap;gap:24px}@media only screen and (max-width: 767px){.entry-header-modules .hatena-module-related-entries .related-entries,.entry-header-modules .hatena-module-recent-entries .recent-entries,.entry-footer-modules .hatena-module-related-entries .related-entries,.entry-footer-modules .hatena-module-recent-entries .recent-entries{flex-direction:column}.entry-header-modules .hatena-module-entries-access-ranking .entries-access-ranking,.entry-footer-modules .hatena-module-entries-access-ranking .entries-access-ranking{gap:12px}}.entry-header-modules .hatena-module-related-entries .related-entries .related-entries-item,.entry-header-modules .hatena-module-recent-entries .recent-entries .recent-entries-item,.entry-header-modules .hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item,.entry-footer-modules .hatena-module-related-entries .related-entries .related-entries-item,.entry-footer-modules .hatena-module-recent-entries .recent-entries .recent-entries-item,.entry-footer-modules .hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item{width:calc((100% - 48px) / 3)}.entry-footer-modules .hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item{background-color:#fff;border-radius:6px;padding:20px}.entry-header-modules .hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item{background-color:#fff;border-radius:6px;padding:8px}@media only screen and (max-width: 767px){.entry-header-modules .hatena-module-related-entries .related-entries .related-entries-item,.entry-header-modules .hatena-module-recent-entries .recent-entries .recent-entries-item,.entry-footer-modules .hatena-module-related-entries .related-entries .related-entries-item,.entry-footer-modules .hatena-module-recent-entries .recent-entries .recent-entries-item{width:100%}}@media only screen and (max-width: 767px){.entry-header-modules .hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item,.entry-footer-modules .hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item{width:calc((100% - 12px)/2)}.entry-footer-modules .hatena-module-entries-access-ranking .entries-access-ranking .entries-access-ranking-item{padding:10px}}.entry-header-modules .hatena-module-title,.entry-footer-modules .hatena-module-title{font-size:18px;font-weight:700;padding:0 0 16px;border-bottom:1px solid #747474;margin:50px 0 25px}#entry-footer-secondary-modules .hatena-module-related-entries .hatena-module-title:before{display:none}.entry-footer-modules .hatena-module-related-entries{margin:0}.entry-header-modules,.entry-footer-modules{margin:0 auto 28px}.entry-header-modules{padding:0 7% 60px} /*-- テーマストア --*/ /* ----------------------------------------------- SP： width < 480px & hover効果なし 文字サイズを小さく： width < 730px TBレイアウトに変更： width < 1000px ----------------------------------------------- */ /*================================================ variables - Figmaから書き出す ================================================*/ :root { --Primitive-Neutral-White: #ffffff; --Primitive-Neutral-Black: #000000; --Color-Primary: #FFD12B; --Primitive-Green-500: #00cad1; --Primitive-Gray-500: #c4c2be; --Primitive-Gray-600: #9d9a95; --Primitive-Gray-700: #75726e; --Primitive-Gray-800: #4e4b47; --Primitive-Gray-900: #262422; --Primitive-Gray-400: #d2d1cd; --Primitive-Gray-300: #e0dfdc; --Primitive-Gray-200: #eeeeeb; --Primitive-Gray-100: #fafaf6; --Color-Border-Base: #E0DFDC; --Primitive-Green-600: #00a6a2; --Primitive-Green-700: #007c71; --Primitive-Green-800: #005145; --Primitive-Green-900: #00261f; --Primitive-Green-400: #38dbec; --Primitive-Green-300: #76e6f9; --Primitive-Green-200: #b5effe; --Primitive-Green-100: #f2fcff; --Color-Background-Secondary: #FFE79D; --Primitive-Yellow-100: #fefff2; --Primitive-Yellow-200: #fdffb6; --Primitive-Yellow-300: #fffb79; --Primitive-Yellow-400: #ffed3d; --Primitive-Yellow-500: #ffd800; --Primitive-Yellow-600: #c99f00; --Primitive-Yellow-700: #936c00; --Primitive-Yellow-800: #5c3e00; --Primitive-Yellow-900: #261800; --Color-Secondary:#2EB2FF; --Color-Text-Icon-Base: #000; --Color-Text-Icon-Sub: #4E4B47; --Color-Text-Icon-Weak: undefined; --Color-Text-Icon-Inverse: #fff; --Color-Background-Primary: #FDF9EB; --Color-Background-Tertiary: #EEEEEB; --Color-Background-Base: #FFFFFF; --Color-Border-Dark: #9D9A95; --Color-Transparency-Dark-5: #000000; --Color-Transparency-Dark-20: #000000; --Color-Transparency-Dark-40: #000000; --Color-Transparency-Dark-80: #000000; --Color-Transparency-Dark-Lght-Light-80: #ffffff; --Primitive-Orange-100: #fffcf2; --Primitive-Orange-200: #ffedc6; --Primitive-Orange-300: #ffda99; --Primitive-Orange-400: #ffc16c; --Primitive-Orange-500: #ffa340; --Primitive-Orange-600: #EC5F0E; --Primitive-Orange-700: #93410b; --Primitive-Orange-800: #5c2305; --Primitive-Orange-900: #260c02; --Primitive-Blue-100: #f2f7ff; --Primitive-Blue-200: #c1deff; --Primitive-Blue-300: #90c9ff; --Primitive-Blue-400: #5fbbff; --Primitive-Blue-500: #2eb2ff; --Primitive-Blue-600: #009adf; --Primitive-Blue-700: #036f93; --Primitive-Blue-800: #004b5c; --Primitive-Blue-900: #002126; --Primitive-OregonTrail-100: #fdf9eb; --Primitive-OregonTrail-200: #faecbd; --Primitive-OregonTrail-300: #ffe79d; --Primitive-OregonTrail-400: #f7ce4f; --Primitive-OregonTrail-500: #ffd12b; --Primitive-OregonTrail-600: #bf7e0a; --Primitive-OregonTrail-700: #8c5302; --Primitive-OregonTrail-800: #592f00; --Primitive-OregonTrail-900: #261200; --Color-Text-Icon-Primary: #009ADF; --Color-Text-Icon-Secondary: #EC5F0E; --Color-Text-Icon-Tertiary: #FFA340; --Color-Background-TextBack: #EC5F0E; --Color-Transparency-Dark-60: #000000; --Color-Text-Icon-SNS: #555555; --Color-Border-Orange: #EC5F0E; --Primitive-Red-100: #ffe4d9; --Primitive-Red-200: #ffc2b3; --Primitive-Red-300: #ff9a8d; --Primitive-Red-400: #ff7471; --Primitive-Red-500: #ff424e; --Primitive-Red-600: #db304a; --Primitive-Red-700: #b72145; --Primitive-Red-800: #93153f; --Primitive-Red-900: #7a0c3b; --Color-Text-Icon-Required: #FF424E; --2: 2px; --4: 4px; --6: 6px; --8: 8px; --12: 12px; --16: 16px; --20: 20px; --24: 24px; --28: 28px; --32: 32px; --36: 36px; --40: 40px; --44: 44px; --48: 48px; --52: 52px; --56: 56px; --60: 60px; --64: 64px; --72: 72px; --80: 80px; --88: 88px; --96: 96px; --999: 999px; --Radius-ExtraSmall: 2px; --Radius-Small: 4px; --Radius-Medium: 8px; --Radius-Large: 24px; --Radius-ExtraLarge: 40px; --Radius-Full: 999px; --FontWeight-Regular: 400; --FontWeight-Bold: 700; --FontSize-M: 16px; --FontSize-L: 18px; --FontSize-XL: 22px; --FontSize-2XL: 28px; --FontSize-3XL: 32px; --FontSize-4XL: 36px; --FontSize-5XL: 40px; --FontSize-6XL: 44px; --FontSize-7XL: 48px; --FontSize-8XL: 56px; --FontSize-S: 16px; --FontSize-XS: 14px; --FontSize-2XS: 12px; --FontSize-3XS: 10px; --FontFamily-Sans: Noto Sans JP; } html, body { font-size: var(--16); font-family: var(--FontFamily-Sans); font-style: normal; } html { /* スムーズスクロール */ --scroll-padding-top: 85px; scroll-behavior: smooth; scroll-padding-top: var(--scroll-padding-top); &:has(.sub-header) { &:has(body:not(.hide-sidebar-subheader)) { --scroll-padding-top: 130px; } } } #main-inner { .bg-primary { background-color: var(--Color-Background-Primary); } .bg-secondary { background-color: var(--Color-Background-Secondary); } .bg-tertiary { background-color: var(--Color-Background-Tertiary); } } /*================================================ 画面上部の装飾画像 ================================================*/ #content-inner { background: url(https://uploads.cms.st-hatena.com/6802418398489095250/6802418398525175208) no-repeat right 0 / cover fixed; background-size: 370px auto; &:has(.st-blur) { background: transparent; } @media (width < 480px) { background-image: url(https://uploads.cms.st-hatena.com/6802418398489095250/6802418398525175208); background-size: 215px auto; } } /*================================================ ボタン ================================================*/ /* 下線付きもっと見るボタン */ .btn-more { .u_content_button { > div { text-align: right!important; a { display: inline-block; padding: 1rem calc(var(--FontSize-XS) + .5rem) 1rem 0 !important; border-radius: 0!important; border-bottom: 2px solid var(--Color-Primary); color: var(--Color-Text-Icon-Sub)!important; font-size: var(--FontSize-XS)!important; font-weight: var(--FontWeight-Bold)!important; line-height: 100%!important; text-decoration: none!important; background: no-repeat center right; background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13' viewBox='0 0 12 13' fill='none'%3E%3Cpath d='M4.14645 2.89649C4.3295 2.71343 4.619 2.70213 4.81539 2.86231L4.85348 2.89649L7.85348 5.89649C8.04874 6.09175 8.04874 6.40826 7.85348 6.60352L4.85348 9.60352C4.65822 9.79878 4.34171 9.79878 4.14645 9.60352C3.95118 9.40826 3.95118 9.09175 4.14645 8.89649L6.79293 6.25L4.14645 3.60352L4.11227 3.56543C3.95209 3.36905 3.96339 3.07955 4.14645 2.89649Z' fill='%234E4B47'/%3E%3C/svg%3E"); &:hover { opacity: 1; background-color: transparent!important; color: var(--Color-Text-Icon-Sub)!important; border-color: var(--Color-Secondary); } } } } } /* 楕円ボタン */ .btn-cta { a { background-color: var(--btn-cta-bg)!important; color: var(--btn-cta-color)!important; text-decoration: none!important; padding: 12px 20px; @media (width < 480px) { display: block !important; } &:hover { opacity: 1!important; @media (480px <= width) { background-color: var(--btn-cta-bg-hover)!important; } } @media (width < 1000px) { padding: 14px min(45px, 2rem) !important; } } --btn-cta-color: var(--Color-Text-Icon-Base); &:is(.--primary){ --btn-cta-bg: var(--Color-Secondary); --btn-cta-bg-hover: var(--Primitive-Blue-600); --btn-cta-color: var(--Color-Text-Icon-Inverse); } &:is(.--secondry) { --btn-cta-bg: var(--Color-Primary); --btn-cta-bg-hover: var(--Primitive-OregonTrail-600); } &:is(.--white) { --btn-cta-bg: var(--Color-Background-Base); --btn-cta-bg-hover: var(--Color-Background-Tertiary); } &:is(.--border) { --btn-cta-bg: var(--Color-Background-Base); --btn-cta-bg-hover: var(--Color-Background-Tertiary); a { border: 1px solid var(--Color-Border-Dark); } } &:is(.--icon-right) { &:is(.__arrow) { --icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M21 12.8198C21 7.84926 16.9706 3.81982 12 3.81982C7.02944 3.81982 3 7.84926 3 12.8198C3 17.7904 7.02944 21.8198 12 21.8198C16.9706 21.8198 21 17.7904 21 12.8198ZM11.293 8.11279C11.6591 7.74668 12.2381 7.72408 12.6309 8.04443L12.707 8.11279L16.707 12.1128C17.0976 12.5033 17.0976 13.1363 16.707 13.5269L12.707 17.5269C12.3165 17.9174 11.6835 17.9174 11.293 17.5269C10.9024 17.1363 10.9024 16.5033 11.293 16.1128L13.5859 13.8198H8C7.44772 13.8198 7 13.3721 7 12.8198C7 12.2675 7.44772 11.8198 8 11.8198H13.5859L11.293 9.52686L11.2246 9.45068C10.9043 9.05791 10.9269 8.47891 11.293 8.11279ZM23 12.8198C23 18.895 18.0751 23.8198 12 23.8198C5.92487 23.8198 1 18.895 1 12.8198C1 6.74469 5.92487 1.81982 12 1.81982C18.0751 1.81982 23 6.74469 23 12.8198Z' fill='white'/%3E%3C/svg%3E"); } &:is(.__arrow-bottom) { --icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19'%3E%3Cpath d='M13.4696 6.46967C13.7624 6.17678 14.2372 6.17678 14.5301 6.46967C14.823 6.76256 14.823 7.23732 14.5301 7.53022L10.0301 12.0302C9.7372 12.3231 9.26244 12.3231 8.96955 12.0302L4.46955 7.53022L4.41828 7.47309C4.17802 7.17851 4.19496 6.74426 4.46955 6.46967C4.74414 6.19508 5.17839 6.17814 5.47297 6.4184L5.5301 6.46967L9.49982 10.4394L13.4696 6.46967Z' fill='white'/%3E%3C/svg%3E"); } a { position: relative; display: flex!important; align-items: center; justify-content: center; gap: 1rem; border-radius: var(--Radius-Full)!important; margin-inline: auto!important; padding-inline: 3.5rem!important; &::after { content: ""; position: absolute; right: 1rem; top: 0; bottom: 0; margin: auto; width: 30px; height: 25px; background-color: currentColor; mask-image: var(--icon-image); mask-repeat: no-repeat; mask-position: center left; mask-size: contain; transition: all .2s linear; } &:hover { &::after { mask-position: center right; } } @media ( width < 430px ) { padding-left: 1.5rem!important; } } } } /*================================================ セクション設定 ================================================*/ :root { --maxWidth: auto; --outerBox-inline-padding: max(5rem, calc(50% - 550px)); --innerBox-inline-padding: clamp(var(--24), 7vw, var(--80)); --outerBox-padding: var(--80) var(--outerBox-inline-padding); --innerBox-padding: var(--80) var(--innerBox-inline-padding); @media (width < 1000px) { --outerBox-padding: 3rem 0; --innerBox-padding: var(--56) clamp(var(--24), 7vw, var(--80)); } } #content-inner { padding: 150px 0 0; body:not(.hide-sidebar-subheader) &:has(.sub-header) { padding-top: 210px; } @media (width < 1000px) { padding-top: 90px!important; } #wrapper { max-width: none; width: 100%; } .entry { background: transparent; } .entry-content { padding: 0; background: transparent; font-size: 1rem; } @media (min-width: 768px) and (max-width: 900px) { .entry-inner { width: auto; } } } .w-1200, .sub-header, .breadcrumb, [id*="footer"] { width: 100%; margin: auto; padding: var(--outerBox-padding); .u_row { padding: var(--innerBox-padding)!important; background: var(--Color-Background-Base); border-radius: var(--Radius-Large); } /* 背景が透明な要素では内側のpaddingを0にする */ &.bg-transparent, &:is(.breadcrumb), &:is([id*="footer"]) { --innerBox-padding: 0; @media (width < 1000px) { --outerBox-padding: 3rem 7vw; } .u_row { background: none; padding-inline: 2em; } } } /* 2カラム */ .article-wrap { padding: var(--outerBox-padding); padding-bottom: 0; margin-bottom: var(--80); @media (width < 480px) { padding-inline: 0; } .u-row { gap: 0 5rem; @media (width < 1000px) { flex-direction: column; } > .u-col:first-child { flex: 1; container-name: main-column; container-type: inline-size; margin: 0; max-width: none; min-width: 520px; padding-top: 0; height: fit-content; > div { padding: 0!important; background: var(--Color-Background-Base); border-radius: var(--Radius-Large); } @media (width < 1000px) { min-width: auto; padding: 0 clamp(var(--24), 7vw, var(--80)) var(--56) !important; } } > .u-col:last-child { container-name: sidebar; container-type: inline-size; flex: 1; max-width: 275px; @media (width < 1000px) { padding: var(--innerBox-padding) !important; padding-top: 5.5rem; max-width: none; } @media (width < 480px) { padding: var(--innerBox-padding) !important; padding-top: 5.5rem!important; } .u_content_custom_componentBlock { display: flex; flex-direction: column; gap: 3rem; } } } &.bg-transparent { .u-row { > .u-col:first-child { @media (width < 480px) { padding: 0 !important; } > div { padding: 0!important; @media (width < 480px) { padding-inline: clamp(24px, 7vw, 80px)!important; } } } } } } /* サイドバー・サブヘッダー非表示のページ */ .hide-sidebar-subheader { .article-wrap { .u-row { > .u-col:last-child { display: none!important; } } } .sub-header { display: none!important; } } /*================================================ ヘッダー ================================================*/ #main-inner { .global-header a { transition: all .2s; } #u_body .u_content_custom_componentBlock:has(.global-header) { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; } .header-setting { display: none; } .global-header { padding: 2rem 2rem 1rem; overflow: hidden; transition: all .2s ease-out; &::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity 0.5s ease-out; pointer-events: none; } .container > div { justify-content: space-between; gap: 1rem; padding: 0 calc(50% - 660px); @media (width < 1000px) { gap: 0; padding: 0; .st-show & { gap: 1.5rem; flex-direction: column; height: calc(100vh - 180px); flex-wrap: nowrap; } } > .u_column { flex: 0 0 240px !important; max-width: none !important; min-width: fit-content; @media (width < 1000px) { flex: 0 0 0 !important; } &:has(.header-links) { flex: 1 !important; align-items: flex-start; @media (width < 1000px) { min-width: auto; align-items: flex-start !important; overflow-y: auto; } > div { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 1rem; @media (width < 1000px) { display: block; } } } } } /* ロゴ */ div:has(> .header-logo) { display: flex; align-items: center; width: auto !important; @media (width < 1000px) { margin: 0 60px 0 0; .st-show & { width: 100% !important; padding: 0 8px !important; } } } .header-logo { a { display: block; max-width: 349px !important; &:hover { opacity: .7; } img { display: block; width: 100%!important; object-fit: contain; height: 40px; aspect-ratio: 300 / 40; transition: all .2s ease; } @media (width < 1000px) { .st-show & .u_content_image > div { text-align: center !important; } } } &.__index { display: none; } } /* リンク */ .header-links { flex: 1 1 0; width: 200px; overflow-x: auto; scrollbar-color: var(--Color-Border-Base) var(--Color-Background-Base); .u_content_menu { & > div { display: flex; flex-wrap: nowrap; flex-direction: row; } } @media (width < 1000px) { display: none; width: 100%; .st-show & { display: block; } } .u_content_menu { > div { width: fit-content; margin-left: auto; @media (width < 1000px) { display: flex; flex-direction: column; align-items: center; margin: 0 7vw 0; width: auto; } } a { position: relative; font-weight: var(--FontWeight-Bold); min-width: fit-content; @media (480px <= width ) { &:hover { color: var(--Color-Text-Icon-Tertiary) !important; opacity: 1; } } @media (width < 1000px) { position: relative; font-size: var(--FontSize-L) !important; margin: 0 !important; padding: 0.75rem !important; } &.st-current::before { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 24px; height: 4px; background: var(--Color-Text-Icon-Tertiary); border-radius: 10px; @media (width < 1000px) { top: 1rem; bottom: 1rem; height: auto; left: 0; width: 5px; } } } } } /* サブヘッダー */ body:not(.hide-sidebar-subheader) &:has(.sub-header) { > .u_row { @media (1000px <= width) { padding-bottom: 6rem!important; } } } .sub-header { position: fixed; top: 117px; left: 0; right: 0; padding: 0!important; padding-block: 0!important; transition: all .2s ease-out; .u_content_menu { padding: .5rem; background: var(--Color-Background-Base); border-top: 1px solid var(--Color-Border-Base); border-bottom: 1px solid var(--Color-Border-Base); gap: 1.35rem; div { display: flex; gap: 1.35rem; justify-content: center; padding: .5rem 0; a { padding: .5rem .75rem!important; font-size: var(--FontSize-L)!important; font-weight: var(--FontWeight-Bold); line-height: 150%; color: var(--Color-Text-Icon-Base)!important; &.st-current { color: var(--Color-Text-Icon-Tertiary)!important; } &:hover { border-radius: 999px; background: var(--Color-Text-Icon-Tertiary); color: var(--Color-Text-Icon-Inverse)!important; opacity: 1; } } } } @media (width < 1000px) { display: none; .st-show & { display: block; position: relative; top: 2.5rem; .u_content_menu { border-radius: var(--Radius-Large); box-shadow: none; padding-block: 2rem!important; margin-bottom: 6.5rem; border: none; div { flex-direction: column; align-items: center; gap: 0; a { width: fit-content; } } } } } } /* ボタン */ .btn-cta { @media (width < 1000px) { display: none; .st-show & { display: inline-block; position: fixed; bottom: 1rem; left: 1.5rem; width: calc((100% - 4rem) / 2); min-width: fit-content; &:last-child { left: auto; right: 1.5rem; } a { padding-inline: .75rem!important; } } } .u_content_button > div { @media (width < 1000px) { text-align: right !important; } } } /* blur時 */ &.st-blur { background-color: var(--Color-Background-Base); &::before { opacity: 1; border-bottom: 1px solid var(--Color-Border-Base); } /* ロゴ */ .header-logo { a { max-width: 316px; } } @media (1000px <= width) { padding-block: 0; body:not(.hide-sidebar-subheader) &:has(.sub-header) { > .u_row { padding-bottom: 3.5rem !important; } .sub-header { top: 65px; a { font-size: var(--FontSize-S)!important; } } .header-links { .u_content_menu { a { padding-block: .7rem; } } } .btn-cta { a { padding-block: 10px!important; } } } } } /* 全体のSP表示時スタイル */ @media (width < 1000px) { padding: 1rem 1.5rem; .u_content_custom_componentBlock:has(&) { top: 8px; } > div { height: 100%; } &.st-show { padding: 0; border-radius: 0; height: 100dvh; mask: unset; > div { padding: 1.5rem 1.5rem 1.5rem !important; background: var(--Color-Background-Primary) !important; overflow-y: auto; } } } } /*----- トグルボタン -----*/ .header-btn-toggle { --height: 48px; --inner-height: 32px; display: none; position: fixed; top: .5rem; right: 1rem; height: var(--height); width: var(--height); border-radius: 50%; z-index: 99999; @media (width < 1000px) { display: block; } a { position: relative; align-content: center; height: var(--height); width: 100% !important; background-color: transparent!important; &::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: var(--inner-height); width: var(--inner-height); background-color: var(--Color-Text-Icon-Base); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 18C3.71667 18 3.47933 17.904 3.288 17.712C3.096 17.5207 3 17.2833 3 17C3 16.7167 3.096 16.4793 3.288 16.288C3.47933 16.096 3.71667 16 4 16H20C20.2833 16 20.5207 16.096 20.712 16.288C20.904 16.4793 21 16.7167 21 17C21 17.2833 20.904 17.5207 20.712 17.712C20.5207 17.904 20.2833 18 20 18H4ZM4 13C3.71667 13 3.47933 12.904 3.288 12.712C3.096 12.5207 3 12.2833 3 12C3 11.7167 3.096 11.479 3.288 11.287C3.47933 11.0957 3.71667 11 4 11H20C20.2833 11 20.5207 11.0957 20.712 11.287C20.904 11.479 21 11.7167 21 12C21 12.2833 20.904 12.5207 20.712 12.712C20.5207 12.904 20.2833 13 20 13H4ZM4 8C3.71667 8 3.47933 7.90433 3.288 7.713C3.096 7.521 3 7.28333 3 7C3 6.71667 3.096 6.479 3.288 6.287C3.47933 6.09567 3.71667 6 4 6H20C20.2833 6 20.5207 6.09567 20.712 6.287C20.904 6.479 21 6.71667 21 7C21 7.28333 20.904 7.521 20.712 7.713C20.5207 7.90433 20.2833 8 20 8H4Z'/%3E%3C/svg%3E") no-repeat center; mask-size: contain; } .global-header.st-show + div & { &::after { background-color: var(--Color-Text-Icon-Base); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 13.4905L6.78327 18.7072C6.58809 18.9024 6.33967 19 6.03802 19C5.73638 19 5.48796 18.9024 5.29278 18.7072C5.09759 18.512 5 18.2636 5 17.962C5 17.6603 5.09759 17.4119 5.29278 17.2167L10.5095 12L5.29278 6.78327C5.09759 6.58809 5 6.33967 5 6.03802C5 5.73638 5.09759 5.48796 5.29278 5.29278C5.48796 5.09759 5.73638 5 6.03802 5C6.33967 5 6.58809 5.09759 6.78327 5.29278L12 10.5095L17.2167 5.29278C17.4119 5.09759 17.6603 5 17.962 5C18.2636 5 18.512 5.09759 18.7072 5.29278C18.9024 5.48796 19 5.73638 19 6.03802C19 6.33967 18.9024 6.58809 18.7072 6.78327L13.4905 12L18.7072 17.2167C18.9024 17.4119 19 17.6603 19 17.962C19 18.2636 18.9024 18.512 18.7072 18.7072C18.512 18.9024 18.2636 19 17.962 19C17.6603 19 17.4119 18.9024 17.2167 18.7072L12 13.4905Z'/%3E%3C/svg%3E") no-repeat center; height: 18px; width: 18px; transition: all .2s ease-in-out; } &:hover { opacity: 1; &::after { transform: rotate(180deg); } } } } } } /*================================================ パンくず ================================================*/ #main-inner { .breadcrumb { background: none!important; padding-block: 0; .breadcrumb-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; align-self: stretch; [class*="breadcrumb-"] { color: var(--Color-Text-Icon-Sub); font-size: var(--FontSize-2XS); line-height: 140%; text-decoration: none!important; transform: none; } .breadcrumb-link { width: 12px; height: 12px; display: inline-block; background: no-repeat center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M5.73932 0.667917C5.88894 0.627479 6.04595 0.622887 6.19733 0.653269L6.26178 0.667917L6.34186 0.694284C6.52391 0.764346 6.67717 0.892584 6.79889 0.987253L10.1895 3.62495C10.3937 3.78379 10.5741 3.91913 10.7061 4.0976C10.8145 4.24421 10.8952 4.40934 10.9444 4.58491C11.0042 4.79861 11.0001 5.02356 11.0001 5.28217V8.90034C11.0001 9.17194 11.0011 9.40585 10.9854 9.5976C10.9693 9.79507 10.9332 9.99161 10.837 10.1806C10.6932 10.4628 10.4638 10.693 10.1817 10.8369C9.99256 10.9332 9.79534 10.9682 9.59772 10.9843C9.40598 11 9.17202 10.9999 8.90045 10.9999H7.90045C7.83878 10.9999 7.76206 11.0005 7.69537 10.9951C7.6228 10.9891 7.51903 10.9733 7.41022 10.9179C7.26916 10.846 7.154 10.7318 7.08209 10.5908C7.02661 10.4818 7.01087 10.3772 7.00494 10.3046C6.99954 10.2381 7.00006 10.1621 7.00006 10.1005V6.79975C7.00006 6.65189 6.99993 6.57087 6.99518 6.51264C6.99499 6.51027 6.99441 6.50792 6.9942 6.50581C6.99241 6.50564 6.99032 6.50499 6.98834 6.50483C6.93008 6.50007 6.8484 6.49995 6.70026 6.49995H5.29987C5.15211 6.49995 5.07097 6.50009 5.01276 6.50483C5.01053 6.50501 5.00792 6.50562 5.00592 6.50581C5.00573 6.50791 5.00611 6.51029 5.00592 6.51264C5.00117 6.57087 5.00006 6.65185 5.00006 6.79975V10.1005C5.00006 10.1621 5.00058 10.2381 4.99518 10.3046C4.98925 10.3772 4.97449 10.4818 4.91901 10.5908C4.84716 10.7318 4.73185 10.846 4.59088 10.9179C4.48193 10.9734 4.37734 10.9891 4.30475 10.9951C4.23821 11.0005 4.1622 10.9999 4.10065 10.9999H3.10065C2.82887 10.9999 2.59424 11 2.40241 10.9843C2.20496 10.9682 2.00837 10.9331 1.8194 10.8369C1.53721 10.693 1.30791 10.4628 1.16412 10.1806C1.06787 9.99156 1.03183 9.79512 1.01569 9.5976C1.00787 9.50184 1.00388 9.39545 1.00201 9.27925L1.00006 8.90034V5.28217C1.00006 5.02361 0.995957 4.79857 1.05573 4.58491C1.10487 4.40942 1.18568 4.24416 1.29401 4.0976C1.42602 3.91911 1.60637 3.7838 1.81061 3.62495L5.20221 0.987253C5.34133 0.879031 5.52183 0.726803 5.73932 0.667917Z' fill='%234E4B47'/%3E%3C/svg%3E"); background-size: contain; text-indent: -9999px; overflow: hidden; white-space: nowrap; } } } } /*================================================ テキスト ================================================*/ #main-inner .entry { /*===== 見出し =====*/ h1, h2, h3, h4, h5, h6 { padding: 2rem 0 0; border: none; line-height: 140%; font-weight: var(--FontWeight-Bold)!important; margin: 0; @media (width < 1000px){ padding: 1.75rem 0 0; } &::before, &::after { content: none; } } h1 { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; color: var(--Color-Text-Icon-Secondary); font-size: var(--FontSize-5XL)!important; letter-spacing: -0.05rem; &::before { content: ""; display: block; width: 2.5rem; height: 0.25rem; background: var(--Color-Border-Orange); } @media (width < 730px) { gap: 1rem; font-size: var(--FontSize-3XL)!important; letter-spacing: -0.04rem; } @container main-column (width < 730px) { gap: 1rem; font-size: var(--FontSize-3XL)!important; letter-spacing: -0.04rem; } } h2 { color: var(--Color-Text-Icon-Secondary); /* Heading/M */ font-size: var(--FontSize-4XL)!important; letter-spacing: -0.045rem; @media (width < 730px){ font-size: var(--FontSize-2XL)!important; letter-spacing: -0.035rem; } @container main-column (width < 730px) { font-size: var(--FontSize-2XL)!important; letter-spacing: -0.035rem; } } h3 { padding: 2rem 0rem 1rem; border-bottom: 1px solid var(--Color-Border-Orange); color: var(--Color-Text-Icon-Secondary); font-size: var(--FontSize-3XL, 2rem)!important; letter-spacing: -0.04rem; @media (width < 730px){ padding: 1.75rem 0rem 1rem; font-size: var(--FontSize-XL)!important; letter-spacing: -0.03rem; } @container main-column (width < 730px){ padding: 1.75rem 0rem 1rem; font-size: var(--FontSize-XL)!important; letter-spacing: -0.03rem; } .section-sub-heading & { color: var(--Color-Text-Icon-Base)!important; font-size: var(--FontSize-XL)!important; border-bottom: none!important; padding-bottom: 0!important; } } h4 { display: flex; align-items: center; gap: 0.625rem; color: var(--Color-Text-Icon-Base); /* Heading/XS */ font-size: var(--FontSize-2XL)!important; letter-spacing: -0.035rem; &::before { content: ""; display: block; width: 0.75rem; height: 0.75rem; aspect-ratio: 1/1; border-radius: var(--Radius-Small); background: var(--Color-Text-Icon-Tertiary); transform: rotate(-45deg); } @media (width < 730px){ font-size: var(--FontSize-L)!important; letter-spacing: -0.025rem; } @container main-column (width < 730px) { font-size: var(--FontSize-L)!important; letter-spacing: -0.025rem; } } h5 { color: var(--Color-Text-Icon-Secondary); /* Heading/2XS */ font-size: var(--FontSize-XL)!important; letter-spacing: -0.03rem; &::before { content: none!important; display: none!important; } @media (width < 730px){ font-size: var(--FontSize-M)!important; letter-spacing: -0.0225rem; } @container main-column (width < 730px) { font-size: var(--FontSize-M)!important; letter-spacing: -0.0225rem; } } h6 { color: var(--Color-Text-Icon-Base)!important; /* Heading/3XS */ font-size: var(--FontSize-L); letter-spacing: -0.025rem; @media (width < 730px){ font-size: var(--FontSize-M)!important; letter-spacing: -0.0225rem; } @container main-column (width < 730px) { font-size: var(--FontSize-M)!important; letter-spacing: -0.0225rem; } } /* ドット付見出し */ .title-dot :is(h1, h2, h3, h4, h5, h6), .archive-heading { display: flex; padding-top: 0; align-items: center; gap: 0.5rem; color: var(--Color-Text-Icon-Base); font-size: var(--FontSize-3XL)!important; font-weight: var(--FontWeight-Bold, 700); line-height: 140%; letter-spacing: -0.04rem; border: none; @media (width < 480px){ font-size: var(--FontSize-XL)!important; } &::before { content: ""; display: block; width: 10px; height: 10px; aspect-ratio: 1 / 1; border-radius: var(--Radius-Full); background-color: var(--Color-Text-Icon-Tertiary); } } p { padding: 0; margin: 1.5rem 0; color: var(--Color-Text-Icon-Base); font-size: var(--FontSize-S)!important; line-height: 160%!important; a { text-decoration: underline; &[target="_blank"]::after{ content: ""; display: inline-block; margin-inline: .2rem; width: 1rem; height: 1rem; background: url(https://uploads.cms.st-hatena.com/6802418398489095250/6802418398512596807) no-repeat center; background-size: contain; vertical-align: -1px; } } } } /*================================================ 記事一覧 ================================================*/ #main-inner { --title-font-size: var(--FontSize-L); --title-letter-space: 0.03rem; --discription-font-size: var(--FontSize-S); --list-padding-block: clamp(48px, 5cqi, 64px); --entrylist-list-image-min-width: 120px; --entrylist-list-image-max-width: 250px; --entrylist-card-column-count: 3; @media (width < 730px) { --title-font-size: var(--FontSize-XS); --discription-font-size: var(--FontSize-2XS); } @container main-column (width < 730px) { --title-font-size: var(--FontSize-XS); --discription-font-size: var(--FontSize-2XS); } .Xlarge { .entrylist-cards { .entrylist-item:first-child { --title-font-size: var(--FontSize-XL); --title-letter-space: 0.04rem; --entrylist-list-image-min-width: 80%; --entrylist-list-image-max-width: 80%; @media (width < 730px) { --title-font-size: var(--FontSize-L); --title-letter-space: 0.03rem; } @container main-column (width < 730px) { --title-font-size: var(--FontSize-L); --title-letter-space: 0.03rem; } @media (width < 480px) { --entrylist-list-image-min-width: 100%; --entrylist-list-image-max-width: 100%; } @container main-column (width < 480px) { --entrylist-list-image-min-width: 100%; --entrylist-list-image-max-width: 100%; } } } } .large { /* カードタイプは最初の2つ、リストタイプは１つ目が大きくなる */ .entrylist-cards .entrylist-item:nth-child(1), .entrylist-cards .entrylist-item:nth-child(2), .entrylist-list .entrylist-item:first-child { --title-font-size: var(--FontSize-XL); --title-letter-space: 0.04rem; --entrylist-list-image-min-width: 340px; --entrylist-list-image-max-width: 400px; @media (width < 730px) { --title-font-size: var(--FontSize-L); --title-letter-space: 0.03rem; } @container main-column (width < 730px) { --title-font-size: var(--FontSize-L); --title-letter-space: 0.03rem; } } .entrylist-cards .entrylist-item:nth-child(n+3) { @media (width < 730px){ --title-font-size: var(--FontSize-M); } } } .small { --title-font-size: var(--FontSize-M); --title-letter-space: 0.02rem; --list-padding-block: clamp(20px, 4cqi, 40px); --entrylist-list-image-min-width: 120px; --entrylist-list-image-max-width: 180px; } .entrylist-cards, .entrylist-list { .entrylist-item, .entrylist-contents, .entrylist-meta { display: flex; flex-direction: column; align-items: flex-start; margin: 0; } .entrylist-item { container-name: item-size; container-type: inline-size; background-color: var(--background-color, transparent); overflow: hidden; .entrylist-link { z-index: 1; } /* サムネイル */ .entrylist-image-box { width: 100%; border-radius: 0rem var(--Radius-Large); aspect-ratio: 16 / 9; overflow: hidden; .entrylist-image { width: 100%; object-fit: cover; aspect-ratio: 16 / 9; transition: all .2s ease-in-out; background-color: var(--Color-Background-Tertiary); } } .entrylist-contents { padding: 1.25rem 0 0; gap: 0.75rem; /* 記事タイトル */ .entrylist-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; font-size: var(--title-font-size)!important; line-height: 140%!important; letter-spacing: var(--title-letter-space); color: var(--Color-Text-Icon-Base); padding: 0; border: none; &::before, &::after { content: none!important; } } /* 概要 */ p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; font-size: var(--discription-font-size)!important; } .entrylist-meta { gap: .75rem; &:empty { display: none; } .entrylist-date, .entrylist-categories { padding-left: calc(14px + .25rem); background: no-repeat left center; background-size: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'%3E%3Cpath d='M11.6665 6.85409H2.33317V10.4709C2.33317 10.9704 2.33338 11.3101 2.35482 11.5726C2.37571 11.8283 2.41372 11.9593 2.46021 12.0505L2.50521 12.1309C2.61729 12.3136 2.778 12.4625 2.97005 12.5604L3.04753 12.5934C3.13478 12.6246 3.25631 12.6501 3.448 12.6658C3.71052 12.6872 4.05016 12.6874 4.54972 12.6874H9.44995C9.94951 12.6874 10.2892 12.6872 10.5517 12.6658C10.8074 12.6449 10.9384 12.6069 11.0296 12.5604L11.1099 12.5154C11.2927 12.4033 11.4416 12.2426 11.5395 12.0505L11.5725 11.9731C11.6037 11.8858 11.6292 11.7643 11.6449 11.5726C11.6663 11.3101 11.6665 10.9704 11.6665 10.4709V6.85409ZM6.67627 7.5354C6.85523 7.41609 7.08533 7.40491 7.27498 7.50635C7.46466 7.60786 7.58317 7.80562 7.58317 8.02075V10.3541H7.729C8.05117 10.3541 8.31234 10.6153 8.31234 10.9374C8.31234 11.2596 8.05117 11.5208 7.729 11.5208H6.27067C5.94851 11.5208 5.68734 11.2596 5.68734 10.9374C5.68734 10.6153 5.94851 10.3541 6.27067 10.3541H6.4165V9.10824C6.15221 9.26148 5.81129 9.18536 5.63949 8.92765C5.46078 8.6596 5.53321 8.29744 5.80127 8.11873L6.67627 7.5354ZM8.74984 3.93742V3.35409H5.24984V3.93742C5.24984 4.25958 4.98867 4.52075 4.6665 4.52075C4.34434 4.52075 4.08317 4.25958 4.08317 3.93742V3.35579C3.82332 3.35762 3.61924 3.36174 3.448 3.37573C3.25631 3.39139 3.13478 3.41686 3.04753 3.44808L2.97005 3.48112C2.778 3.57899 2.61729 3.72791 2.50521 3.91064L2.46021 3.99097C2.41372 4.0822 2.37571 4.21317 2.35482 4.46891C2.33338 4.73143 2.33317 5.07108 2.33317 5.57064V5.68742H11.6665V5.57064C11.6665 5.07108 11.6663 4.73143 11.6449 4.46891C11.6292 4.27723 11.6037 4.15569 11.5725 4.06844L11.5395 3.99097C11.4416 3.79891 11.2927 3.63821 11.1099 3.52612L11.0296 3.48112C10.9384 3.43463 10.8074 3.39663 10.5517 3.37573C10.3804 3.36174 10.1764 3.35762 9.9165 3.35579V3.93742C9.9165 4.25958 9.65534 4.52075 9.33317 4.52075C9.01101 4.52075 8.74984 4.25958 8.74984 3.93742ZM12.8332 10.4709C12.8332 10.9512 12.8338 11.3467 12.8075 11.6677C12.7841 11.9546 12.7373 12.2214 12.6292 12.4732L12.5791 12.5803C12.3834 12.9644 12.0855 13.2858 11.7201 13.51L11.5594 13.6C11.2763 13.7443 10.9747 13.8017 10.6468 13.8285C10.3258 13.8547 9.93032 13.8541 9.44995 13.8541H4.54972C4.06936 13.8541 3.67392 13.8547 3.35287 13.8285C3.06595 13.805 2.79921 13.7582 2.54736 13.6501L2.44027 13.6C2.05616 13.4043 1.73475 13.1064 1.51058 12.741L1.42057 12.5803C1.27633 12.2972 1.21893 11.9956 1.19214 11.6677C1.16591 11.3467 1.1665 10.9512 1.16651 10.4709V5.57064C1.1665 5.09027 1.16591 4.69483 1.19214 4.37378C1.21893 4.04591 1.27633 3.74428 1.42057 3.46118L1.51058 3.30054C1.73475 2.93508 2.05616 2.63722 2.44027 2.44149L2.54736 2.39136C2.79921 2.28333 3.06595 2.2365 3.35287 2.21305C3.56334 2.19586 3.80582 2.19103 4.08317 2.18913V1.60409C4.08317 1.28192 4.34434 1.02075 4.6665 1.02075C4.98867 1.02075 5.24984 1.28192 5.24984 1.60409V2.18742H8.74984V1.60409C8.74984 1.28192 9.01101 1.02075 9.33317 1.02075C9.65534 1.02075 9.9165 1.28192 9.9165 1.60409V2.18913C10.1939 2.19103 10.4363 2.19586 10.6468 2.21305C10.9747 2.23985 11.2763 2.29724 11.5594 2.44149L11.7201 2.53149C12.0855 2.75566 12.3834 3.07707 12.5791 3.46118L12.6292 3.56828C12.7373 3.82012 12.7841 4.08687 12.8075 4.37378C12.8338 4.69483 12.8332 5.09027 12.8332 5.57064V10.4709Z' fill='%232EB2FF'/%3E%3C/svg%3E"); } /* 投稿日 */ .entrylist-date { line-height: 100%!important; time { color: var(--Color-Text-Icon-Sub); font-size: var(--FontSize-XS); font-weight: var(--FontWeight-Regular); line-height: 100%!important; } } /* カテゴリー */ .entrylist-categories { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; background: no-repeat left 3px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'%3E%3Cpath d='M5.6438 1.02075L6.00781 1.02531C6.12321 1.03088 6.23361 1.0431 6.34221 1.06918L6.47437 1.1062C6.6051 1.14868 6.73059 1.20682 6.84807 1.27881L6.91756 1.32438C7.0774 1.43582 7.21671 1.5791 7.37614 1.73853L11.8497 6.21151L12.3128 6.6792C12.4513 6.82214 12.5732 6.95349 12.6774 7.07626C12.8903 7.32701 13.0629 7.58077 13.1611 7.8829L13.2112 8.06006C13.2969 8.41762 13.2969 8.79055 13.2112 9.14811L13.1611 9.32528C13.0629 9.62741 12.8903 9.88116 12.6774 10.1319C12.5732 10.2547 12.4513 10.386 12.3128 10.529L11.8497 10.9967L10.5594 12.2864C10.2197 12.6261 9.94024 12.9062 9.69466 13.1147C9.47526 13.3009 9.25349 13.4562 8.99911 13.5579L8.88802 13.5983C8.47789 13.7316 8.03985 13.7484 7.62281 13.6484L7.44564 13.5983C7.14351 13.5001 6.88976 13.3275 6.639 13.1147C6.51623 13.0104 6.38489 12.8885 6.24195 12.7501L5.77425 12.2869L1.30127 7.8134C1.14184 7.65396 0.998565 7.51466 0.887128 7.35482L0.841555 7.28532C0.769564 7.16784 0.711422 7.04236 0.668948 6.91162L0.63192 6.77946C0.605848 6.67087 0.593625 6.56046 0.588056 6.44507L0.583499 6.08106V3.47087C0.583499 3.1538 0.582872 2.88063 0.601158 2.65682C0.620006 2.42625 0.661897 2.19675 0.774335 1.97608L0.841555 1.85588C1.00967 1.58172 1.25072 1.35843 1.53882 1.21159L1.62199 1.17228C1.81689 1.08872 2.0178 1.05491 2.21957 1.03841C2.44337 1.02013 2.71654 1.02075 3.03361 1.02075H5.6438ZM4.75627 4.23364C5.1975 4.27844 5.54183 4.65103 5.54183 5.10409C5.54183 5.58734 5.15008 5.97909 4.66683 5.97909C4.21378 5.97909 3.84119 5.63476 3.79639 5.19352L3.79183 5.10409L3.79639 5.01465C3.84119 4.57342 4.21378 4.22909 4.66683 4.22909L4.75627 4.23364ZM1.75017 6.08106L1.75358 6.39209C1.75607 6.45302 1.75993 6.48141 1.76612 6.50716L1.7946 6.59432C1.80626 6.62243 1.82024 6.64976 1.83618 6.67578L1.86182 6.71224C1.89532 6.75464 1.95985 6.82224 2.12614 6.98853L6.59969 11.4615L7.05371 11.9121C7.1831 12.0375 7.2934 12.1402 7.3938 12.2254C7.58933 12.3914 7.70888 12.457 7.80624 12.4886L7.8951 12.5137C8.10356 12.5636 8.32244 12.5552 8.52743 12.4886L8.60547 12.4578C8.68926 12.4182 8.79317 12.35 8.93986 12.2254C9.14065 12.055 9.38075 11.8147 9.73397 11.4615L11.0243 10.1712L11.4749 9.71721C11.6003 9.58782 11.7029 9.47752 11.7882 9.37712C11.9542 9.18159 12.0197 9.06204 12.0514 8.96468L12.0764 8.87582C12.1192 8.69719 12.1192 8.51099 12.0764 8.33236L12.0514 8.24349C12.0197 8.14613 11.9542 8.02659 11.7882 7.83106C11.7029 7.73065 11.6003 7.62035 11.4749 7.49097L11.0243 7.03695L6.55127 2.5634C6.38498 2.39711 6.31739 2.33257 6.27499 2.29907L6.23853 2.27344C6.2125 2.25749 6.18518 2.24351 6.15707 2.23185L6.06991 2.20337C6.04415 2.19719 6.01576 2.19332 5.95484 2.19084L5.6438 2.18742H3.03361C2.69729 2.18742 2.47998 2.18816 2.3147 2.20166C2.19603 2.21136 2.13322 2.22572 2.09709 2.23869L2.06861 2.25122C1.98632 2.29318 1.91563 2.3538 1.86182 2.42782L1.81397 2.50586C1.79927 2.5347 1.77735 2.59353 1.76441 2.75196C1.7509 2.91724 1.75017 3.13455 1.75017 3.47087V6.08106Z' fill='%232EB2FF'/%3E%3C/svg%3E"); z-index: 1; .entrylist-category-link { color: var(--Color-Text-Icon-Sub); font-size: var(--FontSize-XS); font-weight: var(--FontWeight-Regular); line-height: 140%!important; min-width: fit-content; @media (width < 480px){ font-size: var(--FontSize-2XS); } &:not(:first-child)&::before { content: "/"; padding-right: .25rem; color: var(--Color-Text-Icon-Base)!important; } &:hover { opacity: 1; color: var(--Color-Secondary); &::after { color: var(--Color-Text-Icon-Base)!important; } } } .st-hide:first-child + .entrylist-category-link::before { display: none; } } } } /* hover */ transition: all .2s ease-in-out; @media (480px <= width){ &:has(.entrylist-link:hover) { .entrylist-image { transform: scale(1.07); } } } } /*===== カード =====*/ &:is(.entrylist-cards) { --gap: clamp(48px, 5cqi, 64px); @media (width < 1000px){ --entrylist-card-column-count: 2!important; } @media (width < 480px){ --gap: 2rem 1rem; } gap: var(--gap); .entrylist-item { border-radius: 0 var(--Radius-Large) 0 0; .entrylist-contents { padding-inline: 0; .entrylist-title { -webkit-line-clamp: 3; } } } } /*===== リスト =====*/ &:is(.entrylist-list) { .entrylist-item { gap: 1.5rem; padding-block: var(--list-padding-block); border-top: 1px solid var(--Color-Border-Base); flex-direction: row; flex-wrap: wrap; @media (width < 730px){ gap: 1.25rem .7rem; --title-font-size: var(--FontSize-XS); } /* サムネイル */ .entrylist-image-box { width: clamp(var(--entrylist-list-image-min-width), 25vw, var(--entrylist-list-image-max-width)); } /* 記事情報 */ .entrylist-contents { padding: 0; &::after { margin-left: auto; width: fit-content; } } &:last-child { border-bottom: 1px solid var(--Color-Border-Base); } } } } /*---- Xlarge ----*/ :is(.Xlarge) { /* カード */ .entrylist-cards { .entrylist-item { /* 最初の1つ : 100%占有 */ &:first-child { grid-column: span 2; .entrylist-image-box { width: 80%; @media (width < 480px){ width: 100%; } @container main-column (width < 480px) { width: 100%; } } .entrylist-contents { position: relative; overflow: hidden; width: 70%; min-width: 300px; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin: -15% 0 0 auto; padding: 2rem; border-radius: var(--Radius-Large); background: var(--Color-Background-Base); z-index: 0; &::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100%; width: 100%; z-index: -1; transition: left 0.3s ease; background: linear-gradient(to right, rgba(253, 249, 235, 0.95) 0%, rgba(253, 249, 235, 0.8) 40%, rgba(255, 255, 255, 0.9) 70%, rgba(255, 255, 255, 0.95) 100%); } @media (width < 480px){ margin: 0; padding: 1.25rem 0 0; width: auto; border-radius: 0; } @container main-column (width < 480px) { margin: 0; padding: 1.25rem 0 0; width: auto; border-radius: 0; } } @media (480px <= width){ &:has(.entrylist-link:hover){ .entrylist-contents::before { left: 0; } } } @container main-column ( 480px <= width) { &:has(.entrylist-link:hover){ .entrylist-contents::before { left: 0; } } } } } } } /*---- Large ----*/ :is(.large) { /* カード */ .entrylist-cards { /* 6カラムベースで計算 */ --entrylist-card-column-count: 6!important; @media (width < 730px){ gap: 1rem 1.5rem; } .entrylist-item { /* 最初の2つ（PC：3カラム占有 = 2カラム表示、SP：6カラム占有 = 1カラム表示） */ &:nth-child(1), &:nth-child(2){ grid-column: span 3; @media (width < 730px){ grid-column: span 6; } } /* 3件目以降（PC：2カラム占有 = 3カラム表示、SP：3カラム占有 = 2カラム表示） */ &:nth-child(n+3) { grid-column: span 2; @media (width < 730px){ grid-column: span 3; } } } } /* リスト */ .entrylist-list { .entrylist-item { &:first-child { /* 最初の１つ目のみ縦並び */ @media (width < 730px){ border-width: 0; flex-direction: column; .entrylist-image-box { width: 100%; max-width: none; } &:last-child { border-bottom: none; } } } } } } /*---- 資料ダウンロード ----*/ :is(.--download) { .entrylist-cards { --gap: clamp(48px, 5cqi, 64px); .entrylist-item { border-radius: 0rem var(--Radius-Large); border: 1px solid var(--Color-Border-Base); .entrylist-contents { gap: 1.5rem; width: 100%; padding: 1.25rem 1.5rem 2rem!important; justify-content: space-between; &::after { display: flex; width: 100%; min-height: 2.5rem; padding: 0.75rem 3rem; justify-content: center; align-items: center; border-radius: var(--Radius-Full); border: 1px solid var(--Color-Border-Dark); font-weight: var(--FontWeight-Bold); background: var(--Color-Background-Base) url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2219%22%20viewBox%3D%220%200%2018%2019%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M2.25%2013.6501V5.84986C2.25%205.23224%202.24923%204.72382%202.28296%204.31104C2.31741%203.88949%202.39121%203.50168%202.57666%203.1377L2.69238%202.93115C2.9806%202.46128%203.39384%202.07832%203.8877%201.82666L4.02539%201.76221C4.34919%201.62332%204.69215%201.5631%205.06104%201.53296C5.47382%201.49923%205.98224%201.5%206.59986%201.5H10.5L10.574%201.50366C10.7457%201.52068%2010.9072%201.59662%2011.0303%201.71973L15.5303%206.21973C15.6709%206.36038%2015.75%206.55109%2015.75%206.75V13.6501C15.75%2014.2678%2015.7508%2014.7762%2015.717%2015.189C15.6869%2015.5579%2015.6267%2015.9008%2015.4878%2016.2246L15.4233%2016.3623C15.1717%2016.8562%2014.7887%2017.2694%2014.3189%2017.5576L14.1123%2017.6733C13.7483%2017.8588%2013.3605%2017.9326%2012.939%2017.967C12.5262%2018.0008%2012.0178%2018%2011.4001%2018H6.59986C5.98224%2018%205.47382%2018.0008%205.06104%2017.967C4.69215%2017.9369%204.34919%2017.8767%204.02539%2017.7378L3.8877%2017.6733C3.39384%2017.4217%202.9806%2017.0387%202.69238%2016.5689L2.57666%2016.3623C2.39121%2015.9983%202.31741%2015.6105%202.28296%2015.189C2.24923%2014.7762%202.25%2014.2678%202.25%2013.6501ZM8.25%209.75C8.25%209.33579%208.58579%209%209%209C9.41422%209%209.75%209.33579%209.75%209.75V12.4395L10.7197%2011.4697C11.0126%2011.1768%2011.4874%2011.1768%2011.7803%2011.4697C12.0732%2011.7626%2012.0732%2012.2374%2011.7803%2012.5303L9.53028%2014.7803C9.38962%2014.9209%209.19891%2015%209%2015C8.80109%2015%208.61038%2014.9209%208.46973%2014.7803L6.21973%2012.5303L6.16846%2012.4731C5.9282%2012.1786%205.94514%2011.7443%206.21973%2011.4697C6.49432%2011.1951%206.92857%2011.1782%207.22315%2011.4185L7.28028%2011.4697L8.25%2012.4395V9.75ZM3.75%2013.6501C3.75%2014.2924%203.75026%2014.7291%203.77783%2015.0667C3.8047%2015.3955%203.85356%2015.5639%203.91333%2015.6812L3.97119%2015.7844C4.1153%2016.0194%204.32192%2016.2108%204.56885%2016.3367L4.66846%2016.3792C4.78064%2016.4193%204.9369%2016.452%205.18335%2016.4722C5.52088%2016.4997%205.95756%2016.5%206.59986%2016.5H11.4001C12.0424%2016.5%2012.4791%2016.4997%2012.8167%2016.4722C13.1455%2016.4453%2013.3139%2016.3964%2013.4312%2016.3367L13.5344%2016.2788C13.7694%2016.1347%2013.9608%2015.9281%2014.0867%2015.6812L14.1292%2015.5815C14.1693%2015.4694%2014.202%2015.3131%2014.2222%2015.0667C14.2497%2014.7291%2014.25%2014.2924%2014.25%2013.6501V7.5H11.6997C11.5022%207.5%2011.3086%207.50084%2011.146%207.48755C11.0175%207.47704%2010.8718%207.45548%2010.7212%207.40186L10.5688%207.33667C10.3219%207.21083%2010.1153%207.01938%209.97119%206.78443L9.91333%206.68115C9.80966%206.47769%209.77647%206.2754%209.76245%206.10401C9.74917%205.94138%209.75%205.74786%209.75%205.55029V3H6.59986C5.95756%203%205.52088%203.00026%205.18335%203.02783C4.9369%203.04797%204.78064%203.08072%204.66846%203.12085L4.56885%203.16333C4.32192%203.28916%204.1153%203.48064%203.97119%203.71558L3.91333%203.81885C3.85356%203.93615%203.8047%204.10454%203.77783%204.43335C3.75026%204.77088%203.75%205.20756%203.75%205.84986V13.6501ZM11.25%205.55029C11.25%205.77254%2011.2509%205.89428%2011.2581%205.98169C11.2583%205.98503%2011.2585%205.98821%2011.2588%205.99121C11.2618%205.99149%2011.2649%205.9924%2011.2683%205.99268C11.3557%205.99982%2011.4775%206%2011.6997%206H13.1895L11.25%204.06055V5.55029Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E') no-repeat 93% center; content: "ダウンロードする"; transition: all .2s linear; } .entrylist-meta { flex: 1; margin-bottom: 1rem; } } &:has(.entrylist-link:hover) .entrylist-contents::after { background-color: var(--Color-Background-Tertiary); } } } } /*---- 背景色あり ----*/ :is([class*="bg"]):not(.bg-transparent) { /* カード */ .entrylist-cards { --gap: clamp(48px, 5cqi, 64px); .entrylist-item { border-radius: 0rem var(--Radius-Large); .entrylist-contents { padding-inline: 1.5rem; } } } } } /*================================================ ページネーション ================================================*/ #main-inner { .pagination-list { display: flex; padding: 1rem 0rem; justify-content: center; align-items: center; gap: 0.75rem; > * { display: flex; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; justify-content: center; align-items: center; } .pagination-link, .pagination-current { border-radius: var(--Radius-Full); overflow: hidden; color: var(--Color-Text-Icon-Base); font-size: var(--FontSize-S); font-weight: var(--FontWeight-Bold); line-height: 100%; /* 1rem */ } .pagination-link { border: 1px solid var(--Color-Border-Base); background: var(--Color-Background-Base); } .pagination-current { color: var(--Color-Text-Icon-Inverse); background: var(--Color-Text-Icon-Tertiary); } /* CSS */ @media (width < 1000px) { &:has(.pagination-link:nth-child(5)){ /* TB以下かつ5ページ以上ある場合にスクロール式に変更 */ display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; scroll-behavior: smooth; justify-content: flex-start; /* 前・次ボタンは固定 */ .pagination-prev, .pagination-next { flex-shrink: 0; order: -1; /* 前ボタンを最初に */ background-color: var(--Color-Background-Base); } .pagination-next { order: 1; order: 999; position: sticky; right: 0; z-index: 1; } /* 前・次ボタン */ .pagination-prev { order: -1; position: sticky; left: 0; z-index: 1; } } } } } /*================================================ footer ================================================*/ #main-inner { [id*="footer"] { background: var(--Color-Background-Tertiary); } #footer-cta { padding-top: 0; background-color: transparent; > div { padding: 5.5rem 4rem!important; gap: 2rem; background: url(https://uploads.cms.st-hatena.com/6802418398489095250/6802418398535984723) no-repeat center / cover; @media (width < 1000px){ padding: 4rem 1.5rem!important; gap: 1.5rem; } .cta-title { h1, h2, h3, h4, h5, h6 { color: var(--Color-Text-Icon-Inverse)!important; text-shadow: 0px 0px 4px var(--Color-Text-Icon-Tertiary); text-align: center!important; font-size: var(--FontSize-4XL)!important; line-height: 140%!important; letter-spacing: -0.045rem!important; @media (width < 730px){ font-size: var(--FontSize-2XL)!important; letter-spacing: -0.035rem!important; padding-top: 0; } } } .cta-body p { margin-block: 3rem; color: var(--Color-Text-Icon-Base); text-align: center!important; font-size: var(--FontSize-M)!important; line-height: 160%!important; @media (width < 730px){ font-size: var(--FontSize-S)!important; } } .btn-box { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 2rem; > div { flex: 0 0 300px; @media (width < 480px){ flex: 0 0 100%; } } .btn-cta a { padding: 1.44rem 1.25rem!important; line-height: 1!important; font-size: var(--FontSize-L)!important; font-weight: var(--FontWeight-Bold)!important; @media (width < 1000px){ padding: 1rem 3rem!important; width: 100%!important; } } } } } #footer-cms { background-color: transparent; padding-block: 3rem 7rem; > div { .cms-title-sub p { margin: 0!important; text-align: center!important; font-size: var(--FontSize-M)!important; font-weight: var(--FontWeight-Bold)!important; line-height: 140%!important; letter-spacing: -0.0225rem; } .cms-title { h1, h2, h3, h4, h5, h6 { height: 51px; width: 280px; margin: .75rem auto 0!important; padding-top: 0!important; text-indent: -9999px; overflow: hidden; white-space: nowrap; background: url(https://uploads.cms.st-hatena.com/6802418398489095250/6802418398499250703) no-repeat center / cover; } } .cms-body p { margin-block: 2.5rem 2rem!important; color: var(--Color-Text-Icon-Sub)!important; text-align: center!important; font-size: var(--FontSize-S); line-height: 150%!important; } .btn-cta a { width: 400px!important; @media (width < 1000px){ padding: 1rem 3rem!important; width: 100%!important; } @media (width < 380px){ padding-left: 0!important; } } } } #footer-top { padding-bottom: 3.5rem; } #footer-middle { padding-block: 0; .container > div { gap: 5rem; @media (width < 1000px){ flex-direction: column; gap: 3rem; } .u_column { flex: 1!important; @media (width < 1000px){ max-width: none; } } } .footer-link-title { h1, h2, h3, h4, h5, h6 { color: var(--Color-Text-Icon-Base); font-size: var(--FontSize-S)!important; font-weight: var(--FontWeight-Bold)!important; line-height: 150%; border: none; padding: 0 0 1.25rem; a { text-decoration: none; @media (480px <= width){ &:hover { opacity: 1; text-decoration: underline!important; text-underline-offset: 3px; } } } } } .footer-links { .u_content_menu { & > div { display: flex; flex-direction: column; gap: .75rem; a { position: relative; padding: 0 2rem 0 0!important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5.52925 3.52865C5.77332 3.28458 6.15932 3.26951 6.42117 3.48308L6.47195 3.52865L10.472 7.52865C10.7323 7.789 10.7323 8.21101 10.472 8.47136L6.47195 12.4714C6.21161 12.7317 5.7896 12.7317 5.52925 12.4714C5.2689 12.211 5.2689 11.789 5.52925 11.5287L9.05789 8.00001L5.52925 4.47136L5.48367 4.42058C5.27011 4.15873 5.28517 3.77273 5.52925 3.52865Z' fill='%234E4B47'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; background-size: 1rem; transition: all .2s ease-in-out; color: var(--Color-Text-Icon-Base)!important; @media (480px <= width){ background-position: calc(100% - .5rem) center; &:hover { opacity: 1; background-position: 100% center; } } &[target="_blank"]::after{ content: ""; display: inline-block; margin-left: .2rem; width: .8rem; height: .8rem; background: url(https://uploads.cms.st-hatena.com/6802418398489095250/6802418398512596807) no-repeat center; background-size: contain; vertical-align: -1px; } } } } &.--other { .u_content_menu > div a { background: none!important; padding-right: 0!important; text-align: right; @media (480px <= width){ &:hover { opacity: 1; text-decoration: underline!important; text-underline-offset: 3px; } } } } } } #footer-bottom { padding-block: 3.5rem 5rem; .u_content_image { margin-bottom: 2rem; } a { width: fit-content; margin-left: auto; color: var(--Color-Text-Icon-Base); font-size: var(--FontSize-XS)!important; text-decoration: underline!important; } } } /*================================================ 総合トップ ================================================*/ #main-inner { /*===== フキダシ付きの見出し =====*/ .section-heading { --triangle-size: var(--20, 20px); display: flex; flex-direction: column; align-items: center; gap: .75rem; .section-heading__fukidashi { position: relative; display: flex; padding: 0.125rem 1.25rem; justify-content: center; align-items: center; border-radius: var(--Radius-Full); background: var(--Color-Text-Icon-Tertiary); margin: 0; color: var(--Color-Text-Icon-Inverse); font-size: var(--FontSize-L)!important; font-weight: var(--FontWeight-Bold); line-height: 160%; text-align: center; @media (width < 1000px){ padding: 0.25rem 1.25rem; font-size: var(--FontSize-XS)!important; } &::after { content: ""; position: absolute; bottom: calc( (var(--triangle-size) * -1) / 2); left: 0; right: 0; margin: auto; width: var(--triangle-size); aspect-ratio: 1/1; background: no-repeat center center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13' viewBox='0 0 16 13' fill='none'%3E%3Cpath d='M6.26795 12C7.03775 13.3333 8.96225 13.3333 9.73205 12L14.9282 3C15.698 1.66667 14.7358 0 13.1962 0H2.80385C1.26425 0 0.301996 1.66667 1.0718 3L6.26795 12Z' fill='%23FFA340'/%3E%3C/svg%3E"); fill: var(--Color-Text-Icon-Tertiary); } } .section-heading__title { h1, h2, h3, h4, h5, h6 { width: fit-content; margin-top: 0; padding-top: 0; color: var(--Color-Text-Icon-Base); text-align: center; font-size: var(--FontSize-5XL)!important; line-height: 140%!important; letter-spacing: -0.06rem; @media (width < 730px){ font-size: var(--FontSize-2XL)!important; letter-spacing: -0.04rem; } } } } .section-heading__body { p { @media (width < 730px){ br { display: none; } } } } } /*================================================ 記事一覧 共通パーツ ================================================*/ #main-inner { /* ページタイトル */ .page-title { h1, h2, h3, h4, h5, h6 { padding-top: 0!important; span { color: var(--Color-Text-Icon-Base); font-size: var(--FontSize-5XL); font-weight: var(--FontWeight-Bold); line-height: 140%; letter-spacing: -0.06rem; text-decoration: none; @media (width < 730px){ font-size: var(--FontSize-3XL); letter-spacing: -0.04rem; } } &::before{ content: none!important; } } } .u_content_custom_pagePartsPlaceholder { .archive-description { padding-block: 1.75rem 0; color: var(--Color-Text-Icon-Base); font-size: var(--FontSize-S); line-height: 160%; &:empty { display: none; } } .entrylist-cards, .entrylist-list { margin-top: 3rem; .entrylist-description { display: none!important; } } } } /*================================================ サイドバー ================================================*/ /* about枠 */ @keyframes bellRing { 0%, 100% { transform: rotate(0deg); } 10% { transform: rotate(-15deg); } 20% { transform: rotate(15deg); } 30% { transform: rotate(-12deg); } 40% { transform: rotate(12deg); } 50% { transform: rotate(-8deg); } 60% { transform: rotate(8deg); } 70% { transform: rotate(-4deg); } 80% { transform: rotate(4deg); } 90% { transform: rotate(-2deg); } } #main-inner .entry { .title-small :is(h1, h2, h3, h4, h5, h6), .forrow-title { display: flex; justify-content: center; align-items: center; gap: 0.5rem; padding: 0; margin-bottom: 1.5rem!important; border: none; color: var(--Color-Text-Icon-Primary)!important; font-size: var(--FontSize-L)!important; font-weight: var(--FontWeight-Bold)!important; line-height: 140%!important; letter-spacing: -0.0225rem; &.--icon-bell { --title-icon: url('data:image/svg+xml;utf8,'); } &.--icon-phone { --title-icon: url('data:image/svg+xml;utf8,'); } &[class*="--icon"] { &::before { content: ""; width: 24px; height: 24px; background-image: var(--title-icon); background-size: contain; background-repeat: no-repeat; display: inline-block; padding-left: .5rem; } } } .sidebar-about { .about-title { h1, h2, h3, h4, h5, h6 { margin-bottom: 1.5rem!important; color: var(--Color-Text-Icon-Base); text-align: center!important; font-size: var(--FontSize-2XL)!important; font-weight: var(--FontWeight-Bold); line-height: 140%; letter-spacing: -0.04rem; } + .u_content_text { width: fit-content; margin-inline: auto; } } .about-forrow { margin-block: 2rem; padding: 2rem 1.5rem; border-radius: var(--Radius-Large); border: 1px solid var(--Color-Border-Base); background: var(--Primitive-Gray-100); overflow: hidden; &:hover { .--icon-bell::before { transform-origin: 50% 20%; /* ベルの上部を軸にする */ animation: bellRing 1s ease-in-out 1; } } .btn-cta { a { min-width: 11.25rem; padding: 0.75rem 3.5rem 0.75rem 1.25rem!important; gap: 0.5rem; line-height: 140%; font-size: var(--FontSize-XS); } + & { margin-top: 1rem; } } .about-sns { display: none; margin: 2rem -1.5rem -2rem; padding-block: 1.5rem; border-top: 1px dashed var(--Color-Border-Base); background-color: var(--Color-Background-Base); .list-sns { display: flex; align-items: center; justify-content: center; gap: 1.25rem; padding: 0; li { list-style: none; line-height: 1; a { display: block; } } } } } } /* 検索窓（非表示設定中） */ .search-form { border: none; position: relative; .search-module-input { padding: 1rem 1.25rem 1rem calc(1.25rem + 25px + 0.5rem); align-items: center; border-radius: var(--Radius-Full); border: 1px solid var(--Color-Border-Dark); background: var(--Color-Background-Base); &:focus { + .search-module-button { border-color: var(--Color-Border-Base); } } } .search-module-button { position: absolute; left: calc(1.25rem - 10px); top: 0; bottom: 0; margin-block: auto; width: 35px; height: 35px; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center; background-size: 20px; cursor: pointer; border: 1px solid transparent; padding: 3px; border-radius: var(--Radius-Full); transition: all .2s linear; } } .sidebar-articles { .entrylist-list { --title-font-size: var(--FontSize-2XS); --title-letter-space: 0.03rem; --entrylist-list-image-min-width: 100px; margin-top: 2rem; .entrylist-item { padding: 1rem 12px; gap: 1rem; align-items: center; .entrylist-image-box { border-radius: 0rem var(--Radius-Medium); @container item-size (width < 480px) { width: var(--entrylist-list-image-min-width)!important; } } .entrylist-title { font-weight: var(--FontWeight-Regular)!important; transition: all .2s linear; } a { text-decoration: none!important; } } } &.ranking .entrylist-list { .entrylist-item { position: relative; overflow: visible; padding-block: 20px 16px; &::after { color: var(--Color-Text-Icon-Inverse); font-size: var(--FontSize-2XS); font-weight: var(--FontWeight-Bold); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; position: absolute; top: 3px; left: -4px; background: url(https://uploads.cms.st-hatena.com/6802418398489095250/6802418398513807213) no-repeat center center; } /* safariで何故かカウントしないため個別設定 */ &:nth-child(1)::after { content: "1"; } &:nth-child(2)::after { content: "2"; } &:nth-child(3)::after { content: "3"; } &:nth-child(4)::after { content: "4"; } &:nth-child(5)::after { content: "5"; } &:nth-child(6)::after { content: "6"; } &:nth-child(7)::after { content: "7"; } &:nth-child(8)::after { content: "8"; } &:nth-child(9)::after { content: "9"; } &:nth-child(10)::after { content: "10"; } } } } /* ドット付き見出し */ .title-dot.--sidebar :is(h1, h2, h3, h4, h5, h6) { font-size: var(--FontSize-XL) !important; } /* カテゴリー一覧 */ .sidebar-category { #categories { ul { display: flex; gap: 0.75rem; flex-wrap: wrap; padding: 0!important; @media (width < 1000px){ gap: 0.75rem 1rem; } li { list-style: none; &:has(a.st-hide) { display: none!important; } } a { display: flex; align-items: center; gap: 0.25rem; color: var(--Color-Text-Icon-Sub); font-size: var(--FontSize-XS); line-height: 140%; &::before { content: ""; width: 14px; height: 15px; flex: 0 0 14px; background-size: cover; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'%3E%3Cpath d='M5.6438 1.02075L6.00781 1.02531C6.12321 1.03088 6.23361 1.0431 6.34221 1.06918L6.47437 1.1062C6.6051 1.14868 6.73059 1.20682 6.84807 1.27881L6.91756 1.32438C7.0774 1.43582 7.21671 1.5791 7.37614 1.73853L11.8497 6.21151L12.3128 6.6792C12.4513 6.82214 12.5732 6.95349 12.6774 7.07626C12.8903 7.32701 13.0629 7.58077 13.1611 7.8829L13.2112 8.06006C13.2969 8.41762 13.2969 8.79055 13.2112 9.14811L13.1611 9.32528C13.0629 9.62741 12.8903 9.88116 12.6774 10.1319C12.5732 10.2547 12.4513 10.386 12.3128 10.529L11.8497 10.9967L10.5594 12.2864C10.2197 12.6261 9.94024 12.9062 9.69466 13.1147C9.47526 13.3009 9.25349 13.4562 8.99911 13.5579L8.88802 13.5983C8.47789 13.7316 8.03985 13.7484 7.62281 13.6484L7.44564 13.5983C7.14351 13.5001 6.88976 13.3275 6.639 13.1147C6.51623 13.0104 6.38489 12.8885 6.24195 12.7501L5.77425 12.2869L1.30127 7.8134C1.14184 7.65396 0.998565 7.51466 0.887128 7.35482L0.841555 7.28532C0.769564 7.16784 0.711422 7.04236 0.668948 6.91162L0.63192 6.77946C0.605848 6.67087 0.593625 6.56046 0.588056 6.44507L0.583499 6.08106V3.47087C0.583499 3.1538 0.582872 2.88063 0.601158 2.65682C0.620006 2.42625 0.661897 2.19675 0.774335 1.97608L0.841555 1.85588C1.00967 1.58172 1.25072 1.35843 1.53882 1.21159L1.62199 1.17228C1.81689 1.08872 2.0178 1.05491 2.21957 1.03841C2.44337 1.02013 2.71654 1.02075 3.03361 1.02075H5.6438ZM4.75627 4.23364C5.1975 4.27844 5.54183 4.65103 5.54183 5.10409C5.54183 5.58734 5.15008 5.97909 4.66683 5.97909C4.21378 5.97909 3.84119 5.63476 3.79639 5.19352L3.79183 5.10409L3.79639 5.01465C3.84119 4.57342 4.21378 4.22909 4.66683 4.22909L4.75627 4.23364ZM1.75017 6.08106L1.75358 6.39209C1.75607 6.45302 1.75993 6.48141 1.76612 6.50716L1.7946 6.59432C1.80626 6.62243 1.82024 6.64976 1.83618 6.67578L1.86182 6.71224C1.89532 6.75464 1.95985 6.82224 2.12614 6.98853L6.59969 11.4615L7.05371 11.9121C7.1831 12.0375 7.2934 12.1402 7.3938 12.2254C7.58933 12.3914 7.70888 12.457 7.80624 12.4886L7.8951 12.5137C8.10356 12.5636 8.32244 12.5552 8.52743 12.4886L8.60547 12.4578C8.68926 12.4182 8.79317 12.35 8.93986 12.2254C9.14065 12.055 9.38075 11.8147 9.73397 11.4615L11.0243 10.1712L11.4749 9.71721C11.6003 9.58782 11.7029 9.47752 11.7882 9.37712C11.9542 9.18159 12.0197 9.06204 12.0514 8.96468L12.0764 8.87582C12.1192 8.69719 12.1192 8.51099 12.0764 8.33236L12.0514 8.24349C12.0197 8.14613 11.9542 8.02659 11.7882 7.83106C11.7029 7.73065 11.6003 7.62035 11.4749 7.49097L11.0243 7.03695L6.55127 2.5634C6.38498 2.39711 6.31739 2.33257 6.27499 2.29907L6.23853 2.27344C6.2125 2.25749 6.18518 2.24351 6.15707 2.23185L6.06991 2.20337C6.04415 2.19719 6.01576 2.19332 5.95484 2.19084L5.6438 2.18742H3.03361C2.69729 2.18742 2.47998 2.18816 2.3147 2.20166C2.19603 2.21136 2.13322 2.22572 2.09709 2.23869L2.06861 2.25122C1.98632 2.29318 1.91563 2.3538 1.86182 2.42782L1.81397 2.50586C1.79927 2.5347 1.77735 2.59353 1.76441 2.75196C1.7509 2.91724 1.75017 3.13455 1.75017 3.47087V6.08106Z' fill='%232EB2FF'/%3E%3C/svg%3E"); } &:hover { opacity: 1; color: var(--Color-Secondary); } } } } } /* バナー */ .sidebar-banner { .img-banner { max-width: 300px; margin-inline: auto; a { display: block; border-radius: 0 var(--Radius-Large); overflow: hidden; &:hover { opacity: 1; transform: translateY(-4px); box-shadow: 0px 4px 9px -4px #00000060; } } + & { margin-top: 2rem; } } } /* 親カテゴリーの非表示化 */ .entrylist-category-link, .entry-category-link { &.st-hide { display: none!important; } } } /* フォーム */ .w-1200:has(.hbspt-form) { .u_row { margin-bottom: 160px; } } .hs-input { background-color: var(--Color-Background-Base)!important; } .hbspt-form { form { display: flex; flex-direction: column; gap: 32px; .inputs-list { padding: 0; &.no-list li { list-style: none; } .hs-form-radio { list-style: none; } } label { margin-bottom: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; span { color: var(--Primitive-Neutral-Black); font-family: var(--FontFamily-Sans); font-size: var(--FontSize-M); font-weight: var(--FontWeight-Bold); line-height: 140%; letter-spacing: -0.36px; &.hs-form-required { color: var(--Color-Text-Icon-Required); font-size: var(--FontSize-2XS); line-height: 100%; &::after { content: "必須"; } } } &.hs-error-msg{ color: var(--Color-Text-Icon-Required); } } input, textarea { font-size: 1rem; } input:not([type="radio"], [type="submit"], [name="leancanvas_kojin"]), textarea { width: 100%; padding: 12px 16px; border-radius: var(--Radius-Medium); border: 1px solid var(--Color-Border-Base); } input:user-invalid, input:focus-visible, textarea:user-invalid, textarea:focus-visible { outline: 2px solid var(--Primitive-Gray-600); border: 0; } .inputs-list:has([name="leancanvas_kojin"]) { li { list-style: none; } label { display: flex; justify-content: center; gap: 4px; margin-bottom: 0; cursor: pointer; input[name="leancanvas_kojin"] { width: 20px; height: 20px; border: solid 2px var(--Primitive-Gray-600); appearance: none; background: var(--Primitive-Neutral-White); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; &:checked:before { content: ""; background-color: var(--Primitive-Neutral-Black); mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2212%22%20height%3D%2210%22%20viewBox%3D%220%200%2012%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.0912%2010C3.98756%2010%203.8904%209.98121%203.79972%209.94362C3.70904%209.90664%203.62484%209.8434%203.54711%209.75391L0.204814%205.90604C0.0623131%205.74198%20-0.00582823%205.52931%200.000389993%205.26801C0.0071264%205.00731%200.0817448%204.79493%200.224246%204.63087C0.366746%204.46681%200.548111%204.38479%200.76834%204.38479C0.988569%204.38479%201.16993%204.46681%201.31243%204.63087L4.0912%207.82998L10.6786%200.246085C10.8211%200.0820284%2011.0059%200%2011.2328%200C11.4593%200%2011.6437%200.0820284%2011.7862%200.246085C11.9288%200.410142%2012%200.62252%2012%200.883221C12%201.14452%2011.9288%201.3572%2011.7862%201.52125L4.6353%209.75391C4.55757%209.8434%204.47336%209.90664%204.38268%209.94362C4.292%209.98121%204.19484%2010%204.0912%2010Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E'); mask-repeat: no-repeat; mask-position: center; mask-size: contain; width: 12px; height: 10px; } } > span { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } @media screen and (width <= 480px) { flex-wrap: nowrap; } } } .hs_leancanvas_kojin { &:has(.no-list) .hs-form-booleancheckbox-display { margin-bottom: 16px; } .no-list label { justify-content: center; } } textarea { min-height: 150px; } .hs-submit { display: flex; justify-content: center; .actions { text-align: center; display: flex; align-items: center; color: var(--Primitive-Neutral-Black); font-family: var(--FontFamily-Sans); font-size: var(--FontSize-L); font-weight: var(--FontWeight-Bold); line-height: 100%; min-width: min(100%, 350px); min-height: 70px; border-radius: var(--Radius-Full); background: var(--Color-Primary); border: 0; transition: all .2s; position: relative; text-align: center; position: relative; &::after { content: ""; width: 24px; height: 24px; display: inline-block; background-color: currentColor; mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.29289%205.29298C8.65901%204.92686%209.23801%204.90427%209.63078%205.22462L9.70696%205.29298L15.707%2011.293C16.0975%2011.6835%2016.0975%2012.3165%2015.707%2012.707L9.70696%2018.707C9.31643%2019.0976%208.68342%2019.0976%208.29289%2018.707C7.90237%2018.3165%207.90237%2017.6835%208.29289%2017.293L13.5859%2012L8.29289%206.70704L8.22453%206.63087C7.90418%206.2381%207.92678%205.65909%208.29289%205.29298Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E'); mask-repeat: no-repeat; mask-position: center left; mask-size: contain; transition: all .2s; position: absolute; right: 40px; } &:hover::after { right: 30px; } input[type="submit"] { font-family: var(--FontFamily-Sans); font-size: var(--FontSize-L); font-weight: var(--FontWeight-Bold); min-width: min(100%, 350px); border-radius: var(--Radius-Full); background: var(--Color-Primary); border: 0; cursor: pointer; transition: all .2s; height: 100%; &:hover { background-color: #F5B51E; /* カラーコード追加 */ } } @media screen and (width <= 480px) { &::after { right: 20px; } &:hover::after { right: 10px; } input[type="submit"] { padding: 16px 40px 16px 20px; } } } } .hs_error_rollup { label { justify-content: center; color: var(--Color-Text-Icon-Required); } } } } #main-inner .entry .hbspt-form { .hs-richtext { p { margin: 0; } :last-child { a { color: var(--Color-Text-Icon-Primary); } } } } /* 資料DL */ #main-inner:has(.download-detail-wrapper) { .article-wrap { .u-row { max-width: 1200px; } } .related-articles, .u_content_custom_pagePartsPlaceholder:has(.social-buttons), .u_content_custom_pagePartsPlaceholder:has(.social-buttons) + div:has(.u_content_html) { display: none; } .u_content_custom_pagePartsPlaceholder:has(.entry-date) { display: none; } .entry-categories { .entry-category-link { color: var(--Primitive-Gray-800); &::after { color: var(--Primitive-Gray-500); } &:hover { color: var(--Color-Secondary); &::after { color: var(--Primitive-Gray-500); } } } } .download-detail-wrapper { display: flex; gap: 64px; padding: 0; div { flex: 1 1; figure { padding-bottom: 24px; p { margin: 0; } img { border-radius: var(--Radius-Medium); &.hatena-fotolife { margin-top: 0; } } } &.download-form { border-radius: var(--Radius-Medium); border: 1px solid var(--Color-Border-Base); } } ul { margin-block: 24px 0; color: var(--Primitive-Neutral-Black); } @media (width < 1000px) { gap: 56px; flex-direction: column; } } .btn-box .btn-cta.--white, #footer-cms { display: none; } }