@charset "UTF-8";

/*
Theme Name: Blog theme
Version： 0.1
Author: suzuki
/*


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

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

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 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-family: "Hiragino Sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
    "メイリオ", "Meiryo", "sans-serif";
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

body a {
  text-decoration: none;
  color: #333333;
}

body ul {
  list-style: none;
}

body .en {
  font-size: 60px;
  margin-bottom: 20px;
  color: #333333;
  font-weight: bold;
  margin-top: 40px;
}

body .jp {
  margin-bottom: 20px;
  color: #333333;
  font-weight: bold;
}

header {
  background-color: #e31f7a;
  color: white;
  padding: 5px;
}

@media (max-width: 480px) {
  header {
    padding: 0;
  }
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: flex-end;
}

.footer-navbar a {
  text-decoration: none;
  color: #ffffff;
  margin-right: 10px;
  margin-left: 10px;
}

.logo a img {
  width: 300px;
  height: auto;
  margin: 10px;
}

@media (max-width: 430px) {
  .logo a img {
    width: 120px;
    height: auto;
    margin: 5px;
  }
}

.footer-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-logo {
  text-align: center;

  width: 300px;

  margin: 0 auto;

  margin-top: 30px;
}

.back-top {
  margin-right: 90px;
}

.search-bar {
  display: flex;
  margin-left: 20px;
  margin-right: 10px;
}

.search-bar input[type="text"] {
  padding: 8px;
  margin-right: 10px;
  border: none;
  border-radius: 5px;
}

.search-bar input {
  height: 35px;
}

.search-bar button {
  padding: 6px 15px;
  background-color: #ffbf00;
  color: white;
  border: none;
  border-radius: 0 20px 20px 0px;
  cursor: pointer;
  font-weight: 600;
}

.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  margin-right: 20px;
  text-align: center;
}

.menu li:last-child {
  margin-right: 0;
}

.menu a {
  text-decoration: none;
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.menu li a span {
  font-weight: 400;
  font-size: 18px;
}

.hamburger-menu {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 3px 0;
}

@media (max-width: 430px) {
  .menu {
    display: none;
  }

  .search-bar {
    display: none;
  }

  .hamburger-menu {
    display: flex;
    margin-right: 10px;
  }
}

.menu {
  margin-left: auto;
}

.main-view {
  position: relative;
  padding-top: 25px;
  background: url("../img/mainbg.jpg") no-repeat;
  background-size: cover;
  background-position: 70% 0px;
  width: 100%;
  height: 375px;
  margin-bottom: 30px;
}

@media screen and (max-width: 480px) {
  .main-view {
    background-position: bottom 0 right 16%;
    position: relative;
    padding-top: 25px;
    background: url(../img/mainbg.jpg) no-repeat;
    background-position: top;
    width: 100%;
    height: 375px;
    margin-bottom: 30px;
    background-repeat: no-repeat;
  }
}

.text-back {
  position: relative;
  height: 325px;
}

@media screen and (max-width: 480px) {
  .text-back {
    position: relative;
    height: 292px;
  }
}

.text-back::before {
  content: "";
  position: absolute;
  background-color: #1f1e1e42;
  height: 100%;
  width: 55vw;
  transform: skewX(15deg);
  left: -50px;
  z-index: 0;
}

.text-back img {
  height: auto;
  width: 650px;
  z-index: 1;
  position: absolute;
  left: 20px;
  top: 30px;
}

.text-back p {
  z-index: 1;
  position: absolute;
  font-size: 12px;
  color: #ffffff;
  font-weight: bold;
  left: 2%;
  max-width: 100%;
  bottom: 4px;
}

.main-contents {
  margin-top: 185px;
}

.main-contents-inner {
  position: relative;
  width: 1200px;
  margin: 0 auto;
}

.blog-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.new-post-contents .blog-list li {
  width: calc((100% - 40px) / 3);
  margin-bottom: 60px;
  height: 325px;
  overflow: hidden;
  background: #c357a8;
  border-radius: 10px;
}

@media screen and (max-width: 480px) {
  .new-post-contents .blog-list li {
    width: 49%;
    margin-bottom: 20px;
    height: 140px;
  }

  .text-back::before {
    content: "";
    position: absolute;
    background-color: #1f1e1e42;
    height: 100%;
    width: 94vw;
    transform: skewX(15deg);
    left: -40px;
    z-index: 0;
  }

  .text-back img {
    left: 3%;
    width: 76%;
    top: 33%;
  }
}

.blog-list li .thumb {
  overflow: hidden;
}

.blog-list li img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: right top;
}

@media screen and (max-width: 480px) {
  .blog-list li img {
    width: 100%;
    height: 110px;
    object-fit: cover;
  }
}

.blog-list li {
  width: 360px;
  height: auto;
  padding-bottom: 20px;
  background: #c357a8;
  border-radius: 10px;
  margin-bottom: 60px;
  box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
}

.blog-list-slick .slick-track li {
  border-radius: 10px;
  background-color: #c357a8;
}

.detail-box {
  margin: 0 20px;
}

@media screen and (max-width: 480px) {
  .detail-box {
    margin: 0 10px;
  }
}

.text-content {
  font-size: 18px;
  line-height: 21px;
  padding: 10px 10px 10px 0;
  font-weight: bold;
  color: #ffffff;
}
.slick-slide .content-group {
  padding: 0 0 28px 10px;
}
.content-group {
  font-size: 12px;
}

@media screen and (max-width: 480px) {
  .text-content {
    margin: 0 0;
    margin-bottom: 10px;
    font-size: 14px;
  }

  .ranking .detail-box {
    margin-bottom: 20px;
  }
}

.state-box {
  display: flex;
  position: absolute;
  bottom: 0;
  align-items: flex-end;
}

.blog-list-slick .state-box {
  display: flex;
  position: absolute;
  bottom: 10px;
  padding-left: 10px;
}

.state-box .date {
  color: #f1f1f1f1;
  font-size: 12px;
  margin-right: 10px;
  letter-spacing: 1.5px;
}

.state-box .category {
  color: #f1f1f1f1;
  font-size: 12px;
  letter-spacing: 1.5px;
  vertical-align: bottom;
  margin-right: 8px;
  padding-top: 3px;
}

.wrapper {
  margin-left: 20px;
  margin-right: 20px;
}

.all-post {
  text-align: right;
}

.all-post a {
  text-decoration: none;
  color: #333333;
  font-weight: bold;
}

@media screen and (max-width: 480px) {
  .all-post {
    margin-bottom: 40px;
  }
}

#new-post-contents {
  margin-bottom: 60px;
}

.blog-list-slick li {
  height: 100%;
  margin-left: 20px;
  margin-right: 20px;
  width: 360px;
  padding-bottom: 0;
  background-color: #fff;
  margin-bottom: 60px;
  box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  position: relative;
}

.blog-list-slick .thumb {
  overflow: hidden;
}

.blog-list-slick li img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: top;
}

@media screen and (max-width: 480px) {
  /* .blog-list {
    flex-direction: column;
  } */

  .ranking-inner .blog-list li {
    width: 100%;
    height: auto;
    margin-bottom: 60px;
  }

  .category-list {
    flex-wrap: wrap;
    margin-bottom: 25px;
  }

  .category-list li {
    margin-bottom: 5px;
    max-width: 99%;
  }

  .category-list li a {
    white-space: nowrap;
    overflow: hidden;
  }
}

