/*
Theme Name: digital
Description:
template:
Author: HOMARE-Yoshi
Version: 1.0
*/

/* バナー */
.banner-area {
  width: 100%;
  margin: 23px 0;
}
@media screen and (max-width: 768px) {
  .banner-area {
    width: 89.34%;
    margin: 23px 5.33%;
  }
}
.banner-area img {
  width: 100%;
}

iframe {
	max-width: 100% !important;
}
.recommended__list__item__catTime__time {
	margin-top: 3%;
}
.wp-caption {
	max-width: 100% !important;
}


.box17{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
}
.box17:before, .box17:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
    margin: 0; 
    padding: 0;
}



.stripe-marker {
  background-image: repeating-linear-gradient(-45deg,
    #fcf69f 0, #fcf69f 4px,
    transparent 4px, transparent 8px
  );
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0.5em;
}

/* 補足BOX　2 */
.kakomi-hosoku2 {
 margin: 1.5em 0em 1.5em 1.5em; /* 枠外との間隔（上、右、下、左） */
 padding: 5px 10px;
 font-size: 0.9em; /* 文字サイズ */
 color: #555555; /* 文字色 */
 border-left: 3px solid #999999; /* 線の太さ・線種・色 */
 border-radius: 5px;
}

ul._list{
  list-style-type: disc;
}


ul._list{
  color: #1e366a;
  padding: 0.5em 0 0.5em 1.5em;
}

ul._list {
  line-height: 1.5;
  padding: 0.5em 0 0 1.5em;
}




.box3 {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #efefef;/*背景色*/
}
.box3 p {
    margin: 0; 
    padding: 0;
}



/* シンプル角丸 枠 1 */
.kakomi-maru1 {
 margin: 2em auto;  
 padding: 1em;
 width: 90%; /*幅の調節*/
 color: #666666; /*文字色*/
 background-color: #f7f7f7; /*背景色*/
 border: 2px solid #ccc; /*線の太さ・色*/
 border-radius: 8px; /*角の丸み*/ 
}
.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #25b7c0;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #25b7c0;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}


/***ステップバーデザイン１***/
.step-wrap1 {
 counter-reset:count;
 margin: 2em 0;
 position: relative;
}
.step-content1 {
 padding: 0 0 1.3em 2em;
 margin: 0;
 position: relative;
}
.step-content1::before {
 content: "";
 display: block;
 width: 13px;
 height: 13px;
 background: #6ab5a5;
 border: solid 3px #ffffff;
 border-radius: 50%;
 position: absolute;
 top: 3px;
 left: 3px;
 box-shadow: 0 0 0 2px #6ab5a5;
}
.step-content1::after {
 content: "";
 display: block;
 height: calc(100% - 35px);
 border-left: dotted 5px #768888;
 position: absolute;
 top: 30px;
 left: 10px;
}
.step-title1 {
 font-weight: bold;
 font-size: 120%;
}
.step-label1 {
 color: #768888;
 font-weight: bold;
}
.step-body1 {
 margin-top: .5em;
 padding: 0 0 1em;
 border-bottom: dotted 2px #ddd;
}
.step-wrap1 > :last-of-type::after {
 display: none;
}
/***ステップバーデザイン１***/





<style>
#demo{
width: 700px;
}

#demo table{
width: 100%;
border-collapse: collapse;
border: solid #CCC;
border-width: 1px;
}
#demo table tr th,
#demo table tr td{
padding: 0.5em;
text-align: left;
vertical-align: top;
border: solid #CCC;
border-width: 1px;
}
#demo table tr th{
width: 35%;
background: #eee;
}


@media screen and (max-width:768px){
#demo{
width: 100%;
}

#demo table,
#demo table tbody,
#demo table tr,
#demo table tr th,
#demo table tr td{
display: block;
}

#demo table{
width: 100%;
border-width: 0 0 1px 0;
}

#demo table tr th,
#demo table tr td{
width: 100%;
padding: 3% 5%;
}

#demo table tr td{
border-width: 0px 1px 0px 1px;
}
}
</style>






