@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanjp.min.css");
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
@import url("https://use.typekit.net/bdk8sdl.css");
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

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

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden], template {
  display: none;
}

a {
  background: transparent;
}

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

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

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

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

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

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

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type=checkbox], input[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

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

input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

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

td, th {
  padding: 0;
}

@font-face {
  font-family: "icomoon";
  src: url("../fonts/icomoon.eot?qsvb7c");
  src: url("../fonts/icomoon.eot?qsvb7c#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?qsvb7c") format("truetype"), url("../fonts/icomoon.woff?qsvb7c") format("woff"), url("../fonts/icomoon.svg?qsvb7c#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon", "Noto Sans JP", sans-serif !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-pa_l:before {
  content: "\e90a";
}

.icon-pa_r:before {
  content: "\e90b";
}

.icon-logo3:before {
  content: "\e904";
}

.icon-logo:before {
  content: "\e905";
}

.icon-bubble:before {
  content: "\e96b";
}

.icon-volume-medium:before {
  content: "\ea27";
}

.icon-embed2:before {
  content: "\ea80";
}

.icon-github:before {
  content: "\eab0";
}

.icon-point:before {
  content: "\e900";
}

.icon-tag:before {
  content: "\e600";
}

.icon-link:before {
  content: "\e606";
}

.icon-wordpress:before {
  content: "\e607";
}

.icon-clock2:before {
  content: "\e608";
}

.icon-cross:before {
  content: "\e609";
}

.icon-info:before {
  content: "\e60a";
}

.icon-warning:before {
  content: "\e60b";
}

.icon-folder:before {
  content: "\e60c";
}

.icon-twitter:before {
  content: "\e60e";
}

.icon-facebook:before {
  content: "\e60f";
}

.icon-pocket:before {
  content: "\e613";
}

.icon-feedly:before {
  content: "\e615";
}

.icon-windows:before {
  content: "\e618";
}

.icon-export:before {
  content: "\e619";
}

.icon-feed:before {
  content: "\e61f";
}

.icon-ps:before {
  content: "\e623";
}

.icon-bookmark:before {
  content: "\e62e";
}

.icon-point-right:before {
  content: "\e630";
}

.icon-checkmark:before {
  content: "\e632";
}

.icon-apple:before {
  content: "\e635";
}

.icon-android:before {
  content: "\e637";
}

.icon-help:before {
  content: "\e63e";
}

.icon-ai:before {
  content: "\e640";
}

.icon-file2:before {
  content: "\e643";
}

.icon-menu:before {
  content: "\e648";
}

.icon-comments:before {
  content: "\e64a";
}

.icon-download3:before {
  content: "\e64e";
}

.icon-checkmark-circle:before {
  content: "\e656";
}

.icon-instagram:before {
  content: "\e906";
}

.icon-hatena:before {
  content: "\e907";
}

.icon-arrow_l:before {
  content: "\e908";
}

.icon-arrow_r:before {
  content: "\e909";
}

.icon-crown:before {
  content: "\e90e";
}

.icon-func02:before {
  content: "\e90f";
}

.icon-wdc02:before {
  content: "\e913";
}

.icon-amazon:before {
  content: "\e918";
}

.icon-youtube3:before {
  content: "\e924";
}

.icon-cycle:before {
  content: "\e927";
}

.icon-announcement:before {
  content: "\e85a";
}

.icon-date_range:before {
  content: "\e916";
}

.icon-face:before {
  content: "\e87c";
}

.icon-home:before {
  content: "\e88a";
}

.icon-info1:before {
  content: "\e88e";
}

.icon-list:before {
  content: "\e896";
}

.icon-person:before {
  content: "\e7fd";
}

.icon-play_circle_filled:before {
  content: "\e038";
}

.icon-textsms:before {
  content: "\e0d8";
}

.icon-toc:before {
  content: "\e8de";
}

.icon-arrow-bold-left:before {
  content: "\e901";
}

.icon-arrow-bold-right:before {
  content: "\e902";
}

.icon-typing:before {
  content: "\e903";
}

.w-4 {
  width: 2rem;
}

.w-8 {
  width: 4rem;
}

.w-10 {
  width: 5rem;
}

.w-12 {
  width: 6rem;
}

.w-16 {
  width: 8rem;
}

.w-20 {
  width: 10rem;
}

.w-24 {
  width: 12rem;
}

.w-32 {
  width: 16rem;
}

.w-40 {
  width: 20rem;
}

.w-48 {
  width: 24rem;
}

.w-64 {
  width: 32rem;
}

.w-full {
  width: 100%;
}

.w-half {
  width: 50%;
}

.w-third {
  width: 33.333%;
}

.w-quarter {
  width: 25%;
}

.h-4 {
  height: 2rem;
}

.h-8 {
  height: 4rem;
}

.h-10 {
  height: 5rem;
}

.h-12 {
  height: 6rem;
}

.h-16 {
  height: 8rem;
}

.h-20 {
  height: 10rem;
}

.h-24 {
  height: 12rem;
}

.h-32 {
  height: 16rem;
}

.h-40 {
  height: 20rem;
}

.h-48 {
  height: 24rem;
}

.h-64 {
  height: 32rem;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mt-0 {
  margin-top: 0;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-60 {
  margin-top: 60px;
}

.ml-0 {
  margin-left: 0;
}

.ml-10 {
  margin-left: 10px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-30 {
  margin-left: 30px;
}

.mr-0 {
  margin-right: 0;
}

.mr-10 {
  margin-right: 10px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-30 {
  margin-right: 30px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.p-0 {
  padding: 0;
}

.p-5 {
  padding: 5px;
}

.p-10 {
  padding: 10px;
}

.p-15 {
  padding: 15px;
}

.p-20 {
  padding: 20px;
}

.p-30 {
  padding: 30px;
}

.p-40 {
  padding: 40px;
}

.p-50 {
  padding: 50px;
}

.pt-0 {
  padding-top: 0;
}

.pt-10 {
  padding-top: 10px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-40 {
  padding-top: 40px;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pl-0 {
  padding-left: 0;
}

.pl-10 {
  padding-left: 10px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-30 {
  padding-left: 30px;
}

.pr-0 {
  padding-right: 0;
}

.pr-10 {
  padding-right: 10px;
}

.pr-20 {
  padding-right: 20px;
}

.pr-30 {
  padding-right: 30px;
}

.gap-5 {
  gap: 5px;
}

.gap-10 {
  gap: 10px;
}

.gap-15 {
  gap: 15px;
}

.gap-20 {
  gap: 20px;
}

.gap-30 {
  gap: 30px;
}

.gap-40 {
  gap: 40px;
}

.mar5 {
  margin-bottom: 5px;
}

.mar10 {
  margin-bottom: 10px;
}

.mar20 {
  margin-bottom: 20px;
}

.mar25 {
  margin-bottom: 25px;
}

.mar30 {
  margin-bottom: 30px;
}

.mar40 {
  margin-bottom: 40px;
}

.mar50 {
  margin-bottom: 50px;
}

.mar60 {
  margin-bottom: 60px;
}

.mar80 {
  margin-bottom: 80px;
}

.d-block {
  display: block;
}

.d-inline {
  display: inline;
}

.d-inline-block {
  display: inline-block;
}

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.d-none {
  display: none;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

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

.text-justify {
  text-align: justify;
}

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: inherit;
  font-size: 100%;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: "YakuHanJPs", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Meiryo", sans-serif !important;
  height: 100%;
}

body {
  font-size: 1.3rem;
  line-height: 1.5;
  background-color: #f0f0e9;
}

a:link, a:visited {
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.Clear {
  clear: both;
  font: 0pt/0pt sans-serif;
  height: 0px;
  line-height: 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

video {
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

.mar5 {
  margin-bottom: 5px;
}

.mar10 {
  margin-bottom: 10px;
}

.mar20 {
  margin-bottom: 20px;
}

.mar25 {
  margin-bottom: 25px;
}

.mar30 {
  margin-bottom: 30px;
}

.mar40 {
  margin-bottom: 40px;
}

.mar50 {
  margin-bottom: 50px;
}

.mar60 {
  margin-bottom: 60px;
}

.mar70 {
  margin-bottom: 70px;
}

.mar80 {
  margin-bottom: 80px;
}

.mar90 {
  margin-bottom: 90px;
}

.mar100 {
  margin-bottom: 100px;
}

.mar5p {
  margin-bottom: 5px;
  padding: 0 clamp(8px, 1.5vw, 20px);
}

.mar10p {
  margin-bottom: 10px;
  padding: 0 clamp(8px, 1.5vw, 20px);
}

.mar20p {
  margin-bottom: 20px;
  padding: 0 clamp(8px, 1.5vw, 20px);
}

.mar25p {
  margin-bottom: 25px;
  padding: 0 clamp(8px, 1.5vw, 20px);
}

.mar30p {
  margin-bottom: 30px;
  padding: 0 clamp(8px, 1.5vw, 20px);
}

.mar40p {
  margin-bottom: 40px;
  padding: 0 clamp(8px, 1.5vw, 20px);
}

.mar50p {
  margin-bottom: 50px;
  padding: 0 clamp(8px, 1.5vw, 20px);
}

.mar60p {
  margin-bottom: 60px;
  padding: 0 clamp(8px, 1.5vw, 20px);
}

.mar80p {
  margin-bottom: 80px;
  padding: 0 clamp(8px, 1.5vw, 20px);
}

.red {
  color: #FF0000;
}

.blue {
  color: blue;
}

.F10 {
  font-size: 1.1rem;
  letter-spacing: 0.2rem;
}

.F12 {
  font-size: 1.2rem;
}

.F14 {
  font-size: 1.4rem;
}

.F16 {
  font-size: 1.6rem;
}

.F18 {
  font-size: 1.8rem;
}

.F20 {
  font-size: 2rem;
}

.img_s {
  text-align: center;
  margin-bottom: 20px;
  background: #f5f8fa;
}

.img_m {
  text-align: center;
  margin-bottom: 40px;
  background: #f5f8fa;
}

.img_l {
  text-align: center;
  margin-bottom: 60px;
  background: #f5f8fa;
}

.img_xl {
  text-align: center;
  margin-bottom: 80px;
  background: #f5f8fa;
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

main {
  padding: 4rem 0 0 0;
}
@media screen and (min-width: 47.5em) {
  main {
    padding: 6rem 0 0 0;
  }
}

.single {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #2A495A;
}

.pages {
  max-width: 750px;
  margin: 0 auto;
  padding: 0 20px 100px 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* ========================================
   ハンバーガーメニュー
   ======================================== */
.hamburger {
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 1;
}

.line {
  width: 25px;
  height: 1px;
  position: relative;
  overflow: hidden;
  margin: 3px 0;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.line::before {
  content: "";
  position: absolute;
  width: 75px;
  height: 100%;
  background: repeating-linear-gradient(90deg, #2A495A 0px, #2A495A 25px, transparent 25px, transparent 50px, #2A495A 50px, #2A495A 75px);
  -webkit-transform: translateX(-50px);
          transform: translateX(-50px);
}

.hamburger:hover .line::before {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}

.hamburger:hover .line1::before {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

.hamburger:hover .line2::before {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.hamburger:hover .line3::before {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.hamburger.close .line1 {
  -webkit-transform: translateY(7px) rotate(45deg);
          transform: translateY(7px) rotate(45deg);
}

.hamburger.close .line2 {
  opacity: 0;
}

.hamburger.close .line3 {
  -webkit-transform: translateY(-7px) rotate(-45deg);
          transform: translateY(-7px) rotate(-45deg);
}

/* ========================================
   メニュー
   ======================================== */
.menu__bg01,
.menu__bg02 {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

.menu__bg01 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2A495A;
  z-index: 998;
}

.menu__bg02 {
  position: fixed;
  top: 0;
  left: 50%;
  padding: 0 2rem;
  max-width: 1200px;
  width: calc(100% - 2rem);
  height: calc(100% - 2.5rem);
  background-color: #f0f0e9;
  z-index: 999;
  overflow-y: auto;
}
@media screen and (min-width: 37.5em) {
  .menu__bg02 {
    padding: 0 4.5rem;
  }
}

.menu {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* メニューヘッダー */
.menu__header {
  position: relative;
  z-index: 3;
  padding: 2rem 1.5rem;
  margin-bottom: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 37.5em) {
  .menu__header {
    padding: 3.2rem 1.5rem;
    margin-bottom: 40px;
  }
}

.menu__header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: #2A495A;
  height: 1px;
  width: var(--header-line-width, 0%);
  -webkit-transition: none;
  transition: none;
}

/* メニューコンテンツ */
.menu__contents {
  position: relative;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 1.5rem;
}
@media screen and (min-width: 37.5em) {
  .menu__contents {
    padding: 0 3rem;
  }
}

/* メニュー左側 */
.menu__left {
  width: 100%;
  font-family: "nimbus-sans", sans-serif;
  padding-right: 0;
}
@media screen and (min-width: 58.75em) {
  .menu__left {
    padding-right: 3.5rem;
    width: calc(100% - 336px);
  }
}

.menu__left ul li {
  position: relative;
  list-style: none;
  padding: 0.48rem 0;
  overflow: hidden;
}

.menu__left ul li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #2A495A;
  height: 1px;
  width: var(--li-line-width, 0%);
}

.menu__left ul li a {
  position: relative;
  display: block;
  color: #2A495A;
  font-size: clamp(3.2rem, 3.5vw, 4.16rem);
  font-weight: 700;
  letter-spacing: -0.32rem;
  word-spacing: -0.4rem;
  line-height: 1.2;
  padding: 0.16rem 0;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

.menu__left ul li a::before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  line-height: 1.2;
  padding: 0.16rem 0;
  font: inherit;
  color: #2A495A;
  content: attr(title);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

/* メニュー右側 */
.menu__right {
  max-width: 336px;
  width: 100%;
  height: 100%;
  display: none;
}
@media screen and (min-width: 58.75em) {
  .menu__right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1.6rem;
  }
}

.menu__right .img1,
.menu__right .img2 {
  position: relative;
  background-color: #ddd;
  background-size: cover;
  background-position: center;
  opacity: 1;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.menu__right .img1::after,
.menu__right .img2::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  -webkit-filter: url("#duotone");
          filter: url("#duotone");
  opacity: 1;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
.menu__right .img1:hover::after,
.menu__right .img2:hover::after {
  opacity: 0;
}

.menu__right a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.menu__right .img1 {
  background-image: url("../img/nemu_banner_01.png");
}

.menu__right .img2 {
  background-image: url("../img/nemu_banner_02.png");
}

/* メニュー検索 */
.menu__search {
  position: relative;
}

.menu__search::after {
  content: "";
  position: absolute;
  bottom: 0rem;
  left: 0;
  background-color: #2A495A;
  height: 1px;
  width: var(--search-line-width, 0%);
}

.menu__search-title {
  font-size: clamp(1.76rem, 3.5vw, 2.48rem);
  color: #2A495A;
  font-weight: 700;
  letter-spacing: -0.24rem;
  padding-right: 1.6rem;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.menu__search-input {
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  background: transparent;
  width: 100%;
  height: 47px;
  padding: 0 8px;
  font-size: 1.92rem;
  color: #2A495A;
  opacity: 1;
}

.menu__search-input:focus {
  background: #FFF;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.menu__search-input::-webkit-input-placeholder {
  font-size: clamp(1.28rem, 3.5vw, 1.6rem);
  color: #486379;
}

.menu__search-input::-moz-placeholder {
  font-size: clamp(1.28rem, 3.5vw, 1.6rem);
  color: #486379;
}

.menu__search-input:-ms-input-placeholder {
  font-size: clamp(1.28rem, 3.5vw, 1.6rem);
  color: #486379;
}

.menu__search-input::-ms-input-placeholder {
  font-size: clamp(1.28rem, 3.5vw, 1.6rem);
  color: #486379;
}

.menu__search-input::placeholder {
  font-size: clamp(1.28rem, 3.5vw, 1.6rem);
  color: #486379;
}

.menu__search-submit {
  width: 35px;
  height: 35px;
  display: block;
  position: absolute;
  right: 6px;
  top: 6px;
  line-height: 47px;
  text-align: center;
  cursor: pointer;
  background: url(../img/search.svg) no-repeat 10px 9px #2A495A;
  border: none;
  outline: none;
  opacity: 1;
  border-radius: 25px;
}

.menu__search-submit:hover {
  background-color: #486379;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

/* メニュータグ */
.menu__tag {
  padding: 3rem 2rem 0.5rem 2rem;
}
@media screen and (min-width: 37.5em) {
  .menu__tag {
    padding: 4rem 3.2rem 1.28rem 3.2rem;
  }
}

.menu__tag ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.menu__tag ul li {
  margin-right: 0.8rem;
  margin-bottom: 0.7rem;
  opacity: 1;
}

.menu__tag ul li:nth-child(n+8) {
  display: none;
}
@media screen and (min-width: 37.5em) {
  .menu__tag ul li:nth-child(n+8) {
    display: block;
  }
}

.menu__tag ul li a {
  position: relative;
  display: inline-block;
  padding: 0.6rem 2rem 0.6rem 3rem;
  border: solid 1px #2A495A;
  border-radius: 20px;
  font-size: 1.2rem;
  color: #2A495A;
  overflow: hidden;
}

.menu__tag ul li a::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: "";
  background: #2A495A;
  border-radius: 20px;
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
}

.menu__tag ul li a:hover {
  color: #f0f0e9;
}

.menu__tag ul li a:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

.menu__tag ul li a::after {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  border-top: solid 1px #2A495A;
  border-right: solid 1px #2A495A;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  top: 50%;
  left: 14px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.menu__tag ul li a:hover::after {
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  -webkit-transform: translate(calc(-50% + 4px), -50%) rotate(45deg);
          transform: translate(calc(-50% + 4px), -50%) rotate(45deg);
}

/* メニューリンク */
.menu__link {
  padding: 0 3.2rem;
  font-family: "nimbus-sans", sans-serif;
}

.menu__link ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.6rem;
}

.menu__link ul li {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 2.08rem; /* 追加:高さを明示 */
}

.menu__link ul li a {
  position: relative;
  display: inline-block;
  padding: 0.32rem;
  font-size: 1.44rem;
  color: #2A495A;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

/* 擬似テキスト(そのまま) */
.menu__link ul li a:before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 0.32rem;
  color: #2A495A;
  content: attr(title);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

header {
  position: relative;
  z-index: 3;
  padding: 1.8rem 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 37.5em) {
  header {
    padding: 3.3rem 1.8rem;
  }
}

header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: #2A495A;
  height: 1px;
  width: calc(100% - 30px);
}

.header__left {
  width: 50px;
}

/* ロゴ（ヘッダー・メニュー共通） */
.header__logo span, .menu__logo span {
  font-size: 2.4rem;
  color: #2A495A;
  padding-right: 15px;
  vertical-align: -3px;
  opacity: 1;
}
.header__logo span:hover, .menu__logo span:hover {
  cursor: pointer;
  -webkit-animation: hoverFade 1s;
          animation: hoverFade 1s;
}
@-webkit-keyframes hoverFade {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
@keyframes hoverFade {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.header__logo::before,
.menu__logo::before {
  position: absolute;
  top: -15px;
  left: 50%;
  content: "\e905";
  color: #2A495A;
  font-family: "icomoon" !important;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  padding-right: 25px;
}

.top__title {
  text-align: center;
  overflow: hidden;
}
.top__title h2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.25em;
  font-family: "nimbus-sans", sans-serif;
  font-size: 4.5rem;
  line-height: 1.02;
  letter-spacing: -0.35rem;
  word-spacing: -0.2rem;
  color: #2A495A;
}
@media screen and (min-width: 37.5em) {
  .top__title h2 {
    font-size: 5.5rem;
    letter-spacing: -0.4rem;
  }
}
.top__title h2::before, .top__title h2::after {
  content: "";
  height: 1px;
  width: 0.5em;
  background-color: #2A495A;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.top__title--small {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: #2A495A;
  margin-bottom: 20px;
}

.top__subtitle {
  position: relative;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding: 10px 40px;
  color: #2A495A;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0;
}
@media screen and (min-width: 37.5em) {
  .top__subtitle {
    font-size: 1.8rem;
    padding: 12px 50px;
    margin-bottom: 10px;
  }
}
.top__subtitle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, #2A495A 1px, transparent 1px) no-repeat left top, linear-gradient(to bottom, #2A495A 1px, transparent 1px) no-repeat left top, linear-gradient(to left, #2A495A 1px, transparent 1px) no-repeat right top, linear-gradient(to bottom, #2A495A 1px, transparent 1px) no-repeat right top;
  background-size: 8px 8px;
}
.top__subtitle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, #2A495A 1px, transparent 1px) no-repeat left bottom, linear-gradient(to top, #2A495A 1px, transparent 1px) no-repeat left bottom, linear-gradient(to left, #2A495A 1px, transparent 1px) no-repeat right bottom, linear-gradient(to top, #2A495A 1px, transparent 1px) no-repeat right bottom;
  background-size: 8px 8px;
}

.top__cap {
  display: none;
}
@media screen and (min-width: 37.5em) {
  .top__cap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #2A495A;
    margin-bottom: 30px;
  }
}

/* PageNavi
*******************************************************************************************************************/
.pagenavi-area {
  margin-bottom: 50px;
}

.pagenavi-area ul {
  position: relative;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.pagenavi-area li {
  position: relative;
  border-bottom: dotted 1px #687e91;
}

.pagenavi-area li:first-child::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 1px;
  background-color: #2A495A;
}

.pagenavi-area li::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 5px;
  width: 1px;
  background-color: #2A495A;
}

.pagenavi-area li a, .pagenavi-area li span {
  font-size: 1.5rem;
  font-family: "Roboto Condensed", sans-serif;
  display: block;
  color: #2A495A;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  width: 50px;
  height: 50px;
  -webkit-transition: all 0.5s cubic-bezier(0.39, 0.57, 0.56, 1);
  transition: all 0.5s cubic-bezier(0.39, 0.57, 0.56, 1);
  border: solid 1px var(--color-01);
  white-space: nowrap;
}

.pagenavi-area li a:hover {
  background-color: #fff;
  color: #2A495A;
}

.pagenavi-area li span.current {
  background: linear-gradient(45deg, #2A495A 33.33%, transparent 33.33%);
  background-size: 3px 3px;
  color: #2A495A;
}

.pnm {
  margin-bottom: 30px;
}

.wp-pagenavi::after {
  clear: both;
}

.pagenavi-area li:nth-last-child(2), .pagenavi-area li:nth-last-child(3) {
  display: none;
}
@media screen and (min-width: 37.5em) {
  .pagenavi-area li:nth-last-child(2), .pagenavi-area li:nth-last-child(3) {
    display: block;
  }
}

:root {
  --thick-line: 6px;
  --space: 35px;
  /* 計算用（自動計算） */
  --start-offset: calc(var(--thick-line) + var(--space));
  --total-offset: calc(var(--start-offset) * 2);
}

.top-grid {
  display: grid;
  grid-template-columns: 336px;
  gap: 0;
  margin-bottom: 60px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 30px;
}
@media screen and (min-width: 37.5em) {
  .top-grid {
    padding-top: 50px;
  }
}

.top-item {
  width: 336px;
  height: 370px;
  padding: 15px 15px 10px 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  -webkit-transition: background-color 0.8s cubic-bezier(0.39, 0.57, 0.56, 1);
  transition: background-color 0.8s cubic-bezier(0.39, 0.57, 0.56, 1);
  overflow: visible;
}
@media screen and (min-width: 37.5em) {
  .top-item {
    padding: 25px 25px 15px 25px;
    height: 400px;
  }
}

.top-item a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}

.top-item:hover {
  background-color: #fff;
}

.top-item-content {
  position: relative;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.top-item-image {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
  overflow: hidden;
}
.top-item-image:hover img {
  -webkit-animation: flashImg 0.4s;
          animation: flashImg 0.4s;
}
@-webkit-keyframes flashImg {
  0% {
    -webkit-filter: brightness(800%);
            filter: brightness(800%);
  }
  100% {
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
  }
}
@keyframes flashImg {
  0% {
    -webkit-filter: brightness(800%);
            filter: brightness(800%);
  }
  100% {
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
  }
}
.top-item-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.top-item-image .img-color {
  display: block;
}
.top-item-image .img-duo {
  position: absolute;
  inset: 0;
  -webkit-filter: url("#duotone");
          filter: url("#duotone");
  opacity: 1;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

.top-item:hover .top-item-image .img-duo {
  opacity: 0;
}

.top-item:hover .top-item-image {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(18, 16, 16, 0)), color-stop(50%, rgba(0, 0, 0, 0.1))), -webkit-gradient(linear, left top, right top, from(rgba(255, 0, 0, 0.05)), color-stop(rgba(0, 255, 0, 0.02)), to(rgba(0, 0, 255, 0.05)));
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.05), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.05));
  background-size: 100% 4px, 3px 100%;
}

/* 下の線：中間パターン + 右側の構造 */
.top-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #9ba9b6), to(#9ba9b6)) 0 0/var(--thick-line) 1px no-repeat, repeating-linear-gradient(to right, #9ba9b6 0px, #9ba9b6 1px, transparent 1px, transparent 2px) calc(var(--start-offset)) 0/calc(100% - var(--total-offset)) 1px no-repeat, -webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(transparent), to(#9ba9b6)) 0 0/100% 1px no-repeat;
  background: linear-gradient(to right, #9ba9b6 0, #9ba9b6 var(--thick-line)) 0 0/var(--thick-line) 1px no-repeat, repeating-linear-gradient(to right, #9ba9b6 0px, #9ba9b6 1px, transparent 1px, transparent 2px) calc(var(--start-offset)) 0/calc(100% - var(--total-offset)) 1px no-repeat, linear-gradient(to right, transparent 0, transparent calc(100% - var(--thick-line)), #9ba9b6 calc(100% - var(--thick-line))) 0 0/100% 1px no-repeat;
  z-index: 3;
}

/* 右線用のラッパー - デフォルトで非表示 */
.top-item-right {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* 右の線：最初と最後の太い線（8px） */
.top-item-right::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#9ba9b6), color-stop(transparent), to(transparent)), -webkit-gradient(linear, left top, left bottom, from(transparent), to(#9ba9b6));
  background: linear-gradient(to bottom, #9ba9b6 var(--thick-line), transparent var(--thick-line), transparent var(--start-offset)), linear-gradient(to bottom, transparent calc(100% - var(--thick-line)), #9ba9b6 calc(100% - var(--thick-line)));
  background-repeat: no-repeat;
  z-index: 2;
}

/* 右の線：中間パターン */
.top-item-right::after {
  content: "";
  position: absolute;
  top: var(--start-offset);
  right: 0;
  width: 1px;
  height: calc(100% - var(--total-offset));
  background: linear-gradient(to bottom, #9ba9b6, #9ba9b6 1px, transparent 1px, transparent 2px);
  background-repeat: repeat-y;
  background-size: 1px 2px;
  z-index: 1;
}

/* モバイル: 最後の要素の下線を消す */
.top-item:last-child::before,
.top-item:last-child::after {
  display: none;
}

.top-item h3 {
  margin: 0 0 10px 0;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #2A495A;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}

.top-item p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.top-item-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: auto;
}

p.top-item-category a {
  position: relative;
  display: inline-block;
  font-size: 1.1rem;
  width: 120px;
  font-weight: 600;
  color: #2A495A;
  text-align: center;
  padding: 3px 0;
  border-radius: 20px;
  background-color: #fff;
  -webkit-transition: background-color 0.5s cubic-bezier(0.39, 0.57, 0.56, 1), color 0.5s cubic-bezier(0.39, 0.57, 0.56, 1);
  transition: background-color 0.5s cubic-bezier(0.39, 0.57, 0.56, 1), color 0.5s cubic-bezier(0.39, 0.57, 0.56, 1);
  z-index: 30;
}

.top-item:hover p.top-item-category a {
  background-color: #f0f0e9;
}

.top-item:hover p.top-item-category a:hover {
  background-color: #2A495A;
  color: #fff;
}

p.top-item-date {
  position: relative;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.15rem;
  padding: 2px 0px 0 0;
  color: #2A495A;
}

p.top-item-date::before {
  content: "";
  position: absolute;
  bottom: 5px;
  left: -10px;
  width: 5px;
  height: 1px;
  background-color: #5a7287;
}

/* ===== タブレット: 2列（660px～989px） ===== */
@media (min-width: 660px) and (max-width: 989px) {
  .top-grid {
    grid-template-columns: repeat(2, 336px);
  }
  /* 1列目（奇数）の右線を表示 */
  .top-item:nth-child(2n+1) .top-item-right {
    display: block;
  }
  /* 最後の要素の下線をリセット */
  .top-item:last-child::before,
  .top-item:last-child::after {
    display: block;
  }
  /* 最後の行の下線を消す（2列対応） */
  .top-item:nth-last-child(-n+2)::before,
  .top-item:nth-last-child(-n+2)::after {
    display: none;
  }
  /* 最後の行が1個だけの場合の対応 */
  .top-item:nth-child(2n+1):nth-last-child(1)::before,
  .top-item:nth-child(2n+1):nth-last-child(1)::after {
    display: none;
  }
}
/* ===== デスクトップ: 3列（990px～） ===== */
@media (min-width: 990px) {
  .top-grid {
    grid-template-columns: repeat(3, 336px);
  }
  /* 全ての右線を一旦非表示 */
  .top-item .top-item-right {
    display: none;
  }
  /* 1列目と2列目（3の倍数以外）の右線を表示 */
  .top-item:not(:nth-child(3n)) .top-item-right {
    display: block;
  }
  /* タブレット用の下線ルールをリセット */
  .top-item:nth-last-child(-n+2)::before,
  .top-item:nth-last-child(-n+2)::after {
    display: block;
  }
  /* 最後の行の下線を消す（3列対応） */
  .top-item:nth-last-child(-n+3)::before,
  .top-item:nth-last-child(-n+3)::after {
    display: none;
  }
  /* 最後の行が1個または2個の場合の対応 */
  .top-item:nth-child(3n+1):nth-last-child(1)::before,
  .top-item:nth-child(3n+1):nth-last-child(1)::after,
  .top-item:nth-child(3n+1):nth-last-child(2)::before,
  .top-item:nth-child(3n+1):nth-last-child(2)::after,
  .top-item:nth-child(3n+1):nth-last-child(2) ~ .top-item::before,
  .top-item:nth-child(3n+1):nth-last-child(2) ~ .top-item::after {
    display: none;
  }
}
/* ============================================
     ぱんくず
     ============================================ */
.breadcrumb_area {
  margin: 0 15px;
}

.breadcrumb {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0 8px 0;
  border-bottom: solid 1px #2A495A;
}

.breadcrumb ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  list-style: none;
  padding: 0 10px;
  margin: 0;
  overflow: hidden;
}

.breadcrumb li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  color: #2A495A;
  white-space: nowrap;
}

.breadcrumb li a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2px 0;
  color: #2A495A;
  text-decoration: none;
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.breadcrumb li a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 103%;
  height: 1px;
  background: #2A495A;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.breadcrumb li a:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

.breadcrumb li:not(:last-child)::after {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin: 2px 8px 0 6px;
  border-top: solid 1px #2A495A;
  border-right: solid 1px #2A495A;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.breadcrumb li:last-child {
  display: block;
  max-width: 700px;
  -ms-flex-negative: 1;
      flex-shrink: 1; /* タイトルだけが画面幅に合わせて縮むように設定 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================
     ヘッダー
     ============================================ */
.single__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 20px;
  color: #2A495A;
}
@media screen and (min-width: 37.5em) {
  .single__header {
    margin-bottom: 60px;
  }
}

.single__header-left__title a {
  font-size: 5rem;
  font-family: "nimbus-sans", sans-serif;
  letter-spacing: -0.4rem;
  word-spacing: -0.3rem;
  line-height: 0.9;
  color: #2A495A;
  margin-left: -3px;
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.single__header-left__title a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 103%;
  height: 3px;
  background: #2A495A;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.single__header-left__title a:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
@media screen and (min-width: 37.5em) {
  .single__header-left__title a {
    font-size: 6rem;
    position: relative;
    display: inline-block;
    text-decoration: none;
  }
  .single__header-left__title a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 103%;
    height: 4px;
    background: #2A495A;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }
  .single__header-left__title a:hover::before {
    -webkit-transform-origin: left top;
            transform-origin: left top;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
.single__header-left__category a {
  font-size: 3.2rem;
  font-family: "nimbus-sans", sans-serif;
  letter-spacing: -0.25rem;
  word-spacing: -0.35rem;
  line-height: 1;
  color: #2A495A;
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.single__header-left__category a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 103%;
  height: 2px;
  background: #2A495A;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.single__header-left__category a:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
@media screen and (min-width: 37.5em) {
  .single__header-left__category a {
    font-size: 3.8rem;
    position: relative;
    display: inline-block;
    text-decoration: none;
  }
  .single__header-left__category a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 103%;
    height: 4px;
    background: #2A495A;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }
  .single__header-left__category a:hover::before {
    -webkit-transform-origin: left top;
            transform-origin: left top;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
.single__header-left__tag a {
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.05rem;
  word-spacing: -0.35rem;
  color: #2A495A;
  margin-bottom: 4px;
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.single__header-left__tag a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 103%;
  height: 2px;
  background: #2A495A;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.single__header-left__tag a:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.single__header-left__pr {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02rem;
  line-height: 1.5;
  margin-bottom: 3px;
}
.single__header-left__pr i {
  font-size: 1.5rem;
  margin-right: 2px;
  vertical-align: -2px;
}
.single__header-left__date {
  font-size: 1.3rem;
  font-family: "Roboto Condensed", sans-serif;
  letter-spacing: -0.01rem;
  line-height: 1.8;
}
.single__header-left__date i {
  font-size: 1.5rem;
  margin-right: 3px;
  vertical-align: -2px;
}

.single__header-right {
  display: none;
}
@media screen and (min-width: 37.5em) {
  .single__header-right {
    display: block;
    padding: 8px 0 0 0;
  }
}
.single__header-right .url__btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 10px 0;
  margin-bottom: 15px;
  border: solid 1px #2A495A;
  border-radius: 30px;
  font-weight: 600;
  text-align: center;
  color: #2A495A;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.single__header-right .url__btn a::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("/img/urlcopy.svg") no-repeat center/contain;
}
.single__header-right .url__btn a:hover {
  background-color: #fff;
}
.single__header-right .psearch__btn form {
  position: relative;
  width: 280px;
  margin-bottom: 15px;
}
.single__header-right .psearch__btn-input {
  display: block;
  width: 100%;
  text-align: center;
  text-indent: 20px;
  padding: 10px 40px 10px 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: solid 1px #2A495A;
  border-radius: 30px;
  outline: none;
  background: transparent;
  font-weight: 600;
  color: #2A495A;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.single__header-right .psearch__btn-input::-webkit-input-placeholder {
  color: #2A495A;
}
.single__header-right .psearch__btn-input::-moz-placeholder {
  color: #2A495A;
}
.single__header-right .psearch__btn-input:-ms-input-placeholder {
  color: #2A495A;
}
.single__header-right .psearch__btn-input::-ms-input-placeholder {
  color: #2A495A;
}
.single__header-right .psearch__btn-input::placeholder {
  color: #2A495A;
}
.single__header-right .psearch__btn-input:focus {
  text-align: left;
  text-indent: 0;
  padding-left: 20px;
  background-color: #fff;
}
.single__header-right .psearch__btn-input:focus::-webkit-input-placeholder {
  opacity: 0;
}
.single__header-right .psearch__btn-input:focus::-moz-placeholder {
  opacity: 0;
}
.single__header-right .psearch__btn-input:focus:-ms-input-placeholder {
  opacity: 0;
}
.single__header-right .psearch__btn-input:focus::-ms-input-placeholder {
  opacity: 0;
}
.single__header-right .psearch__btn-input:focus::placeholder {
  opacity: 0;
}
.single__header-right .psearch__btn-submit {
  position: absolute;
  right: 20px;
  top: 53%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: url("/img/psearch.svg") no-repeat center/contain;
  cursor: pointer;
}

.single-search--input {
  display: block;
  width: 100%;
  height: 47px;
  z-index: 10;
  padding: 0 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: solid 1px #a5b9cb;
  border-radius: 25px;
  outline: none;
  background: #fff;
  font-size: 1.4rem;
  color: #666;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.single-search input[type=text] {
  -webkit-appearance: none;
  font-size: 16px;
  color: #5b809f;
}

.single-search--input:focus {
  background: #f5f8fa;
}

.single-search--input::-webkit-input-placeholder {
  font-size: 1.45rem;
  color: #5b809f;
}

.single-search--input::-moz-placeholder {
  font-size: 1.45rem;
  color: #5b809f;
}

.single-search--input:-ms-input-placeholder {
  font-size: 1.45rem;
  color: #5b809f;
}

.single-search--input::-ms-input-placeholder {
  font-size: 1.45rem;
  color: #5b809f;
}

.single-search--input::placeholder {
  font-size: 1.45rem;
  color: #5b809f;
}

.single-search--submit {
  display: block;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 25px;
  outline: none;
  background: url(../img/search.svg) no-repeat 10px 9px #5b809f;
  line-height: 47px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

/* ============================================
     目次
     ============================================ */
.mokuji {
  padding: 2rem 1rem 2.5rem 1rem;
  background-color: #f6faf5;
}
@media screen and (min-width: 37.5em) {
  .mokuji {
    padding: 2.2rem 3rem 4.5rem 3rem;
  }
}

.mokuji_title {
  margin-bottom: 10px;
  padding: 0 10px 10px 0px;
  border-bottom: solid 1px #7896b0;
  font-size: 1.4rem;
  text-align: center;
}
@media screen and (min-width: 37.5em) {
  .mokuji_title {
    padding: 0 10px 15px 0px;
    font-size: 1.6rem;
  }
}

.mokuji_title i {
  font-size: 2.5rem;
  margin-right: 3px;
  vertical-align: -5px;
  opacity: 0.7;
}

.mokuji ul {
  list-style: none;
  padding: 0 10px;
  font-size: 1.5rem;
}

.mokuji_area ul {
  list-style: none;
  padding: 0 15px;
  font-size: 1.4rem;
}

.mokuji li,
.mokuji_area li,
.mokuji_sub {
  margin-left: 8px;
  border-bottom: dotted 1px #a5b9cb;
  line-height: 20px;
}

.mokuji li a,
.mokuji_area li a,
.mokuji_sub a {
  position: relative;
  display: block;
  padding: 10px 0 10px 10px;
  margin-left: -5px;
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  letter-spacing: 0.08rem;
  color: #2A495A;
  -webkit-transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s;
  transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s;
}
@media screen and (min-width: 37.5em) {
  .mokuji li a,
  .mokuji_area li a,
  .mokuji_sub a {
    padding: 13px 0 13px 10px;
  }
}
.mokuji li a,
.mokuji_area li a,
.mokuji_sub a {
  position: relative;
  -webkit-transition: padding-left 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s;
  transition: padding-left 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s;
}
.mokuji li a::before,
.mokuji_area li a::before,
.mokuji_sub a::before {
  content: "→";
  position: absolute;
  left: -10px;
  opacity: 0;
  -webkit-transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2345s;
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2345s;
}
.mokuji li a:hover,
.mokuji_area li a:hover,
.mokuji_sub a:hover {
  padding-left: calc(10px + 22px);
}
.mokuji li a:hover::before,
.mokuji_area li a:hover::before,
.mokuji_sub a:hover::before {
  left: 10px;
  opacity: 1;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.mokuji li b {
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
}

.mokuji_sub {
  padding: 10px 0 10px 10px;
  margin-left: -5px;
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  letter-spacing: 0.08rem;
}

/* ============================================
     見出し
     ============================================ */
.title_h01 {
  padding: 8px 0;
  border-top: solid 1px #2A495A;
  border-bottom: solid 1px #2A495A;
  font-size: clamp(2.4rem, 3vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.05rem;
  line-height: 1.5;
  margin-bottom: clamp(18px, 6vw, 60px);
}
@media screen and (min-width: 37.5em) {
  .title_h01 {
    padding: 12px 0;
  }
}

.title_h02 {
  padding: 8px 12px 10px 12px;
  background-color: #2A495A;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.05rem;
  line-height: 1.2;
  color: #f0f0e9;
  margin-bottom: clamp(18px, 4vw, 40px);
}
@media screen and (min-width: 37.5em) {
  .title_h02 {
    padding: 12px 15px 15px 15px;
  }
}

.title_h03 {
  padding: 8px 12px 10px 12px;
  border-left: solid 4px #2A495A;
  background: url(/img/dot_bg.png) repeat 0 100%;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.05rem;
  line-height: 1.2;
  color: #2A495A;
  margin-bottom: clamp(18px, 4vw, 40px);
}
@media screen and (min-width: 37.5em) {
  .title_h03 {
    border-left: solid 6px #2A495A;
    padding: 12px 15px 15px 15px;
  }
}

.title_h04 {
  position: relative;
  padding: 10px 0 18px 0;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.05rem;
  line-height: 1.2;
  color: #2A495A;
  margin-bottom: clamp(18px, 4vw, 40px);
}
@media screen and (min-width: 37.5em) {
  .title_h04 {
    padding: 10px 0 23px 0;
  }
}
.title_h04::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8px;
  background: url(/img/line_bg.png) repeat 0 100%;
}
@media screen and (min-width: 37.5em) {
  .title_h04::after {
    height: 11px;
  }
}

.title_h05 {
  padding: 6px 12px 8px 12px;
  border-left: solid 4px #2A495A;
  background: #f6faf5;
  font-size: clamp(1.8rem, 2.3vw, 2.7rem);
  font-weight: 500;
  letter-spacing: -0.05rem;
  line-height: 1.2;
  color: #2A495A;
  margin-bottom: clamp(18px, 4vw, 40px);
}
@media screen and (min-width: 37.5em) {
  .title_h05 {
    border-left: solid 6px #2A495A;
    padding: 10px 15px 12px 15px;
  }
}

.title_s01 {
  position: relative;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -0.05rem;
  line-height: 1.2;
  color: #2A495A;
  margin-bottom: clamp(2px, 1.5vw, 7px);
}

.title_s02 {
  position: relative;
  padding: 10px 0 12px 0;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.05rem;
  line-height: 1.2;
  color: #2A495A;
  margin-bottom: clamp(10px, 1.5vw, 20px);
}
@media screen and (min-width: 37.5em) {
  .title_s02 {
    padding: 10px 0 18px 0;
  }
}
.title_s02::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: url(/img/line_bg.png) repeat 0 100%;
}
@media screen and (min-width: 37.5em) {
  .title_s02::after {
    height: 8px;
  }
}

.title_s03 {
  position: relative;
  padding-left: 1.5em;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 500;
  line-height: 1.4;
  color: #2A495A;
  margin-bottom: clamp(10px, 1.5vw, 20px);
}
@media screen and (min-width: 37.5em) {
  .title_s03 {
    padding-left: 1.3em;
  }
}
.title_s03::before {
  content: "\e900";
  position: absolute;
  left: 0;
  top: 0.23em;
  display: inline-block;
  font-family: "icomoon" !important;
  font-size: 1.1em;
  line-height: 1;
}

.title_s04 {
  position: relative;
  padding-left: 18px;
  font-size: clamp(1.5rem, 3vw, 1.7rem);
  font-weight: bold;
  letter-spacing: 0.01rem;
  margin-bottom: 10px;
}
.title_s04::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(4px, 1.4vw, 10px);
  width: 6px;
  height: 6px;
  border: solid 3px #2A495A;
  border-radius: 100%;
}

.title_s05 {
  padding: 9px 12px;
  background-color: #2A495A;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 400;
  letter-spacing: -0.05rem;
  line-height: 1.2;
  color: #f0f0e9;
  margin-bottom: clamp(15px, 4vw, 20px);
}
@media screen and (min-width: 37.5em) {
  .title_s05 {
    padding: 12px 15px;
  }
}

.title_s06 {
  padding: 6px 12px 8px 12px;
  border-left: solid 3px #2A495A;
  background: #f6faf5;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.05rem;
  line-height: 1.2;
  color: #2A495A;
  margin-bottom: clamp(15px, 4vw, 20px);
}
@media screen and (min-width: 37.5em) {
  .title_s06 {
    border-left: solid 4px #2A495A;
    padding: 10px 15px 12px 15px;
  }
}

.title_codepen {
  position: relative;
  margin-left: 28px;
  margin-bottom: clamp(5px, 2vw, 10px);
  font-family: "Roboto Condensed", sans-serif;
  font-size: clamp(2.2rem, 5vw, 3rem);
  letter-spacing: 0.04rem;
  color: #2A495A;
}

.title_codepen::after {
  content: "";
  position: absolute;
  left: -19px;
  top: clamp(10px, 4.5vw, 21px);
  display: block;
  width: 10px;
  height: 2px;
  background-color: #2A495A;
}

.detail_codepen {
  padding: 14px 2px 5px 2px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.08rem;
}

.detail_codepen ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  list-style: none;
}

.detail_codepen li a {
  color: #2A495A;
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.detail_codepen li a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 103%;
  height: 1px;
  background: #0044CC;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.detail_codepen li a:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

/* ============================================
     連番
     ============================================ */
.single__group {
  counter-reset: item;
}

.single__group .num__title {
  counter-increment: item;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -0.05rem;
  line-height: 1.5;
  margin-bottom: clamp(15px, 2vw, 30px);
}

.single__group .num__title::before {
  content: counter(item) "";
  display: inline-block;
  text-align: center;
  width: clamp(25px, 5vw, 32px);
  margin-right: clamp(13px, 2vw, 17px);
  padding-right: clamp(10px, 2vw, 15px);
  border-right: solid 2px #2A495A;
  font-family: "nimbus-sans", sans-serif;
  font-size: clamp(3rem, 4vw, 4rem);
  letter-spacing: -0.5rem;
  line-height: 1;
  vertical-align: clamp(-5px, 4vw, -1px);
}

.single__group02 {
  counter-reset: item;
}

.single__group02 .num__title {
  counter-increment: item;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -0.05rem;
  line-height: 1.6;
  margin-bottom: clamp(1.5rem, 2vw, 3rem);
}

.single__group02 .num__title::before {
  content: counter(item) "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(3rem, 5.5vw, 4.5rem);
  height: clamp(3rem, 5.5vw, 4.5rem);
  margin-right: clamp(1.2rem, 2vw, 1.6rem);
  margin-top: clamp(0.3rem, 0.5vw, 0.5rem);
  background: #2A495A;
  font-family: "Roboto Condensed", sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 300;
  letter-spacing: 0.05rem;
  color: #f0f0e9;
}

.single__group03 {
  counter-reset: item;
}

.single__group03 .num__title {
  counter-increment: item;
  font-size: clamp(2rem, 4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.05rem;
  line-height: 1.5;
  margin-bottom: clamp(15px, 2vw, 25px);
}

.single__group03 .num__title::before {
  content: counter(item) "";
  display: inline-block;
  text-align: center;
  width: clamp(25px, 5vw, 32px);
  margin-right: clamp(10px, 1.5vw, 12px);
  padding-right: clamp(10px, 2vw, 10px);
  border-right: solid 2px #2A495A;
  font-family: "nimbus-sans", sans-serif;
  font-size: clamp(2.8rem, 4vw, 3.4rem);
  letter-spacing: -0.5rem;
  line-height: 1;
  vertical-align: clamp(-5px, 4vw, -2px);
}

.single__group04 {
  counter-reset: item;
}

.single__group04 .num__title {
  counter-increment: item;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  font-size: clamp(2rem, 4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.05rem;
  line-height: 1.6;
  margin-bottom: clamp(1.5rem, 2vw, 3rem);
}

.single__group04 .num__title::before {
  content: counter(item) "";
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(3rem, 5.5vw, 3.6rem);
  height: clamp(3rem, 5.5vw, 3.6rem);
  margin-right: clamp(0.6rem, 1vw, 1.2rem);
  margin-top: clamp(0.3rem, 1vw, 0.3rem);
  border-radius: 100%;
  background: #2A495A;
  font-family: "Roboto Condensed", sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 300;
  letter-spacing: 0.05rem;
  color: #f0f0e9;
}

/* ============================================
     comment
     ============================================ */
.s_comment {
  position: relative;
  padding: 25px 25px 25px 73px;
  background-color: #f5fbff;
  font-size: 1.3rem;
  letter-spacing: 0.15rem;
  line-height: 1.5;
}

.s_comment:before {
  content: "\e0d8";
  position: absolute;
  top: 50%;
  left: 22px;
  z-index: 1;
  margin-top: -25px;
  font-family: "icomoon" !important;
  font-size: 32px;
  color: #507b9e;
}

.s_comment--caution {
  position: relative;
  padding: 25px 25px 25px 73px;
  background-color: #fffed0;
  font-size: 1.3rem;
  letter-spacing: 0.15rem;
  line-height: 1.5;
}

.s_comment--caution:before {
  content: "\e60b";
  position: absolute;
  top: 50%;
  left: 25px;
  z-index: 1;
  margin-top: -23px;
  font-family: "icomoon" !important;
  font-size: 32px;
  font-size: 2.8rem;
  color: #fdbd0e;
}

.s_comment--info {
  position: relative;
  padding: 25px 25px 25px 73px;
  background-color: #f6faf5;
  font-size: 1.3rem;
  letter-spacing: 0.15rem;
  line-height: 1.5;
}

.s_comment--info:before {
  content: "\e88e";
  position: absolute;
  top: 50%;
  left: 22px;
  z-index: 1;
  margin-top: -26px;
  font-family: "icomoon" !important;
  font-size: 32px;
  color: #4b7396;
}

/* ============================================
     エリア
     ============================================ */
.sns__btn {
  padding: 3px 0 0 0;
}

.sns__btn ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  z-index: 1;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 34px;
  margin: 0 auto;
  padding: 0 15px;
  list-style: none;
}

.sns__btn li {
  margin: 0 5px;
  border-radius: 50%;
  font-size: 1.5rem;
}

.sns__btn li a {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  line-height: 34px;
  text-align: center;
  letter-spacing: -0.5rem;
  color: #f0f0e9;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.sns__btn li.sf a {
  background-color: #2A495A;
}

.sns__btn li.sf a:hover {
  background-color: #3b5998;
}

.sns__btn li.st a {
  background-color: #2A495A;
}

.sns__btn li.st a:hover {
  background-color: #33ccff;
}

.sns__btn li.sh a {
  background-color: #2A495A;
}

.sns__btn li.sh a:hover {
  background-color: #008fde;
}

.sns__btn li.sp a {
  background-color: #2A495A;
}

.sns__btn li.sp a:hover {
  background-color: #ef4156;
}

.sns__btn li i {
  margin-right: 4px;
  vertical-align: -1px;
}

.single__article {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 0 50px 0;
  font-size: clamp(14px, 2.2vw, 18px);
  color: #2A495A;
}
.single__article strong {
  font-weight: 700;
}

.single__title {
  display: inline-block;
  margin-top: -8px;
  margin-bottom: 15px;
  padding: 0;
  font-family: "YakuHanJPs", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Meiryo", sans-serif !important;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.08rem;
  text-align: left;
  color: #2A495A;
}
@media screen and (min-width: 37.5em) {
  .single__title {
    margin-bottom: 23px;
  }
}

.single__top-img {
  margin-bottom: 20px;
}
.single__top-img img {
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.box-img {
  border: solid 10px #e6e6da;
}

.font-img {
  width: 100%;
  border-radius: 3px;
  background-color: #3c3c3c;
  text-align: center;
}

.tlink {
  text-align: center;
  color: #0044CC !important;
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.tlink::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 103%;
  height: 1px;
  background: #0044CC;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.tlink:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.tlink i {
  margin-right: 5px;
}

/* ============================================
     text area
     ============================================ */
.s__text {
  padding: 0 1.5rem;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.5;
}
@media screen and (min-width: 37.5em) {
  .s__text {
    line-height: 1.8;
  }
}
.s__text span.b {
  padding: 6px 11px;
  margin-right: 6px;
  border-radius: 2px;
  background-color: #2A495A;
  font-size: 1.1rem;
  color: #fff;
}
@media screen and (min-width: 37.5em) {
  .s__text span.b {
    padding: 8px 15px;
    margin-right: 8px;
    font-size: 1.3rem;
  }
}
.s__text b {
  font-weight: 700;
}
.s__text .price {
  font-family: "Roboto Condensed", sans-serif !important;
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  letter-spacing: 0.03rem;
}

/* ============================================
     NOTEBOOK
     ============================================ */
.notebook {
  padding: 0em 1.5em;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2.2em - 1px), #c8d5df calc(2.2em - 1px), #c8d5df 2.2em);
  background-size: 100% 2.2em;
  background-attachment: local;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 2.2;
}

.notebook p {
  margin: 0;
}

/* ============================================
     ANIMATED HIGHLIGHT（マーカー）
     ============================================ */
.highlight {
  padding: 0 0.15em;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(55%, transparent), color-stop(55%, #faf05f));
  background: linear-gradient(transparent 55%, #faf05f 55%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
}

.highlight.is-active {
  background-size: 100% 100%;
}

/* ============================================
     ANIMATED UNDERLINE（下線）
     ============================================ */
.underline {
  padding-bottom: 0px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d44), to(#d44));
  background-image: linear-gradient(#d44, #d44);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  text-decoration: none;
}

.underline.is-active {
  background-size: 100% 2px;
}

/* ============================================
     COLOR VARIATIONS
     ============================================ */
.highlight--pink {
  padding: 0 0.15em;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(55%, transparent), color-stop(55%, #ffb3c6));
  background: linear-gradient(transparent 55%, #ffb3c6 55%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
}

.highlight--green {
  padding: 0 0.15em;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(55%, transparent), color-stop(55%, #b8f0c8));
  background: linear-gradient(transparent 55%, #b8f0c8 55%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
}

.underline--blue {
  padding-bottom: 2px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#4a90d9), to(#4a90d9));
  background-image: linear-gradient(#4a90d9, #4a90d9);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
}

/* ============================================
     クロス枠
     ============================================ */
.outline-cs {
  position: relative;
  padding: clamp(23px, 3vw, 40px);
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.5;
}

.outline-cs::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  right: -10px;
  height: 1px;
  background: #687e91;
}

.outline-cs::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -10px;
  right: -10px;
  height: 1px;
  background: #687e91;
}

.outline-cs .line-left {
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: 0;
  width: 1px;
  background: #687e91;
}

.outline-cs .line-right {
  position: absolute;
  top: -10px;
  bottom: -10px;
  right: 0;
  width: 1px;
  background: #687e91;
}

/* ============================================
     鍵カッコ枠
     ============================================ */
.sb-box {
  --sb-size: 13px;
  --sb-color: #687e91;
  --sb-width: 1px;
  padding: clamp(18px, 3vw, 30px);
  font-size: clamp(14px, 2.2vw, 16px);
  letter-spacing: 0.1em;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) top left/var(--sb-size) var(--sb-width) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) top left/var(--sb-width) var(--sb-size) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) top right/var(--sb-size) var(--sb-width) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) top right/var(--sb-width) var(--sb-size) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) bottom left/var(--sb-size) var(--sb-width) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) bottom left/var(--sb-width) var(--sb-size) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) bottom right/var(--sb-size) var(--sb-width) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) bottom right/var(--sb-width) var(--sb-size) no-repeat;
  background: linear-gradient(var(--sb-color), var(--sb-color)) top left/var(--sb-size) var(--sb-width) no-repeat, linear-gradient(var(--sb-color), var(--sb-color)) top left/var(--sb-width) var(--sb-size) no-repeat, linear-gradient(var(--sb-color), var(--sb-color)) top right/var(--sb-size) var(--sb-width) no-repeat, linear-gradient(var(--sb-color), var(--sb-color)) top right/var(--sb-width) var(--sb-size) no-repeat, linear-gradient(var(--sb-color), var(--sb-color)) bottom left/var(--sb-size) var(--sb-width) no-repeat, linear-gradient(var(--sb-color), var(--sb-color)) bottom left/var(--sb-width) var(--sb-size) no-repeat, linear-gradient(var(--sb-color), var(--sb-color)) bottom right/var(--sb-size) var(--sb-width) no-repeat, linear-gradient(var(--sb-color), var(--sb-color)) bottom right/var(--sb-width) var(--sb-size) no-repeat;
}

.sb-box-img {
  --sb-size: 15px;
  --sb-color: #687e91;
  --sb-width: 1px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: clamp(50px, 50vw, 480px);
  background: -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) top left/var(--sb-size) var(--sb-width) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) top left/var(--sb-width) var(--sb-size) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) top right/var(--sb-size) var(--sb-width) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) top right/var(--sb-width) var(--sb-size) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) bottom left/var(--sb-size) var(--sb-width) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) bottom left/var(--sb-width) var(--sb-size) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) bottom right/var(--sb-size) var(--sb-width) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--sb-color)), to(var(--sb-color))) bottom right/var(--sb-width) var(--sb-size) no-repeat, url(/img/dot_bg.png) repeat 0 100%;
  background: linear-gradient(var(--sb-color), var(--sb-color)) top left/var(--sb-size) var(--sb-width) no-repeat, linear-gradient(var(--sb-color), var(--sb-color)) top left/var(--sb-width) var(--sb-size) no-repeat, linear-gradient(var(--sb-color), var(--sb-color)) top right/var(--sb-size) var(--sb-width) no-repeat, linear-gradient(var(--sb-color), var(--sb-color)) top right/var(--sb-width) var(--sb-size) no-repeat, linear-gradient(var(--sb-color), var(--sb-color)) bottom left/var(--sb-size) var(--sb-width) no-repeat, linear-gradient(var(--sb-color), var(--sb-color)) bottom left/var(--sb-width) var(--sb-size) no-repeat, linear-gradient(var(--sb-color), var(--sb-color)) bottom right/var(--sb-size) var(--sb-width) no-repeat, linear-gradient(var(--sb-color), var(--sb-color)) bottom right/var(--sb-width) var(--sb-size) no-repeat, url(/img/dot_bg.png) repeat 0 100%;
}
.sb-box-img img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================
     切り込み枠
     ============================================ */
.slash-box-wrapper {
  padding: 10px;
  overflow: hidden;
}

.slash-box {
  position: relative;
  padding: clamp(20px, 3vw, 35px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #687e91;
  background-color: #f6faf5;
  font-size: clamp(14px, 2.2vw, 16px);
}

.slash-box::before,
.slash-box::after {
  content: "";
  position: absolute;
  width: 45px;
  height: 45px;
  z-index: 1;
  background: #f0f0e9;
}

.slash-box::before {
  top: -30px;
  left: -30px;
  border-bottom: 1px solid #687e91;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.slash-box::after {
  bottom: -30px;
  right: -30px;
  border-top: 1px solid #687e91;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.single_case {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  background: #e6e6da;
  text-align: center;
}
@media screen and (min-width: 37.5em) {
  .single_case {
    -ms-flex-pack: distribute;
        justify-content: space-around;
    padding: 25px 10px;
  }
}

.single_case p {
  width: 100%;
  margin: 0;
}
.single_case p:first-child {
  margin-bottom: 20px;
}
.single_case p img {
  border-radius: 6px;
}
@media screen and (min-width: 37.5em) {
  .single_case p {
    width: 46%;
  }
  .single_case p:first-child {
    margin-bottom: 0px;
  }
}

/* ============================================
     Button
     ============================================ */
.link a {
  position: relative;
  display: block;
  z-index: 1;
  padding: 12px 20px;
  background-color: #f6faf5;
  font-size: clamp(13px, 2.2vw, 16px);
  letter-spacing: 0.01em;
  color: #2A495A;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.link a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: url(/img/dot_bg.png) repeat 0 100%, #f0f0e9;
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.link a:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

.link img {
  display: none;
}

.link span,
.a_link span,
.o_link span {
  font-size: clamp(13px, 2.2vw, 16px);
  margin-right: 5px;
  vertical-align: -1px;
}

.a_link a {
  position: relative;
  display: block;
  max-width: 650px;
  z-index: 1;
  padding: clamp(12px, 2vw, 15px) 0;
  margin: 0 auto;
  background-color: #01d401;
  font-size: clamp(13px, 2.2vw, 16px);
  letter-spacing: 0.05rem;
  text-align: center;
  color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.a_link a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background: #00e931;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: scale(1, 0);
          transform: scale(1, 0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.a_link a:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

.a_link__text {
  margin-bottom: 7px;
  font-size: 1.35rem;
  font-weight: 500;
  text-align: center;
  color: #01b901;
}

.o_link a {
  position: relative;
  display: block;
  max-width: 650px;
  z-index: 1;
  padding: clamp(12px, 2vw, 15px) 0;
  margin: 0 auto;
  background-color: #ff6600;
  font-size: clamp(13px, 2.2vw, 16px);
  letter-spacing: 0.05rem;
  text-align: center;
  color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.o_link a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background: #ff9000;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: scale(1, 0);
          transform: scale(1, 0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.o_link a:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

.o_link__text {
  margin-bottom: 7px;
  font-size: 1.35rem;
  font-weight: 500;
  text-align: center;
  color: #ff6600;
}

/* ============================================
     関連枠
     ============================================ */
.blog_card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: clamp(15px, 2.2vw, 18px);
  background-color: #f6faf5;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.blog_card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, #9ba9b6 1px, transparent 1px) no-repeat left top, linear-gradient(to bottom, #9ba9b6 1px, transparent 1px) no-repeat left top, linear-gradient(to left, #9ba9b6 1px, transparent 1px) no-repeat right top, linear-gradient(to bottom, #9ba9b6 1px, transparent 1px) no-repeat right top;
  background-size: 8px 8px;
}
.blog_card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, #9ba9b6 1px, transparent 1px) no-repeat left bottom, linear-gradient(to top, #9ba9b6 1px, transparent 1px) no-repeat left bottom, linear-gradient(to left, #9ba9b6 1px, transparent 1px) no-repeat right bottom, linear-gradient(to top, #9ba9b6 1px, transparent 1px) no-repeat right bottom;
  background-size: 8px 8px;
}

.blog_card:hover {
  background-color: #fff;
}

.blog_card a {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  color: #2A495A;
}

.blog_card p {
  margin-bottom: 0;
}

.blog_card_l {
  width: 110px;
  margin-right: 18px;
}

.blog_card_r {
  width: 100%;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.blog_card_h2 {
  padding: 3px 0;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: bold;
  line-height: 1.2;
  color: #2A495A;
}

.blog_card--text {
  display: none;
  padding: 5px 0;
  font-size: 1.15rem;
}
@media screen and (min-width: 37.5em) {
  .blog_card--text {
    display: block;
  }
}

.blog_card_r .cite {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.1rem;
  color: blue;
}

/* ============================================
     Amazon & rakuten
     ============================================ */
.s_amaraku {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: clamp(18px, 3vw, 30px);
  background-color: #fff;
}

.s_amaraku_img {
  width: 100%;
  margin: 0 0 20px 0;
  text-align: center;
}
@media screen and (min-width: 37.5em) {
  .s_amaraku_img {
    width: 150px;
    margin: 0 30px 0 0;
  }
}

.s_amaraku_img img {
  max-width: 150px;
  max-height: 150px;
}

.s_amaraku_text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: clamp(1.5rem, 2.2vw, 1.8rem);
  font-weight: bold;
  letter-spacing: 0.02rem;
  line-height: clamp(2rem, 2.2vw, 2.4rem);
}

.s_amaraku_text p {
  padding: 8px 0;
  font-size: 1.2rem;
  font-weight: normal;
  color: #2A495A;
}

.s_amaraku_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: auto;
  text-align: center;
}

.s_amaraku_btn i {
  margin-right: 5px;
  vertical-align: -1px;
}

.s_amaraku_btn .btn100 {
  width: 100% !important;
  letter-spacing: 0.08rem;
}

.s_amaraku_btn .amazon_all {
  width: 100%;
}

.s_amaraku_btn .amazon,
.s_amaraku_btn .rakuten {
  width: 48%;
}

.s_amaraku_btn .amazon a,
.s_amaraku_btn .amazon_all a {
  background-color: #ffd700;
  color: #000;
}

.s_amaraku_btn .rakuten a {
  background-color: #d80000;
  color: #fff;
}

.s_amaraku_btn .rakuten img {
  display: none;
}

.s_amaraku_btn .amazon a::before,
.s_amaraku_btn .amazon_all a::before {
  background: #fff100;
}

.s_amaraku_btn .rakuten a::before {
  background: #f72626;
}

.s_amaraku_btn .amazon a,
.s_amaraku_btn .amazon_all a,
.s_amaraku_btn .rakuten a {
  position: relative;
  display: block;
  z-index: 1;
  padding: clamp(12px, 1.5vw, 13px) 0;
  font-size: clamp(13px, 2.2vw, 15px);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.s_amaraku_btn .amazon a::before,
.s_amaraku_btn .amazon_all a::before,
.s_amaraku_btn .rakuten a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: scale(1, 0);
          transform: scale(1, 0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.s_amaraku_btn .amazon a:hover::before,
.s_amaraku_btn .amazon_all a:hover::before,
.s_amaraku_btn .rakuten a:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

/* ============================================
     Single PageLink
     ============================================ */
.single_pagelink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: auto 15px 50px 15px;
  font-size: 1.6rem;
}

.single_pagelink .page_l,
.single_pagelink .page_r {
  position: relative;
  width: 48%;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.single_pagelink .icon-pa_l,
.single_pagelink .icon-pa_r {
  color: #2A495A;
}

.p_btn a {
  display: block;
  overflow: hidden;
  padding: 18px 10px;
  border-bottom: solid 1px #2A495A;
  border-top: solid 1px #2A495A;
  font-weight: 700;
  text-align: center;
  color: #2A495A;
}

.p_btn:before {
  position: absolute;
  height: 100%;
  font-size: 119%;
  line-height: 55px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.p_btnr:before {
  top: 0;
  right: 15%;
  opacity: 0;
}

.p_btnr:hover:before {
  right: 8%;
  opacity: 1;
}

.p_btnl:before {
  top: 0;
  left: 15%;
  opacity: 0;
}

.p_btnl:hover:before {
  left: 8%;
  opacity: 1;
}

/* ============================================
     Single point
     ============================================ */
.single_point {
  position: relative;
  padding: 28px;
  border-radius: 5px;
  background-color: #f6faf5;
  color: #2A495A;
}

.single_point_title {
  position: absolute;
  display: inline-block;
  top: -16px;
  left: 11px;
  padding: 8px 18px;
  border-radius: 15px;
  background-color: #2A495A;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
}

.single_list_num {
  counter-reset: my-counter;
  list-style: none;
}

.single_list_num li {
  position: relative;
  padding: 1px 1px 1px 30px;
  margin: 7px 0;
  letter-spacing: 0.08rem;
  line-height: 1.5;
}

.single_list_num li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  position: absolute;
  top: 5px;
  left: 0px;
  display: block;
  text-align: center;
  width: 23px;
  height: 23px;
  padding: 0 0 0 1px;
  border-radius: 50%;
  background-color: #2A495A;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.3rem;
  line-height: 23px;
  color: #fff;
}

.single_list {
  list-style: none;
  color: #2A495A;
}

.single_list li {
  position: relative;
  padding: 1px 0 1px 25px;
  margin: 7px 0;
  letter-spacing: 0.06rem;
  line-height: 23px;
}

.single_list li:before {
  content: "\e900";
  position: absolute;
  top: 1px;
  left: 0px;
  z-index: 1;
  font-family: "icomoon" !important;
  font-size: 1.9rem;
  color: var(--color-05);
}

.faq-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
}

.faq-item {
  padding: 20px;
  border-radius: 8px;
  background: #f6faf5;
}
@media screen and (min-width: 37.5em) {
  .faq-item {
    padding: 30px;
  }
}

.faq-question {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 15px;
  margin-bottom: 10px;
}

.q-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2A495A;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1em;
  font-weight: 700;
  color: #f6faf5;
}
@media screen and (min-width: 37.5em) {
  .q-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2em;
  }
}

.question-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-top: 5px;
}

.question-text h3 {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 37.5em) {
  .question-text h3 {
    font-size: 1.9rem;
  }
}

.faq-answer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 15px;
  margin-top: 15px;
}

.a-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 3px;
  background: #7896b0;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1em;
  font-weight: 700;
  color: #f6faf5;
}
@media screen and (min-width: 37.5em) {
  .a-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2em;
  }
}

.answer-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-top: 5px;
}

.answer-text p {
  font-size: 1.4rem;
  line-height: 1.8;
}
@media screen and (min-width: 37.5em) {
  .answer-text p {
    font-size: 1.65rem;
  }
}

.recommend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 15px 25px;
  margin-bottom: 20px;
}

.recommend_img {
  width: 100%;
}
@media screen and (min-width: 37.5em) {
  .recommend_img {
    width: 320px;
  }
}

.recommend_text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: 500;
  line-height: 2.8rem;
}

.rs_campaign {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 15px 20px;
  border-radius: 8px;
  border: solid 3px #01b901;
  background: #f0f0e9;
}

.rs_campaign::after {
  content: "＼ CAMPAIGN ／";
  position: absolute;
  top: -20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  padding: 0 20px;
  background: #f0f0e9;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #01b901;
}

.rs_campaign_ad {
  margin: 0 18px 0 0;
  text-align: center;
}

.rs_campaign_text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: #01b901;
}

.rs_campaign_text .campaign_title {
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: dotted 3px #01b901;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.07rem;
  text-align: center;
}

.rs_campaign_text .campaign_lead {
  padding: 5px 0 15px 0;
  font-family: "Roboto Condensed", sans-serif;
  font-size: clamp(2rem, 2.2vw, 2.4rem);
  font-weight: bold;
  line-height: 3.2rem;
  text-align: center;
}

.rs_campaign_text .campaign_date {
  height: 28px;
  margin-bottom: 15px;
  border-radius: 14px;
  background: #01b901;
  font-size: 1.4rem;
  letter-spacing: 0.2rem;
  line-height: 28px;
  text-align: center;
  color: #fff;
}

.rs_campaign_text .campaign_text {
  font-size: 1.3rem;
  letter-spacing: 0.06rem;
  line-height: 2.1rem;
  text-align: center;
}

.ImgtopText {
  padding: 10px 10px 10px 0;
  font-size: 1.2rem;
  letter-spacing: 0.07rem;
  text-align: right;
}

.ImgtopText a {
  color: #2A495A;
}

.text_num {
  display: inline-block;
  width: 21px;
  height: 21px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #2A495A;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.2rem;
  letter-spacing: normal;
  line-height: 22px;
  text-align: center;
  vertical-align: 1px;
  color: #f0f0e9;
}
@media screen and (min-width: 37.5em) {
  .text_num {
    width: 23px;
    height: 23px;
    margin-right: 5px;
    font-size: 1.3rem;
    line-height: 23px;
    vertical-align: 2px;
  }
}

.p-sp_area {
  border-radius: 10px;
  background-color: #f6faf5;
  text-align: center;
}

.p-sp_area ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 50px 0;
  list-style: none;
}

.p-sp_area li {
  width: 40%;
  margin: 0 15px;
}

.p-sp_area li img {
  -webkit-box-shadow: 0 0 6px #ccc;
          box-shadow: 0 0 6px #ccc;
}

.btn_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.btn_apple a,
.btn_google a,
.btn_blank {
  display: block;
  width: 150px;
  margin: 5px;
  padding: 12px;
  border-radius: 2px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.1rem;
  text-align: center;
  color: #fff;
}
@media screen and (min-width: 37.5em) {
  .btn_apple a,
  .btn_google a,
  .btn_blank {
    width: 230px;
  }
}

.btn_apple a:hover,
.btn_google a:hover,
.btn_amazon a:hover,
.btn_rakuten a:hover {
  opacity: 0.8;
}

.btn_apple a {
  background-color: #333;
}

.btn_google a {
  background-color: #333;
}

.codeT {
  font-family: "Roboto Condensed", sans-serif;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1;
}

.codeT span {
  font-size: 1.8rem;
  margin-right: 5px;
  vertical-align: -1px;
}

.p_sample {
  position: relative;
  padding: 50px 20px;
  margin-bottom: 30px;
  border-radius: 8px;
  background: #fff;
  line-height: 1.35;
}

.p_sample::after {
  content: "SAMPLE";
  position: absolute;
  top: 8px;
  left: 13px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.1rem;
  color: #2A495A;
}

.p_sample h1 {
  padding: 0;
  border: none;
}

/* ============================================
     Pickup
     ============================================ */
.pickup ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  list-style: none;
}
@media screen and (min-width: 37.5em) {
  .pickup ul {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.pickup li {
  width: 100%;
  padding: 12px;
  border-radius: 5px;
}
@media screen and (min-width: 37.5em) {
  .pickup li {
    width: 49.5%;
    padding: 15px;
  }
}

.pickup--con {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 12px 0px;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.pickup--con a {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.pickup--con:hover {
  background-color: #f6faf5;
}

.pickup--conL {
  position: relative;
  display: block;
  width: 28%;
  aspect-ratio: 400/264;
  overflow: hidden;
}
.pickup--conL img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pickup--conL .img-color {
  display: block;
}
.pickup--conL .img-duo {
  position: absolute;
  inset: 0;
  -webkit-filter: url("#duotone");
          filter: url("#duotone");
  opacity: 1;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

.pickup--con:hover .pickup--conL .img-duo {
  opacity: 0;
}

.pickup--conR {
  width: 68%;
  font-size: 1.46rem;
  font-weight: 700;
  letter-spacing: 0.03rem;
  color: #2A495A;
}

.con_page--title {
  text-align: center;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 500;
  color: #2A495A;
  letter-spacing: 0.05rem;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 60px;
  position: relative;
  white-space: nowrap;
}

.con_page--title::after {
  content: "";
  height: 2px;
  width: 30px;
  display: block;
  background-color: #2A495A;
  position: absolute;
  left: 50%;
  bottom: 1px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.con_page--search {
  max-width: 670px;
  margin: 0 auto;
  padding: 20px 0 80px 0;
  color: #2A495A;
  display: block;
}

.con_page--search01 {
  text-align: center;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin-bottom: 30px;
  letter-spacing: 0.1rem;
}

.con_page--searchform {
  margin: 0 auto;
  max-width: 350px;
  margin-bottom: 120px;
}

.con_page--input {
  margin: 0 8px 0 0;
  padding: 0px 20px;
  height: 33px;
  width: calc(100% - 90px);
  outline: none;
  border: 1px solid #687e91;
  background: #f0f0e9;
  color: #687e91;
  font-size: 100%;
  border-radius: 20px;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.con_page--input::-webkit-input-placeholder {
  color: #2A495A;
}

.con_page--input::-moz-placeholder {
  color: #2A495A;
}

.con_page--input:-ms-input-placeholder {
  color: #2A495A;
}

.con_page--input::-ms-input-placeholder {
  color: #2A495A;
}

.con_page--input::placeholder {
  color: #2A495A;
}

.con_page--input:focus {
  background: #f6faf5;
  color: #2A495A;
}

.con_page--btn {
  height: 35px;
  width: 35px;
  border: none;
  margin: 0;
  padding: 0;
  vertical-align: top;
  background: url(../img/s_btn.png) no-repeat #2A495A;
  border-radius: 18px;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.con_page--btn:hover {
  background: url(../img/s_btn.png) no-repeat #687e91;
}

.con_page--title02 {
  font-size: 2rem;
  font-weight: 500;
  color: #2A495A;
  margin: 10px auto;
  letter-spacing: 0.05rem;
  text-align: center;
}

.con_page--title02 span {
  position: relative;
  display: inline-block;
  padding: 0 1.8rem;
}

.con_page--title02 span::before, .con_page--title02 span::after {
  position: absolute;
  top: 50%;
  content: "";
  width: 1.2em;
  height: 1px;
  background-color: #2A495A;
}

.con_page--title02 span::before {
  left: 100%;
}

.con_page--title02 span::after {
  right: 100%;
}

.con_page--sub {
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  color: #2A495A;
  font-weight: 500;
  margin-bottom: 7px;
  letter-spacing: 0.05rem;
  position: relative;
}

.con_page--sub2 {
  font-size: clamp(1.6rem, 3vw, 1.9rem);
  color: #2A495A;
  font-weight: 500;
  margin-bottom: 15px;
  padding-bottom: 5px;
  letter-spacing: 0.02rem;
  border-bottom: dotted 1px #2A495A;
}

.con_page--text {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  margin-bottom: 18px;
  letter-spacing: 0.25rem;
  text-align: justify;
  line-height: 1.7;
  color: #2A495A;
}

.con_page--noteL {
  font-size: 1.8rem;
  text-align: center;
}

.con_page--note {
  line-height: 1.8;
  letter-spacing: 0.1rem;
  padding: 50px;
  background-color: #f3f0e9;
  border-radius: 8px;
  margin-bottom: 100px;
}

.con_page--link {
  margin-bottom: 7px;
}

.con_page--link a {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 500;
  letter-spacing: 0.15rem;
  line-height: 1.8;
  position: relative;
  padding: 3px 0px;
  color: #2A495A;
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.con_page--link a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 103%;
  height: 2px;
  background: #2A495A;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.con_page--link a:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

.con_page--link i {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 500;
  margin-right: 3px;
  line-height: 1.8;
  vertical-align: -1px;
  color: #2A495A;
}

.con_page--list {
  margin-bottom: 30px;
}

.con_page--list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.con_page--list li {
  background: #FFF;
  width: 49.5%;
  display: inline-block;
}

.con_page--list li a {
  display: block;
  color: #333;
  padding: 20px 10px 16px 15px;
  border-bottom: solid 1px #EEE;
}

.con_page--list li a:hover {
  background-color: #FFED00;
}

.con_page--list li a span {
  margin-right: 5px;
  vertical-align: -1px;
}

.form_page {
  max-width: 500px;
  margin: 0px auto 60px auto;
  padding-top: 30px;
}

.form_page--name {
  color: #2A495A;
  font-weight: 500;
  padding: 35px 0 8px 0;
  font-size: 1.4rem;
  letter-spacing: 0.15rem;
  position: relative;
}

.form_page--submit {
  padding: 30px 0 30px 0;
  text-align: center;
  margin-bottom: 20px;
}

.form_page--hissu {
  position: absolute;
  right: 5px;
  font-size: 1.1rem;
  letter-spacing: 0.4rem;
  padding: 1px 20px;
  background: #2A495A;
  color: #fff;
  border-radius: 3px;
}

.form_page input[type=text], input[type=email] {
  padding: 10px;
  margin-bottom: 5px;
  font-size: 1.5rem;
  letter-spacing: 0.15rem;
}

.form_page textarea {
  resize: none;
  width: 93%;
  padding: 15px;
  border-bottom: solid 1px #2A495A;
  border-top: none;
  border-right: none;
  border-left: none;
  background-color: #f0f0e9;
  margin-bottom: 2px;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  font-size: 1.5rem;
  letter-spacing: 0.15rem;
}

span.wpcf7-list-item {
  display: block;
}

.form_page input[type=text], .form_page input[type=email] {
  width: 95%;
  border-bottom: solid 1px #2A495A;
  border-top: none;
  border-right: none;
  border-left: none;
  background-color: #f0f0e9;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.form_page input:focus, .form_page textarea:focus {
  border-bottom: solid 1px #AAA;
  border-top: none;
  border-right: none;
  border-left: none;
  background-color: #f6faf5;
  color: #333;
}

.form_page input, .form_page textarea {
  outline: none;
}

.form_page input[type=submit] {
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  text-align: center;
  display: inline-block;
  border: none;
  width: 250px;
  height: 40px;
  color: #FFF;
  background-color: #2A495A;
  border-radius: 20px;
}

.form_page input:hover[type=submit] {
  border: none;
  cursor: pointer;
  background-color: #687e91;
}

/* reCAPTCHA */
/* .grecaptcha-badge{margin-bottom: 48px;}*/
.grecaptcha-badge {
  visibility: hidden;
}

footer {
  margin: auto 15px 0 15px;
  font-family: "nimbus-sans", sans-serif;
}

.btm {
  margin: 0 auto;
  border-top: #2A495A solid 1px;
}

.btm-cate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 5px;
  border-bottom: #2A495A solid 1px;
  text-align: right;
}
.btm-cate__date {
  color: #2A495A;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.1rem;
  white-space: nowrap;
}
.btm-cate__link ul {
  list-style: none;
}
.btm-cate__link li {
  display: block;
  color: #2A495A;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 2.1rem;
  letter-spacing: -0.13rem;
  word-spacing: -0.5rem;
}
@media screen and (min-width: 37.5em) {
  .btm-cate__link li {
    display: inline-block;
  }
}
.btm-cate__link li::after {
  content: ",";
  margin-right: 5px;
}
.btm-cate__link li:last-child::after {
  content: "";
  margin-right: 0;
}
.btm-cate__link li a {
  display: inline-block;
  position: relative;
  color: #2A495A;
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.btm-cate__link li a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 103%;
  height: 3px;
  background: #2A495A;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.btm-cate__link li a:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

.footer-btm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2.5rem 4px 3rem 10px;
}
.footer-btm > div:nth-of-type(1) {
  margin-right: auto;
}
.footer-btm__link {
  letter-spacing: 0.05em;
}
.footer-btm__link:nth-child(2) {
  display: none;
}
@media screen and (min-width: 37.5em) {
  .footer-btm__link:nth-child(2) {
    display: block;
  }
}
.footer-btm__link ul {
  list-style: none;
}
.footer-btm__link li {
  line-height: 1.1;
}
.footer-btm__link li a {
  display: inline-block;
  position: relative;
  margin: 0 0 0 15px;
  padding: 0 3px;
  color: #2A495A;
  font-size: 1.15rem;
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.footer-btm__link li a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 103%;
  height: 1px;
  background: #2A495A;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.footer-btm__link li a:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.footer-btm__link li a:hover {
  color: #2A495A;
}
.footer-btm__copy {
  position: relative;
  color: #2A495A;
}
.footer-btm__copy p {
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 37.5em) {
  .footer-btm__copy p {
    font-size: 1.13rem;
  }
}
.footer-btm__logo {
  display: block;
  margin-top: -5px;
  margin-bottom: 2px;
}
.footer-btm__logo a::after {
  content: "\e905";
  z-index: 1;
  color: #2A495A;
  font-family: "icomoon" !important;
  font-size: 2.4rem;
}

.p_conTable {
  width: 100%;
  font-size: clamp(1.25rem, 2vw, 1.4rem);
  letter-spacing: 0.05rem;
}

.p_conTable th {
  background: #f5f8fa;
  display: block;
  border: none;
  padding: 8px 8px;
  width: 100%;
}
@media screen and (min-width: 37.5em) {
  .p_conTable th {
    border: 1px solid #c8d5df;
    line-height: 1.8rem;
    width: 30%;
    padding: 18px 15px;
    display: table-cell;
  }
}

.p_conTable td {
  color: #2A495A;
  background: #f0f0e9;
  display: block;
  border: none;
  padding: 15px 8px;
  width: 100%;
}
.p_conTable td a {
  color: #2A495A;
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.p_conTable td a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 103%;
  height: 1px;
  background: #2A495A;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.p_conTable td a:hover::before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
@media screen and (min-width: 37.5em) {
  .p_conTable td {
    border: 1px solid #c8d5df;
    background: #f6faf5;
    line-height: 2.3rem;
    padding: 15px 15px;
    width: 70%;
    display: table-cell;
  }
}

.p_conTable_sp {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.p_conTable_sp::-webkit-scrollbar {
  height: 5px;
}

.p_conTable_sp::-webkit-scrollbar-track {
  background: #F1F1F1;
}

.p_conTable_sp::-webkit-scrollbar-thumb {
  background: #BCBCBC;
}

.table-box {
  overflow: hidden;
  background: #f6faf5;
}

.scroll-wrapper {
  overflow-x: auto;
  scrollbar-width: auto;
  scrollbar-color: #2A495A #f0f0e9;
}
.scroll-wrapper::-webkit-scrollbar {
  height: 13px;
}
.scroll-wrapper::-webkit-scrollbar-track {
  background: #f0f0e9;
  border-radius: 6px;
}
.scroll-wrapper::-webkit-scrollbar-thumb {
  background: #2A495A;
  border-radius: 6px;
}
.scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: #2A495A;
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}

.table-box table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  font-size: clamp(1.25rem, 2vw, 1.4rem);
}

.table-box th, .table-box td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #e6e6da;
}

.table-box th {
  background: #2A495A;
  color: #f0f0e9;
}

.td_num {
  background-color: #FFF;
  border-radius: 50%;
  color: #4b7396;
  text-align: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.3rem;
  margin-right: 5px;
  display: inline-block;
  letter-spacing: normal;
  vertical-align: 1px;
}

.no-wrap-table th,
.no-wrap-table td {
  white-space: nowrap;
}

.center-table th,
.center-table td {
  text-align: center;
  vertical-align: middle;
}

.td_stiky__t {
  position: sticky;
  top: 0;
  left: 0;
  text-align: center;
  border-left: 1px solid #DDD;
  white-space: nowrap;
}

.td_stiky {
  position: sticky;
  top: 0;
  left: 0;
  background: #f6faf5;
  text-align: center;
  border-left: 1px solid #DDD;
  white-space: nowrap;
}

.key-box {
  background: #f6faf5;
  overflow: hidden;
  border-radius: 8px;
  padding: 10px;
}

.key-box table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  font-size: clamp(1.25rem, 2vw, 1.4rem);
  letter-spacing: 0.05rem;
  line-height: 1.6;
}

.key-box thead {
  border-bottom: 1px solid #a5b9cb;
}

.key-box th, .key-box td {
  padding: 12px;
  text-align: left;
}

.key-box th {
  color: #2A495A;
  font-weight: bold;
}

.key-box td {
  color: #2A495A;
}

.key-box td:first-child {
  font-weight: bold;
}

.key-box td span, .key-box kbd {
  font-family: "YakuHanJPs", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Meiryo", sans-serif !important;
  background-color: #fff;
  color: #2A495A;
  padding: 1px 12px;
  border: none;
  border-radius: 5px;
  line-height: 1.8;
}

/* ==========================================================================
   Ad Containers
   ========================================================================== */
.ad-300__index {
  position: relative;
  padding: 30px 0 30px 0;
}
@media screen and (max-width: 700px) {
  .ad-300__index {
    padding: 30px 0 30px 0;
  }
}
.ad-300__index::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: calc(100% - 2px);
  height: 5px;
  background: linear-gradient(to right, #a5b9cb, #a5b9cb 2px, transparent 2px, transparent 4px);
  background-repeat: repeat-x;
  background-size: 4px 1px;
  background-position: 50% 50%;
  border-right: 1px solid #a5b9cb;
  border-left: 1px solid #a5b9cb;
}

.ad-300__single {
  position: relative;
  padding: 55px 0;
  border-top: solid 1px #a5b9cb;
}
@media screen and (max-width: 700px) {
  .ad-300__single {
    padding: 40px 0;
  }
}
.ad-300__single::before {
  content: "SPONSORED LINK";
  position: absolute;
  top: -8px;
  left: 50%;
  padding: 0 15px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.08rem;
  color: #6b8ca9;
  background-color: #fff;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* ==========================================================================
   Ad 300x250 Layout
   ========================================================================== */
.ad-300-250 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 700px) {
  .ad-300-250 {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    text-align: center;
  }
  .ad-300-250 p:nth-child(2) {
    display: none;
  }
}
@media screen and (max-width: 1000px) {
  .ad-300-250 {
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .ad-300-250 p:nth-child(1) {
    display: none;
  }
}
.ad-300-250 p {
  position: relative;
}

.ad_300_250 {
  width: 300px;
  height: 250px;
}
@media (max-width: 860px) {
  .ad_300_250 {
    width: 300px;
    height: 250px;
  }
}
@media (min-width: 860px) {
  .ad_300_250 {
    width: 300px;
    height: 250px;
  }
}

/* ==========================================================================
   Post Ads
   ========================================================================== */
.post_ad--728 {
  margin-bottom: 60px;
}

.post_ad {
  max-width: 320px;
  margin: 0 auto 50px auto;
}
@media only screen and (min-width: 481px) {
  .post_ad {
    max-width: 100%;
  }
}

.post_ad__single {
  max-width: 336px;
  width: 100%;
  margin: 0 auto 10px auto;
  text-align: center;
  overflow: hidden;
}
@media only screen and (min-width: 481px) {
  .post_ad__single {
    max-width: 100%;
  }
}
.post_ad__single .adsbygoogle {
  max-width: 100% !important;
  width: 336px !important;
}
@media only screen and (min-width: 481px) {
  .post_ad__single .adsbygoogle {
    width: auto !important;
  }
}

/* ==========================================================================
   Google Ads
   ========================================================================== */
.art_ads {
  overflow: hidden;
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
}

.google-auto-placed {
  margin: 0 0 20px !important;
  overflow: hidden;
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
}

.ad-after-toc {
  text-align: center;
  margin: 0px auto 0 auto;
  padding: 20px 0;
  overflow: hidden !important;
  max-width: 728px; /* 728pxに制限 */
}
.ad-after-toc .adsbygoogle {
  display: inline-block !important;
  margin: 0 auto !important;
  /* PC: 728×90 */
  width: 728px !important;
  height: 90px !important;
  min-width: 728px !important;
  max-width: 728px !important;
  min-height: 90px !important;
  max-height: 90px !important;
}
.ad-after-toc {
  /* タブレット: 468×60 */
}
@media (max-width: 1024px) {
  .ad-after-toc {
    max-width: 468px;
  }
  .ad-after-toc .adsbygoogle {
    width: 336px !important;
    height: 280px !important;
    min-width: 336px !important;
    max-width: 336px !important;
    min-height: 280px !important;
    max-height: 280px !important;
  }
}
.ad-after-toc {
  /* スマホ: 320×50 */
}
@media (max-width: 768px) {
  .ad-after-toc {
    max-width: 336px;
  }
  .ad-after-toc .adsbygoogle {
    width: 336px !important;
    height: 280px !important;
    min-width: 336px !important;
    max-width: 336px !important;
    min-height: 280px !important;
    max-height: 280px !important;
  }
}/*# sourceMappingURL=style.css.map */