@charset "utf-8";
/* CSS Document */
#blogContents p {
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 1.6;
  margin-bottom: 0;
  padding-bottom: 0.5em;
}
#blogContents img {
  vertical-align: middle;
  border: 0;
  max-width: 100% !important;
  height: auto;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  image-rendering: -webkit-optimize-contrast;
}
#blogContents .intro {
  padding-top: 1em;
}
#blogContents .intro p{
	line-height:1.9 !important; 
}
/*　カード
----------------------*/
#blogContents .link-card {
  max-width: 740px;
  margin: 15px auto 15px;
  padding: 15px 10px 10px 15px;
  border: var(--secondary-border) solid 1px;
}
#blogContents .link-card .link-box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
#blogContents .link-card .link-box > div:first-child {
  width: 39%;
  padding-right: 3%;
}
#blogContents .link-card .link-box > div:last-child {
  width: 58%;
}
#blogContents .link-card .link-box > div h4 {
  margin: 0.3em 0 0.75em;
  font-size: 1.1em;
}
#blogContents .link-card .link-box > div p {
  font-size: 0.88em;
  line-height: 1.4;
}
#blogContents .link-card .link-box > div p.sitename {
  font-size: 0.88em;
  padding-top: 0.7em;
  color: var(--light-text);
}
.youtube {
 position: relative;
     padding-bottom: 56.25%; 
     height: 0;
     overflow: hidden;
}
.youtube iframe {
 position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
@media (max-width:1199.98px) {
  #blogContents .link-card {
    width: 90%
  }
}
@media (max-width:767.98px) {
  #blogContents .link-card {
    width: 100%
  }
}
@media (max-width:575.98px) {
  #blogContents .link-card .link-box {
    display: block;
  }
  #blogContents .link-card .link-box > div:first-child {
    width: auto;
    padding-right: 0;
    padding-bottom: 8px;
  }
  #blogContents .link-card .link-box > div:last-child {
    width: auto;
  }
}
#blogContents .link-card a {
  color: var(--gray-dark)
}
/*　目次
----------------------*/
#blogContents .cdx-mokuji {
  border: 4px solid var(--orange-1);
  padding: 48px 64px;
  max-width: 650px;
  margin: 20px auto 30px;
}
#blogContents .cdx-mokuji .close button:before {
  content: "close"
}
#blogContents .cdx-mokuji .close button.collapsed:before {
  content: "open"
}
#blogContents .cdx-mokuji .title {
  font-size: 1.6rem;
  margin-bottom: 0.75em;
  color: var(--orange-1)
}
#blogContents .cdx-mokuji a {
  color: var(--gray-dark)
}
#blogContents .cdx-mokuji > ul > li {
  list-style: decimal;
  margin-bottom: 1.5em;
  margin-left: -1em;
  padding: 0;
}
#blogContents .cdx-mokuji > ul > li > ul > li {
  margin-top: 0.4em;
  margin-left: -0.5em;
  padding: 0;
}
#blogContents .cdx-mokuji > ul > li > ul > li > ul > li {
  margin-top: 0.4em;
  margin-left: -0.5em;
  padding: 0;
}
#blogContents table td ul{
	margin-left: 0 !important;
	padding-left: 0 !important;
}
@media (max-width:1000px) {
  #blogContents .cdx-mokuji {
    padding: 40px 55px;
    max-width: none;
    width: 90%;
    margin: 20px auto 30px;
  }
}
@media (max-width:767.98px) {
  #blogContents .cdx-mokuji {
    padding: 5.71vw 6.43vw;
    width: 95%;
    margin: 2.89vw auto 4.29vw;
  }
  #blogContents .cdx-mokuji ul {
    font-size: .9rem
  }
}
#blogContents .cdx-marker {
 background: linear-gradient(transparent 0%, var(--marker-yellow) 0%);
}
@media (max-width:767.98px) {
  #blogContents {
    max-width: 100%
  }
}
#blogContents .fav {
  margin-left: 10px
}
@media (max-width:767.98px) {
  #blogContents .fav {
    margin-top: -15px
  }
  #blogContents .fav svg {
    width: 20%;
    height: 20%
  }
}
#blogContents #articleContents {
  margin-top: 40px;
  line-height:1.7
}
/**検索**/
#articleContents form {
  border: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
