@charset "utf-8"; /* #001e43 0,30,67 as darkblue #d83473　216,52,115 as pink #b8860b 184,134,11 as goldlike */ /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* 全ページ共通 */ * { margin: 0; padding: 0; } html { font-size: 62.5%; /* -> 10px; */ background-color: #fff; } body { font-family:"Noto Sans Japanese",sans-serif; font-weight: 200; font-size:1.7rem; line-height: 3.4rem; width: 100%; animation: fadeIn 2s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal; color: #222; min-width: 300px; background-color: #f7f7f7; -webkit-text-size-adjust: 100%; } h1 { font-family: "Noto Sans Japanese",sans-serif; font-weight: 400; color: #222; font-size: 2.4rem; } h2 { font-family: "Noto Sans Japanese",sans-serif; font-weight: 200; color: #222; font-size: 2.4rem; border-style: solid; border-color: #4865B2; border-width: 0 0 0 5px; padding: 10px; margin: 40px 0 0 0; } h3 { font-family: "Noto Sans Japanese",sans-serif; font-weight: 200; color: #222; font-size: 2.4rem; border-style: solid; border-color: #4865B2; border-width: 0 0 0 5px; padding: 0 0 0 5px; margin: 0 0 30px 0; } @keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } @-webkit-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } .clear { clear: both; } .clearfix:after { content: ""; display: block; clear: both; } .clearfix:before { content: ""; display: block; clear: both; } .clearfix { display: block; } .block { display: inline-block; } /* ーーーーーーーーーーーーーーーメイン全体ーーーーーーーーーーーーーーー */ .wrapper { width: 90%; max-width: 1300px; height: auto; margin: 0 auto; } /* ーーーーーーーーーーーーーーーメイン本文ーーーーーーーーーーーーーーー */ .main { width: 68%; float: left; height: auto; padding: 3%; margin-bottom: 30px; background-color: #fff; } #up_ymd { text-align: right; } /* ーーーーーーーーーーーーーーーメインサブーーーーーーーーーーーーーーー */ .sub { width: 30%; height: auto; float: right; font-size: 1.4rem; line-height: 2rem; font-weight: 200; } .sub_contain { width: 100%; padding: 8% 8% 1% 8%; background-color: #fff; margin-bottom: 10%; } .ad { width: 100%; min-height: 200px; margin-bottom: 10%; } .ad_half { display: flex; flex-direction: row; width: 100%; justify-content: space-between; height: auto; } .ad_half a { display: flex; width: 48%; margin-bottom: 3%; } .ad_half a img { width: 100%; height: auto; } .ad_out { width:100%; height: auto; min-height: 200px; margin-bottom: 30px; } #up_ymd_sub { text-align: right; font-weight: 100; } ul.sub_ul { display: flex; flex-direction: column; } li.sub_li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #222; } li.sub_li:hover { opacity: .6; } .kuriafix { display: flex; flex-direction: row; } .thumbNailWrap { display: block; width: 100px; height: auto; } .title_sub { width: 100%; height: auto; margin: 0 7px 0 3px; } .tumnNailWrap img { width: 100%; height: auto; } .archive { width: 100%; height: 50px; font-size: 1.7rem; margin: 0 0 15px 0; border-bottom: solid .5px #222; } .archive:hover { opacity: .7; } .archive a::before { content: '▶︎ '; color: #4865b2; font-size: 1.3rem; } .archive a, .archive a:link, .archive a:visited { display: block; height: 50px; line-height: 50px; } img.auth { width: 100%; height: auto; background-color:#f7f7f7; margin-bottom:30px } .auth:hover { opacity: .6; } /* ーーーーーーーーーーーーーーー動画ーーーーーーーーーーーーーーー */ .video_container { width: 100%!important; position: relative!important; padding-bottom: 56.25%!important; padding-top: 30px; padding-top: -100px!important; height: 0!important; overflow: hidden!important; margin: 0 auto!important; } .video_container iframe, .video_container object, .video_container embed { position: absolute!important; top: 0!important; left: 0!important; width: 100%!important; height: 100%!important; } /* ーーーーーーーーーーーーーーー全体ーーーーーーーーーーーーーーー */ .wrap { width: 80%; height: auto; margin: 0 auto; padding: 10px 0; } @media(max-width: 1299px) { /* ーーーーーーーーーーーーーーーメイン全体ーーーーーーーーーーーーーーー */ .wrapper { width: 90%; max-width: 600px; height: auto; margin: 0 auto; } /* ーーーーーーーーーーーーーーーメイン本文ーーーーーーーーーーーーーーー */ .main { width: 100%; clear: both; padding: 5%; } /* ーーーーーーーーーーーーーーーメインサブーーーーーーーーーーーーーーー */ .sub { width: 100%; clear: both; padding:3%; } .title_sub { font-size: 1.7rem; line-height: 3.4rem; } .bottom { display: none; } } /* ーーーーーーーーーーーーーーーブログーーーーーーーーーーーーーーー */ @media(max-width: 500px) { /* ーーーーーーーーーーーーーーーメイン本文ーーーーーーーーーーーーーーー */ .main { padding:5%; } .title_sub { line-height: 2.6rem; } h1 { font-family: "Noto Sans Japanese",sans-serif; font-weight: 400; color: #222; font-size: 2.4rem; line-height: 3rem; letter-spacing: .05rem; } }