@charset "UTF-8";

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

  --themeColor: #1a60bb;
}

/* 全体 */
h1 {
  color: #ffffff;
  background-color: #009bc2;
}
h1 span.small {
  display: inline-block;
  margin-bottom: 0.15rem;
  font-size: 0.9em;
}
a {
  color: #111111;
}
li {
  list-style: none;
}
input[type="radio"],
input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.35rem;
  accent-color: var(--themeColor);
}
select {
  width: inherit !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;
}
button,
a {
  cursor: pointer;
}
img {
  user-select: none;
}
h1 {
  text-align: center;
}

/* お知らせ */
/* .announce {
  position: relative;
  width: 100%;
  height: fit-content;
  margin-top: 1rem;
  border-radius: 5rem;
  overflow: hidden;
  opacity: 1;
  cursor: default;
  background: linear-gradient(45deg, #ff2d2d 0%, rgb(255, 97, 118) 100%);
}
.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;
  line-height: 1.3;
  text-align: center;
  color: #fff;
}
.announce span {
  display: inline-block;
  margin-right: 0.15rem;
}
.announce span.big {
  font-weight: bold;
  font-size: 1.3rem;
}
.announce span.rotate {
  margin-left: -0.1rem;
  rotate: 8deg;
  font-size: 1.4rem;
} */

/* 閲覧ページ view-navBack.php */
/* section:has(.menu_body) {
  width: 95%;
  margin: 0 auto;
}
.menu_body {
  margin-top: 1rem;
}
.menu_button {
  width: 100%;
  padding: 0.5rem 0;
  font-size: 0.8rem;
  border: none;
  color: #ffffff;
  background-color: var(--themeColor);
  transition: 0.2s;
}
.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: 2.75rem;
  left: 0;
  z-index: -10;
  width: 100%;
}
.menu_nav_in {
  padding: 0 0.5rem;
  border: solid 2px var(--themeColor);
  border-radius: 0 0 0.5rem 0.5rem;
  background-color: #fffef2;
  box-sizing: border-box;
}
.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);
  align-items: end;
}
.flex_wrap > .menu_nav_in_ul {
  padding-top: 0 !important;
}
.menu_nav_in_ul.title li {
  position: relative;
  border: none;
  font-weight: bold;
  font-size: 0.9rem;
  margin-left: 0.9rem;
}
.menu_nav_in_ul.title li::before {
  position: absolute;
  content: "";
  top: calc(50% - (1rem / 2));
  left: -0.5rem;
  background-color: var(--themeColor);
  width: 6px;
  height: 1rem;
}
.menu_nav_in_ul:has(.menu_nav_in_li.is_active) {
  padding-top: 0.6rem;
  padding-bottom: 0.8rem;
}
.menu_nav_in_li {
  line-height: 0;
  padding: 0 0.25rem !important;
  font-size: 0.8rem;
  transform: scaleY(0);
  transition: var(--transTimes);
  opacity: 0;
}
.menu_nav_in_li.is_active {
  line-height: 1;
  transform: scaleY(1);
  opacity: 1;
}
.menu_nav_in_li.is_active:first-of-type {
  margin-top: 0.5rem;
}
.menu_nav_in_li a {
  display: block;
  padding: 0 0.5rem;
  transition: var(--transTimes);
  border-bottom: solid 0px transparent;
}
.menu_nav_in_li.is_active a {
  padding: 0.5rem;
  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%;
  margin-top: 0.5rem;
}
.allBtn a {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0.75rem 0;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1;
  border: none;
  border-radius: 0.5rem;
  color: #111111;
  background-color: #ccc;
  transition: 0.2s;
}

/* 絞り込み */
.filter_body {
  margin-top: 2rem;
}
.filter_body details {
  width: 100%;
  background-color: #fbf7dd;
  border: solid 3px var(--themeColor);
  border-radius: 0.5rem;
  box-sizing: border-box;
}
.filter_body summary {
  position: relative;
  list-style: none;
  text-align: center;
  font-size: 0.9rem;
  padding: 0.25rem 1rem;
  color: #ffffff;
  background-color: var(--themeColor);
}
.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_menu {
  padding: 1rem;
}
.filter-tr .label {
  display: block;
}
.filter-tr .label:has(+ .label) {
  margin-bottom: 0.1rem;
}
.filter-tr .label select {
}
.submitBtn input[type="submit"] {
  border: none;
  width: 100%;
  height: fit-content;
  text-align: center;
  border-radius: 0.25rem;
  margin-top: 1.5rem;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: #fff;
  background-color: var(--themeColor);
}

