@charset "UTF-8";
/*
Theme Name: Kamata Orchestra Third
Author: Kamata Orchestra
Description: This is my original theme.
Version: 1.0
*/
/*cssのリセット*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, abbr, address, cite, code, del, dfn, em, img,
ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
figcaption, figure, footer, header, hgroup, menu, nav, section,
summary, time, mark, audio, video {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
  outline: 0;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote {
    position: relative;
    padding: 5px 10px 5px 32px;
    box-sizing: border-box;
    font-style: italic;
    background: #f3f3f3;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
	margin-bottom:20px;
	font-size:12px;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: -15px;
    width: 40px;
    height: 30px;
    text-align: center;
    content: "引用";
    color: #FFF;
    font-size: 18px;
    line-height: 30px;
    background: #92d4ff;
    box-shadow: 0 2px 2px rgba(26, 26, 26, 0.14);
    font-weight: 900;
}

blockquote:after{
    position: absolute;
    content: '';
    top: 40px;
    left: -15px;
    border: none;
    border-bottom: solid 8px transparent;
    border-right: solid 15px #6eb3e0;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

a {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
}
p{
	margin-bottom:10px;
}
ins {
  text-decoration: none;
  color: #000;
  background-color: #ff9;
}

mark {
  font-weight: bold;
  font-style: italic;
  color: #000;
  background-color: #ff9;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  cursor: help;
  border-bottom: 1px dotted;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

hr {
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #ccc;
}

figcaption{
	margin-top:-10px;
	text-align:right;
}
body {
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  overflow-x: hidden;
  background-color:#FAFAFA;	
}

#return-top {
  opacity:0.8;	
  background-color: #011640;
  border-radius: 10%;
  text-decoration: none;
  bottom: 20px;
  color: #fff;
  font-size: 10px;
  height: 50px;
  line-height: 50px;
  outline: 0;
  position: fixed;
  right: 20px;
  text-align: center;
  width: 50px;
  -webkit-transition: -webkit-transform 0.3s linear;
  transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
  z-index: 5;
}

#return-top:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.header{
  display:flex;
  background-color:#128BFF;
  width:100%;
  align-items:center;
}
.header img{
  height:60px;
}
.header-menu a{
  text-decoration:none;
  font-size:12px;
  color:white;
  margin-left:7px;
}
.header-menu{
  position:absolute;
  right:10px;
  display:flex;
  justify-content:flex-end;
}

header .logo-space {
  width: 30%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 16px;
  text-align: center;
}

header .logo {
  background: #D2DBEE;
  -webkit-box-shadow: 9.91px 9.91px 15px #BFC7D9, -9.91px -9.91px 15px #E5EFFF;
          box-shadow: 9.91px 9.91px 15px #BFC7D9, -9.91px -9.91px 15px #E5EFFF;
  margin: 0 auto;
  width: 70%;
  margin-bottom: 14px;
  padding: 1px;
  -webkit-transition: .3s;
  transition: .3s;
}

header .logo:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
}

header .about {
  background: #D2DBEE;
  -webkit-box-shadow: 9.91px 9.91px 15px #BFC7D9, -9.91px -9.91px 15px #E5EFFF;
          box-shadow: 9.91px 9.91px 15px #BFC7D9, -9.91px -9.91px 15px #E5EFFF;
  margin: 0 auto;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  border: none;
  margin-bottom: 10px;
  color: #8a8a8a;
  cursor: pointer;
  -webkit-transition: .3s;
  transition: .3s;
}

header .about:hover {
  border-radius: 50%;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.active {
  -webkit-transform: translateX(0%) !important;
          transform: translateX(0%) !important;
}

.profile {
  width: 200px;
  height: 100%;
  text-align: center;
  position: fixed;
  opacity:0.9;
  top: 0;
  right: 0;
  z-index: 10;
  font-size: 12px;
  padding: 10px;
  background-color: #bfcae3;
  -webkit-transform: translateX(100vw);
          transform: translateX(100vw);
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.profile h3 {
  margin-bottom: 10px;
}

.profile .close {
  position: fixed;
  top: 10px;
  font-size: 24px;
  text-align: left;
  text-decoration: none;
  color: white;
  border-radius: 50%;
  background-color: #011640;
  padding: 7px;
}

.profile .close a:link, a:visited, a:hover, a:active  {
  color: white;
}

.profile img {
  border-radius: 50%;
  width: 50%;
  margin-bottom: 10px;
}

.profile .question {
  text-align: left;
  margin-top: 20px;
}

.profile .question strong {
  border-bottom: 1px solid;
  margin-top: 10px;
}

.profile .question p {
  margin-top: 8px;
  margin-bottom: 14px;
}
.main-wrapper .article-wrapper{
	display:flex;
	overflow-x:scroll;
	margin-top:10px;
}
#bar::-webkit-scrollbar-track{
	background-color:#011640;
}
.main-wrapper .article-wrapper .article {
  margin: 16px;
	border-radius:5px;
	box-shadow: 3px 3px 3px #BFC7D9, -3px -3px 3px #E5EFFF;
}

.main-wrapper .article-wrapper figure{
	padding:5px;
}
.main-wrapper .adsense {
  margin-top: 24px;
  text-align: center;
	display:block;
}

/*  */
.main-wrapper .adsenseImg{
	width: 80%;
   margin: 0 auto 14px;
	max-width: 570px;
}
.adsense img {
	width: 100%;
}
.imgPR {
	position: relative;
}
.textPR {
	position: absolute;
	bottom: 2px;
	right: 0;
	color: #fff;
	background: rgba(30,30,30,0.5);
	margin :0;
	padding: 2px 8px;
	line-height: normal;
}
.textPR p{
	margin-bottom: 0;
}
/*  */


