:root {
	--nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;
	--nc-tx-1: #000000;
	--nc-tx-2: #1A1A1A;
	--nc-bg-1: #FFFFFF;
	--nc-bg-2: #F6F8FA;
	--nc-bg-3: #E5E7EB;
	--nc-lk-1: #0070F3;
	--nc-lk-2: #0366D6;
	--nc-lk-tx: #FFFFFF;
	--nc-ac-1: #79FFE1;
    --nc-ac-tx: #0C4047;
}

@media (prefers-color-scheme: dark) {
	:root {
		--nc-tx-1: #ffffff;
		--nc-tx-2: #eeeeee;
		--nc-bg-1: #000000;
		--nc-bg-2: #111111;
		--nc-bg-3: #222222;
		--nc-lk-1: #3291FF;
		--nc-lk-2: #0070F3;
		--nc-lk-tx: #FFFFFF;
		--nc-ac-1: #7928CA;
		--nc-ac-tx: #FFFFFF;
	}
}

* {
	/* Reset margins and padding */
	margin: 0;
	padding: 0;
}

address,
area,
article,
aside,
audio,
blockquote,
datalist,
details,
dl,
fieldset,
input,
iframe,
meter,
ol,
optgroup,
option,
output,
p,
pre,
progress,
ruby,
section,
table,
textarea,
ul,
video {
	/* Margins for most elements */
    color: #6a665d;
    margin-bottom: 1.3rem;
}

html,input,select,button {
	/* Set body font family and some finicky elements */
	font-family: var(--nc-font-sans);
}

body {
	/* Center body in page */
	margin: 0 auto;
	padding: 0.5rem;
	border-radius: 6px;
	overflow-x: hidden;
	word-break: break-word;
	overflow-wrap: break-word;
background: linear-gradient(
135deg
, #f4f4f4 0%,#e8e4da 100%);

	/* Main body text */
	color: #6a665d;
	font-size: 1.03rem;
	line-height: 1.5;
}

::selection {
	/* Set background color for selected text */
	background: var(--nc-ac-1);
	color: var(--nc-ac-tx);
}

h1,h2,h3,h4,h5,h6 {
	line-height: 1;
	color: var(--nc-tx-1);
	padding-top: .875rem;
}
/*
h1,
h2,
h3 {
    color: #403f3c;
    padding-bottom: 7px;
    margin-bottom: 8px;
    border-bottom: 3px solid #ccc8bf;
}
*/

h2 {
    color: #ffffff;
    padding: 10px 13px;
margin: 1.5em 5px 0.5em 3px;
    border: 2px solid #ffffff;    background-image: linear-gradient(to right, #434343 0%, #161616 100%);
    border-radius: 7px;
    box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px, rgb(51 51 51) 0px 0px 0px 1px;
}
h3 {
    font-size: 1.2rem;
    color: #ffffff;
    padding: 5px 13px 5px 13px;
    margin: 1.5em 10px 0.5em 8px;
    border: 2px solid #ffffff;
    background-image: linear-gradient(to right, #525354 0%, #828282 100%);
    border-radius: 7px;
    box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px, rgb(51 51 51) 0px 0px 0px 1px;
}
h3 img {
    margin-top: 0!important;
    vertical-align: middle;
}
h4 {
    font-size: 1.25rem!important;
    color: #424141;
    border-bottom: 2px solid #b3afa7;
    padding: 10px 5px 6px 3px;
    margin: 1.5em 10px 10px 15px;
}
h5,
h6 {
	margin-bottom: .3rem;
}

h1 {
font-size: 2rem;
    padding: 10px 13px;
    margin: 0.5em 10px 0em 10px;
    color: #ffffff;
    border: 2px solid #ffffff;
    background-image: linear-gradient(to right, #434343 0%, #161616 100%);
    border-radius: 7px;
    box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px, rgb(51 51 51) 0px 0px 0px 1px;
}
h1 a {
    color: #ffffff;
    text-decoration: none;
line-height: 1.2em;
}
h2 {   
 font-size: 1.6rem;
}


h4 {
	font-size: 1.25rem;
}

h5 {
	font-size: 1rem;
}

h6 {
	font-size: .875rem;
}

a {
	color: #3b8ceb;
 text-decoration:none;
line-height: 1.8em;
    font-weight: bold;
}

a:hover {
	color: var(--nc-lk-2);
}

abbr:hover {
	/* Set the '?' cursor while hovering an abbreviation */
	cursor: help;
}

blockquote {
	padding: 1.2rem 0.5rem 1.2rem 0.2rem;
margin: 0.5rem;
background: #e9e5db;
    border-left: 5px solid #ccc8bf;
}

abbr {
	cursor: help;
}

blockquote *:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
}

header {
	background: var(--nc-bg-2);
	border-bottom: 1px solid var(--nc-bg-3);
	padding: 
2rem 1.5rem;
	
	/* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */

	margin: -2rem calc(0px - (50vw - 50%)) 2rem;

	/* Shorthand for:

	margin-top: -2rem;
	margin-bottom: 2rem;

	margin-left: calc(0px - (50vw - 50%));
	margin-right: calc(0px - (50vw - 50%)); */
	
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}

header h1,
header h2,
header h3 {
	padding-bottom: 0;
	border-bottom: 0;
}

header > *:first-child {
	margin-top: 0;
	padding-top: 0;
}

header > *:last-child {
	margin-bottom: 0;
}

a button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	font-size: 1rem;
	display: inline-block;
	padding: 6px 12px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	background: var(--nc-lk-1);
	color: var(--nc-lk-tx);
	border: 0;
	border-radius: 4px;
	box-sizing: border-box;
	cursor: pointer;
	color: var(--nc-lk-tx);
}

a button[disabled],
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled] {
	cursor: default;
	opacity: .5;

	/* Set the [X] cursor while hovering a disabled link */
	cursor: not-allowed;
}

