@charset "UTF-8";

:root {
  --transTimes: all 0.4s ease-in-out;
  --trans: 0.2s;

  --themeColor: #1a60bb;
  --themeColorHover: #084aa0;
}

/* 全体 */
body:has(dialog[open]) {
  overflow: hidden;
}
#body:has(dialog[open]) {
  overflow: auto;
  scrollbar-gutter: stable;
}
#contents {
  width: min(100%, 900px);
}
h1 span.small {
  margin-bottom: 0.25rem;
  font-size: 0.8em;
}
a {
  color: #111111;
}
li {
  list-style: none;
}
#contents-in img {
  display: block;
}
input[type="radio"],
input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.4rem;
  accent-color: #1e51a2;
}
select {
  width: 100% !important;
  margin: 0 !important;
  padding: 0.1rem 0.35rem;
  font-size: 1rem !important;
  line-height: 1rem;
  height: 2.5rem;
  border: solid 1px #a8a8a8;
  border-radius: 0.25rem;
  box-sizing: border-box;
}
input[type="radio"],
input[type="checkbox"],
input[type="submit"],
label,
label:has(input[type="radio"]),
label:has(input[type="checkbox"]),
button,
select,
a {
  cursor: pointer;
}
img {
  user-select: none;
}

/* お知らせ */
.announce {
  margin-top: 1rem;
}
.announce a {
  opacity: 1;
  transition: var(--trans);
}
@media screen and (min-width: 680px) {
  .announce a:hover {
    opacity: 0.8;
  }
}

/* お知らせ キラキラボタン */
/* .announce {
  position: relative;
  width: 100%;
  height: fit-content;
  margin-top: 1rem;
  border-radius: 5rem;
  overflow: hidden;
  opacity: 1;
  cursor: default;
  transition: var(--trans);
  background: linear-gradient(45deg, #ff2d2d 0%, rgb(255, 97, 118) 100%);
}
.announce:hover {
  opacity: 0.8;
}
.announce::before {
  position: absolute;
  content: "";
  top: -100px;
  left: 0;
  display: block;
  width: 3rem;
  height: 100%;
  opacity: 0;
  background-color: #ffffff;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
  animation: flash 5s infinite linear;
} */
@keyframes flash {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  2.5% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  5% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  7.5% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  10% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
  100% {
    /* アニメーションに間隔を空ける */
  }
}
/* .announce a {
  position: relative;
  z-index: 10;
  display: block;
  padding: 0.5rem 0;
  font-size: 1.3rem;
  text-align: center;
  color: #fff;
}
.announce span {
  display: inline-block;
  margin-right: 0.15rem;
}
.announce span.big {
  font-weight: bold;
  font-size: 1.8rem;
}
.announce span.rotate {
  margin-left: -0.1rem;
  rotate: 8deg;
  font-size: 1.4rem;
} */

/* 閲覧ページ view-navBack.php */
/* section:has(.menu_body) {
  width: 90%;
  margin: 0 auto;
}
.menu_body {
  margin: 0 auto;
  margin-top: 1rem;
  width: 80%;
}
.menu_button {
  width: 100%;
  padding: 0.5rem 0;
  font-size: 1rem;
  border: none;
  color: #ffffff;
  background-color: var(--themeColor);
  transition: 0.2s;
}
.menu_button:has(+ .nav_wrapper:hover) {
  background-color: var(--themeColorHover);
}
.menu_button:hover {
  background-color: var(--themeColorHover);
}
.menu_body ul,
.menu_body li {
  margin: 0;
  padding: 0;
}
.menu_nav {
  position: relative;
  z-index: 50;
}
.menu_nav_ul {
  display: flex;
  flex-grow: 1;
  transform: translate(0, 0);
}
.menu_nav_li {
  flex-grow: 1;
}
.nav_wrapper {
  position: fixed;
  content: "";
  top: 34px;
  left: 0;
  z-index: -1;
  width: 100%;
}
.menu_nav_in {
  padding: 0 0.25rem;
  border: solid 3px var(--themeColor);
  border-radius: 0 0 0.25rem 0.25rem;
  background-color: #fffef2;
  box-sizing: border-box;
  line-height: 0;
}
.menu_nav_in:has(.menu_nav_in_li.is_active) {
  padding-bottom: 1rem;
}
.menu_nav_in > .menu_nav_in_ul {
  padding-bottom: 0 !important;
  width: 15rem;
}
.flex_wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.menu_nav_in_ul.title li {
  position: relative;
  border: none;
  font-weight: bold;
  font-size: 1rem;
  margin-left: 0.5rem;
  padding-left: 0.8rem;
}
.menu_nav_in_ul.title li::before {
  position: absolute;
  content: "";
  top: calc(50% - (1rem / 2));
  left: 0;
  background-color: var(--themeColor);
  width: 6px;
  height: 1rem;
}
.menu_nav_in_ul:has(.menu_nav_in_li.is_active) {
  padding-top: 0.3rem;
}
.menu_nav_in_ul:has(.menu_nav_in_li.is_active):first-of-type {
  padding-top: 0.5rem;
}
.menu_nav_in_li {
  line-height: 0;
  padding: 0 0.75rem !important;
  transform: scaleY(0);
  transition: var(--transTimes);
  opacity: 0;
}
.menu_nav_in_li.is_active {
  line-height: 1;
  padding: 0.1rem 0.75rem !important;
  transform: scaleY(1);
  opacity: 1;
}
.menu_nav_in_li a {
  display: block;
  padding: 0 0.45rem;
  font-size: 0.9rem;
  transition: var(--transTimes);
  border-bottom: solid 0px transparent;
}
.menu_nav_in_li.is_active a {
  padding: 0.45rem;
  border-bottom: solid 1px var(--themeColor);
  box-sizing: border-box;
}
.menu_nav_in_li.is_active a:hover {
  background-color: #fffbb9;
}
.menu_nav_in_li.is_active a:active {
  color: #ff0000;
} */