.category-list {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  padding: 0;
  list-style: none;
  flex-direction: row;
  max-width: 100%;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.category-list li {
  flex: 1;
  margin-right: 5px;
  margin-bottom: 5px;
}

.category-list a {
  display: block;
  text-align: center;
  font-size: 20px;
  padding: 10px;
  text-decoration: none;
  color: white;
  font-weight: 500;
  border-radius: 5px;
  white-space: nowrap;
}

.category-list a:nth-child(1) {
  background-color: #c357a8;
}

.category-list a:nth-child(2) {
  background-color: indigo;
}

.category-list a:nth-child(3) {
  background-color: blue;
}

.category-list a:nth-child(4) {
  background-color: green;
}

.category-list a:nth-child(5) {
  background-color: yellow;
}

.category-list a:nth-child(6) {
  background-color: orange;
}

.all-categoly {
  text-align: right;
}

.all-categoly a {
  text-decoration: none;
  color: #333333;
  font-weight: bold;
}

#category {
  margin-bottom: 60px;
}

footer {
  height: 250px;
  background-color: #888888;
}

.sp-menu {
  display: none;
}

.back-top img {
  width: 14px;
}

.back-top a {
  vertical-align: text-top;
}

@media screen and (max-width: 480px) {
  .hamburger-menu {
    display: inline-block;
    cursor: pointer;
    z-index: 3;
  }

  .bar1,
  .bar2,
  .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
  }

  /* Rotate hamburger */
  .change .bar1 {
    transform: rotate(-45deg) translate(-9px, 6px);
  }

  .change .bar2 {
    opacity: 0;
  }

  .change .bar3 {
    transform: rotate(45deg) translate(-9px, -7px);
  }

  #overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(235, 161, 217, 0.9);
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .sp-menu {
    display: block;
    font-size: 50px;
    margin-top: 100px;
    opacity: 0;
    transition: opacity 0.5s ease;
    padding-top: 45px;
    padding-left: 75px;
  }

  .sp-menu li {
    margin-bottom: 25px;
  }

  .sp-menu li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
  }

  .footer-navbar {
    position: relative;
    flex-direction: column;
  }

  .back-top {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: -65px;
    margin-right: 0;
  }

  .back-top a {
    font-size: 30px;
    font-weight: bold;
    margin: 0;
    vertical-align: baseline;
  }

  .back-top img {
    width: 25px;
  }

  .footer-logo {
    text-align: center;
    width: 300px;
    margin: 0 auto;
    margin-top: 30px;
    position: relative;
  }
}

#new-post-contents .content-box {
  position: relative;
  text-decoration: none;
  color: #111;
  width: 100%;
  height: 100%;
  display: block;
}

#tag {
  margin-top: 60px;
  margin-bottom: 120px;
}

#single {
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 120px;
  display: flex;
}

#single .post {
  max-width: 900px;
}

#single .post img {
  max-width: 100%;
}

@media screen and (max-width: 480px) {
  #single {
    max-width: 100%;
    display: block;
    padding-left: 20px;
    padding-right: 29px;
  }
}

.site-aside {
  width: 360px;
  padding: 20px;
}

.site-aside h2 {
  margin-top: 20px;
  margin-bottom: 10px;
}

@media screen and (max-width: 480px) {
  .site-aside {
    width: 100%;
    padding: 0;
  }

  .main-sidebar {
    padding: 20px;
  }
}

.main-sidebar h2 {
  font-size: 26px;
  font-weight: bold;
}

.widget {
  margin-bottom: 20px;
  /* ウィジェット間の余白 */
}

.widget-title {
  background-color: #ddd;
  /* ウィジェットタイトルの背景色 */
  padding: 10px;
  /* ウィジェットタイトルの余白 */
  margin-bottom: 10px;
  /* タイトルと内容の間の余白 */
}

.widget ul {
  list-style: none;
  /* リストのマーカーを消す */
  padding: 0;
  /* リストの余白を削除 */
}

.widget li {
  margin-bottom: 5px;
  /* リストアイテム間の余白 */
  list-style: none;
}

.widget a {
  color: #262626;
  /* リンクの色 */
  text-decoration: none;
  /* 下線を削除 */
}

.widget li a:hover {
  color: #ff9501;
  /* ホバー時のリンクの色 */
}

.widget_tag_cloud a {
  background-color: #ff9501;
  color: #fff;
  padding: 3px;
  border-radius: 5px;
}

.breadcramb {
  margin-left: 200px;
  margin-bottom: 20px;
  font-weight: 100;
  color: #888888;
  font-size: 12px;
}

#breadcrumbs span span a {
  font-weight: 100;
  color: #888888;
  font-size: 12px;
}

.post-views.entry-meta > span.post-views-icon.dashicons {
  color: #ff9501;
}

.post-views {
  margin-bottom: 0%;
}

@media screen and (max-width: 480px) {
  .breadcramb {
    margin-left: 20px;
    margin-bottom: 20px;
    font-weight: 100;
    color: #888888;
    font-size: 12px;
  }

  .post-views {
    margin-bottom: 40px;
  }
}

.text-back h1 {
  z-index: 1;
  position: absolute;
  font-size: 70px;
  color: #ffffff;
  font-weight: bold;
  top: 30%;
  left: 2%;
  max-width: 95%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media screen and (max-width: 480px) {
  .text-back h1 {
    z-index: 1;
    position: absolute;
    font-size: 38px;
    color: #ffffff;
    font-weight: bold;
    top: 25px;
    left: 0%;
    max-width: 95%;
    padding: 90px 0 90px 10px;
  }
}

#single .post-views {
  margin-top: 60px;
}

.entry-content {
  width: 700px;
}

