@charset "UTF-8";
/*reset.css「ress.css」*/
html {
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
  word-break: normal;
}

*,
:after,
:before {
  background-repeat: no-repeat;
  box-sizing: inherit;
}

:after,
:before {
  text-decoration: inherit;
  vertical-align: inherit;
}

* {
  margin: 0;
  padding: 0;
}

hr {
  color: inherit;
  height: 0;
  overflow: visible;
}

details,
main {
  display: block;
}

summary {
  display: list-item;
}

small {
  font-size: 80%;
}

[hidden] {
  display: none;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline-width: 0;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
}

pre {
  font-size: 1em;
}

b,
strong {
  font-weight: bolder;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  border-color: inherit;
  text-indent: 0;
}

iframe {
  border-style: none;
}

input {
  border-radius: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  resize: vertical;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
}

optgroup {
  font-weight: 700;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[role=button],
[type=button],
[type=reset],
[type=submit],
button {
  cursor: pointer;
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

[type=reset],
[type=submit],
button,
html [type=button] {
  -webkit-appearance: button;
}

button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline-width: 0;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

select::-ms-value {
  color: currentColor;
}

legend {
  border: 0;
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  color: inherit;
  font: inherit;
}

[disabled] {
  cursor: default;
}

img {
  border-style: none;
}

progress {
  vertical-align: baseline;
}

[aria-busy=true] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled=true] {
  cursor: default;
}

/*reset.css「ress.css」ここまで*/
html {
  scroll-behavior: smooth;
}

body {
  background-color: #000;
  width: 100%;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
body ul {
  list-style: none;
  padding: 5px 5px;
}
body a {
  text-decoration: none;
  color: #191970;
}
body a:hover {
  color: #e9423a;
}

.wrapper {
  background-color: #191970;
  width: auto;
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

header {
  width: 100%;
  background-color: #ebf7ee;
  border-bottom: 1px solid #ccc;
}
header .header-title {
  text-align: center;
  font-size: 1.5rem;
  padding: 10px 10px;
  width: 200px;
}

/*ナビゲーション*/
.headerin {
  position: relative;
  display: flex;
}
@media (width <= 720px) {
  .headerin {
    display: block;
  }
}

@media (width > 720px) {
  .nav_list {
    display: flex;
    position: absolute;
    width: 100%;
    transform: translateY(-50%);
    top: 50%;
  }
  .nav_list li {
    display: block;
    text-align: right;
    padding-left: 20px;
  }
  .nav_list li a.current {
    font-weight: bold;
    color: #191970;
  }
}
.search-box {
  float: right;
  display: flex;
  height: 100%;
  justify-self: center;
  align-items: center;
  z-index: 9999;
  position: relative;
}
.search-box div input[type=text] {
  padding: 5px;
  border: 1px solid #f9c13a;
  background-color: #fff;
  width: 150px;
}
.search-box div input[type=submit] {
  background-color: #f9c13a;
  border: 1px solid #f9c13a;
  color: #191970;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.search-box div input[type=submit]:hover {
  background-color: #fff;
  color: #e9423a;
}

@media (width <= 720px) {
  .search-box {
    height: auto;
  }
}
.nav {
  position: relative;
  width: calc(100% - 200px);
}

@media (width <= 720px) {
  .nav {
    position: fixed;
    right: -320px; /* 右から出てくる */
    top: 0;
    width: 300px; /* スマホに収まるサイズ */
    height: 100svh;
    padding-top: 60px;
    background-color: #fff;
    transition: all 0.6s;
    z-index: 200;
    overflow-y: auto; /* メニューが多くなったらスクロールできるように */
  }
  .hamburger {
    position: absolute;
    right: 15px;
    top: 8px;
    width: 40px; /* クリックしやすい幅 */
    height: 40px; /* クリックしやすい高さ */
    cursor: pointer;
    z-index: 300;
  }
  .nav_list {
    margin: 0;
    padding: 0;
    list-style: none;
    position: static;
  }
  .nav_item {
    text-align: center;
    padding: 0 14px;
  }
  .nav_item a {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
  }
  .nav_item a:hover {
    background-color: #eee;
  }
  .hamburger_border {
    position: absolute;
    left: 11px;
    width: 18px;
    height: 2px;
    background-color: #333;
    transition: all 0.6s;
  }
  .hamburger_border_top {
    top: 14px;
  }
  .hamburger_border_center {
    top: 20px;
  }
  .hamburger_border_bottom {
    top: 26px;
  }
  .black_bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100svh;
    z-index: 100;
    background-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s;
    cursor: pointer;
  }
  /* 表示された時用のCSS */
  .nav-open .nav {
    right: 0;
  }
  .nav-open .black_bg {
    opacity: 0.8;
    visibility: visible;
  }
  .nav-open .hamburger_border_top {
    transform: rotate(45deg);
    top: 20px;
  }
  .nav-open .hamburger_border_center {
    width: 0;
    left: 50%;
  }
  .nav-open .hamburger_border_bottom {
    transform: rotate(-45deg);
    top: 20px;
  }
} /* sp */
/* ナビゲーション */
html,
body {
  height: 100%;
}

.wrapper {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}

footer {
  position: sticky;
  top: 100vh;
  top: 100dvh;
  border-top: 1px solid #191970;
  padding: 10px 10px 30px;
  background-color: #ebf7ee;
}
footer ul {
  display: flex;
  margin-bottom: 5px;
  border-bottom: 1px dotted #ccc;
}
footer ul li {
  margin: 0 10px;
}
footer ul li a.current {
  font-weight: bold;
  color: #191970;
}
footer p {
  margin-top: 10px;
  text-align: center;
}
footer .totop {
  position: fixed;
  bottom: 10px;
  width: 80px;
  height: 80px;
  right: 20px; /*サイドバーの幅に連動*/
}
@media (width <= 720px) {
  footer .totop {
    width: 70px;
    height: 70px;
    right: 5px; /*サイドバーの幅に連動*/
  }
}
@media (width > 1200px) {
  footer .totop {
    right: calc(50% - 600px + 20px);
  }
}
footer .totop a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #f9c13a;
  border: 1px solid #191970;
  margin-inline: auto;
  position: relative;
}
footer .totop a span {
  text-align: center;
  position: absolute;
  color: #191970;
  font-size: 12px;
  display: block;
  margin-inline: auto;
  width: 100%;
  top: calc(50% + 4px);
}
@media (width <= 720px) {
  footer .totop a span {
    font-size: 11px;
  }
}
footer .totop a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid #191970;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}
@media (width <= 720px) {
  footer .totop a::before {
    border-top-width: 25px;
    border-bottom-width: 25px;
    border-left-width: 20px;
    border-right-width: 20px;
  }
}
footer .totop a:hover {
  background-color: #ebf7ee;
}
footer .totop a:hover span {
  color: #e9423a;
}
footer .totop a:hover::before {
  border-bottom-color: #e9423a;
}

.content {
  width: 100%;
  display: flex;
}
.content main {
  width: calc(100% - 120px); /*サイドバーの幅*/
}
.content aside {
  width: 120px; /*サイドバーの幅*/
  overflow: hidden;
}
@media (width <= 720px) {
  .content main {
    width: calc(100% - 80px); /*サイドバーの幅*/
  }
  .content aside {
    width: 80px; /*サイドバーの幅*/
  }
}
.content main {
  padding: 20px;
  color: #fff;
}
@media (width <= 720px) {
  .content main {
    padding: 10px 5px;
  }
}
.content main article {
  max-width: 900px;
  margin-inline: auto;
}
.content main article section {
  color: #191970;
}
.content main .side-htmlcommon,
.content main .html1,
.content main .html2,
.content main .html3,
.content main .html4,
.content main .html5,
.content main .html6,
.content main .html5,
.content main .html6,
.content main .html1sp,
.content main .html2sp,
.content main .html3sp,
.content main .html4sp,
.content main .html5sp,
.content main .html6sp,
.content main .html5sp,
.content main .html6sp {
  text-align: center;
  margin-bottom: 20px;
}
.content main .side-htmlcommon iframe,
.content main .html1 iframe,
.content main .html2 iframe,
.content main .html3 iframe,
.content main .html4 iframe,
.content main .html5 iframe,
.content main .html6 iframe,
.content main .html5 iframe,
.content main .html6 iframe,
.content main .html1sp iframe,
.content main .html2sp iframe,
.content main .html3sp iframe,
.content main .html4sp iframe,
.content main .html5sp iframe,
.content main .html6sp iframe,
.content main .html5sp iframe,
.content main .html6sp iframe {
  border: 1px solid #f9c13a;
  margin: 16px auto 16px;
  display: block;
  overflow: hidden;
}
.content main .side-htmlcommon > div,
.content main .html1 > div,
.content main .html2 > div,
.content main .html3 > div,
.content main .html4 > div,
.content main .html5 > div,
.content main .html6 > div,
.content main .html5 > div,
.content main .html6 > div,
.content main .html1sp > div,
.content main .html2sp > div,
.content main .html3sp > div,
.content main .html4sp > div,
.content main .html5sp > div,
.content main .html6sp > div,
.content main .html5sp > div,
.content main .html6sp > div {
  text-align: center;
}
.content main .side-htmlcommon > a,
.content main .html1 > a,
.content main .html2 > a,
.content main .html3 > a,
.content main .html4 > a,
.content main .html5 > a,
.content main .html6 > a,
.content main .html5 > a,
.content main .html6 > a,
.content main .html1sp > a,
.content main .html2sp > a,
.content main .html3sp > a,
.content main .html4sp > a,
.content main .html5sp > a,
.content main .html6sp > a,
.content main .html5sp > a,
.content main .html6sp > a {
  display: inline-block;
}
.content main .side-htmlcommon > a img,
.content main .html1 > a img,
.content main .html2 > a img,
.content main .html3 > a img,
.content main .html4 > a img,
.content main .html5 > a img,
.content main .html6 > a img,
.content main .html5 > a img,
.content main .html6 > a img,
.content main .html1sp > a img,
.content main .html2sp > a img,
.content main .html3sp > a img,
.content main .html4sp > a img,
.content main .html5sp > a img,
.content main .html6sp > a img,
.content main .html5sp > a img,
.content main .html6sp > a img {
  max-width: 100%;
}
.content main .side-htmlcommon div[class*=twitter],
.content main .html1 div[class*=twitter],
.content main .html2 div[class*=twitter],
.content main .html3 div[class*=twitter],
.content main .html4 div[class*=twitter],
.content main .html5 div[class*=twitter],
.content main .html6 div[class*=twitter],
.content main .html5 div[class*=twitter],
.content main .html6 div[class*=twitter],
.content main .html1sp div[class*=twitter],
.content main .html2sp div[class*=twitter],
.content main .html3sp div[class*=twitter],
.content main .html4sp div[class*=twitter],
.content main .html5sp div[class*=twitter],
.content main .html6sp div[class*=twitter],
.content main .html5sp div[class*=twitter],
.content main .html6sp div[class*=twitter] {
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 420px) {
  .content main .side-htmlcommon iframe,
  .content main .html1sp iframe,
  .content main .html2sp iframe,
  .content main .html3sp iframe,
  .content main .html4sp iframe,
  .content main .html5sp iframe,
  .content main .html6sp iframe,
  .content main .html5sp iframe,
  .content main .html6sp iframe {
    margin-left: -5px;
    margin-right: -5px;
    width: calc(100% + 10px);
  }
}
.content main .breadcrumbs {
  display: flex;
}
@media (width <= 720px) {
  .content main .breadcrumbs {
    display: none;
  }
}
.content main .breadcrumbs li {
  list-style-type: none;
  margin-right: 30px;
  position: relative;
}
.content main .breadcrumbs li::after {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  border: 1px solid #f9c13a;
  border-left-color: transparent;
  border-bottom-color: transparent;
  top: calc(50% - 8px);
  right: -18px;
  transform: rotate(45deg);
}
.content main .breadcrumbs li:last-child {
  margin-right: 0;
}
.content main .breadcrumbs li:last-child::after {
  content: none;
}
.content main .breadcrumbs li > span > a,
.content main .breadcrumbs li > span > span {
  display: block;
  padding: 1px 5px;
  border: 1px solid transparent;
  border-radius: 10px;
}
.content main .breadcrumbs li > span a {
  color: #191970;
  background-color: #f9c13a;
  border-color: #f9c13a;
}
.content main .breadcrumbs li > span a:hover {
  color: #e9423a;
  background-color: #ebf7ee;
}
.content main .breadcrumbs li > span > span {
  border-color: #fff;
}
.content main .wp-pagenavi {
  margin: 10px 0;
  display: flex;
  justify-content: center;
}
.content main .wp-pagenavi span.current,
.content main .wp-pagenavi a {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #f9c13a;
  border: 1px solid #f9c13a;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e9423a;
  font-weight: 700;
  font-size: 1.5rem;
  margin-right: 5px;
}
.content main .wp-pagenavi span.current {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}
.content main .wp-pagenavi a.nextpostslink,
.content main .wp-pagenavi a.previouspostslink {
  font-size: 14px;
  font-weight: normal;
}
.content main .wp-pagenavi a:hover {
  background-color: #ebf7ee;
}
.content main .time {
  display: block;
  max-width: 900px;
  text-align: right;
  margin-inline: auto;
  margin-bottom: 10px;
}
.content main section {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
}
@media (width <= 720px) {
  .content main section {
    margin-bottom: 10px;
    padding: 5px;
  }
}
.content main h1 {
  max-width: 900px;
  line-height: 1.3;
  margin-inline: auto;
  border-bottom: 1px solid #fff;
  margin: 25px auto 0;
  font-size: 1.7rem;
}
@media (width <= 720px) {
  .content main h1 {
    font-size: 1.5rem;
    margin: 15px auto 0;
  }
}
.content main .front-page-h1 {
  margin-bottom: 20px;
}
.content main h2 {
  border-bottom: 1px solid #191970;
  margin-bottom: 20px;
  font-size: 1.4rem;
  color: #191970;
}
@media (width <= 720px) {
  .content main h2 {
    margin-bottom: 10px;
    font-size: 1.2rem;
  }
}
.content main .front-page-h2 {
  color: #fff;
  border-color: #fff;
  margin-top: 20px;
}
.content main h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
  position: relative;
  padding-left: 1em;
  color: #191970;
}
.content main h3::before {
  content: "";
  background-color: #191970;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  position: absolute;
  top: 0.3em;
  left: 0;
}
@media (width <= 720px) {
  .content main h3 {
    margin-bottom: 5px;
    font-size: 15px;
  }
}
.content main .inb {
  display: inline-block;
}
.content main .titleimg {
  display: block;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: 10px;
  aspect-ratio: 1.78/1;
}
.content main .titleimg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.content main .topp p {
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: 30px;
}
@media (width <= 720px) {
  .content main .topp p {
    margin-bottom: 10px;
    font-size: 14px;
  }
}
.content main .mokuji {
  background-color: #f9c13a;
  padding: 20px;
  border-radius: 10px;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: 20px;
}
@media (width <= 720px) {
  .content main .mokuji {
    padding: 7px 5px;
  }
}
.content main .mokuji h2 {
  margin-bottom: 5px;
  color: #191970;
  border-bottom-color: #191970;
}
.content main .mokuji ul {
  padding: 0;
}
.content main .mokuji ul li {
  position: relative;
  padding-left: 1em;
  margin-left: 0.5em;
  margin-bottom: 5px;
}
.content main .mokuji ul li:last-child {
  margin-bottom: 0;
}
.content main .mokuji ul li a::before {
  content: "";
  position: absolute;
  width: 0.4em;
  height: calc(100% - 0.5em);
  background-color: #e9423a;
  transform: translateX(-50%);
  left: 0;
  top: 0;
}
.content main .mokuji ul li a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #e9423a;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  transform: translateX(-50%);
  left: 0;
  bottom: -0.5em;
}
.content main .mokuji ul li a:hover::before {
  content: "";
  background-color: #ebf7ee;
}
.content main .mokuji ul li a:hover::after {
  border-top: 10px solid #ebf7ee;
}
.content main .sectext,
.content main .secdiv {
  margin-bottom: 20px;
}
@media (width <= 720px) {
  .content main .sectext,
  .content main .secdiv {
    margin-bottom: 10px;
  }
}
.content main .sectext,
.content main .secdiv p {
  margin-bottom: 10px;
  font-size: 1.1rem;
  color: #191970;
}
@media (width <= 720px) {
  .content main .sectext,
  .content main .secdiv p {
    font-size: 14px;
  }
}
.content main .sectext em {
  font-weight: bold;
  border-bottom: 3px dotted #e9423a;
  color: #e9423a;
  font-style: normal;
}
.content main .sectext b {
  font-weight: bold;
  border-bottom: 3px solid #f9c13a;
}
.content main .sectext big {
  font-weight: bold;
  font-size: 150%;
}
.content main .sectext a {
  display: inline-block;
  border: 1px solid #e9423a;
  border-radius: 15px;
  color: #e9423a;
  padding: 1px 10px;
  margin: 0 5px;
}
.content main .sectext a:hover {
  background-color: #f9c13a;
  font-weight: bold;
}
.content main .imgwrapper {
  text-align: center;
  margin-bottom: 10px;
}
.content main .imgwrapper img {
  width: 100%;
  /*aspect-ratio: 1.78 / 1;*/
  /*object-fit: contain;*/
  max-width: 600px;
  height: 100%;
}
.content main .youtube {
  margin-bottom: 10px;
}
.content main .youtube iframe {
  width: 100%;
  display: block;
  max-width: 600px;
  height: auto;
  aspect-ratio: 1.78/1;
  margin-inline: auto;
}
.content main .large-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  margin-inline: auto;
  margin-bottom: 30px;
  background-color: #f9c13a;
  border: 1px solid #f9c13a;
  max-width: 200px;
  height: 3em;
  font-weight: 700;
  color: #191970;
}
.content main .large-btn:hover {
  background-color: #ebf7ee;
  color: #e9423a;
}
.content main .front-page-btn {
  margin-top: 20px;
}
.content main .forms {
  color: #333;
}
.content main .forms dl {
  margin-bottom: 10px;
}
.content main .forms dl dt {
  font-weight: bold;
}
.content main .forms dl dd input,
.content main .forms dl dd textarea {
  background-color: #ebf7ee;
  width: 100%;
  border: 1px solid #666;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 16px;
}
.content main .submit-btn input {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  margin-inline: auto;
  margin-bottom: 30px;
  background-color: #f9c13a;
  border: 1px solid #f9c13a;
  min-width: 200px;
  height: 3em;
  font-weight: 700;
  color: #333;
}
.content main .submit-btn input:hover {
  background-color: #ebf7ee;
  color: #f9c13a;
}
.content main .pager {
  display: flex;
  justify-content: center;
}
.content main .pager li a {
  display: block;
  text-align: center;
  color: #191970;
  background-color: #f9c13a;
  border-color: #f9c13a;
  padding: 2px 20px;
  border-radius: 20px;
  font-size: 20px;
}
.content main .pager li a:hover {
  color: #e9423a;
  background-color: #ebf7ee;
}
@media (width <= 720px) {
  .content main .pager li a {
    padding: 2px 10px;
    font-size: 13px;
  }
}
.content main .pager li:first-child {
  margin-right: 20px;
}
.content main .pager li:first-child a {
  position: relative;
}
.content main .pager li:first-child a::after {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  border: 1px solid #f9c13a;
  border-left-color: transparent;
  border-bottom-color: transparent;
  top: calc(50% - 6px);
  right: -20px;
  transform: rotate(-135deg);
}
.content main .pager li:last-child {
  margin-left: 20px;
}
.content main .pager li:last-child a {
  position: relative;
}
.content main .pager li:last-child a::after {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  border: 1px solid #f9c13a;
  border-left-color: transparent;
  border-bottom-color: transparent;
  top: calc(50% - 6px);
  left: -20px;
  transform: rotate(45deg);
}
.content aside {
  height: 100%;
  border-left: 1px solid #ebf7ee;
  padding: 24px 10px 10px;
}
@media (width <= 720px) {
  .content aside {
    padding: 10px 5px;
  }
}
.content aside .asideboxout.fixed {
  width: 100px; /*サイドバーの幅に連動*/
  position: fixed;
  top: 10px;
}
@media (width <= 720px) {
  .content aside .asideboxout.fixed {
    width: 70px; /*サイドバーの幅に連動*/
  }
}
.content aside .asideboxout .sidebartitle {
  color: #fff;
  text-align: center;
  margin-bottom: 5px;
}
@media (width <= 720px) {
  .content aside .asideboxout .sidebartitle {
    font-size: 12px;
  }
}
.content aside .asidebox {
  background-color: #f9c13a;
  margin-bottom: 10px;
  padding: 10px 5px;
  border-radius: 10px;
}
.content aside .asidebox:last-of-type {
  margin-bottom: 0;
}
@media (width <= 720px) {
  .content aside .asidebox {
    padding: 5px 5px;
    border-radius: 10px;
  }
}
.content aside .asidebox h4 {
  border-bottom: 1px solid #191970;
  font-size: 1rem;
}
@media (width <= 720px) {
  .content aside .asidebox h4 {
    font-size: 11px;
  }
}
.content aside .asidebox ul {
  padding: 5px 0 0;
}
.content aside .asidebox ul li {
  margin-bottom: 5px;
  font-size: 15px;
}
.content aside .asidebox ul li:last-child {
  margin-bottom: 0;
}
@media (width <= 720px) {
  .content aside .asidebox ul li {
    margin-bottom: 8px;
    font-size: 13px;
  }
}
.content aside .asidebox ul li a {
  display: inline-block;
}
.content aside .asidebox ul .matome-li a {
  line-height: 1.3;
  white-space: nowrap;
}
.content aside .side-htmlcommon > a {
  display: block;
  margin: 0 auto;
}
.content aside .side-htmlcommon > a img {
  position: relative;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (width <= 720px) {
  .content aside .side-htmlcommon > a img {
    left: -5px;
    right: -5px;
    width: calc(100% + 10px);
  }
}

.wpcf7 {
  position: relative;
}
.wpcf7 .wpcf7-response-output {
  border-color: #f00 !important;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin-inline: auto;
  height: 80px;
  max-width: 300px;
  border-radius: 10px;
  padding: 0.2em 1em;
  background: #191970;
  font-size: 1rem;
  color: #fff;
  top: 20px;
  right: 0;
}

.archive-main h1 {
  max-width: -moz-fit-content !important;
  max-width: fit-content !important;
}
.archive-main > ul.archiveul {
  margin: 10px -4px 0;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
.archive-main > ul.archiveul > li {
  width: calc(50% - 8px);
  margin: 0 4px 8px;
  align-items: stretch;
}
@media (width <= 720px) {
  .archive-main > ul.archiveul > li {
    width: calc(100% - 8px);
  }
}
.archive-main > ul.archiveul > li a {
  background-color: #f9c13a;
  display: block;
  padding: 8px;
  height: 100%;
  position: relative;
}
@media (width <= 720px) {
  .archive-main > ul.archiveul > li a {
    display: flow-root;
  }
}
.archive-main > ul.archiveul > li a .archive-img {
  aspect-ratio: 1.78/1;
  background-color: #ccc;
}
@media (width <= 720px) {
  .archive-main > ul.archiveul > li a .archive-img {
    float: left;
    width: 100px;
    height: 100%;
    aspect-ratio: inherit;
  }
}
.archive-main > ul.archiveul > li a .archive-img img {
  width: 100%;
  height: 100%;
  vertical-align: top;
  aspect-ratio: inherit;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (width <= 720px) {
  .archive-main > ul.archiveul > li a .archive-txt {
    padding-left: 112px;
  }
}
.archive-main > ul.archiveul > li a .archive-txt h3 {
  margin: 10px 0 5px;
  line-height: 1.3;
  padding-left: 0;
  border-bottom: 1px dotted #191970;
}
@media (width <= 720px) {
  .archive-main > ul.archiveul > li a .archive-txt h3 {
    font-size: 15px;
  }
}
.archive-main > ul.archiveul > li a .archive-txt h3::before {
  content: none;
}
@media (width <= 720px) {
  .archive-main > ul.archiveul > li a .archive-txt p {
    font-size: 14px;
  }
}
.archive-main > ul.archiveul > li a:hover {
  background-color: #ebf7ee;
}
.archive-main > ul.archiveul > li a:hover h3 {
  color: #e9423a;
}
.archive-main #matome + ul.archiveul > li a {
  padding: 8px 8px 30px 8px;
}
@media (width <= 720px) {
  .archive-main #matome + ul.archiveul > li a {
    padding: 8px;
  }
}
.archive-main #matome + ul.archiveul > li a .koko-wo-tap {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 8px;
  left: 0;
}
@media (width <= 720px) {
  .archive-main #matome + ul.archiveul > li a .koko-wo-tap {
    padding-left: 112px;
  }
}