.button:focus,
.button:hover,
button:focus,
button:hover,
input[type="submit"]:focus,
input[type="submit"]:hover,
input[type="reset"]:focus,
input[type="reset"]:hover,
input[type="button"]:focus,
input[type="button"]:hover {
	background: var(--nc-lk-2);
}

code,
pre,
kbd,
samp {
	/* Set the font family for monospaced elements */
	font-family: var(--nc-font-mono);
}

code,
samp,
kbd,
pre {
	/* The main preformatted style. This is changed slightly across different cases. */
background: #e9e5db;
    border: 1px solid #c7ba9e;
	border-radius: 4px;
	padding: 3px 6px;
	font-size: 0.9rem;
}

kbd {
	/* Makes the kbd element look like a keyboard key */
	border-bottom: 3px solid var(--nc-bg-3);
}

pre {
	padding: 1rem 1.4rem;
	max-width: 100%;
	overflow: auto;
}

pre code {
	/* When <code> is in a <pre>, reset it's formatting to blend in */
	background: inherit;
	font-size: inherit;
	color: inherit;
	border: 0;
	padding: 0;
	margin: 0;
}

code pre {
	/* When <pre> is in a <code>, reset it's formatting to blend in */
	display: inline;
	background: inherit;
	font-size: inherit;
	color: inherit;
	border: 0;
	padding: 0;
	margin: 0;
}

details {
	/* Make the <details> look more "clickable" */
	padding: .6rem 1rem;
	background: var(--nc-bg-2);
	border: 1px solid var(--nc-bg-3);
	border-radius: 4px;
}

summary {
	/* Makes the <summary> look more like a "clickable" link with the pointer cursor */
	cursor: pointer;
	font-weight: bold;
}

details[open] {
	/* Adjust the <details> padding while open */
	padding-bottom: .75rem;
}

details[open] summary {
	/* Adjust the <details> padding while open */
	margin-bottom: 6px;
}

details[open]>*:last-child {
	/* Resets the bottom margin of the last element in the <details> while <details> is opened. This prevents double margins/paddings. */
	margin-bottom: 0;
}

dt {
	font-weight: bold;
}

dd::before {
	/* Add an arrow to data table definitions */
	content: '→ ';
}