align-items: center;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

#articleContents form input[type="text"] {
  width: 240px;
  line-height: 36px;
  font-size: 14px;
  background: var(--white);
  border-top: 1px solid var(--gray-border-alt);
  border-left: 1px solid var(--gray-border-alt);
  border-bottom: 1px solid var(--gray-border-alt);
  border-right: none;
  padding: 0 10px;
}
#articleContents form button[type="text"]:focus {
  background: var(--light);
  border-top: 1px solid var(--gray-border-alt);
  border-left: 1px solid var(--gray-border-alt);
  border-bottom: 1px solid var(--gray-border-alt);
  border-right: none;
  outline: 0;
}
#articleContents form button[type="submit"] {
  width: 80px;
  font-size: 14px;
  line-height: 36px;
  padding: 0;
  border-top: 1px solid var(--gray-border-alt);
  border-right: 1px solid var(--gray-border-alt);
  border-bottom: 1px solid var(--gray-border-alt);
  border-left: none;
  background-color: var(--gray-200);
  cursor: pointer;
	margin-right: 20px;
}
#articleContents form input[type="submit"]:hover {
  border-top: 1px solid var(--gray-800);
  border-right: 1px solid var(--gray-800);
  border-bottom: 1px solid var(--gray-800);
  background-color: var(--gray-800);
  color: var(--white);
}
#articleContents form label{line-height: 36px;margin-left: 18px;font-size: 14px; }
/*　タイトル
----------------------*/
#blogContents h1 {
  margin: 30px 0 10px;
  color: var(--gray-dark);
  font-weight: 700
}
@media (max-width:767.98px) {
  #blogContents h1 {
    margin-top: 5px
  }
}
#blogContents h2 {
  padding: 1em .5em 1em;
  border-left: 7px solid var(--brand-pink);
  background: repeating-linear-gradient(-45deg, var(--gray-light), var(--gray-light) 3px, var(--light) 0, var(--light) 7px);
  text-shadow: 0 0 5px var(--white)
}
#blogContents h3 {
  position: relative;
  padding-bottom: 0.75em;
}
#blogContents h3:after {
  position: absolute;
  top: auto;
  bottom: 0;
  right: auto;
  left: 0;
  width: 100%;
  height: 7px;
  background: repeating-linear-gradient(-45deg, var(--brand-blue-light), var(--brand-blue-light) 2px, var(--white) 0, var(--white) 4px);
  content: ""
}
#blogContents h4:first-letter {
  color: var(--brand-pink);
}
#blogContents .cdx-contentbox h4:first-letter {
  color: inherit;
}
#blogContents h5, #blogContents h6 {
  border-left: 4px solid var(--brand-blue-light);
  padding: 0 0 0 8px
}
#blogContents h2, #blogContents h3 {
  margin: 2.8em 0 0.75em;
  font-weight: 700
}
#blogContents h3 {
  margin: 2.2em 0 0.75em;
  font-weight: 700
}
#blogContents h4, #blogContents h5, #blogContents h6 {
  margin: 1.9em 0 0.5em;
  font-weight: 700
}
#blogContents b {
  font-weight: 700
}
#blogContents ul {
  list-style-type: disc
}
#blogContents ol {
  list-style-type: decimal
}
#blogContents li {
  margin-left: 30px
}
#blogContents .cat {
  margin-bottom: 10px
}
#blogContents .cat a {
  color: var(--brand-blue-light);
	margin-right: 0.5rem;
  text-decoration: none
}
#blogContents .cat a:hover {
  text-decoration: underline
}
#blogContents time {
  margin-bottom: 10px;
  color: var(--gray-mid);
  display: block
}
#blogContents .img {
	text-align: center;
	 width: auto;
	padding: 0;
  margin: 10px auto 20px
}
/*リストボックス
----------------------*/
#blogContents .cdx-contentbox {
  border-radius: 5px;
  margin-top: 1em;
  margin-bottom: 1em;
  position: relative
}
#blogContents .cdx-contentbox ul li {
  margin: 0.3em 0 0.3em 0;
  line-height: 1.4;
  font-size: 0.94em;
}
#blogContents .cdx-contentbox ol li {
  margin: 0.3em 0 0.3em 0;
  line-height: 1.4;
  font-size: 0.94em;
}
#blogContents .cdx-contentbox.type1 {
  background-color: var(--light);
  border-radius: 5px;
  border: 1px solid var(--magenta);
  padding: 20px 20px 8px 15px;
}
#blogContents .cdx-contentbox.type1 h4 {
  font-size: 1.07em;
  margin-top: 0;
  display: inline-block;
}
#blogContents .cdx-contentbox.type2 {
  background-color: var(--light);
  border: none;
  padding: 20px 20px 8px 15px;
}
#blogContents .cdx-contentbox.type2 h4 {
  font-size: 1.07em;
  margin-top: 0;
}
#blogContents .cdx-contentbox.type3 {
  background-color: var(--warning-bg);
  border-radius: 5px;
  padding-bottom: 13px;
}
#blogContents .cdx-contentbox.type3 h4 {
  background-color: var(--brand-pink);
  border-radius: 5px 5px 0 0;
  padding: 12px 15px;
  font-size: 1.1em;
  margin: 0;
  color: var(--white)
}
#blogContents .cdx-contentbox.type3 ul, #blogContents .cdx-contentbox.type3 ol {
  margin: 18px 20px 0 15px;
}
#blogContents .cdx-contentbox.type4 {
  background-color: var(--white);
  border: 1px solid var(--brand-blue-light);
  padding-bottom: 13px;
  border-radius: 5px
}
#blogContents .cdx-contentbox.type4 h4 {
  background-color: var(--brand-blue-light);
  border-radius: 5px 5px 0 0;
  padding: 12px 15px;
  font-size: 1.1em;
  margin: 0;
  color: var(--white)
}
#blogContents .cdx-contentbox.type4 ul, #blogContents .cdx-contentbox.type4 ol {
  margin: 18px 20px 0 15px;
}
#blogContents .cdx-contentbox.type5 {
  border-radius: 5px;
  background-color: var(--warning-bg);
  position: relative;
  padding: 38px 20px 12px 12px;
  margin-top: 2em
}
#blogContents .cdx-contentbox.type5 h4 {
  background-color: var(--orange-2);
  border: 0;
  border-radius: 0;
  color: var(--white);
  top: -20px;
  font-size: 1.2em;
  position: absolute;
  padding: 10px 15px;
  margin: 0;
  left: 25px;
  z-index: 2
}
#blogContents .cdx-contentbox.type6 {
  border-radius: 5px;
  background-color: var(--white);
  position: relative;
  padding: 38px 20px 12px 12px;
	margin-top:2em
}
#blogContents .cdx-contentbox.type6 h4 span {
  display: inline-block;
  border-radius: 20px;
  color: var(--white);
  width: 40px;
  height: 40px;
  text-align: center;
  margin-right: 10px;
  font-size: 20px;
  line-height: 40px;
}
#blogContents .cdx-contentbox.type6 h4 {
  position: absolute;
  top: -0.75em;
  left: 15px;
  margin: 0;
  font-size: 1.3em;
  text-align: left;
  background-color: var(--white);
  padding: 0 10px 0;
  border-radius: 5px
}
#blogContents .cdx-contentbox.type6.pink {
  border: 2px solid var(--brand-pink);
}
#blogContents .cdx-contentbox.type6.pink h4 span {
  background-color: var(--brand-pink);
}
#blogContents .cdx-contentbox.type6.pink h4 {
  color: var(--brand-pink);
}
#blogContents .cdx-contentbox.type6.red {
  border: 2px solid var(--red-alert);
}
#blogContents .cdx-contentbox.type6.red h4 span {
  background-color: var(--red-alert);
}
#blogContents .cdx-contentbox.type6.red h4 {
  color: var(--red-alert);
}
#blogContents .cdx-contentbox.type6.green {
  border: 2px solid var(--green-alert);
}
#blogContents .cdx-contentbox.type6.green h4 span {
  background-color: var(--green-alert);
}
#blogContents .cdx-contentbox.type6.green h4 {
  color: var(--green-alert);
}