.parts-tool-div {
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 1060px) {
  .parts-tool-div {
    display: block;
  }
}
.parts-tool-div .toolbox {
  width: calc(50% - 8px);
  margin: 0 4px 8px;
}
@media (max-width: 1060px) {
  .parts-tool-div .toolbox {
    width: auto;
    margin: 0 0 8px;
  }
}
.parts-tool-div .toolbox div {
  float: left;
}
.parts-tool-div .toolbox .imgbox {
  width: 200px;
  height: 200px;
}
@media (max-width: 720px) {
  .parts-tool-div .toolbox .imgbox {
    width: 150px;
  }
}
@media (max-width: 420px) {
  .parts-tool-div .toolbox .imgbox {
    width: 120px;
  }
}
.parts-tool-div .toolbox .txtbox {
  width: calc(100% - 200px);
  padding: 0 0 0 5px;
}
@media (max-width: 720px) {
  .parts-tool-div .toolbox .txtbox {
    width: calc(100% - 150px);
  }
}
@media (max-width: 420px) {
  .parts-tool-div .toolbox .txtbox {
    width: calc(100% - 120px);
  }
}

.toolbox {
  display: flow-root;
  border: 1px solid #ccc;
  padding: 5px;
}
.toolbox .imgbox {
  border: 1px solid #ccc;
  background-color: #fff;
}
.toolbox .imgbox img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}
.toolbox .txtbox2 {
  width: auto;
  padding: 0;
}
.toolbox .txtbox h4,
.toolbox .txtbox2 h4 {
  color: #191970;
  margin-bottom: 10px;
}
@media (max-width: 720px) {
  .toolbox .txtbox h4,
  .toolbox .txtbox2 h4 {
    margin-bottom: 0;
  }
}
.toolbox .txtbox > ul,
.toolbox .txtbox2 > ul {
  display: block;
  padding: 0;
}
@media (max-width: 1060px) {
  .toolbox .txtbox > ul,
  .toolbox .txtbox2 > ul {
    display: flex;
  }
}
.toolbox .txtbox > ul li,
.toolbox .txtbox2 > ul li {
  margin: 0 0 4px 0;
  padding: 0;
  width: auto;
  height: 35px;
}
@media (max-width: 1060px) {
  .toolbox .txtbox > ul li,
  .toolbox .txtbox2 > ul li {
    width: 33.33%;
    height: 50px;
    margin: 0 8px 0 0;
  }
  .toolbox .txtbox > ul li:last-child,
  .toolbox .txtbox2 > ul li:last-child {
    margin: 0;
  }
}
.toolbox .txtbox > ul li a,
.toolbox .txtbox2 > ul li a {
  display: flex;
  width: 100%;
  height: 100%;
  color: #fff;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.toolbox .txtbox > ul li a:hover,
.toolbox .txtbox2 > ul li a:hover {
  opacity: 50%;
}
.toolbox .txtbox > ul li a.ama,
.toolbox .txtbox2 > ul li a.ama {
  background-color: #ff9900;
}
.toolbox .txtbox > ul li a.rak,
.toolbox .txtbox2 > ul li a.rak {
  background-color: #bf0000;
}
.toolbox .txtbox > ul li a.yah,
.toolbox .txtbox2 > ul li a.yah {
  background-color: #fff;
  color: #ff0033;
  border: 1px solid #ff0033;
}
@media (max-width: 720px) {
  .toolbox .txtbox > ul {
    width: auto;
    display: block;
  }
  .toolbox .txtbox > ul li {
    width: auto;
    height: 35px;
    margin: 0 0 5px 0;
  }
}

.content main .related-posts h3 {
  padding-left: 0;
  margin: 0;
}
.content main .related-posts h3::before {
  content: none;
}
.content main .related-posts > ul {
  padding: 0;
  display: flex;
  align-items: stretch;
}
@media (max-width: 720px) {
  .content main .related-posts > ul {
    flex-wrap: wrap;
  }
}
.content main .related-posts > ul li {
  margin: 3px 3px;
  width: calc(50% - 6px);
}
.content main .related-posts > ul li a {
  display: block;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
  padding-bottom: 40px;
}
.content main .related-posts > ul li a:hover {
  background-color: #ebf7ee;
}
.content main .related-posts > ul li a .thumb {
  height: 150px;
  padding: 5px;
}
.content main .related-posts > ul li a .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.content main .related-posts > ul li a .title {
  padding: 5px;
}
.content main .related-posts > ul li a .koko-wo-tap {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 10em;
  max-width: calc(100% - 10px);
  transform: translateX(-50%);
  height: 30px;
  text-align: center;
  color: #191970;
  background-color: #f9c13a;
  border: 1px solid #f9c13a;
  border-radius: 20px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content main .related-posts > ul li a:hover .koko-wo-tap {
  background-color: #ebf7ee;
  color: #e60033;
}

@media (max-width: 720px) {
  .content main .imgwrapper img.js-zoom {
    transition: transform 0.3s ease;
    cursor: pointer;
  }
  .content main .imgwrapper {
    position: relative;
  }
  .content main .imgwrapper::before {
    position: absolute;
    content: "拡大";
    border-radius: 10px;
    color: #191970;
    bottom: 10px;
    right: calc(50% - 5px - 1em);
    width: calc(2em + 10px);
    background-color: #f9c13a;
  }
  /* 拡大中 */
  .content main .imgwrapper .js-zoom.zoom-active {
    position: fixed;
    left: 35px;
    transform: scale(1.5); /* 好きな倍率に変更可 */
    z-index: 1000;
    position: relative;
  }
}
.banner-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 940px;
  margin: 0 auto;
  flex-wrap: wrap;
  padding: 0;
}
@media (max-width: 1130px) {
  .banner-item {
    width: 640px;
  }
}
@media (max-width: 830px) {
  .banner-item {
    width: auto;
    max-width: 300px;
  }
}
.banner-item li {
  float: left;
  width: 300px;
  height: 250px;
  margin: 0 5px 20px;
  background-color: #ebf7ee;
}
@media (max-width: 830px) {
  .banner-item li {
    float: none;
    margin: 0 0 20px;
  }
}
@media (max-width: 420px) {
  .banner-item li {
    width: 250px;
    height: 204.1666666667px;
  }
}
.banner-item li > a {
  display: flex;
  margin: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.banner-item li > a > img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
  vertical-align: bottom;
}
.banner-item li > div {
  width: 300px !important;
  height: 250px !important;
}
@media (max-width: 420px) {
  .banner-item li > div {
    max-width: 250px;
    height: 204.1666666667px;
  }
}
.banner-item li > table {
  width: 100%;
  height: 100%;
}
.banner-item li > table > tbody {
  width: 100%;
  height: 100%;
}
.banner-item li > table > tbody > tr {
  width: 100%;
  height: 100%;
}
.banner-item li > table > tbody > tr > td {
  position: relative;
  width: 100%;
  height: 100%;
}
.banner-item li > table > tbody > tr > td > div {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0 !important;
  width: 100% !important;
  height: 100%;
  border: none !important;
  padding: 0 !important;
}
.banner-item li > table > tbody > tr > td > div > table {
  width: 100%;
  height: 100%;
}
.banner-item li > table > tbody > tr > td > div > table tr {
  width: 100%;
  height: 100%;
}
.banner-item li > table > tbody > tr > td > div > table tr td {
  height: 100%;
  position: relative;
}
.banner-item li > table > tbody > tr > td > div > table tr td a {
  height: 100%;
  font-size: 1.1em;
}
@media (max-width: 420px) {
  .banner-item li > table > tbody > tr > td > div > table tr td a {
    font-size: 1em;
  }
}
@media (max-width: 420px) {
  .banner-item li > table > tbody > tr > td > div > table tr td a img {
    width: 100px;
  }
}
.banner-item li > table > tbody > tr > td > div > table tr td p {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 !important;
}
.banner-item li > table > tbody > tr > td > div > table tr td p span {
  color: #e9423a;
  font-size: 1.3em;
}
@media (max-width: 420px) {
  .banner-item li > table > tbody > tr > td > div > table tr td p span {
    font-size: 1.1em;
  }
}

/*SNSボタン*/
.share-buttons {
  display: flex;
  gap: 10px;
  margin: 16px auto;
  width: 190px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 40px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.share-btn i {
  margin-right: 6px;
  font-size: 16px;
}

/* 背景色 */
.share-btn.x {
  background: #000;
} /* X風は黒 */
.share-btn.line {
  background: #06c755;
} /* LINEは緑 */
.share-btn:hover {
  opacity: 0.8;
}/*# sourceMappingURL=common.css.map */