hr {
	/* Reset the border of the <hr> separator, then set a better line */
	border: 0;
	border-bottom: 1px solid #ccc8bf;
	margin: 1rem auto;
}

fieldset {
	margin-top: 1rem;
	padding: 2rem;
	border: 1px solid var(--nc-bg-3);
	border-radius: 4px;
}

legend {
	padding: auto .5rem;
}


div.ie5 {
    overflow: auto;
}

#menubar .style_td a {
    font-size: 100%;
    display: block;
    padding: 5px;
}
.style_td a > img {
    margin-top: 0px!important;
}
table {
	/* border-collapse sets the table's elements to share borders, rather than floating as separate "boxes". */
	border-collapse: collapse;
	margin: auto;
	margin-top: 20px;

}
table thead tr .style_td {
	font-weight: bold;
	background: #c7ba9e;
	color: #61534a;
	text-align: center;
  font-size:80%;
}
table tfoot tr .style_td {
	font-weight: bold;
	background: #d2d5e0;
	color: #535863;
	text-align: center;
  font-size:80%;
}
img.lazyloaded a:hover {
 background:none!important;
}
td,
th {
	border: 1px solid #e0d8c8;
	text-align: left;
	padding: .6rem;
	font-size:80%;
}
.style_td a {
    line-height: 1em!important;
    font-size: 80%;
padding: 5px;
}
td.style_td > img {
    margin: 5px auto!important;
    border: solid 1px #86837d;
    border-radius: 5px;
    box-shadow: 2px 3px 0px 0px #bdbab5c2;
}
td .lazyloaded{
    border: solid 1px #86837d;
    border-radius: 5px;
    box-shadow: 2px 3px 0px 0px #bdbab5c2;
}
td .ls-is-cached lazyloaded{
    border: solid 1px #86837d;
    border-radius: 5px;
    box-shadow: 2px 3px 0px 0px #bdbab5c2;
}
th {
	background: #e8ddc5;
	text-align: center!important;
  font-size:80%;
}

tr:nth-child(even) {
	/* Set every other cell slightly darker. Improves readability. */
	background: var(--nc-bg-2);
}

table caption {
	font-weight: bold;
	margin-bottom: .5rem;
}

textarea {
	/* Don't let the <textarea> extend off the screen naturally or when dragged by the user */
	max-width: 100%;
}

ol,
ul {
	/* Replace the browser default padding */
	padding-left: 2rem;
}

li {
	margin-top: .4rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
	margin-bottom: 0;
}

mark {
	padding: 3px 6px;
	background: var(--nc-ac-1);
	color: var(--nc-ac-tx);
}

textarea,
select,
input {
	padding: 6px 12px;
	margin-bottom: 0px;
	margin-right: .5rem;
	background: var(--nc-bg-2);
	color: var(--nc-tx-2);
	border: 1px solid var(--nc-bg-3);
	border-radius: 4px;
	box-shadow: none;
	box-sizing: border-box;
}

#contents img {
	max-width: 100%;
margin-top: 15px;
}

#menubar img {
vertical-align: middle;
margin-top: 0px;
    padding-bottom: 3px;
padding-right: 3px;
}
div.contents{
    margin: -5px 20px 10px 20px;
    border-radius: 4px;
    padding: 15px 10px 10px 15px;
    background-color: #fcfbf8;
    border: 2px solid #ccc8bf;
    box-shadow: 0 2px 6.1px rgb(0 0 0 / 8%);

}
div.contents a{
line-height: 1.2em;
}

div.contents ul li{
 line-height: 1.25em;
 margin-bottom: 0.9em;
 margin-top:9px;
list-style-type: decimal;
font-weight: bold;
}
div.contents ul li a{
 font-weight: bold;
 color: #555555;
 text-decoration:none;
}
div.contents ul li a:hover{
 text-decoration:underline;
}

div.contents ul ul{
 margin-top: 0.5em;
}

div.contents ul ul li{
 line-height: 1.25em;
 margin-bottom: 0.5em;
 font-size:14px;
list-style-type: disc;
}
div.contents ul ul li a{
 color: #76787b;
 font-weight: normal;
 padding-right:6px;
	text-decoration:disc;
}