ul.sample1{
  counter-reset:list;
  list-style-type:none;
  padding:0;
}
ul.sample1 li{
  position:relative;
  padding: 0 0 0 20px;
  margin: 7px 0 7px 0px;
  font-weight: bold;
  font-size:14px;
  line-height: 30px;
  border-bottom: dashed 1px #F6A38B;
}
ul.sample1 li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #F6A38B;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}








ul.sample2 {
  border: solid 2px #F6A38B;
  padding: 0 0.5em;
  position: relative;
}

ul.sample2　 li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
}

ul.sample2　 li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f138";/*アイコン種類*/
  position: absolute;
  left : 0.5em; /*左端からのアイコンまで*/
  color: #F6A38B; /*アイコン色*/
}

ul.sample2　 li:last-of-type {
  border-bottom: none;
}




.box2 {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #FFF;
    border: solid 3px #e57a7a;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box2 p {
    margin: 0; 
    padding: 0;
}




/* シンプル 枠（影）1 */
.kakomi-box3 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 border: 1px solid #ccc; /* 枠線 */
 background-color: #fff; /* 背景色 */
 box-shadow: 1px 1px 2px #ccc;
}






.table-demo {
    border: 1px solid #ddd;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 2em;
　　 font-size: 0.9em; /* 文字サイズ */

}

.table-demo th,
.table-demo td {
    padding: 10px;
    border: 1px solid #ddd;
	 font-size: 0.9em;
}

.table-demo th {
    background-color: #f5f5f5;
	font-size: 0.9em;
}

@media screen and (min-width: 600px) {
    .table-demo th {
        width: 40%;
		 font-size: 0.9em;
    }

    .table-demo td {
        width: 60%;
		 font-size: 0.9em;
    }
}



.frame-box-001 {
	padding: 30px;
	position: relative;
}

.frame-box-001::before, .frame-box-001::after {
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
}

.frame-box-001::before {
	border-left: solid 2px #000000;
	border-top: solid 2px #000000;
	top: 0;
	left: 0;
}

.frame-box-001::after {
	border-right: solid 2px #000000;
	border-bottom: solid 2px #000000;
	bottom: 0;
	right: 0;
}





ul.sample11{
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 10px 10px 20px;
  color: #666666;
  background: #f7f7f7;
  border: solid 2px #ccc;
  border-radius: 5px;
  list-style: none;
}
ul.sample11 li{
　position: relative;
  line-height: 30px;
  padding-left: 20px;
  font-weight: bold;
  font-size: 0.8em; /* 文字サイズ */
  border-bottom: dashed 1px #ccc;
}
ul.sample11 li:before{
  content: "・";
  position: absolute;
  left: 0px;
}



ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 0;
}
ol.sample1 li{
  position:relative;
  line-height: 30px;
  margin: 7px 0 10px 40px;
  padding-left:10px;
  font-weight: bold;
  font-size:14px;
  border-bottom:solid 1px #F6A38B;
}
ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -30px;
  width: 30px;
  height: 32px;
  background: #F6A38B;
  text-align: center;
  color: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}



.left-line {
	position: relative;
	display: table-cell;
	padding-left: 55px;
}
.left-line:before {
	position: absolute;
	content: '';
	top: calc(50% - 5px);
	width: 40px;
	left: 0;
	height: 6px;
	border-top: solid 6px #F6A38B;
}



/* スマート　囲み枠　1 */
.kakomi-smart1 {
 position: relative;
 margin: 1em auto;
 padding: 1em 1em 1em;
 width: 100%; /* ボックス幅 */
 border-style: solid;
 border-color: #5f5f5f; /* 枠の色 */
 border-width: 5px 1px 1px;
 background-color: #f7f7f7; /* 背景色 */
 color: #666; /* テキスト色 */
}

.title-smart1 {
 position: absolute;
 top: 8px;
 left: 15px;
 background-color: #f7f7f7; /* タイトル背景色 */
 color: #5f5f5f; /* タイトル色 */
 font-size: 1.1em;
 font-weight: bold;
}