#single .entry-content h1 {
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 42px;
  font-style: normal;
  font-weight: 700;
}

#single .entry-content h2 {
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 38px;
  border-left: 5px solid #ff9800;
  padding-left: 10px;
}

#single .entry-content h3 {
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  border-left: 5px solid #ff9800;
  padding-left: 10px;
}

#single .entry-content h4 {
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  border-left: 5px solid #ff9800;
  padding-left: 10px;
}

#single .content-group {
  margin-bottom: 18px;
}

#single .entry-content {
  line-height: 28px;
}

.entry-content p {
  color: #262626;
  font-size: 18px;
}

@media screen and (max-width: 480px) {
  .entry-content {
    width: auto;
  }
}

.widget_tag_cloud a {
  font-size: 18px !important;
}

.tumb {
  position: relative;
}

.rank-number {
  position: absolute;
  top: 0;
  left: 0;
  /* 以下は見た目を調整するための例です。必要に応じて変更してください。 */
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px;
  font-size: 42px;
}

#primary,
#catecory-main {
  padding: 20px;
}

#primary h1 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

#primary li,
#catecory-main li {
  position: relative;
}

#primary li {
  width: 336px;
}
#primary .blog-list li {
  margin: 30px 30px;
}
#primary .blog-list li img {
  height: auto;
}

#primary .state-box,
#catecory-main .state-box {
  bottom: 12px;
}

#primary .blog-list,
#catecory-main .blog-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

@media screen and (max-width: 480px) {
  #primary .blog-list,
  #catecory-main .blog-list {
    flex-direction: row;
  }
  #primary .blog-list li {
    margin-left: 0;
    margin-right: 0;
  }
}

#catecory-main h1 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
  margin-top: 20px;
}

.container .category-main {
  padding: 20px;
  margin: 0 auto;
}

#category-main li {
  position: relative;
}

#category-main .state-box {
  bottom: 10px;
}

#category-main h1 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
  margin-top: 20px;
}

#category-main .blog-list {
  justify-content: space-evenly;
}

@media screen and (max-width: 480px) {
  #category-main .blog-list {
    flex-direction: row;
  }
}

/* ーーーーーーーーーーーページネーション ーーーーーーーーーーーーーーーーーーーーー*/
.pagination {
  display: flex;
  justify-content: center;
  padding: 1em 0;
}

@media screen and (max-width: 480px) {
  .pagination {
    display: flex;
    max-width: 100%;
  }
}

.page-numbers {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #1a1a1a;
  text-decoration: none;
  color: #1a1a1a;
}

.page-numbers.current,
.page-numbers:hover {
  background-color: #ff9501;
  color: #fff;
}

.page-numbers.next {
  position: relative;
}

@media screen and (max-width: 480px) {
  .page-numbers {
    padding: 4px 4px;
    font-size: 12px;
    margin: 0 2px;
  }

  .prev.page-numbers {
    white-space: nowrap;
    width: auto;
  }

  .page-numbers.next {
    white-space: nowrap;
    width: auto;
  }
}

#tag .category-ttl h1 {
  font-size: 36px;
  font-weight: bold;
}

#tag .category-ttl p a {
  background-color: #ff9501;
  color: #ffffff;
  margin: 5px;
  padding: 5px;
  border-radius: 10px;
}

.search-archive {
  display: flex;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.search-inner {
  width: 600px;
  padding: 20px;
}

.search-inner ul {
  margin-top: 20px;
}

.search-inner li {
  font-size: 24px;
}

.search-inner h2 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 40px;
}

.search-inner .content-box .tumb img {
  max-width: 100%;
  overflow: hidden;
  object-fit: cover;
  height: 300px;
}

.search-inner .content-box {
  margin-bottom: 40px;
}

.search-inner .content-box .state-box {
  display: block;
  position: static;
  bottom: auto;
  font-size: 14px;
}

.search-inner .content-box .detail-box .text-content {
  font-size: 32px;
  padding: 0;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: normal;
}

.search-inner ul li {
  border-bottom: solid 2px #cccccc;
  width: 100%;
}

.search-archive .pagination {
  padding: 1em 0;
  position: absolute;
  bottom: 0;
  left: 20%;
}

@media screen and (max-width: 480px) {
  .search-inner {
    width: auto;
  }

  .search-archive {
    display: block;
  }

  .sp-menu button {
    border-radius: -1;
    background-color: #ffe083;
  }

  .search-archive .pagination {
    display: flex;
    justify-content: center;
    padding: 1em 0;
    position: static;
  }
}

.content-box .detail-box .text-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

body {
  background-color: #f9f9f9;
}

.wpp-meta,
.post-stats {
  font-size: 8px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.wpp-post-title {
  font-weight: bold;
}

.wpp-list li.current {
  margin-top: 10px;
}

.widget li {
  margin-bottom: 10px;
  list-style: none;
}

.wpp-thumbnail {
  margin-bottom: 10px;
}

.related_posts {
  margin-top: 40px;
  margin-bottom: 40px;
}

.related_posts p {
  color: #111;
}

.related_posts h2 {
  font-size: 32px;
  margin-bottom: 20px;
  font-weight: bold;
}

.related_posts img {
  max-height: 300px;
  max-width: 560px;
  object-fit: cover;
  margin: 0 auto;
  display: block;
}

.related_posts .detail-box {
  margin: 0;
  text-align: center;
}

.related_posts li {
  margin-bottom: 60px;
}

.related_posts .content-group {
  margin-top: -10px;
}

.related_posts .state-box {
  display: none;
}

@media screen and (max-width: 480px) {
  .related_posts {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .related_posts h2 {
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: bold;
  }

  .related_posts img {
    max-height: 300px;
    max-width: 100%;
    object-fit: cover;
  }

  .related_posts .detail-box {
    margin: 0;
  }

  .related_posts li {
    margin-bottom: 30px;
  }

  .related_posts .content-group {
    margin-top: -20px;
  }
}

.single-page-tag {
  display: flex;
  font-size: 10px;
  flex-direction: row;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#single .post .single-page-tag p {
  margin-right: 5px;
  background-color: #f4c2da;
  border-radius: 5px;
  padding: 5px;
  color: #262626;
  margin-bottom: 5px;
}

.entry-content img {
  max-width: 100%;
}

.continue-text {
  text-align: center;
  background-color: pink;
  color: #fff;
  border-radius: 20px;
  max-width: 100%;
}

.catch-img img {
  width: 100%;
  height: auto;
}

.video-frame iframe {
  max-width: 100%;
  max-height: 100%;
}

@media screen and (max-width: 480px) {
  .video-frame {
    height: 275px;
  }
}

.content-page-button {
  background-color: crimson;
  color: #fff;
  font-weight: 900;
  font-size: 26px;
  /* margin-top: -10px; */
  display: block;
  margin: 0 auto;
  text-align: center;
  padding: 16px;
  width: 91%;
  margin-top: 15px;
  border-radius: 10px;
}

.content-price {
  font-weight: bold;
  color: #4d4d4d;
  margin-top: 10px;
}

.girl-icon {
  width: 80px;
  margin-right: 10px;
}

.single-head-box {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  margin-top: 20px;
}

.girl-text {
  background-color: rgb(255, 198, 217);
  border-radius: 20px;
  padding: 10px;
  position: relative;
}

.girl-text::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -23px;
  border: 12px solid transparent;
  border-right: 12px solid rgb(255, 198, 217);
}

.girl-text-link {
  font-weight: bold;
}

.sample-images {
  max-width: 100%;
}

#post-8 .template-single-head {
  display: none;
}