div.contents ul ul li a:hover{
 text-decoration:underline
}
div.contents::before {
  content: "\f044";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
    color: #bcbab6;
    font-size: 115%;
}
div.contents #contents_1::before {
    content: 'この記事の目次';
    padding-left: 2px;
    font-weight: bold;
    font-size: 115%;
    color: #bcbab6;
}
div.contents ul {
    padding-left: 3.1rem;
}
div.contents ul li li {
    margin-left: -20px;
}
div#navigator{
    margin: -8px 0 0 -8px;
    display: flex;
    justify-content: space-between;
background-image: radial-gradient(circle, rgba(77,180,255,1) 0%, rgba(33,43,145,1) 100%);
    width: 100%;
    padding: 8px;
}
div#navigator a{
width: 150px;
    height: 30px;
}
div#navigator img{
margin-bottom: -.5rem;
}

div.pan{
padding:10px 0;
display:flex;
justify-content:flex-end;
}



.noexists a::after{
    content: "\f304";
    font-family: "Font Awesome 5 Free";
  font-weight: 900;
font-size:70%;
    color: #ccc8bf;
    padding: 3px 4px;
}
.noexists a{
    color: #a9a7a0;
padding:3px !important;
line-height: normal;
}
#body ol a ,#body ul a{
padding:5px;
}
div#header{
background:#fdedf8;
    padding: 20px;
}

#header h1{
border-bottom:none;
}


/*--------header_dropdwn_menu------------*/
@media screen and (min-width: 480px) { /*ウィンドウ幅が480px以上の場合に適用*/
#drophead-sp {
display:none;
}
}
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
#drophead-pc {
display:none;
}
}

.dropdwn{
    max-width: 1200px;
    display: flex;
padding:5px;
}

#drophead-pc ul{
    text-align: center;
    list-style-type: none;
/*    margin: 0 auto 10px auto;*/
    margin: 0 auto -6px auto;
    padding: 0;
    color: #fff;
}
#drophead-sp ul{
    text-align: center;
    list-style-type: none;
/*    margin: 0 auto 10px auto;*/
    margin: 0 auto -6px auto;
    padding: 0;
    color: #fff;
}
#drophead-pc li{
    max-width: calc(1200px/5);
    position: relative;
    display: block;
    cursor: pointer;
    padding: 10px 0;
    font-weight: bold;
}
#drophead-sp li{
    max-width: calc(1200px/4);
    position: relative;
    display: block;
    cursor: pointer;
    padding: 10px 0;
    font-weight: bold;
}
.dropdwn>li{
width: 100%;
    margin: 1px;
    display: inline;
/*    color: #34343f;*/
    color: #fff;
font-size: 0.8em;
    line-height: 1.5em;
}

.dropdwn_menu{
    width: 100%;
    display: none;
    position: absolute;
    margin-left: -5px;
    margin-top: 0px;
    padding: 0;
background: rgb(255 255 255 / 96%);
    box-shadow: 0 1.9px 2.5px rgb(0 0 0 / 6%), 0 5px 6.1px rgb(0 0 0 / 8%), 0 10.1px 11.4px rgb(0 0 0 / 9%), 0 19.2px 19.8px rgb(0 0 0 / 9%), 0 38.4px 34.8px rgb(0 0 0 / 10%), 0 101px 74px rgb(0 0 0 / 13%);
z-index: 9999;
}  
.dropdwn_menu li{
    width: 100%;
    color: #000;
border-bottom:1px solid #dddddd;
}

.dropdwn_menu li a{
    padding: 5px 2px;;
    display: block;
    color: #000;
}
li.dropm1_e_li a:hover{
background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%)!important;
    color: rgb(65, 65, 65)!important;
}