.kakomi1 {
 margin: 2em auto;
 padding: 1em;
 width: 100%;
 background-color: #fff; /* 背景色 */
 border: 1px solid #ccc; /* 枠線 */
}



.kakomi001 {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
}

.kakomi001:before, .kakomi001:after { 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}

.kakomi001:before {
  border-left: solid 1px #ff5722;
  border-top: solid 1px #ff5722;
  top:0;
  left: 0;
}

.kakomi001:after {
  border-right: solid 1px #ff5722;
  border-bottom: solid 1px #ff5722;
  bottom:0;
  right: 0;
}


.box00s {
    margin: 2em 0;
    border: solid 3px #FFAB8B;
    border-radius: 20px;
}
.box00s .box-title {
    font-size: 1.2em;
    background: #FFAB8B;
    padding: 5px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-radius: 15px 15px 0 0;
}
.box00s p {
    padding: 15px 20px;
    margin: 0;
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
}



.table01 {
  border-collapse:separate;
  border-spacing: 5px;
  width: 100%;
}

.table01 tr{
  border-bottom: solid 2px white;
}

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

.table01 th{
  background-color: #c79852;
  color: white;
  font-weight: bold;
  border:solid 1px #ffffff;
}

.table01 td{
  background-color: #e4d4bc;
  border:solid 1px #ffffff;
}



.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #FFC107;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #FFC107;
    color: #ffffff;
    font-weight: bold;
}
.box28 p {
    margin: 0; 
    padding: 0;
}

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #e57a7a;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 17px;
    background: #FFF;
    color: #e57a7a;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}



.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #FF6666;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #FF6666;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}



/***ステップバーデザイン3***/
.step-wrap3 {
 counter-reset: count;
 margin: 2em 0;
 position: relative;
}
.step-content3 {
 padding: 1.3em 0 .3em 1em;
 margin: 0 0 1em 1em;
 position: relative;
 border-top: solid 2px #ddd;
}
.step-content3::before {
 content: "";
 display: block;
 position: absolute;
 bottom: 0;
 left: -10px;
 border-style: solid;
 border-width: 17px 8px 0 8px;
 border-color: #ddd transparent transparent transparent;
}
.step-content3::after {
 content: "";
 display: block;
 height: calc(100% - 36px);
 border-left: dashed 4px #ddd;
 position: absolute;
 top: 16px;
 left: -4px;
}
.step-label3 {
 padding: 3px 20px 3px 15px;
 color: #fff;
 font-weight: bold;
 position: absolute;
 top: -18px;
 left: -20px;
 background: #e57a7a;
 border-radius: px;
 z-index: 1;
}
.step-label3::after {
 counter-increment: count;
 content: counter(count);
 position: relative;
 left: .3em;
}
.step-title3 {
 font-weight: bold;
 font-size: 120%;
}
.step-body3 {
 margin-top: .5em;
 padding: 0 0 1em;
}
.step-wrap3 > :last-child {
 box-shadow: 5px 7px 0 -5px #ddd;
}
.step-wrap3 > :last-child::before, .step-wrap3 > :last-of-type::after {
 display: none;
}
/***ステップバーデザイン3***/



.balloon2-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
}

.balloon2-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}

.balloon2-left:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #555;
  z-index: 1;
}

.balloon2-left p {
  margin: 0;
  padding: 0;
}



.gallery1 {
  display: inline-block;
}









.badge {
    display: inline-block;
    color: #fff;
    padding: 0.2rem 0.3rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}
.bg-red {
    background-color: #E74C3C;
}


ul.sample5{
  counter-reset:list;
  list-style-type:none;
  padding: 10px 10px 0 10px;
}
ul.sample5 li{
  position:relative;
  padding: 0 0 0 20px;
  margin: 7px 0 7px 0px;
  font-weight: bold;
  font-size:16px;
  line-height: 30px;
  border-bottom: dashed 1px #F6A38B;
}
ul.sample5 li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #F6A38B;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}