#post-8 {
  line-height: 28px;
}

.girl-text-bold {
  font-weight: bold;
  color: #ea2cae;
}

#single .entry-content #post-8 h1 {
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 42px;
  font-style: normal;
  font-weight: 700;
}

#post-8 h2 {
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 38px;
  border-left: 5px solid #ff9800;
  padding-left: 10px;
}

@media screen and (max-width: 480px) {
  #post-8 h2 {
    font-size: 28px;
  }
}

#post-8 h3 {
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  border-left: 5px solid #ff9800;
  padding-left: 10px;
}

#post-8 h4 {
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  border-left: 5px solid #ff9800;
  padding-left: 10px;
}

#post-8 p {
  font-size: 18px;
  padding: 0 15px 0 15px;
}

strong {
  font-weight: bold;
}

.actor-names {
  display: flex;
  margin: 10px 100px 10px 100px;
  border-bottom: solid 3px rgba(243, 162, 11, 0.397);
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.actor-name-label {
  font-weight: bold;
  font-size: 20px;
}

.actor-names a {
  font-size: 22px;
  background-color: #ffe083;
  margin: 2px;
  padding: 3px 5px 0px 5px;
  border-radius: 8px;
}

.actor-btn {
  text-align: center;
  background: #ff9800;
  width: 100%;
  display: inline-block;
  height: auto;
  border-radius: 20px;
  color: #fff;
  padding: 20px 10px;
  font-size: 16px;
  box-shadow: 2px 3px 2px rgb(190, 56, 3);
  margin-bottom: 40px;
}

@media screen and (max-width: 480px) {
  .actor-btn {
    text-align: center;
    background: #ff9800;
    width: 95%;
    display: inline-block;
    height: auto;
    border-radius: 20px;
    padding-right: 10px;
    color: #fff;
    padding-left: 10px;
    padding-top: 14px;
    font-size: 14px;
    box-shadow: 2px 3px 2px rgb(190, 56, 3);
    margin-bottom: 40px;
  }

  /* .actor-names {
        display: flex;
        margin: 10px 0px 10px 0px;
        border-bottom: solid 3px rgba(243, 162, 11, 0.397);
        justify-content: space-evenly;
    } */

  .actor-names {
    display: flex;
    margin: 10px 0px 10px 0px;
    border-bottom: solid 3px rgba(243, 162, 11, 0.397);
    justify-content: center;
    flex-direction: row;
    align-items: center;
    align-content: stretch;
    flex-wrap: wrap;
  }

  .actor-names a {
    font-size: 22px;
    background-color: #ffe083;
    margin: 2px;
    padding: 3px 5px 0px 5px;
    border-radius: 8px;
  }
}

.actor-category-list {
  margin-bottom: 60px;
}

blockquote.wp-block-quote {
  position: relative;
  border: 1px solid #851062;
  border-radius: 10px;
  padding: 28px;
  background-color: rgb(237, 224, 242);
  margin-top: 10px;
}

blockquote:before {
  position: absolute;
  font-family: "FontAwesome";
  content: "\f10d";
  font-size: 20px;
  color: #f080ff;
  top: 7px;
  left: 7px;
}

blockquote:after {
  position: absolute;
  font-family: "FontAwesome";
  content: "\f10e";
  font-size: 20px;
  color: #ff80c6;
  right: 7px;
  bottom: 7px;
}

blockquote cite {
  display: block;
  font-size: 0.8rem;
  text-align: right;
  color: #d4ded7;
  padding-right: 20px;
}

.wp-block-quote p {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 2px;
  color: #272727;
}

.wp-block-table {
  margin-top: 20px;
}

.wp-block-table a {
  pointer-events: none;
}

blockquote cite a {
  color: #4db8b9;
  text-decoration: underline;
  font-style: oblique;
}

blockquote cite a:before {
  content: "引用元：";
}

#cate-main-view {
  margin-top: 75px;
}

.blog-list-slick .detail-box {
  position: absolute;
  bottom: 0;
  margin: 0;
  background-color: #1212129c;
  width: 100%;
}

.blog-list-slick .content-box {
  position: relative;
}

.blog-list-slick .detail-box a,
.blog-list-slick .detail-box p {
  color: #fff;
}

.blog-list-slick .text-content {
  margin-bottom: 35px;
}

.text-content-title {
  max-width: 100%;
  /* 親要素の幅に基づいて最大幅を設定 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
}

.blog-list-slick .text-content-title {
  padding-left: 10px;
}

.main-ranking-text {
  margin-bottom: 20px;
  margin-left: 20px;
}

.main-ranking-text h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
}

/* 矢印の基本スタイル */
/* 前後の矢印ボタンの共通スタイル */
.blog-list-slick .slick-prev,
.blog-list-slick .slick-next {
  line-height: 0;
  position: absolute;
  top: 40%;
  /* スライダーの中央に配置 */
  width: 20px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  border: none;
  outline: none;
  background: transparent;
}

/* 前へ矢印アイコンのスタイル */
.blog-list-slick .slick-prev i {
  font-size: 42px;
  color: #d501ff98;
  /* アイコンの色 */
}

/* 次へ矢印アイコンのスタイル */
.blog-list-slick .slick-next i {
  font-size: 42px;
  color: #d501ff98;
  /* アイコンの色 */
}

.blog-list-slick .slick-prev {
  left: 10px;
  /* スライダーの左外側に配置 */
  z-index: 1;
  /* 必要に応じてz-indexで重なり順を調整 */
}

/* 次へ矢印アイコンのスタイル */
.blog-list-slick .slick-next {
  right: 25px;
  z-index: 1;
}

#visited-articles h2 {
  font-size: 32px;
  margin-bottom: 20px;
  font-weight: bold;
}