div#menubar a:hover{
background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
    color: rgb(65, 65, 65);
}
div#contents a:hover{
background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
    color: rgb(65, 65, 65);
}
div#drophead-pc a:hover{
background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
    color: rgb(65, 65, 65);
}
div#drophead-sp a:hover{
background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
    color: rgb(65, 65, 65);
}
li.dropm1 a{
display: block;
}
li.dropm1_e a{
display: block;
}
ul.dropdwn_menu {
    margin-top: 11px!important;
}
/*
div#drophead-pc,#drophead-sp {
background-color: #FA8BFF;
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
    margin-left: -8px;
    margin-right: -7px;
}
*/
div#drophead-pc {
color: #ffffff;
    padding: 0px 5px 2px 5px;
    margin: 4px 3px 0px 3px;
    border: 2px solid #ffffff;
background-image: linear-gradient(to right, #434343 0%, #161616 100%);
    border-radius: 7px;
    box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px, rgb(51 51 51) 0px 0px 0px 1px;
}
div#drophead-sp {
color: #ffffff;
    padding: 0px 5px 2px 5px;
    margin: 4px 3px 0px 3px;
    border: 2px solid #ffffff;
background-image: linear-gradient(to right, #434343 0%, #161616 100%);
    border-radius: 7px;
    box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px, rgb(51 51 51) 0px 0px 0px 1px;
}
div#menubar{
max-width: 100%!important;
}
div#menubar ul li a {
list-style-type: none!important;
    display: block;
padding:2px;
}

div#menubar ul li{
list-style-type: none!important;
margin-left:-15px!important;
line-height: 1.8em;
}
#body p {    margin: 0 15px;
    line-height: 1.6em;
}
#page_top {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 0;
        bottom: 20vmax;
    opacity: 0.6;
    background-image: linear-gradient(
19deg
, #0037d0 0%, #B721FF 100%);
    border-radius: 5px;
    margin: 10px;
    z-index: 8500;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#contents img.logo {
    margin: 0 7px 0 0!important;
    padding: 0px;
    vertical-align: middle;
    border-radius: 2px;
}
._p_comment_form{
    margin-left: 5px;
}
textarea#_p_comment_comment_0 {
    max-width: 99.5%!important;
    height: 10vh!important;
    margin: 5px;
}
._p_comment_form input {
    margin-left: 6px;
}
div.backlinks {
    margin-top: 2em;
}
div.edit_form{
    margin-top: 2em;
}
.edit_form textarea{
    margin: 2em 0;
}

.dropm1 img {
    vertical-align: middle;
}
#body h1 + p {
    margin-bottom: -2em;
}
.dropm1_e img {
    vertical-align: middle;
}
.dropm1_e a {
    color: white;
}

.dropm1_e a:hover{
background-image: none!important;
    color: white!important;
}
/*SNS button*/

/* ボタン全体 */
.flowbtn6{
border-radius:13px;		
position:relative;
display:inline-block;
width:50px;
height:50px;
font-size:33px;
color:#fff!important;
transition:.5s;
text-decoration:none;
}	
/* アイコンをど真ん中に*/
.flowbtn6 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* ulタグの内側余白を０にする */
ul.snsbtniti{
padding:0!important;
list-style-type:none!important;
width:200px;
margin:0 auto;
}
/* アイコンボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
}
/* アイコンボタン同士の余白 */
.snsbtniti li{
flex:0 0 42%;
text-align:center!important;
    margin-top: 1rem;
}
/* アイコンボタンにマウスを乗せた時 */
.flowbtn6:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
}
/* Twitter */
.fl_tw1{
background:#55acee;
}
/* はてブ */
.fl_hb6 {
background:-webkit-linear-gradient(top, #1fbccd 0%, #1c91d4 84%);	
background:linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%);		
font-size:25px;	
}
/* YouTube */
.fl_yu6 {
color:#fc0d1c!important;
background: white;
box-shadow:0 0 2px #888;
}
/* メール */
.fl_ma6{
background:linear-gradient(135deg, #1B77F1 0%,#19BDFC 100%);
}

/*右側SNSボタン*/
#openModal {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 0;
    bottom: 30vmax;
    opacity: 0.6;
    background-image: linear-gradient(to top, #e66d17 0%, #ec1409 100%)!important;
    border-radius: 5px;
    margin: 10px;
    z-index: 5000;
}
#openModal > i{
    font-weight: 900;
    font-size: 25px;
    position: absolute;
    top: 14px;
    right: 0;
    left: 0;
    text-align: center;
    color: white;
    text-align: center;
    font-size: 25px;
}
.sns_share{
display:none;
}
input#fab {
    display: none;
}

