@charset "UTF-8";

/*
Theme Name: ᓚᘏᗢ²
Description: ᓚᘏᗢ²
Author: ᓚᘏᗢ²
Template: blocksy
Version: 1.0.0
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/************************************
** Dark mode
************************************/
body, h1, h2, h3, h4, h5, h6 {
    color: snow;
}

.type-page .cm-entry-title a, .post .cm-entry-title a, .cm-entry-title a {
	color: snow;
}

/*
 * Simple Social Buttons 
 */
.ssb_custom-button {
	color: var(--cm-color-4, #151515);
}

.ssb_custom-button:hover {
	color: var(--cm-color-1, #FF9933);
}

/*************************************
 reCAPTCHA 表示設定
 https://developers.google.com/recaptcha/docs/faq
*************************************/
.grecaptcha-badge { visibility: hidden; }

/*************************************
 フォント設定
*************************************/
body {
    font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	font-family: 'Lato', 'Noto Sans JP';
}


/*************************************
 囲み枠
*************************************/
.heading-plaid{
	font-size: 27px;
	font-weight: bold;
	padding: 1rem 3rem;
	margin: 1em 0;
	background-color: #252525;
	background-image: linear-gradient(90deg, rgba(160, 60, 160, .5) 50%, transparent 50%),
					  linear-gradient(rgba(160, 60, 160, .5) 50%, transparent 50%);
  background-size: 10px 10px;
}

.heading-stripe {
	font-size: 27px;
	font-weight: bold;
	padding: 1rem 3rem;
	margin: 1em 0;
	background-image: repeating-linear-gradient(135deg, gray, gray 16px, navy 16px, navy 40px);
}

.heading-midnightblue {
	font-size: 24px;
	font-weight: bold;
	padding: 1rem 2rem;
	margin: 1em 0;
	border-top: 5px solid midnightblue;
	border-bottom: 5px solid midnightblue;
/* 	background: #333333; */
}

.heading-grid{
    font-size: 27px;
    font-weight: bold;
	padding: 1rem 2rem;
margin: 1em 0;
	background-image: linear-gradient(0deg, transparent 14px, #00aaff 15px),linear-gradient(90deg,  transparent 14px, #00aaff 15px);
	background-size: 15px 15px;
}

.heading-darkblue{
	text-align: center;
	font-size: 16px;
	padding: 8px 19px;
	margin: 2em 0;
	background: midnightblue;
	border-top: solid 2px khaki;
	border-bottom: solid 2px khaki;
}
.heading-silver p {
	margin: 0;
	padding: 0;
}

.heading-lattice {
  text-align: center;
  border-top: 8px solid midnightblue;
  border-bottom: 1px solid midnightblue;
  padding: 0.5em 1em;
  position: relative;
  overflow: visible;
}

.heading-lattice:before,
.heading-lattice:after {
  content: '';
  position: absolute;
  top: -20px;
  height: calc(100% + 40px);
}

.heading-lattice:before {
  left: 20px;
  width: 12px;
  background-color: midnightblue;
}

.heading-lattice:after {
  right: 20px;
  width: 4px;
  background-color: midnightblue;
}

.heading-lattice p {
  padding-left: 75px;
}


.heading-sticky-note{
	text-align: center;
    position: relative;
    background: midnightblue;
    box-shadow: 0px 0px 0px 5px midnightblue;
    border: dashed 2px darkgray;
    padding: 0.2em 0.5em;
/*     color: midnightblue; */
}
.heading-sticky-note:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 25px 25px 0;
    border-style: solid;
    border-color: silver black silver;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.heading-sticky-note p {
    margin: 0; 
    padding: 0;
}

.heading-related-video{
/* 	color: midnightblue; */
	text-align: center;
/* 	font-size: 24px; */
	margin: 1em auto;
	position: relative;
	background: midnightblue;
	padding: 1.6em 1em 1.2em;
	background-image: linear-gradient(0deg, transparent 14px, silver 15px),linear-gradient(90deg,  transparent 14px, silver 15px);
	background-size: 15px 15px;
}

.heading-related-video::before {
	position: absolute;
	content: "";
	width: 95%;
	height: 10px;
	top: 0.5em;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	border-top: dotted 12px ghostwhite;
}

/***************
 Photo(description list)
***************/
.photo-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  border-radius: 8px;
  padding: 5px;
  margin: 1em 0;
}

.photo-meta dt,
.photo-meta dd {
  margin: 0;
  padding: 5px;
  border: 1px solid darkgray;
}

.photo-meta dt {
  display: flex;
  align-items: center;
  font-weight: bold;
  min-width: 60px;
}

.photo-meta dd {
}

/***************
 Video Gallery(description list)
***************/
.video-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  border-radius: 8px;
  padding: 5px;
  margin: 1em 0;
}

.video-meta dt,
.video-meta dd {
  margin: 0;
  padding: 5px;
  border: 1px solid darkgray;
}

.video-meta dt {
  display: flex;
  align-items: center;
  font-weight: bold;
  min-width: 80px;
/*   background-image: linear-gradient(0deg, transparent 1px, midnightblue 2px),linear-gradient(90deg,  transparent 1px, midnightblue 2px);
  background-size: 2px 2px; */
}

.video-meta dd {
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  .video-meta {
    display: block !important;
  }
  .video-meta dt,
  .video-meta dd {
    display: block !important;
    width: 100%;
  }
  .video-meta dt {
	background: midnightblue;
    justify-content: center;
    text-align: center;
  }
  .video-meta dt { border-bottom: 0; }
  .video-meta dd { border-top: 0; }
}