@media (max-width:767.98px) {
  #blogContents .cdx-contentbox.type1 {
    padding: 2.86vw 2.86vw 4.14vw 0.87vw;
  }
  #blogContents .cdx-contentbox.type1 h4 {
    font-size: 2.57vw;
  }
  #blogContents .cdx-contentbox.type2 {
    padding: 2.86vw 2.86vw 4.14vw 0.87vw;
  }
  #blogContents .cdx-contentbox.type2 h4 {
    font-size: 2.57vw;
  }
  #blogContents .cdx-contentbox.type3 {
    padding-bottom: 1.86vw;
  }
  #blogContents .cdx-contentbox.type3 h4 {
    padding: 1.71vw 2.14vw;
    font-size: 2.86vw;
  }
  #blogContents .cdx-contentbox.type3 ul, #blogContents .cdx-contentbox.type3 ol {
    margin: 2.57vw 2.86vw 0 0.87vw;
  }
  #blogContents .cdx-contentbox.type4 {
    padding-bottom: 1.86vw;
  }
  #blogContents .cdx-contentbox.type4 h4 {
    padding: 1.71vw 2.14vw;
    font-size: 2.86vw;
  }
  #blogContents .cdx-contentbox.type4 ul, #blogContents .cdx-contentbox.type4 ol {
    margin: 2.57vw 2.86vw 0 0.87vw;
  }
  #blogContents .cdx-contentbox.type5 {
    padding: 5.43vw 2.86vw 1.71vw 0.87vw;

  }
  #blogContents .cdx-contentbox.type5 h4 {
    top: -2.86vw;
    font-size: 3.14vw;
    padding: 1.43vw 2.14vw;
    left: 3.57vw;
  }
  #blogContents .cdx-contentbox.type6 {
    padding: 5.43vw 2.86vw 1.71vw 0.87vw;
  }
  #blogContents .cdx-contentbox.type6 h4 span {
    border-radius: 2.86vw;
    width: 5.71vw;
    height: 5.71vw;
    margin-right: 1.43vw;
    font-size: 2.86vw;
    line-height: 5.71vw;
  }
  #blogContents .cdx-contentbox.type6 h4 {
    top: -2.14vw;
    left: 2.14vw;
    font-size: 3.14vw;
    padding: 0 1.43vw 0;
  }
}
@media (max-width:575.98px) {
  #blogContents .cdx-contentbox {
    margin-top: 4.87vw;
    margin-bottom: 4.87vw;
  }
  #blogContents .cdx-contentbox.type1 h4 {
    font-size: 3.13vw;
  }
  #blogContents .cdx-contentbox.type2 h4 {
    font-size: 3.13vw;
  }
  #blogContents .cdx-contentbox.type3 h4 {
    font-size: 3.43vw;
  }
  #blogContents .cdx-contentbox.type4 h4 {
    font-size: 3.43vw;
  }
 #blogContents .cdx-contentbox.type5 {
		 margin-top: 6.6vw;
  }
  #blogContents .cdx-contentbox.type5 h4 {
    top: -2.86vw;
    font-size: 3.83vw;
    padding: 1.43vw 2.14vw;
    left: 3.57vw;
  }
 #blogContents .cdx-contentbox.type6 {
		 margin-top: 6.6vw;
  }
  #blogContents .cdx-contentbox.type6 h4 span {
    border-radius: 3.48vw;
    width: 6.96vw;
    height: 6.96vw;
    margin-right: 1.5vw;
    font-size: 3.48vw;
    line-height: 6.96vw;
  }
  #blogContents .cdx-contentbox.type6 h4 {
    font-size: 3.83vw;
  }
}
/*テーブル
----------------------*/
#blogContents table {
	width: 100%;
	margin-top: 0.5em;
  margin-bottom: 0.75em;
	border-collapse: collapse;
  border-spacing: 0;
	border:none;
}
#blogContents table td, #blogContents table th {
  padding: .75rem;
  vertical-align: top;
  border: 1px solid var(--gray-light)
}
#blogContents table th {
	background: var(--light);

}
#blogContents tbody + tbody {
  border-top: none
}
#blogContents .c-embed-box {
  width: 60%;
  margin: auto
}
.ditto_Paging p{ display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
 flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
font-size: 0.94rem;}
.ditto_Paging p>span{margin-left:3px;margin-right: 3px;padding: 1px 7px;border:var(--brand-blue-light) solid 1px;background-color:var(--brand-blue-light);color:var(--white); }
.ditto_Paging p>a{margin-left:3px;margin-right: 3px;padding: 1px 7px;border:var(--brand-blue-light) solid 1px;
text-decoration: none;}
.ditto_Paging p>a:hover{background-color:var(--brand-blue-light);color:var(--white); }