/* すべて表示ボタン */
.allBtn {
  width: 100%;
}
.allBtn a {
  display: block;
  width: 12rem;
  padding: 1rem 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1;
  border: none;
  border-radius: 0.5rem;
  color: #ffffff;
  background-color: #8a8a8a;
  transition: 0.2s;
}
.allBtn a:hover {
  background-color: #aaaaaa;
}

/* 絞り込み */
.filter_body {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}
.filter_body details {
  width: 20rem;
  background-color: #fbf7dd;
  border: solid 3px var(--themeColor);
  border-radius: 0.5rem;
  box-sizing: border-box;
  transition: var(--trans);
  /* transform: translate(0, 0); */
}
.filter_body details:has(summary:hover) {
  border-color: var(--themeColorHover);
}
.filter_body summary {
  position: relative;
  list-style: none;
  padding: 0.5rem 1rem;
  color: #ffffff;
  background-color: var(--themeColor);
  transition: var(--trans);
  cursor: pointer;
}
.filter_body summary::after {
  position: absolute;
  content: "";
  top: calc(50% - 0.6rem);
  right: 1rem;
  width: 0.6rem;
  height: 0.6rem;
  border-left: solid 2.5px #ffffff;
  border-bottom: solid 2.5px #ffffff;
  rotate: -45deg;
}
.filter_body details[open] summary::after {
  top: calc(50% - 0.3rem);
  rotate: 135deg;
}
.filter_body summary:hover {
  background-color: var(--themeColorHover);
}
.filter_menu {
  width: 100%;
  padding: 1rem;
  border-radius: 0.5rem;
  z-index: 100;
  box-sizing: border-box;
}
.filter-tr .label {
  display: block;
}
.filter-tr .label:has(+ .label) {
  margin-bottom: 0.1rem;
}
.submitBtn input[type="submit"] {
  border: none;
  width: 100%;
  text-align: center;
  border-radius: 0.25rem;
  margin-top: 1.5rem;
  padding: 0.75rem 0;
  font-size: 0.9rem;
  color: #fff;
  background-color: var(--themeColor);
  transition: var(--trans);
}
.submitBtn input[type="submit"]:hover {
  background-color: var(--themeColorHover);
}

/* カード */
.cardBox {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.card {
  width: 100%;
  padding: 1rem;
  background: #ffffff;
  border: solid 4px var(--themeColor);
  border-radius: 0.5rem;
  box-sizing: border-box;
}
.card:has(+ .card) {
  margin-bottom: 1rem;
}
.card p {
  margin: 0;
}
.flexBox,
.accord_flex {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.accord_flex {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.accordBox {
  position: relative;
  overflow: hidden;
}
.accordBox.is_grad::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    rgb(255 255 255 / 1) 1rem,
    rgb(255 255 255 / 0) 3rem
  );
  transition: var(--trans);
}
.card.is_open .accordBox.is_grad::before {
  background: none;
}
.flexBox.start {
  flex-direction: row-reverse;
  justify-content: start;
  gap: 0.5rem;
}
.flex_in,
.accord_in {
  width: 100%;
}
.photoBox {
  width: 15%;
}
.accordPhoto {
  width: 35%;
}
.photoBox:not(.photoBox:has(img)) {
  width: 0;
}
p.titleHead {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.6;
}
.tag {
  display: inline-block;
  font-weight: normal;
  font-size: 0.8rem;
  margin: 0;
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
  line-height: 1;
  box-sizing: border-box;
  vertical-align: 0.15rem;
  background-color: var(--themeColor);
  opacity: 1;
  transition: var(--trans);
}
.tag:hover {
  opacity: 0.8;
}
.tag a {
  color: #fff;
}
.trim:has(+ .trim),
.notTrim:has(+ .notTrim) {
  margin-bottom: 0.5rem;
}
.trim img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.4rem;
  aspect-ratio: 1 / 1;
}
.notTrim img {
  width: 100%;
  height: 100%;
  border-radius: 0.4rem;
}
.bigTag0 {
  background-color: #de6641;
}
.bigTag1 {
  background-color: #e8ac51;
}
.bigTag2 {
  background-color: #92c027;
}
.bigTag3 {
  background-color: #39a869;
}
.bigTag4 {
  background-color: #27aca9;
}
.bigTag5 {
  background-color: #00aee0;
}
.bigTag6 {
  background-color: #4c8ccc;
}
.bigTag7 {
  background-color: #5d5099;
}
.bigTag8 {
  background-color: #a55b9a;
}
.bigTag9 {
  background-color: #dc669b;
}
.bigTag10 {
  background-color: #dd6673;
}