label[for="fab"]{
display: block;
    background: #e42b2bb8;
}
label[for="fab"]::before{
  transform:rotate(225deg);  color: #fff;
}
#fab:checked + .sns_share{
  display:block;
}
.sns_share{
    top: auto;
    bottom: auto;
    right: 0;
    left: 0;
}
div#lastmodified {
    font-size: 80%;
    margin: 10px 20px -20px 0;
    color: #9c988e;
    text-align: right;
}




/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 9999; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 70%;
    max-width: 300px;
    padding: 50px 30px;
    background-color: #fff;
    border-radius: 10px;
}

.closeModal {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    cursor: pointer;
    font-size: 3em;
    margin-top: -20px;
    margin-right: -5px;
}

/*OGP スタイルシート*/
div.ogp {
    position: relative;
    z-index: 0; /* 必要であればリンク要素の重なりのベース順序指定 */
    word-wrap: break-word;
	word-break: break-all;
	background: white;
	border: 1px solid rgb(0 0 0 / 21%);
	border-radius: 4px;
	padding: 10px;
	margin:20px auto;
	min-height: 100px;
	max-height: 280px;
	max-width: 480px; 
	overflow: hidden;
	box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
a.ogp-link{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
    z-index: 2; /* 必要であればリンク要素の重なりのベース順序指定 */
}
div.ogp a:hover {
   background-image: none!important;
    background-color: rgb(160 197 232 / 10%)!important;
}

div.ogp-title{
	font-size: 100%;
	font-weight:bold;
	margin: 0 0 2px;
	line-height: 1.3em;
	color: #1a0dab;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical; 
    z-index: 100;
}
div.ogp-description{
	line-height: 1.5em;
	font-size: 80%;
	color: #5a5a5a;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical; 
    z-index: 100;
}
div.ogp-url{
	line-height: 1.8em;
	font-size: 80%;
	color: #bdbcbc;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical; 
	font-size: 0.4em;
	padding: 1px 0;
	margin: 5px 0;
    z-index: 100;
}
div.ogp-img-box{
	float: right;
	position: relative;
	width: 100px;
	height: 100px;
	margin-left:10px;
    z-index: 100;
}
div.ogp-img img{object-fit: cover;
   
    z-index: 100;}
img.ogp-img{
	width: 100px;
	height: 100px;object-fit: cover;
	margin-top: 0px!important;
	border-radius: 3px;
	border: 1px solid rgb(0 0 0 / 20%);
    z-index: 100;
}
/*
.page_image {
    width: 90%;
    margin: 40px auto 0px auto;
    overflow: hidden;
    background: #4c4c4c;
    border: solid 1px #000000;
    box-shadow: 2px 3px 0px 0px #bdbab5c2;
    border-radius: 5px;
}
.page_word {
    position: relative;
    height: 100px;
    max-width: 100%!important;
    padding: 10px 0;
    background: linear-gradient(#0e0e0e, #00000094);
    background: -moz-linear-gradient(#0e0e0e, #00000094);
    background: -ms-linear-gradient(#0e0e0e, #00000094);
    background: -webkit-linear-gradient(#0e0e0e, #00000094);
    color: white;
    text-align: center;
    margin: 15px 0;
}
.page_image img {
height: 150px !important;
position: absolute;
margin-top: 0px !important;
filter: blur(3px);
width: 500px !important;
overflow: hidden;
}
.page_description {
    font-size: 0.5em;
    word-wrap: break-word;
    margin: 10px 15px 10px 10px;
height:50%;
}
.page_title {
font-weight: 900;
    word-wrap: break-word;
    font-size: 1.5em;
    margin: 10px 15px 5px 10px;
    line-height: 1.1em;
height:50%;
}
*/

/*figre-page_image*/
figure {
    width: 600px;
    max-width: 90%;
    position: relative;
    margin: 40px auto 0 auto;
    border: solid 1px #000000;
    border-radius: 5px;
    box-shadow: 2px 3px 0px 0px #bdbab5c2;
    overflow: hidden;
}

figure img {
    width: 100%;
    max-width: 100%!important;
    height: 150px!important;
    vertical-align: top;
    border: solid 1px #000000;
    border-radius: 5px;
    box-shadow: 2px 3px 0px 0px #bdbab5c2;
    margin-top: 0!important; 
    filter: blur(5px);
}

figure figcaption {
overflow: hidden;
    font-size: 1.5em;
    line-height: 1.1em;
    font-weight: 900!important;
    color: #ffffff;
    position: absolute;
    top: 19px;
    display: flex;
    width: 100%;
    height: 100px;
    align-items: center;
    justify-content: center;
    padding-bottom: 25px;
    background: linear-gradient(#0e0e0e, #00000094);
    background: -moz-linear-gradient(#0e0e0e, #00000094);
    background: -ms-linear-gradient(#0e0e0e, #00000094);
    background: -webkit-linear-gradient(#0e0e0e, #00000094);
    margin: -5px auto!important;
    text-shadow: black 2px 0px 2px, black -2px 0px 2px, black 0px -2px 2px, black -2px 0px 2px, black 2px 2px 2px, black -2px 2px 2px, black 2px -2px 2px, black -2px -2px 2px, black 1px 2px 2px, black -1px 2px 2px, black 1px -2px 2px, black -1px -2px 2px, black 2px 1px 2px, black -2px 1px 2px, black 2px -1px 2px, black -2px -1px 2px, black 1px 1px 2px, black -1px 1px 2px, black 1px -1px 2px, black -1px -1px 2px;
}
.page_description {
    position: absolute;
    margin-top: 30px!important;
    margin-left: 10px!important;
    font-size: 0.5em;
    color: #fff;
    top: 0;
    left: 5px;
    display: flex;
    width: 100%;
    max-width: 90%;
    height: 150px;
    align-items: center;
    justify-content: center;
text-shadow: black 2px 0px 2px, black -2px 0px 2px, black 0px -2px 2px, black -2px 0px 2px, black 2px 2px 2px, black -2px 2px 2px, black 2px -2px 2px, black -2px -2px 2px, black 1px 2px 2px, black -1px 2px 2px, black 1px -2px 2px, black -1px -2px 2px, black 2px 1px 2px, black -2px 1px 2px, black 2px -1px 2px, black -2px -1px 2px, black 1px 1px 2px, black -1px 1px 2px, black 1px -1px 2px, black -1px -1px 2px;
}
.box_yellow{
    padding: 0.7em;
    margin: 1em 3em;
    border: solid 2px #e9bc81;
    border-radius: 5px;
    background: #fff5e4;
}
.box_yellow p {
    color: #a97838;
}
.box_red{
    color: #ff7d6e;
    padding: 0.7em;
    margin: 1em 3em;
    border: solid 2px #ff9e93;
    border-radius: 5px;
    background: #ffebe9;
}
.box_red p {
    color: #e36354;
}
.box_blue{
    padding: 0.7em;
    margin: 1em 3em;
    border: solid 2px #aac7fb;
    border-radius: 5px;
    background: #e3f3ff;

}
.box_blue p {
    color: #688ed3;
}
.box_white{
    padding: 0.7em;
    margin: 1em 3em;
    color: #5d627b;
    background: white;
    border: solid 2px #7e818d;
    border-radius: 5px;
}
.box_dot  {
    padding: 0.7em;
    margin: 1em 3em;
background: #ffffff;
    border-radius: 5px;
    border: dashed 2px #b6bdb2;
}
.box_green {
    padding: 0.7em;
    margin: 1em 3em;
    border: solid 2px #b6d7a6;
    border-radius: 5px;
    background: #e8f3e4;
}
.box_green p {
    color: #56853f;
}