@media (max-width:991.98px) {
  #blogContents .c-embed-box {
    width: 100%
  }
	#blogContents table td, #blogContents table th {
  padding: .75rem 0.5rem;
	}

}
/*プロフィール*/
.profile-card {
  border-top: 1px solid var(--gray-200);
  padding: 0 20px;
  padding-top: 40px;
  position: relative;
  margin-top: 50px
}
@media (max-width:767px) {
  .profile-card {
    margin-bottom: 40px
  }
}
@media (min-width:768px) {
  .profile-card {
    margin-bottom: 20px
  }
}
.profile-card .profile-title {
  position: absolute;
  top: 0;
  background: var(--brand-pink);
  font-size: .8rem;
  font-weight: 500;
  color: var(--white);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px
}
@media (max-width:767px) {
  .profile-card .profile-title {
    left: 20px;
    padding: 5px 12px
  }
}
@media (min-width:768px) {
  .profile-card .profile-title {
    right: 20px;
    padding: 7px 15px;
    padding-top: 6px
  }
}
@media (max-width:767px) {
  .profile-card .profile-flexbox {
    display: block
  }
}
@media (min-width:768px) {
  .profile-card .profile-flexbox {
    display: flex
  }
}
.profile-card .profile-thumbnail {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  overflow: hidden;
  box-shadow: 0px 1px 3px rgba(var(--black-rgb), .18)
}
@media (max-width:767px) {
  .profile-card .profile-thumbnail {
    margin: 0 auto
  }
}
@media (min-width:768px) {
  .profile-card .profile-thumbnail {
    margin-right: 20px
  }
}
@media (max-width:767px) {
  .profile-card .profile-meta {
    margin-top: 10px
  }
}
@media (max-width:767px) {
  .profile-card .profile-meta .profile-name {
    text-align: center;
    font-weight: 700
  }
}
@media (min-width:768px) {
  .profile-card .profile-meta .profile-name {
    font-weight: 500
  }
}
.profile-card .profile-meta .profile-desc {
  font-size: .85rem;
  line-height: 1.25rem;
  font-weight: 300;
  margin-top: 20px
}
.profile-card .profile-link-box {
  margin-top: 30px
}
@media (max-width:767px) {
  .profile-card .profile-link-box {
    display: block
  }
}
@media (min-width:768px) {
  .profile-card .profile-link-box {
    display: flex;
    justify-content: space-between;
    align-items: center
  }
}
.profile-card .profile-link-box .profile-link {
  flex: 2;
  font-size: .85rem;
  word-break: break-all;
  word-wrap: break-word
}
@media (max-width:767px) {
  .profile-card .profile-link-box .profile-link {
    margin-left: 0
  }
}
@media (min-width:768px) {
  .profile-card .profile-link-box .profile-link {
    margin-left: 8px;
    margin-right: 20px
  }
}
.profile-card .profile-link-box .profile-link span {
  font-size: .75rem
}
.profile-card .profile-link-box .profile-link svg {
  margin-right: 2px
}
.profile-card .profile-link-box .profile-follow {
  flex: 1
}
.profile-card .profile-link-box .jic-type:before {
  vertical-align: bottom;
  padding-bottom: 0;
  padding: 2px
}

.jot-list ul,.jot-list ul li{
	list-style: none;
	margin: 0;
	padding: 0;
}
.jot-content {
    margin-left: 55px !important;
}
.jot-user{display: inline-block !important;width:180px !important;line-height:1.2 !important;font-size:0.9em !important; }
.jot-poster{display: inline-block !important;width:calc(100% - 190px) !important;}

@media (max-width:767px) {
.jot-content {margin-left: 25px !important;}
.jot-user{display:block !important;width:100% !important; }
.jot-poster{display:block !important;width:100% !important;}
}