/* カード */
.cardBox {
  margin-top: 1rem;
}
.card {
  width: 100%;
  /* height: 15rem; */
  padding: 0.75rem;
  border: solid 3px var(--themeColor);
  border-radius: 0.5rem;
  box-sizing: border-box;
  margin-bottom: 1rem;
  transition: var(--transTimes);
}
.card p {
  margin: 0;
}
.flexBox:not(.start) {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.accord_flex {
  margin-bottom: 0.75rem;
}
.accordBox {
  position: relative;
  overflow: hidden;
  margin-top: 0.65rem;
}
.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;
}
p.titleHead {
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.3;
}
.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);
}
.tag a {
  color: #fff;
}
.trim {
  width: 8rem;
  height: 8rem;
}
.trim img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.25rem;
}
.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 0.75rem;
  border-radius: 5rem;
  font-weight: normal;
  font-size: 0.7em !important;
  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.35rem;
  width: 100%;
}

/* ボタン */
.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%, 100%) - 4rem);
  transform: translate(0, -4rem);
}
.closeDialog {
  position: relative;
  color: #ffffff;
  background-color: #ff3232;
  border: solid 3px #ffffff;
  margin: 0;
  margin-left: auto;
  width: 5rem;
  padding: 0.5rem 0;
  padding-left: 1.2rem;
}
.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%);
}
.closeDialog span {
  /* 閉じるボタン */
  position: absolute;
  content: "";
  top: calc(50% - 0.175rem);
  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;
}
.card.is_open .showDialog::before {
  rotate: 180deg;
}

/* サービスへのリンクボタン */
.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);
}

/* ダイアログ */
dialog {
  background-color: #fffffb;
  border: solid 4px var(--themeColor);
  width: max(75%, 700px);
  height: 70%;
  border-radius: 0.5rem;
  box-sizing: border-box;
}
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.5);
}
@starting-style {
  dialog[open]::backdrop {
    background-color: rgb(0 0 0 / 0.25);
  }
}
.dialogCard p {
  margin: 0;
  line-height: 1.6;
}
.diaTag {
  display: inline-block;
  font-weight: normal;
  font-size: 0.9rem;
  margin: 0;
  padding: 0.3rem 1rem;
  border-radius: 1rem;
  line-height: 1;
  color: #fff;
  box-sizing: border-box;
  vertical-align: 0.15rem;
  /* 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.65rem;
}
.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.is_here {
  color: #ffffff;
  background-color: #1a60bb;
}

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

/* 投稿フォーム ボタン */
.kumikoe_banner {
  position: fixed;
  content: "";
  top: 1.5rem;
  right: -20rem;
  transition: 0.3s;
  /* line-height: 0;
  opacity: 0; */
  z-index: 100;
}
.kumikoe_banner.is_show {
  right: 0.4rem;
  /* line-height: 1;
  opacity: 1; */
}
.kumikoe_banner a {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  padding: 0.6rem 3rem;
  padding-left: 2.5rem;
  line-height: 1;
  border-radius: 10rem;
  font-size: 1rem;
  font-weight: bold;
  color: #ff711f;
  background-color: #ffffff;
  border: solid 2px #ff711f;
  box-sizing: border-box;
  transition: 0.15s;
  z-index: 1;
  pointer-events: none;
}
.kumikoe_banner.is_show a {
  pointer-events: auto;
}
.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;
}

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