@charset "utf-8";
/* 投稿・記事一覧ページ用 */

/* ------------------------------------------  パンくずリスト */
.p-breadcrumb__list {
  flex-wrap: wrap;
}
.p-breadcrumb__item:last-child .p-breadcrumb__text {
  white-space: normal;
}
.l-content__body {
  margin: 1rem auto;
}
/* ------------------------------------------  カテゴリータイトル .voice-ttl */
.voice-ttl {
  padding: .5em 2vw .5em 60px;
  color: #FFFFFF;
  background-color: #f05a18;
  position: relative;
}
.voice-ttl::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background-image: url("../images/voice-ttl_icon.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 40px 40px;
  overflow: hidden;
  position: absolute;
  left: 2vw;
  top: 50%;
  transform: translateY(-50%);
}
.voice-main-ttl {
  height: 0;
  padding-top: 30vw;
  background-image: url("../images/voice-main-ttl.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.voice-main-ttl.photo {
  background-image: url("../images/photo-main-ttl.jpg");
}
.voice-main-ttl.art {
  background-image: url("../images/art-main-ttl.jpg");
}
.voice-main-ttl.piano {
  background-position: left top -30vw;
}
.voice-main-ttl.guitar {
  background-position: left top -60vw;
}
.voice-main-ttl.sax {
  background-position: left top -90vw;
}
.voice-main-ttl.oboe {
  background-position: left top -120vw;
}
.p-archive__title {
  margin-bottom: 0;
}
.area-sub {
  height: 0;
  padding-top: 19.2vw;
  background-image: url("../images/camera_sub-ttl.gif");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.area-sub.hokkaido {
  background-position: left top;
}
.area-sub.tohoku {
  background-position: left top -19.2vw;
}
.area-sub.kanto {
  background-position: left top -38.4vw;
}
.area-sub.tokai {
  background-position: left top -57.7vw;
}
.area-sub.chugoku {
  background-position: left top -76.9vw;
}
.area-sub.kyushu {
  background-position: left bottom;
}
/* ------------------------------------------  投稿ページ枠 .type-post */
article.category-voice,
article.category-photo,
article.category-art {
  margin: 0 2vw;
}
/* ------------------------------------------ 記事一覧ページ枠 .p-postList */
.p-postList__title {
  padding: .5em 2vw;
}
.p-postList__excerpt {
  padding: .5em 2vw;
  font-size: 1rem;
}
.p-postList.-type-card .p-postList__item {
  margin-bottom: 0;
  position: relative;
  pointer-events: auto;
}
.-type-card > .p-postList__item:hover .p-postList__body, .-type-list > .p-postList__item:hover .p-postList__body {
  opacity: 1 !important;
}
/* タイトル */
.p-entry__head {
  color: #a55703;
  background-color: #f5dcb4;
  background-image: -webkit-linear-gradient(90deg,rgba(247,227,202,1.00) 0%,rgba(245,220,180,1.00) 100%);
  background-image: -moz-linear-gradient(90deg,rgba(247,227,202,1.00) 0%,rgba(245,220,180,1.00) 100%);
  background-image: -o-linear-gradient(90deg,rgba(247,227,202,1.00) 0%,rgba(245,220,180,1.00) 100%);
  background-image: linear-gradient(0deg,rgba(247,227,202,1.00) 0%,rgba(245,220,180,1.00) 100%);
  border-top: 3px solid #d99627;
  border-bottom: 3px solid #d99627;
}
.type-post h1.c-pageTitle__main,
.p-postList .p-postList__title {
  width: auto;
  margin: .5em 2vw .2em;
  padding-bottom: .2em;
  color: #a55703;
  font-size: 1.2rem;
  text-align: left;
  text-shadow:
    #FFF 2px 0px, #FFF -2px 0px, #FFF 0px -2px, #FFF 0px 2px, #FFF 2px 2px, #FFF -2px 2px, #FFF 2px -2px, #FFF -2px -2px, #FFF 1px 2px, #FFF -1px 2px, #FFF 1px -2px, #FFF -1px -2px, #FFF 2px 1px, #FFF -2px 1px, #FFF 2px -1px, #FFF -2px -1px;
  background-image: none;
  border: none;
  border-bottom: 1px dotted #a55703;
}
.p-postList .p-postList__title {
  margin: 0;
  padding: .5em 2vw .2em;
  color: #a55703;
  background-image: none;
  background-color: #f5dcb4;
  border: none;
  border-top: 3px solid #d99627;
  position: relative;
}
.p-postList .p-postList__title::after {
  content: "";
  display: block;
  width: 90%;
  border-bottom: 1px dotted #a55703;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.c-postMetas.u-flex--aicw {
  content-visibility: hidden;
  display: none;
}
/* 投稿者情報 */
.voice-info {
  padding: .5em 2vw;
  text-shadow:
  #FFF 2px 0px, #FFF -2px 0px, #FFF 0px -2px, #FFF 0px 2px, #FFF 2px 2px, #FFF -2px 2px, #FFF 2px -2px, #FFF -2px -2px, #FFF 1px 2px, #FFF -1px 2px, #FFF 1px -2px, #FFF -1px -2px, #FFF 2px 1px, #FFF -2px 1px, #FFF 2px -1px, #FFF -2px -1px;
}
.p-postList__body .voice-info {
  color: #a55703;
  background-image: -webkit-linear-gradient(90deg,rgba(247,227,202,1.00) 0%,rgba(245,220,180,1.00) 100%);
  background-image: -moz-linear-gradient(90deg,rgba(247,227,202,1.00) 0%,rgba(245,220,180,1.00) 100%);
  background-image: -o-linear-gradient(90deg,rgba(247,227,202,1.00) 0%,rgba(245,220,180,1.00) 100%);
  background-image: linear-gradient(0deg,rgba(247,227,202,1.00) 0%,rgba(245,220,180,1.00) 100%);
  border-bottom: 3px solid #d99627;
  position: relative;
}
.voice-info::after {
  content: "";
  display: block;
  width: 300px;
  height: 80px;
  background-image: url("../images/voice-info-bg.gif");
  background-repeat: no-repeat;
  background-size: 300px 560px;
  opacity: .4;
  mix-blend-mode: multiply;
  position: absolute;
  right: 30%;
  bottom: 0;
}
.voice-info.piano::after {
  background-position: left top;
}
.voice-info.guitar::after {
  background-position: left top -80px;
}
.voice-info.sax::after {
  background-position: left top -160px;
}
.voice-info.oboe::after {
  background-position: left top -240px;
}
.voice-info.camera::after {
  background-position: left top -320px;
}
.voice-info.kaiga::after {
  background-position: left top -400px;
}
.voice-info .status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  position: relative;
  z-index: 10;
}
.voice-info .status li,
.voice-info .status + p {
  margin-right: .5em;
  white-space: nowrap;
}
.single-post .l-main__body>.c-postContent {
  margin-top: 1rem;
  padding: .5em 2vw 2em;
  border: 1px solid #c7871b;
  border-radius: .5em;
  position: relative;
  z-index: -1;
}
.single-post .l-main__body>.c-postContent > * {
  margin-top: .8em;
  line-height: 1.6;
}
.single-post .l-main__body>.c-postContent::after,
.p-postList__body::after {
  content: "※習得効果には個人差があります。";
  font-size: .8em;
  color: #c7871b;
  position: absolute;
  right: 2vw;
  bottom: .2em;
  clear: both;
}
.p-postList.-type-card .p-postList__body {
  margin: 1rem 2vw;
  padding: 0 0 2em;
  border: 2px solid #c7871b;
  border-radius: .5em;
  overflow: hidden;
  position: relative;
}
/* 感想投稿者サムネ 投稿　.p-entry__thumb、一覧 .p-postList__thumb */
.p-postList.-type-card .p-postList__thumb, .p-entry__thumb {
  width: 30%;
  margin: 0;
  margin: .5em 2vw 0;
  overflow: visible;
  /*position: relative;
  right: 3vw;*/
  float: right;
}
.p-postList.-type-card .p-postList__item.kaiga .p-postList__thumb,
.p-postList.-type-card .p-postList__item.camera .p-postList__thumb,
.category-art .p-entry__thumb,
.category-photo .p-entry__thumb { /*作品カテゴリ用*/
  width: 46%;
}
.category-art .add_img,
.category-photo .add_img {
  width: 48%;
  margin: 0 0 .5em 2vw;
  float: right;
  /*width: 46%;
  margin: 0;
  position: relative;
  top: .2em;*/
}
.category-art .add_img.row,
.category-photo .add_img.row {
  float: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 .5em;
  position: relative;
  left: -2vw;
}
.category-art .add_img.row figure,
.category-photo .add_img.row figure {
  flex: 0 1 33%;
  margin: 0 0 .2em;
}
.category-art .add_img.flo-l,
.category-photo .add_img.flo-l {
  width: 48%;
  margin: 0 0 1em 0;
  float: left;
  /*width: 46%;
  margin: 0;
  position: relative;
  top: .2em;*/
}
.category-art .add_img.flo-l + p,
.category-photo .add_img.flo-l + p {
  clear: both;
}
.category-art .add_img .p-postList.-type-card .p-postList__thumb,
.category-photo .add_img .p-postList.-type-card .p-postList__thumb,
.category-art .add_img .p-entry__thumb,
.category-photo .add_img .p-entry__thumb {/*追加画像用*/
  width: 100%;
  /*margin: .5em 0 0 0;*/
  line-height: 0;
  position: relative;
  top: .2em;
  right: -2vw;
}
.c-postThumb__figure, .p-entry__thumb {
  padding-top: 0;
  background-color: #FFFFFF;
  border: 5px solid #FFFFFF;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,0.4);
  z-index: 20;
}
.c-postThumb__img {
  position: static;
  height: auto;
}
/* 本文 */
.p-postList__excerpt p {
  margin-bottom: .5em;
}
/* 水彩画投稿用スタッフコメント */
.staff {
  padding: .5em 2vw;
  border: 1px solid #ccc;
}
.staff .cmnt-header {
  display: inline-block;
  padding: .2em .5em;
  margin-bottom: .5em;
  color: #FFFFFF;
  background-color: #1C4C00;
}
/* サイドバー:感想検索フォーム */
.search-ttl {
  margin: 1em 2vw 0;
  padding: .5em 0;
  color: #FFFFFF;
  font-size: 1.1em;
  text-align: center;
  background-color: #006600;
  border-radius: 10px 10px 0 0;
  background-image: -webkit-linear-gradient(270deg,rgba(0,121,47,1.00) 0%,rgba(0,102,0,1.00) 100%);
  background-image: -moz-linear-gradient(270deg,rgba(0,121,47,1.00) 0%,rgba(0,102,0,1.00) 100%);
  background-image: -o-linear-gradient(270deg,rgba(0,121,47,1.00) 0%,rgba(0,102,0,1.00) 100%);
  background-image: linear-gradient(180deg,rgba(0,121,47,1.00) 0%,rgba(0,102,0,1.00) 100%);
}
.searchandfilter {
  margin: 0 2vw 1.5em;
  border: 1px solid #c7871b;
  border-top-color: #006600;
  border-radius: 0 0 10px 10px;
  position: relative;
}
.searchandfilter::after {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background-image: url("../images/tap-icon.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 60px 60px;
  position: absolute;
  right: 1em;
  bottom: -.8em;
  z-index: 10;
}
.searchandfilter ul,
.searchandfilter li {
  display: block;
}
.searchandfilter > div > ul > li {
  padding: 0;
}
.searchandfilter > div > ul > li:last-child {
  margin: 0;
  text-align: center;
}
.searchandfilter h4 {
  margin: 0 0 10px;
  padding: .5em 10px;
  color: #a55703;
  background-color: #f5dcb4;
}
.searchandfilter h4 + ul {
  margin-bottom: .5em;
}
.searchandfilter .cat-item {
  padding: 0 5px 0 1.5em;
  line-height: 1.6;
  position: relative;
}
.searchandfilter .cat-item input[type="checkbox"],
.searchandfilter .cat-item input[type="radio"] {
  position: absolute;
  left: .4em;
  top: .4em;
}
.searchandfilter > div > ul > li:first-child > ul > li:first-child,
.searchandfilter .cat-item-1,
.searchandfilter .cat-item-3 {
  content-visibility: hidden;
  display: none;
}
.searchandfilter input[type="submit"] {
  width: 100%;
  padding: 1em 0;
  color: #FFFFFF;
  font-size: 1.1em;
  font-weight: bold;
  text-shadow: 0 3px 0 #CE000B;
  letter-spacing: 2px;
  background-color: #ff3c47;
  background-image: -webkit-linear-gradient(270deg,rgba(255,60,71,1.00) 0%,rgba(225,22,34,1.00) 100%);
  background-image: -moz-linear-gradient(270deg,rgba(255,60,71,1.00) 0%,rgba(225,22,34,1.00) 100%);
  background-image: -o-linear-gradient(270deg,rgba(255,60,71,1.00) 0%,rgba(225,22,34,1.00) 100%);
  background-image: linear-gradient(180deg,rgba(255,60,71,1.00) 0%,rgba(225,22,34,1.00) 100%);
  border-radius: 0 0 10px 10px;
}
.searchandfilter input[type="submit"]:hover {
  opacity: .8;
}
@media (min-width: 600px){
.p-postList.-type-card .p-postList__item {
  flex-basis: 100%;
}
}
@media screen and (min-width: 980px){
/* ------------------------------------------  パンくずリスト */
.p-breadcrumb__list {
  flex-wrap: wrap;
}
.p-breadcrumb__item:last-child .p-breadcrumb__text {
  white-space: normal;
}
.l-content__body {
  margin: 1rem auto;
}
/* ------------------------------------------  カテゴリータイトル .voice-ttl */
.voice-ttl {
  padding: .5em 20px .5em 60px;
  font-weight: bold;
}
.voice-ttl::before {
  left: 10px;
}
.voice-main-ttl {
  padding-top: 220px;
  background-size: 730px 1540px;
}
.voice-main-ttl.photo,
.voice-main-ttl.art {
  background-size: 730px 220px;
}
.voice-main-ttl.piano {
  background-position: left top -220px;
}
.voice-main-ttl.guitar {
  background-position: left top -440px;
}
.voice-main-ttl.sax {
  background-position: left top -660px;
}
.voice-main-ttl.oboe {
  background-position: left top -880px;
}
.area-sub {
  padding-top: 140px;
  background-size: 730px 840px;
}
.area-sub.hokkaido {
  background-position: left top;
}
.area-sub.tohoku {
  background-position: left top -140px;
}
.area-sub.kanto {
  background-position: left top -280px;
}
.area-sub.tokai {
  background-position: left top -420px;
}
.area-sub.chugoku {
  background-position: left top -560px;
}
.area-sub.kyushu {
  background-position: left bottom;
}
/* ------------------------------------------  投稿ページ枠 .type-post */
article.category-voice,
article.category-photo,
article.category-art {
  margin: 0;
}
/* ------------------------------------------ 記事一覧ページ枠 .p-postList */
.p-postList__title {
  padding: 1em 20px;
}
.p-postList__excerpt {
  padding: 1em 20px;
  font-size: 1.125rem;
}
.p-postList.-type-card {
  display: block;
  margin: 0;
}
.p-postList.-type-card .p-postList__item {
  width: 730px;
  padding: 0;
}
/* タイトル */
.type-post h1.c-pageTitle__main,
.p-postList .p-postList__title {
  margin: 16px 20px 0;
  padding: 0 0 .5em;
  font-size: 1.4rem;
  word-break: keep-all;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.p-postList .p-postList__title {
  margin: 0;
  padding: 1em 20px .5em;
  color: #a55703;
  background-image: none;
  background-color: #f5dcb4;
  border: none;
  border-top: 3px solid #d99627;
  position: relative;
}
.p-postList .p-postList__title::after {
  border-bottom: 2px dotted #d99627;
}
.c-postMetas.u-flex--aicw {
  content-visibility: hidden;
  display: none;
}
/* 投稿者情報 */
.voice-info {
  padding: .5em 20px;
  position: relative;
}
.voice-info::after {
  left: 0;
}
.p-postList__body .voice-info {
  color: #a55703;
  background-image: -webkit-linear-gradient(90deg,rgba(247,227,202,1.00) 0%,rgba(245,220,180,1.00) 100%);
  background-image: -moz-linear-gradient(90deg,rgba(247,227,202,1.00) 0%,rgba(245,220,180,1.00) 100%);
  background-image: -o-linear-gradient(90deg,rgba(247,227,202,1.00) 0%,rgba(245,220,180,1.00) 100%);
  background-image: linear-gradient(0deg,rgba(247,227,202,1.00) 0%,rgba(245,220,180,1.00) 100%);
  border-bottom: 3px solid #d99627;
}
.single-post .l-main__body>.c-postContent {
  padding: 1em 20px 3em;
  font-size: 1rem;
}
.single-post .l-main__body>.c-postContent::after,
.p-postList__body::after {
  right: 20px;
}
.p-postList.-type-card .p-postList__body {
  margin: 30px 0;
  padding: 0 0 2em;
  border: 2px solid #c7871b;
  border-radius: .5em;
  overflow: hidden;
  position: relative;
}
/* 感想投稿者サムネ 投稿　.p-entry__thumb、一覧 .p-postList__thumb */
.p-postList.-type-card .p-postList__thumb, .p-entry__thumb {
  width: 160px;
  margin: 1em 20px 10px;
}
.p-postList.-type-card .p-postList__item.kaiga .p-postList__thumb,
.p-postList.-type-card .p-postList__item.camera .p-postList__thumb,
.category-art .p-entry__thumb,
.category-photo .p-entry__thumb { /*作品カテゴリ用*/
  width: 320px;
  /*min-width: 270px;
  max-width: 320px;*/
}
/*.category-art .add_img,
.category-photo .add_img {
  display: block;
  margin: 0;
}*/
.category-art .add_img,
.category-photo .add_img {
  width: 350px;
  margin: 0 0 .5em;
  /*float: right;*/
}
/*.category-art .add_img figure,
.category-photo .add_img figure {
  margin: 0 0 .5em .5em;
}*/
.category-art .add_img.row,
.category-photo .add_img.row {
  /*float: none;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  position: relative;
  flex-wrap: nowrap;*/
  left: -20px;
}
.category-art .add_img.row figure,
.category-photo .add_img.row figure {
  /*flex: 0 1 33%;*/
  margin: 0 0 .5em 3.4px;
  min-width: 225px;
}
.category-art .add_img.row figure:first-child,
.category-photo .add_img.row figure:first-child {
  margin: 0 0 .5em 0;
}
.category-art .add_img.flo-l,
.category-photo .add_img.flo-l {
  width: 340px;
  margin: 0 0 .5em 0;
  /*float: left;
  width: 46%;
  margin: 0;
  position: relative;
  top: .2em;*/
}
.category-art .add_img .p-postList.-type-card .p-postList__thumb,
.category-photo .add_img .p-postList.-type-card .p-postList__thumb,
.category-art .add_img .p-entry__thumb,
.category-photo .add_img .p-entry__thumb {/*追加画像用*/
  /*width: 55%;*/
  min-width: 270px;
  max-width: 320px;
  margin-left: 20px;
  position: relative;
  top: 0;
  right: -20px;
}
.category-art .add_img.flo-l .p-entry__thumb,
.category-photo .add_img.flo-l .p-entry__thumb {
  max-width: 340px;
  margin: .5em 0 0;
  position: static;
}
.category-art .add_img.flo-l + p, 
.category-photo .add_img.flo-l + p {
  clear: none;
}
/* 水彩画投稿用スタッフコメント */
.staff {
  margin: 0;
  padding: 10px;
  font-size: .9em;
  clear: both;
}
.staff .cmnt-header {
  display: inline-block;
  padding: .1em .2em;
  margin-bottom: .2em;
}
/* サイドバー:感想検索フォーム */
.search-ttl {
  margin: 0;
}
.searchandfilter {
  margin: 0 auto 10px;
}
.searchandfilter::after {
  width: 40px;
  height: 40px;
  background-size: 40px 40px;
  right: 0;
  transition: .5s;
}
.searchandfilter:hover::after {
  bottom: -.4em;
}
}