.viewed-articles-content img {
  margin-bottom: 10px;
  max-height: 300px;
  max-width: 560px;
  object-fit: cover;
}

@media screen and (max-width: 480px) {
  .viewed-articles-content img {
    max-height: auto;
    max-width: 100%;
  }
}

.viewed-articles-content div {
  margin-bottom: 20px;
}

.watched-content h2 {
  font-size: 32px;
  margin-bottom: 20px;
  font-weight: bold;
}

#viewed-articles > div > div {
  display: grid;
}

#single .swiper {
  height: 350px;
  margin-top: 35px;
}

#single .swiper h2 {
  font-size: 32px;
  margin-bottom: 20px;
  font-weight: bold;
  padding-top: 20px;
  padding-bottom: 0;
  font-style: normal;
  line-height: 0;
  border-left: none;
  padding-left: 0;
}

#single .swiper-wrapper {
  width: 100%;
  height: auto;
}

#single .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#post-8 .swiper h2 {
  margin-top: 20px;
}

#single #post-8 .swiper {
  height: 380px;
}

#single #post-8 .swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 0px);
}

#single .swiper-slide a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  margin-top: 0;
  padding-top: 10px;
  overflow: hidden;
  line-height: 24px;
}

#single .swiper-slide a img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: 100%;
}

#single .swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 8px);
}

#single .swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 0px);
  right: auto;
}

#single .swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 0px);
}

#single .swiper-button-next,
#single .swiper-button-prev {
  top: var(--swiper-navigation-top-offset, 50%);
}

#single .swiper-pagination-bullet {
  background-color: gray;
  /* ここで好きな色を指定 */
}

/* アクティブなページネーションのドットの色を変更 */
#single .swiper-pagination-bullet-active {
  background-color: #ae00ff;
  /* ここで好きな色を指定 */
}

#single .swiper-button-next,
#single .swiper-button-prev {
  color: #cc00ffb0;
  /* 矢印の色 */
  /* SVGや画像を背景として使用している場合は、以下のプロパティで色を変更できないため、
       対応するSVGや画像ファイル自体の色を変更する必要があります。 */
}

.wp-block-latest-posts.wp-block-latest-posts__list li {
  margin-bottom: 12px;
  border-bottom: #ddd 1px solid;
  padding-bottom: 8px;
}

iframe.wp-embedded-content {
  width: auto;
  margin-bottom: 20px;
}

div#content-page-button {
  margin-bottom: 18px;
}

@media screen and (max-width: 480px) {
  #main-search-form > div.main-search-form-ttl > h2.en {
    font-size: 32px;
  }
}

.main-search-form-inner {
  margin: 0 auto;
  text-align: center;
  margin-bottom: 20px;
}

#main-search-form > div.main-search-form-inner > form > label > input {
  width: 80%;
  height: 40px;
  border-radius: 20px;
  background-color: #ffffff;
  border-color: rgba(121, 26, 246, 0.373);
  font-size: 18px;
}

#main-search-form > div.main-search-form-inner > form > button {
  border-radius: 20px;
  height: 40px;
  width: 120px;
  border-color: #40404029;
  position: absolute;
  right: 10%;
  background-color: #ff9501;
  font-weight: bold;
  font-size: 16px;
  color: #111;
}

@media screen and (max-width: 480px) {
  #main-search-form > div.main-search-form-inner > form > button {
    right: 30px;
    width: 68px;
  }
}

#main-search-form > div.main-search-form-inner > form {
  position: relative;
}

.search-page-form {
  margin-top: 30px;
  margin-bottom: 30px;
}

#search-archive > div.search-inner > ul > li > div > div > a > p {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: #111;
}

#search-archive > div.search-inner > ul > li:last-child {
  border-bottom: none;
}

#search-archive .state-box .date {
  color: #111;
}

@media screen and (max-width: 480px) {
  #search-archive > div.search-inner > ul > li > div > div > a > p {
    font-size: 21px;
    margin-bottom: 10px;
  }
}

#new-post-contents > div > ul > li > div > div > div > p.actors {
  max-width: 90px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 12px;
  font-size: 12px;
  line-height: 1.5;
  /* 行の高さを調整 */
  height: 18px;
  /* コンテナの高さを調整 (例: font-size * line-height) */
  vertical-align: middle;
  /* 必要に応じて垂直方向の配置を調整 */
}

#main-view > ul > div > div > li > div > div > div > p.actors {
  font-size: 12px;
  margin-top: 4px;
}

#main-search-form {
  background-color: #fbc2f6;
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 20px;
}

#main > ul > li > div > div > div > p.actors {
  max-width: 90px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 12px;
  font-size: 12px;
  line-height: 1.5;
  /* 行の高さを調整 */
  height: 18px;
  /* コンテナの高さを調整 (例: font-size * line-height) */
  vertical-align: middle;
  /* 必要に応じて垂直方向の配置を調整 */
}

#category-main > div.card > ul > li > div > div > div > p.actors {
  max-width: 90px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 12px;
  font-size: 12px;
  line-height: 1.5;
  /* 行の高さを調整 */
  height: 18px;
  /* コンテナの高さを調整 (例: font-size * line-height) */
  vertical-align: middle;
  /* 必要に応じて垂直方向の配置を調整 */
}

#single div.file-type,
#single div.content-age,
#single div.launch-day {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 20px 0px;
  border-bottom: solid 2px #da6ee1;
  padding-bottom: 2px;
  margin-bottom: 20px;
}

#single div.file-type p.file-type-content {
  background-color: #f4c2da;
  padding: 5px;
  border-radius: 5px;
  color: #f7f4f4;
  max-width: 144px;
  margin-bottom: 0;
}

.file-type:last-child {
  margin-bottom: 20px;
}

#single div.content-age p.fcontent-age-content {
  background-color: #f4c2da;
  padding: 5px;
  border-radius: 5px;
  color: #f7f4f4;
  margin-bottom: 0;
}

#single div p.launch-day-content {
  background-color: #f4c2da;
  padding: 5px;
  border-radius: 5px;
  color: #f7f4f4;
  margin-bottom: 0;
}

#single p:nth-child(2) a img {
  max-width: 100%;
}