.main-wrapper .category .category-button a{
	text-decoration:none;
	color:white;
	background-color:#011640;
	padding: 5px;
   margin-right: -5px;
	border-radius:5px;
}
.article:hover{
	box-shadow:none !important;
}
.article img{
	 width:200px;
	 height:133px;
}
.single-contents{
	width: 86%;
   line-height: 30px;
	margin:auto;
	background-color: white;
   padding: 16px;
   border-radius: 5px;
}

.single-contents h2{
	font-size:24px!important;
	margin:32px 0px;
	color: #011640;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #011640;/*上線*/
  border-bottom: solid 3px #011640;/*下線*/
	text-align:center;
}
.single-contents h3{
	font-size:20px!important;
  margin:24px 0px;
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #011640;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #011640;/*左線*/
}
	.single-contents img{
		margin: 20px 0px;
		border-radius:10px;
		height:auto;
		width:100%;
	}	
.wp-block-image.is-resized{
	margin:auto;
}
.single-category{
	font-size:12px;
	text-align:right;
	margin-bottom:30px;
}
.single-category-button a{
	text-decoration:none;
	color:#011640!important;
}
.single-category-button a:visited{
color: white !important;
}
.single-adsense{
	text-align:center;
	display:block;
} 

.single-adsense .adsenseImg{
	width: 90%;
	max-width: 570px;
	margin: 0 auto 14px;
}
.single-adsense img{
	width: 100%;
	margin: 0 auto;
	border-radius:0px;
}
.single-adsense .textPR {
	position: absolute;
	bottom: 10px;
	right: 0;
	margin :0;
	padding: 0 8px;
}
.category{
	font-size:14px;
}
.youtube {
	margin:30px 0px;	
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.youtube iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}/*youtubeのstyle→function.PHPで自動的に.youtubeが付くようにしている！！！！(`o')*/
footer {
  bottom: 0;
  width: 100%;
  text-align: center;
	background-color:#128BFF;
	color:white;
}

footer .copy {
  font-size: 12px;
  margin-bottom: -10px;
  padding: 20px;
}

footer .footer-border {
  border-bottom: 1px solid white;
  margin-bottom: 20px;
	margin-top:20px;
}


footer .footer-logo img {
  width: 100px;
}

.footer-about{
	width: 90%;
    font-size: 12px;
    text-align: left;
    line-height: 24px;
    margin: auto;
}

@media screen and (min-width: 700px) {
	header .logo {
    margin: 0 30px;
    width: 80px;
  }
  header .logo-space {
    width: 30%;
    margin-right: 20px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
	  flex-direction:row;
  }
	header .about{
		margin-bottom:0px;
	}	
	.main-wrapper .article-wrapper .article{
		width:70% !important;
	}
	.article img{
		width: 264px;
      height: 176px;
	}
	
	.main-wrapper .adsenseImg{
	width: 80%;
   margin: 0 auto 14px;
	max-width: 570px;
	}
	.adsense img {
		width: 100%;
	}
	.imgPR {
		position: relative;
	}
	.textPR {
		position: absolute;
		bottom: 0;
		right: 0;
		color: #fff;
		background:rgba(30,30,30,0.5);
		margin: 0;
		padding: 2px 8px;
	}

}
@media screen and (min-width: 1024px) {
	.header img{
  height:100px;
}
.header-menu a{
  text-decoration:none;
  font-size:24px;
  color:white;
  margin-left:10px;
}
  header .logo {
    margin: 0 30px;
    width: 80px;
  }
  header .logo-space {
    width: 20%;
    margin-right: 20px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
  }
  header .about {
    margin: 0;
  }
	

  .main-wrapper .article-wrapper {

    margin-top: 20px;
  }
  .main-wrapper .article-wrapper .article {
    width: 26% !important;
    margin-right: 30px;
    -webkit-transition: .3s;
    transition: .3s;
    cursor: pointer;
  }

  .main-wrapper .adsense {
    margin-top: 36px !important;
  }

	.article img{
	height:176px !important;
}
	.single-contents{
	width: 50%;
    margin: auto;
}
	.youtube{
		margin: 14px 0px;
	}
	
	.main-wrapper .adsenseImg{
	width: 70%;
   margin: 0 auto 14px;
	max-width: 570px;
	}
	.adsense img {
		width: 100%;
	}
	.imgPR {
		position: relative;
	}
	.textPR {
		position: absolute;
		bottom: 0;
		right: 0;
		color: #fff;
		background:rgba(30,30,30,0.5);
		margin: 0;
		padding: 2px 8px;
	}
	
}
@media screen and (min-width: 1900px) {
	.article img{
		width:400px !important;
		height:267px !important;
	}
	
	.main-wrapper .adsenseImg{
	width: 80%;
   margin: 0 auto 14px;
	max-width: 570px;
	}
	.adsense img {
		width: 100%;
	}
	.imgPR {
		position: relative;
	}
	.textPR {
		position: absolute;
		bottom: 0;
		right: 0;
		color: #fff;
		background:rgba(30,30,30,0.5);
		margin: 0;
		padding: 2px 8px;
	}
	
}
/*# sourceMappingURL=stylesheet.css.map */