.bottomspace50{
    margin-bottom:50px;
}
.bottomspace100{
    margin-bottom:100px;
}
.bottomspace150{
    margin-bottom:150px;
}
.bottomspace200{
    margin-bottom:200px;
}


.wrapper
{
	padding-bottom: 5px;
}

.divider
{
	position: relative;
	margin-top: 5px;
	height: 1px;
}

.div-transparent:before
{
	content: "";
	position: absolute;
	top: 0;
	left: 5%;
	right: 5%;
	width: 90%;
	height: 1px;
	background-image: linear-gradient(to right, transparent, rgb(48,49,51), transparent);
}

.div-arrow-down:after
{
	content: "";
	position: absolute;
	z-index: 1;
	top: -7px;
	left: calc(50% - 7px);
	width: 14px;
	height: 14px;
	transform: rotate(45deg);
	background-color: white;
	border-bottom: 1px solid rgb(48,49,51);
	border-right: 1px solid rgb(48,49,51);
}

.div-tab-down:after
{
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: calc(50% - 10px);
	width: 20px;
	height: 14px;
	background-color: white;
	border-bottom: 1px solid rgb(48,49,51);
	border-left: 1px solid rgb(48,49,51);
	border-right: 1px solid rgb(48,49,51);
	border-radius: 0 0 8px 8px;
}

.div-stopper:after
{
	content: "";
	position: absolute;
	z-index: 1;
	top: -6px;
	left: calc(50% - 7px);
	width: 14px;
	height: 12px;
	background-color: white;
	border-left: 1px solid rgb(48,49,51);
	border-right: 1px solid rgb(48,49,51);
}

.div-dot:after
{
	content: "";
	position: absolute;
	z-index: 1;
	top: -9px;
	left: calc(50% - 9px);
	width: 18px;
	height: 18px;
	background-color: goldenrod;
	border: 1px solid rgb(48,49,51);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px white,
					0 0 0 4px white;
}

/* テーブル */
table{
  border-collapse:separate;
  border-spacing: 5px;
  table-layout: fixed; /* 2022/3/13追加　列等幅にするのため */
  width: 100%;
}

table th,table td{
  border-radius: 5px;
  text-align: center;
  padding: 10px 0;
}

table th{
  background-color: #c79852;
  color: white;
  border:solid 1px #927141;
}

table td{
  background-color: #fff;   /* #e4d4bc */
  border:solid 1px #af9d85;
}

/* 罫線なし */
.table2 td {
      border: none;
}

/* スタンダードtable */
table4 {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width: 650px;
  table-layout: fixed;
}

table4 tr {
  background-color: #fff;
  border: 1px solid #bbb;
  padding: .35em;
}
table4 th,
table td {
  padding: 1em 10px 1em 1em;
  border-right: 1px solid #bbb;
}
table4 th {
  font-size: .85em;
}
table4 thead tr{
  background-color: #eee;
}
.txt{
   text-align: left;
   font-size: .85em;
}
.price{
   text-align: right;
}
@media screen and (max-width: 600px) {
  table4 {
    border: 0;
    width:100%
  }
  table4 th{
    background-color: #eee;
    display: block;
    border-right: none;
  }
  table4 thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table4 tr {
    display: block;
    margin-bottom: .625em;
  }
  
  table4 td {
    border-bottom: 1px solid #bbb;
    display: block;
    font-size: .8em;
    text-align: right;
    position: relative;
    padding: .625em .625em .625em 4em;
    border-right: none;
  }
  
  table4 td::before {
    content: attr(data-label);
    font-weight: bold;
    position: absolute;
    left: 10px;
  }
  
  table4 td:last-child {
    border-bottom: 0;
  }
}



/* 一行に左揃え・右揃え等を混在 */
.titlebar {
   display: table;
   width: 100%;
   background-color:#cc0000;
   color:white;
}

.category {
   display: table-cell;
   text-align: left;
}

.subject  {
   display: table-cell;
   text-align: center;
}

.date {
   display: table-cell;
   text-align: right;
}



#demo_35-1 img{
    display: inline-block;
    width: auto;
    height: 30px;
    margin-right: 2px;
    padding: 5px;
    text-align: center;
    background-color: #e6fff2;
    border:1px solid #1c883e;
}


.container2 {
    display: flex grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    gap: 20px;
}

.grid-item2 {
    /* background-color: aqua; */
    text-align: center;
}

/* 写真額縁 */
/* 特定の画像のみに枠線を表示 */
.wp-image-180 {
    border: solid 10px #f0f0f0;
    box-shadow: 3px 3px 5px 5px rgba(0, 0, 0, 0.3);
}
/* 画像に枠線と影を付ける */
.entry-content img {
    border: solid 10px #f90;
    box-shadow: 3px 3px 5px 5px rgba(0, 0, 0, 0.3);
}

/* 写真内にチェックボックス */
.image_box img.thumbnail {
  width: 100%;
  height: 100%;
}

.image_box {
  width: 100px;
  height: 100px;
  /* これを追加します。 */
  /*position: relative; */
  /* これを追加します。 */
}

/*そして、チェックボックスにposition: abosoluteを指定して、親要素に対して絶対位置で配置できるようにします。また、位置はtop: 12pxとright: 12pxで、親の右上から12pxの位置にしています。*/
.image_box .disabled_checkbox {
  /* チェックボックスの位置は絶対位置にします。 */
  /*position: absolute; */
  /* チェックボックスは、親要素の右上から12pxの位置に配置します。 */
  top: 12px;
  right: 12px;
}

/* スタイルを適用したい要素 */
p{
    margin: 10px;
    padding: 20px;
    border:dashed;
  }