a.dl-btn {
  position: relative;
  background-color: #ff919e;
  text-align: center;
  width: 94%;
  display: inline-block;
  height: auto;
  vertical-align: middle;
  padding: 20px 10px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  overflow: hidden;
  border-radius: 10px;
  margin: 10px 0 25px 0;
  box-shadow: -5px -5px 10px 0px rgba(255, 255, 255, 0.5),
    5px 5px 10px 0px rgba(0, 0, 0, 0.3);
}

/*キラッと光る*/
a.dl-btn::before {
  content: "";
  /*絶対配置でキラッと光るの位置を決める*/
  position: absolute;
  top: 0;
  left: -75%;
  /*キラッと光る形状*/
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  transform: skewX(-25deg);
  animation: shine 1.7s infinite;
}

@keyframes shine {
  0% {
    left: -75%;
  }

  41% {
    /* 0.7s / 1.7s ≈ 41% */
    left: 125%;
  }

  100% {
    left: 250%;
  }
}

.watched-content {
  margin-top: 20px;
}

h1.logo-text {
  font-weight: bold;
  padding: 10px 10px 10px 10px;
  color: #ededed;
}

.pr-text {
  font-size: 7px;
  font-weight: lighter;
  color: #e9e2e2d6;
}

/* #single figure.wp-block-embed.is-type-rich {
    margin-top: 20px
} */

#new-post-contents > div > ul > li > div > div > a > p {
  color: #f1f1f1;
}

#new-post-contents > div > ul > li > div > div > div > p > a {
  color: #f1f1f1;
}

.content-url {
  text-align: center;
  margin-top: 20px;
  background-color: #f4c2da;
  height: auto;
  padding: 15px 10px;
  font-size: 18px;
  font-weight: bold;
  color: #f7f7f7;
  margin-bottom: -20px;
}

body > header > nav > div.header-link-btn > a {
  font-size: 18px;
  vertical-align: middle;
  font-weight: bold;
  background-color: #ff9a4c;
  color: #333333;
  padding: 3px;
  border-radius: 5px;
  border: solid 1px #333333;
  box-shadow: 2px 2px 0px 0px rgb(93 52 0);
}

@media screen and (max-width: 480px) {
  body > header > nav > div.header-link-btn > a {
    font-size: 11px;
  }
}

body > footer > nav > div.header-link-btn {
  margin-bottom: 20px;
  width: 600px;
  margin-top: 38px;
}

@media screen and (max-width: 480px) {
  body > footer > nav > div.header-link-btn {
    margin-bottom: 20px;
    width: 100%;
    margin-top: 0;
    text-align: center;
  }
}

body > footer > nav > div.header-link-btn > a {
  font-size: 38px;
  vertical-align: middle;
  font-weight: bold;
  background-color: #ff9a4c;
  color: #333333;
  padding: 5px 10px;
  border-radius: 5px;
  border: solid 1px #333333;
}

footer .header-link-btn {
  margin-top: 25px;
}

footer .header-link-btn a {
  font-size: 38px;
  vertical-align: middle;
  font-weight: bold;
  background-color: #ff9a4c;
  color: #333333;
  padding: 5px 10px;
  border-radius: 5px;
  border: solid 1px #333333;
}

@media screen and (max-width: 480px) {
  body > footer > nav > div.header-link-btn > a {
    font-size: 18px;
  }

  footer .header-link-btn a {
    font-size: 18px;
  }
}

#viewed-posts-container > ul > div > div > li {
  max-width: 700px;
}

#viewed-posts-container {
  max-width: 774px;
}

#viewed-posts-container ul .slick-slide {
  overflow: hidden;
  position: relative;
  margin: 20px 10px 0 10px;
  height: auto;
}

#viewed-posts-container ul .slick-slide img {
  width: 100%;
  height: auto;
  max-height: 500px;
}

#viewed-posts-container .slick-slide a span {
  position: absolute;
  bottom: 0;
  color: #fff;
  padding: 8px 8px 8px 8px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  /* パディングとボーダーを含めた幅の計算を行う */
  max-height: 45px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #00000075;
}

#viewed-posts-container .slick-prev,
#viewed-posts-container .slick-next {
  padding: 10px;
  text-align: center;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  /* Adjust the line height to vertically center the text inside the button */
}

/* #viewed-posts-container .slick-prev:hover,
#viewed-posts-container .slick-next:hover {
  background-color: #555;
} */

#viewed-posts-container .slick-prev:before,
#viewed-posts-container .slick-next:before {
  color: pink;
  font-size: 38px;
}

#viewed-posts-container .slick-prev {
  left: -20px;
  z-index: 1;
}

#viewed-posts-container .slick-next {
  right: 0px;
}

.viewd-content-ttl {
  margin-top: 40px;
  font-size: 32px;
  font-weight: bold;
  color: #4e4e4e;
}

@media (max-width: 480px) {
  #viewed-posts-container .slick-slide a {
    position: relative;
  }

  #viewed-posts-container .slick-slide a span {
    position: absolute;
    bottom: 0;
    color: #fff;
    padding: 5px 10px 5px 5px;
    font-size: 12px;
    width: 44vw;
    box-sizing: border-box;
    max-height: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #00000075;
  }

  #viewed-posts-container ul .slick-slide {
    width: 100%;
    margin-right: 5px;
    margin-left: 5px;
    overflow: hidden;
  }

  #viewed-posts-container ul .slick-slide img {
    width: 100%;
    height: auto;
  }

  #viewed-posts-container > ul > div > div > li.slick-slide.slick-cloned {
    width: auto;
  }

  #viewed-posts-container .slick-dots li.slick-active button {
    border-radius: 10px;
    border-radius: 10px;
    height: 10px;
  }

  #viewed-posts-container .slick-dots li button:before {
    display: none;
  }

  .slick-prev,
  .slick-next {
    color: #fff;
    background-color: #333;
    padding: 10px;
    text-align: center;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    /* Adjust the line height to vertically center the text inside the button */
  }

  #viewed-posts-container .slick-prev:before,
  #viewed-posts-container .slick-next:before {
    color: pink;
    font-size: 38px;
  }

  #viewed-posts-container .slick-prev {
    left: -20px;
  }

  #viewed-posts-container .slick-next {
    right: 0px;
  }

  .viewd-content-ttl {
    margin-top: 20px;
    font-size: 14px;
    font-weight: bold;
  }
}

#viewed-posts-container .slick-dots li.slick-active button {
  border-radius: 10px;
  border-radius: 10px;
  height: 10px;
}

.slick-dots li.slick-active button {
  background-color: #faa4a4;
  color: #faa4a4;
  border: none;
  width: 32px;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.slick-dots {
  display: flex;
  justify-content: space-between;
  max-width: 95%;
}

.wp-block-quote #introduction > dt {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.intro-title {
  font-size: 20px;
  margin-bottom: 20px;
}