.date {
  padding: 0 1rem;
  border-radius: 5rem;
  font-size: 0.65em;
  font-weight: normal;
  color: #555;
  background-color: #eee;
}

/* 利用内容 ラジオボタン */
.doClick1,
.doClick2,
.doClick3,
.doClick4,
.doClick5,
.doClick6,
.doClick7,
.doClick8,
.doClick9,
.doClick10,
.doClick11,
.doClick12 {
  display: none;
}
.doClick1.is_checked,
.doClick2.is_checked,
.doClick3.is_checked,
.doClick4.is_checked,
.doClick5.is_checked,
.doClick6.is_checked,
.doClick7.is_checked,
.doClick8.is_checked,
.doClick9.is_checked,
.doClick10.is_checked,
.doClick11.is_checked,
.doClick12.is_checked {
  display: block;
  margin-top: 0.5rem;
}

/* ボタン */
.showDialog,
.closeDialog {
  display: block;
  text-align: center;
  line-height: 1;
  font-size: 0.9rem;
  margin: 0 auto;
  margin-top: 0.8rem;
  border: none;
  border-radius: 0.4rem;
  box-sizing: border-box;
  transition: 0.2s;
}
.showDialog {
  position: relative;
  color: #ffffff;
  background-color: #aaaaaa;
  width: 8rem;
  padding: 0.5rem 0.6rem;
  padding-right: 1.2rem;
}
.closeWrapper {
  /* 閉じるボタンの肝 */
  position: fixed;
  content: "";
  width: calc(max(75%, 700px) - 3rem);
  top: calc((100vh - 70%) / 2 + 0.5rem);
  transform: translate(0, -4rem);
}
.closeDialog {
  position: relative;
  color: #ffffff;
  background-color: #ff3232;
  border: solid 3px #ffffff;
  margin: 0;
  margin-left: auto;
  width: 7rem;
  padding: 0.5rem 0;
  padding-left: 1.2rem;
  box-sizing: border-box;
}
.showDialog::before,
.closeDialog::before {
  position: absolute;
  content: "";
}
.showDialog::before {
  /* 開くボタン */
  top: calc(50% - (0.5rem / 2));
  right: 0.5rem;
  width: 0.9rem;
  height: 0.5rem;
  background-color: #ffffff;
  transition: 0.2s;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.card.is_open .showDialog::before {
  rotate: 180deg;
}
.closeDialog span {
  /* 閉じるボタン */
  position: absolute;
  content: "";
  top: calc(50% - 0.1rem);
  left: 0.5rem;
  width: 1rem;
  height: 3px;
  background-color: #ffffff;
}
.closeDialog span:nth-of-type(1) {
  rotate: 42deg;
}
.closeDialog span:nth-of-type(2) {
  rotate: -42deg;
}
.showDialog:hover {
  background-color: #919191;
}
.closeDialog:hover {
  background-color: #ff5e5e;
}
.showDialog:hover::before,
.closeDialog:hover::before {
  top: calc(50% - (0.2rem / 2));
}
.card.is_open .showDialog:hover::before {
  top: calc(50% - (0.8rem / 2));
}

/* サービスへのリンクボタン */
.linkBtn {
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 2rem;
}
.linkBtn a {
  position: relative;
  z-index: 10;
  display: block;
  padding: 0.75rem 4rem;
  border-radius: 5rem;
  line-height: 1;
  color: #fff;
  background-color: #ff711f;
  transition: var(--trans);
}
.linkBtn a::after {
  position: absolute;
  content: "";
  top: calc(50% - (0.75rem / 2));
  right: calc(50% - (12rem / 2));
  width: 0.5rem;
  height: 0.75rem;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: var(--trans);
}
.linkBtn a:hover {
  background-color: #db580c;
}
.linkBtn a:hover::after {
  right: calc(50% - (12.75rem / 2));
}

/* ダイアログ */
dialog {
  background-color: #ffffff;
  border: solid 4px var(--themeColor);
  width: max(75%, 700px);
  height: 70%;
  padding: 2rem;
  border-radius: 0.5rem;
  box-sizing: border-box;
  transition: 0.3s;
  margin: auto;
}
dialog[open] {
  opacity: 1;
  /* transform: scale(1); */ /* 閉じるボタンが見えなくなる */
}
@starting-style {
  dialog[open] {
    opacity: 0;
    /* transform: scale(0.95); */
  }
}
dialog::backdrop {
  background-color: rgb(0 0 0 / 0);
  transition: 0.3s;
}
dialog[open]::backdrop {
  background-color: rgb(0 0 0 / 0.3);
}
@starting-style {
  dialog[open]::backdrop {
    background-color: rgb(0 0 0 / 0.15);
  }
}
.dialogCard p {
  margin: 0;
  line-height: 1.6;
}
.diaTag {
  display: inline-block;
  font-weight: normal;
  font-size: 1rem;
  margin: 0;
  padding: 0.4rem 1rem;
  border-radius: 1rem;
  line-height: 1;
  color: #fff;
  box-sizing: border-box;
  vertical-align: 0.15rem;
  cursor: default;
  /* background-color: var(--themeColor); */
}
.contentBox p:not(.titleHead) {
  font-size: 1.1rem;
  margin-top: 0.75rem;
}
.contentBox p.titleHead {
  font-size: 1.5rem;
}
span.heading {
  display: block;
  color: var(--themeColor);
  border-bottom: solid 1px var(--themeColor);
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.35rem;
}
p:has(.heading) {
  line-height: 1.7;
}
p:has(.heading):first-of-type {
  margin-bottom: 0.7rem;
}
.diaFlex {
  display: flex;
  gap: 2rem;
}
.diaFlex .diaFlex_in {
  width: 100%;
}
.diaFlex .photoBox:not(.photoBox:has(.photoCheck)) {
  width: 0;
}
.diaFlex .photoBox:has(.photoCheck) {
  width: 50%;
  margin-top: 2rem;
}
.diaFlex .photoBox div {
  width: 100%;
  margin-bottom: 1rem;
}
.diaFlex .photoBox div img {
  border-radius: 0.4rem;
}

/* ページボタン */
.pageBtn {
  margin-top: 2rem;
}
.pageBtn ul {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  padding: 0;
}
.pageBtn a {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border: solid 1px #1a60bb;
  line-height: 1;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  transition: 0.2s;
}
.pageBtn a:hover {
  color: #ffffff;
  background-color: #1a60bb;
}
.pageBtn a.is_here {
  color: #ffffff;
  background-color: #1a60bb;
}

/* 戻るボタン */
.back a {
  display: block;
  width: fit-content;
  margin: 4rem auto;
  padding: 0.8rem 3rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1.15rem;
  text-align: center;
  color: #fff;
  background-color: #8a8a8a;
  transition: var(--trans);
}
.back a:hover {
  background-color: #aaaaaa;
}

/* 投稿フォームリンク */
.kumikoe_banner {
  /* opacity: 0;
  pointer-events: none; */
  position: fixed;
  content: "";
  bottom: 4rem;
  right: calc((100vw - 1100px) / 2 - 1.5rem);
  transition: 0.5s;
  z-index: 100;
}
.kumikoe_banner.is_show {
  /* opacity: 1;
  pointer-events: all; */
  bottom: 3rem;
  right: calc((100vw - 1100px) / 2 - 3rem);
  transform: scale(0.9);
}
.kumikoe_banner.is_show a {
  padding: 0.6rem 4rem;
}
.kumikoe_banner a {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 3rem;
  padding-left: 3.5rem;
  line-height: 1;
  border-radius: 10rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: #ff711f;
  background-color: #ffffff;
  border: solid 2px #ff711f;
  box-sizing: border-box;
  transition: 0.15s;
  z-index: 1;
}
.kumikoe_banner a:hover {
  color: #ffffff;
}
.kumikoe_banner a::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
.kumikoe_banner a:hover::after {
  transform: scale(1, 1);
  background-color: #ff711f;
}
.kumikoe_banner a img {
  filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(5335%)
    hue-rotate(346deg) brightness(102%) contrast(101%);
  transition: 0.15s;
  width: 1.5rem;
}
.kumikoe_banner a:hover img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(94%) saturate(23%)
    hue-rotate(201deg) brightness(105%) contrast(102%);
}

/* 口コミがありません */
.noneComment {
  text-align: center;
}

/* 非表示 */
.hidden {
  display: none;
}