/* title */
.title {}

.title.animated {}

.title h2 {
  --svg-size: 2.2em;
  --svg-padding: 0.75em;
}

.title.animated h2 {
  position: relative;
  color: #fff;
  background: var(--theme-color);
  padding: var(--svg-padding) 0 var(--svg-padding) calc(var(--svg-padding) + 1em);
  margin: 0 auto 1em;
  border-radius: 3px;
}

.title h2 svg {
  position: absolute;
  top: calc(var(--svg-padding) * -1);
  left: calc(var(--svg-padding) * -1);
  width: var(--svg-size);
  fill: var(--theme-color);
  padding: 3px;
  background: #fff;
  border: 3px solid var(--theme-color);
  border-radius: 999px;
}

.title.animated h2 svg {}

.title h3 {
  --svg-size: 2.2em;
  --svg-padding: 0.75em;
}

.title.animated h3 {
  position: relative;
  font-size: 1.5em;
  padding: 0 0 0 2.5em;
  margin: 0 auto 1em;
}

.title h3 svg {
  position: absolute;
  top: 50%;
  left: 0;
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: 2em;
  fill: var(--font-color);
}

.title.animated h3 svg {}

.title p {
  margin: 0 auto 0 2.5em;
}

.title.animated p {}


/* btn */
.btn {
  text-align: center;
  margin: 4em auto 1em;
}

.btn a {
  color: #333;
  font-weight: bold;
  font-size: 1.8rem;
  background: var(--theme-color3);
  padding: 1em 3em 1.1em;
  box-shadow: 3px 3px 3px #00000080;
  border-radius: 99px;
  transition: background ease-in 0.1s;
}

.btn a:hover {
  color: #fff;
  background: var(--theme-color2);
}

.btn a img {}

/*---------------------------------------- plans ----------------------------------------*/
#plans {}

#plans .top {}

#plans .top .door {}

#plans .top .door h2 {}

#plans .top .door p {}

#plans .top .subject {
  margin: 2em auto 0;
}


/* 年数別プラン */
#plans .box {
  margin: calc(var(--section-margin) / 2) auto 0;
}

#plans .box .door {}

#plans .box .door h3 {
  margin: 0 auto 2em;
}


#plans .box .table_box {
  overflow-x: auto;
}

#plans .box .table_box table {
  border-collapse: collapse;
  border-spacing: 0;
  width: var(--inner);
  border: 3px solid var(--theme-color);
}

#plans .box .table_box table tr {}

#plans .box .table_box table th {
  border: 1px solid var(--gray);
  background: rgb(from var(--theme-color) r g b / 25%);
  padding: 10px;
}

#plans .box .table_box table tr.color th {
  font-weight: 600;
  color: #fff;
  background: var(--theme-color);
}

#plans .box .table_box table td {
  padding: 10px;
  border: 1px solid var(--gray);
}

#plans .box .table_box table tr.color td {
  font-weight: 600;
  color: #fff;
  background: var(--theme-color);
  text-align: center;
}

#plans .box .attention {
  margin: 1em auto 0;
}

#plans .box .attention p {}


/*---------------------------------------- service ----------------------------------------*/
#service {
  position: relative;
  font-size: 1.4rem;
  background: var(--gray);
}

#service:before,
#service:after {
  --radius: 50%;
  --height: 30px;
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--height);
  background: #fff;
}

#service:before {
  bottom: calc(100% - var(--height) / 2);
  border-radius: var(--radius);
}

#service:after {
  top: calc(100% - var(--height) / 2);
  border-radius: var(--radius);
}

#service ul {
  --num: 5;
  --gap: 2em;
  gap: var(--gap);
}

#service ul li {
  width: calc((100% - (var(--num) - 1) * var(--gap)) / var(--num));
  text-align: center;
  transition: ease-in 0.2s;
}

#service ul li:hover {
  transform: translateY(-3px);
}

#service ul li img {
  border-radius: 999px;
  background: #fff;
  transition: ease-in 0.2s;
}

#service ul li:hover img {
  background: var(--theme-color);
}

#service ul li p {}

@media (max-width: 768px) {
  #service ul {
    --num: 2;
    --gap: 5vw;
  }
}

/*---------------------------------------- past ----------------------------------------*/
#past {}

#past .grid_box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1em;
}

#past .grid_box .box {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0.5em;
  transition: ease-in 0.2s;
}

#past .grid_box .box:hover {
  transform: scale(0.99);
}

#past .grid_box .box .img {
  aspect-ratio: 16 / 9;
}

#past .grid_box .box .img img {}

#past .grid_box .box .img img.absolute {
  width: 75%;
}

#past .grid_box .box .text {}

#past .grid_box .box .text p {
  font-size: 1.2rem;
  color: var(--theme-color);
  margin: 0 auto 0.2em;
}

#past .grid_box .box .text .title {
  font-size: 1.6rem;
}

#past .btn {}

#past .btn a {}

#past .btn a img {}

/*---------------------------------------- column ----------------------------------------*/
#column {}

#column .grid_box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1em;
}

#column .grid_box .box {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0.5em;
  transition: ease-in 0.2s;
}

#column .grid_box .box:hover {
  transform: scale(0.99);
}

#column .grid_box .box .img {
  aspect-ratio: 16 / 9;
}

#column .grid_box .box .img img {}

#column .grid_box .box .img img.absolute {
  width: 75%;
}

/*---------------------------------------- template_title ----------------------------------------*/
#template_title {}

#template_title h1 {
  font-size: 2.4em;
  margin: 0 auto 1em;
}

#template_title p {}

/*---------------------------------------- single_title ----------------------------------------*/
#single_title {}

#single_title h1 {
  font-size: 2.4em;
  margin: 0 auto 1em;
}

#single_title p {}

/*---------------------------------------- single ----------------------------------------*/
#single {}

#single .inner {}

#single .main {
  margin: 0 auto 10em;
}

#single .main h2 {
  --icon-size: 5em;
  --icon-padding: 1em;
  position: relative;
  background: var(--theme-color);
  color: #fff;
  padding: 1em 1em 1.1em calc(var(--icon-size) + var(--icon-padding) * 2);
  border-radius: 3px;
  margin: 0 auto calc(var(--icon-size) / 2);
}

#single .main h2 img {
  position: absolute;
  top: 50%;
  left: var(--icon-padding);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: var(--icon-size);
  background: #fff;
  border: 5px solid var(--theme-color);
  border-radius: 999px;
}

#single .main p {}

#single .img {
  margin: 0 auto 1em;
  height: 20em;
}

#single .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#single .img h1 {
  display: inline-block;
  width: auto;
  max-width: 80%;
  padding: 2em 4em;
  background: #ffffff80;
  border: 6px solid;
  border-radius: 6px;
}

#single .text {}

#single .text p.date {
  color: var(--theme-color);
  margin: 0 auto 1em;
}

#single .text .content {}