.first-post-ttl h2,
.second-post-ttl h2,
.third-post-ttl h2 {
  font-size: 42px;
}
.second-post-ttl h2 {
  margin-top: 20px;
}
.category a {
  color: #fff;
}

.search-bar-bottom {
  display: none;
}

form {
  display: flex;
  align-items: stretch;
  /* 子要素を親の高さに合わせる */
  gap: 0;
  /* 隙間をなくす */
}

input[type="text"],
select,
button {
  padding: 5px;
  font-size: 16px;
  border: 2px solid #ccc;
}

input[type="text"] {
  flex: 1;
  /* 残りのスペースをすべて使う */
  border-right: none;
  /* 隣接するbuttonとの境界線をなくす */
}

select {
  flex: 0 1 auto;
  /* 必要な分だけの幅を使う */
  cursor: pointer;
}

button {
  flex: 0 1 auto;
  /* 必要な分だけの幅を使う */
  border-left: none;
  /* 隣接するinputとの境界線をなくす */
  cursor: pointer;
}

.search-bar {
  margin: 0 10px 0 20px;
  max-width: 323px;
}

.search-form {
  display: flex;
  gap: 0;
  width: 100%;
  justify-content: center;
}

.search-field,
.search-submit,
.search-category {
  border: 0;
  padding: 8px 12px;
  margin-bottom: 8px;
}

.search-field {
  flex-grow: 1;
  /* 検索フィールドが利用可能なスペースを埋める */
  border: 0;
  border-radius: 20px 0 0 20px;
  /* 左側の角を丸める */
  margin-bottom: 0;
  /* 余分なスペースを削除 */
}

.search-submit {
  background-color: #ff8d00;
  color: rgb(37, 37, 37);
  font-weight: bold;
  border: 0;
  border-left: none;
  /* 隣接する検索フィールドとの境界線を削除 */
  border-radius: 0 20px 20px 0;
  /* 右側の角を丸める */
  margin-bottom: 0;
  /* 余分なスペースを削除 */
  padding: 7px 16px;
  height: 35px;
}

.search-category {
  width: 100%;
  /* ドロップダウンの幅を指定 */
  border: 0;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
  /* paddingとborderを幅に含める */
  margin-top: 10px;
  /* 検索フィールドとの間隔を開ける */
}

.search-field:focus,
.search-submit:focus,
.search-category:focus {
  outline: none;
  border-color: #ffffff00;
  /* フォーカス時の枠線の色を変更 */
}

.search-submit:hover {
  background-color: #ffffff00;
}

.select-container {
  width: 100%;
}

@media (max-width: 480px) {
  .search-bar-bottom {
    display: block;
    background-color: #dddddd;
    padding-top: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    margin-top: 40px;
    padding-bottom: 20px;
  }

  .search-bar {
    display: none;
  }

  .search-form {
    margin: 0 auto;
    width: 85%;
    position: relative;
  }

  .search-field {
    font-size: 16px;
  }

  .search-submit {
    font-family: "Hiragino Maru Gothic ProN W6", "メイリオ", "Meiryo",
      "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", sans-serif;
  }

  .select-container {
    position: relative;
    display: inline-block;
    width: 100%;
  }

  /* select要素のスタイル */
  .select-container select {
    -webkit-appearance: none;
    /* iOSでのデフォルトスタイルを無効化 */
    appearance: none;
    /* その他のスタイリング（幅、パディング、フォントサイズなど） */
  }

  /* 矢印アイコンを表す疑似要素のスタイル */
  .select-container::after {
    content: "▼";
    /* 矢印記号を指定 */
    position: absolute;
    top: 53%;
    right: 15px;
    /* 右側のパディングとして10pxを指定 */
    transform: translateY(-50%);
    /* 中央揃えにするための調整 */
    pointer-events: none;
    /* 疑似要素上でのクリックイベントを無効にする */
    /* 矢印のスタイル（フォントサイズ、色など）を指定 */
    color: #6b6b6b;
    font-size: 12px;
  }

  .search-category,
  .search-field {
    -webkit-appearance: none;
  }

  /* タッチデバイスにおけるタップハイライトの色を無効にする */
  .search-category,
  .search-field {
    -webkit-tap-highlight-color: transparent;
  }

  .select-container select {
    color: #4e4e4e;
  }

  form {
    display: flex;
    align-items: stretch;
    /* 子要素を親の高さに合わせる */
    gap: 0;
    /* 隙間をなくす */
  }

  input[type="text"],
  select,
  button {
    padding: 5px;
    font-size: 16px;
    border: 2px solid #ccc;
  }

  input[type="text"] {
    flex: 1;
    /* 残りのスペースをすべて使う */
    border-right: none;
    /* 隣接するbuttonとの境界線をなくす */
  }

  select {
    flex: 0 1 auto;
    /* 必要な分だけの幅を使う */
    cursor: pointer;
  }

  button {
    flex: 0 1 auto;
    /* 必要な分だけの幅を使う */
    border-left: none;
    /* 隣接するinputとの境界線をなくす */
    cursor: pointer;
  }

  .search-bar {
    margin: 0 10px 0 20px;
    max-width: 323px;
  }

  .sp-menu .search-form {
    justify-content: flex-start;
  }

  .sp-menu .search-field {
    height: 38px;
  }

  .sp-menu .search-submit {
    position: absolute;
    right: 17%;
    bottom: 0px;
    width: 22%;
    height: 100%;
  }

  .sp-menu .search-form {
    margin: 0 auto;
    width: 100%;
  }

  .archive .blog-list li img {
    height: 225px;
  }

  .archive .blog-list li {
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .search-bar-text {
    font-weight: bold;
    margin-left: 26px;
    padding-bottom: 13px;
    color: #333333;
  }

  .search-bar-text h2 {
    font-size: 26px;
    margin-bottom: 5px;
  }

  .page-id-128 .blog-list li img {
    height: 225px;
  }
}

.category .page-numbers {
  color: #111;
}

.custom-title {
  margin-bottom: 20px;
  font-size: 12px;
  color: #818181;
}

.archive.date #category-main .archive-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  margin-top: 20px;
  color: #4d4d4d;
}

.pclass_afflink {
  background-color: #ffbfbf;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 3px 3px 3px 1px #d1a9a9;
  position: relative;
  overflow: hidden;
}

.pclass_afflink::before {
  content: "";
  /*絶対配置でキラッと光るの位置を決める*/
  position: absolute;
  top: 0;
  left: -75%;
  /*キラッと光る形状*/
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  transform: skewX(-25deg);
  animation: shine 1.7s infinite;
}

.blog-list-slick > li:not(:first-child) {
  display: none;
}

.mgs_widget_r_h {
  margin: 20px 0 20px 0;
}

.archive #category-main > div.srivhruz.mgs_widget_r_h {
  display: block;
}

.archive #category-main > .lwuwbx31.mgs_widget_r_p {
  display: none;
}

.pc-dmm-ad {
  display: block;
}

.home .pc-dmm-ad {
  margin-top: 40px;
}

.sp-dmm-ad {
  display: none;
}

@media (max-width: 480px) {
  .archive #category-main > div.srivhruz.mgs_widget_r_h {
    display: none;
  }

  .archive #category-main > .lwuwbx31.mgs_widget_r_p {
    display: block;
  }

  .pc-dmm-ad {
    display: none;
  }

  .sp-dmm-ad {
    display: block;
  }
}

#tv-new-post-contents > div > ul > li > a > img {
  width: 150px;
  height: 200px;
  object-fit: cover;
  object-position: right;
}

#tv-new-post-contents > div > ul > li > a > p {
  max-width: 159px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 10px;
  margin-top: 5px;
}

.tv-new-post-contents-inner {
  background-color: #fbf2cf;
  padding: 10px 0 10px 8px;
}

.tv-new-post-ttl .en {
  font-size: 29px;
  margin-bottom: 20px;
  color: #333333;
  font-weight: bold;
  margin-top: 20px;
}

#tv-new-post-contents > div > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.tv-new-post-ttl {
  margin-left: 20px;
}

.tv-new-post-ttl .en {
  font-size: 42px;
}

#tv-new-post-contents {
  height: 100%;
  width: 100%;
}

@media (max-width: 480px) {
  .tv-new-post-ttl .en {
    font-size: 29px;
    margin-bottom: 20px;
    color: #333333;
    font-weight: bold;
    margin-top: 20px;
  }

  #tv-new-post-contents > div > ul {
    justify-content: center;
  }

  .tv-new-post-ttl {
    margin-left: 0px;
  }

  #tv-new-post-contents {
    height: 1324px;
    width: 100%;
  }
}

.single #tv-new-post-contents {
  height: auto;
}

.single #tv-new-post-contents ul li {
  width: 45%;
}

.single #tv-new-post-contents > div > ul > li > a > img {
  width: 132px;
  height: 187px;
  object-fit: cover;
  object-position: right;
}

.single .tv-new-post-ttl .en {
  font-size: 24px;
}

.single .tv-new-post-ttl {
  margin-left: 8px;
}

#single div.mgs_widget_affiliate_afflink {
  margin: 0 auto;
  margin: 48px 0 92px 0;
}

#single a.aclass_afflink p.pclass_afflink {
  font-size: 20px !important;
  font-weight: bold;
}

/* ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～コメント～～～～～～～～～～～～～～～～～～～～～～～～～ */
.editor-comment {
  border: 1px solid #ddd;
  padding: 20px;
  margin: 60px 0;
  background-color: #f9f9f9;
}

.editor-comment h3 {
  margin-top: 0;
  padding-bottom: 20px;
}

.editor-comment p {
  margin: 20px 0 0 0;
}

.editor-comment-box {
  margin-bottom: 40px;
  margin-top: 20px;
  border-bottom: solid 2px #ff98006b;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.editor-comment {
  border: 1px solid #ff9800;
  padding: 20px;
  margin: 60px 0;
  border-radius: 20px;
  background-color: #f9f9f9;
}

.pc-ad {
  display: block;
}

@media screen and (max-width: 480px) {
  .pc-ad {
    display: none;
  }
}

#about {
  max-width: 900px;
  margin: 0 auto;
}

#about ul li {
  margin-bottom: 5px;
}

#about ul li a {
  color: #4db8b9;
  text-decoration: underline;
}

.same-groupe h2 {
  font-size: 18px;
  text-align: center;
  padding-top: 30px;
  font-weight: bold;
}

.group-related-posts img {
  height: auto;
  margin: 0 auto;
  text-align: center;
  display: block;
}

.group-related-posts li {
  margin: 40px 0;
}

.group-related-posts .post-info {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
}

.group-related-posts .post-info a {
  font-weight: bold;
}

.group-related-posts .post-info .post-blockquotes {
  padding: 20px 10px;
  border: solid 1px #bb5eff66;
  border-radius: 10px;
  margin-top: 20px;
}

.group-related-posts .post-info blockquote:before {
  position: absolute;
  font-family: "FontAwesome";
  content: "\f10d";
  font-size: 20px;
  color: #ff80c6;
  top: 53px;
  left: 0px;
}

.group-related-posts .post-info blockquote:after {
  position: absolute;
  font-family: "FontAwesome";
  content: "\f10e";
  font-size: 20px;
  color: #ff80c6;
  right: 0px;
  bottom: 34px;
}

.group-related-posts .post-thumbnail {
  margin-bottom: 20px;
}

.group-related-posts .related_posts-btn {
  text-align: center;
  display: block;
  background: #ff80c6;
  width: 80%;
  margin: 0 auto;
  color: #fff;
  margin-top: 20px;
  padding: 6px;
  border-radius: 5px;
}

@media screen and (min-width: 520px) {
  .page-id-153 .popular-posts-sr {
    max-width: 720px;
    margin: 0 auto;
  }
}

#single .post h2 {
  font-size: 28px;
  font-weight: bold;
  margin: 60px 0 42px 0;
  color: #333;
  padding: 0.5em; /*文字周りの余白*/
  background: #f4eaf9;; /*背景色*/
  border-left: solid 5px #e9b1de;
}

#single .post h3 {
  font-size: 24px;
  font-weight: bold;
  margin: 60px 0 42px 0;
  color: #333;
  padding: 0.5em; /*文字周りの余白*/
  background: #f4eaf9;; /*背景色*/
  border-left: solid 5px #e9b1de;
}

#single .post h4 {
  font-size: 20px;
  font-weight: bold;
  margin: 60px 0 42px 0;
  color: #333;
  padding: 0.5em; /*文字周りの余白*/
  background: #f4eaf9;; /*背景色*/
  border-left: solid 5px #e9b1de;
}

#single .post p {
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 24px;
}

#single .post li {
  margin-top: 26px;
  line-height: 26px;
}

#single .post hr {
  margin-top: 100px;
  margin-bottom: 100px;
}

.simpletoc-list li a {
    color: #0066cc;
    text-decoration: underline;
}