.-x-richtext ul, .-x-richtext ol {
	list-style-position: inside;
}
[data-legal]{
	position:relative;
	--legal-offset-h:attr(data-legal-offset-h px);
	--legal-offset-v:attr(data-legal-offset-v px);
}
[data-legal][data-legal-safe="1"]::after{
	position: absolute;
	opacity: 0.5;
	color: black;
	content: "墨";
	font-size: 16px;
	display: block;
	height: 24px;
	padding-top: 0px;
	background-image: url(/_lib/lc.png);
	background-size: auto 20px;
	background-repeat: no-repeat;
	padding-left: 50px;
	background-position: left top;
}
[data-legal][data-legal-safe="1"]:hover::after {
    position: absolute;
    opacity: 0.5;
    color: black;
    content: attr(data-legal-check-at);
    white-space:nowrap;
    font-size: 11px;
    display: block;
    height: 24px;
    background-image: url(/_lib/lc.png);
    background-size: auto 20px;
    background-repeat: no-repeat;
    padding-top: 15px;
    padding-left: 0px;
    background-position: left top;
}

[data-legal-position="left-top"]::after{
	left:var(--legal-offset-h);
	top:var(--legal-offset-v);
}
[data-legal-position="left-bottom"]::after{
	left:var(--legal-offset-h);
	bottom:var(--legal-offset-v);
}
[data-legal-position="right-top"]::after{
	right:var(--legal-offset-h);
	top:var(--legal-offset-v);
}
[data-legal-position="right-bottom"]::after{
	right:var(--legal-offset-h);
	bottom:var(--legal-offset-v);
}
/*common_css*/
@charset "utf-8";
/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */

*,
::before,
::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}
body {
  margin: 0;
}
main {
  display: block;
}
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
dt {
  font-weight: inherit;
}
dd {
  margin-left: 0;
}
hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}
address {
  font-style: inherit;
}
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}
abbr[title] {
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted; /* 2 */
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}
[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}
[type="radio"] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}
button,
input {
  /* 1 */
  overflow: visible;
}
button,
select {
  /* 1 */
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
  cursor: default;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
select::-ms-expand {
  display: none;
}
option {
  padding: 0;
}
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}
legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  outline-offset: -2px; /* 1 */
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
details {
  display: block;
}
summary {
  display: list-item;
}
[contenteditable] {
  outline: none;
}

/* Table */
/* ============================================ */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption {
  text-align: left;
}
td,
th {
  vertical-align: top;
  padding: 0;
}
th {
  text-align: left;
  font-weight: bold;
}

/* Misc */
/* ============================================ */
template {
  display: none;
}
[hidden] {
  display: none;
}



/***************************************************
 base.css
***************************************************/
/*  tags */
html {
  max-width: 100vw;
  font-size: 62.5%;
}

* {
  box-sizing: border-box;
}

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

i,
em {
  font-style: normal;
}

/* objedt-fit */
.of_cont img,
img.of_cont {
  object-fit: contain;
}

.of_cover img,
img.of_cover {
  object-fit: cover;
}

/**hover：拡大**/
.scale {
  overflow: hidden;
}

.scale img {
  transition: transform 0.4s linear;
}

:is(a:hover .scale, a.scale:hover,.scale:hover) img {
  transform: scale(1.06);
}

/* リンク */
a {
  -webkit-appearance: none;
  color: unset;
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}

/* PC電話ボタン無効 */
a[href^="tel"],
a[href=""] {
  pointer-events: none;
}

@media (max-width: 520px) {
  a[href^="tel"] {
    pointer-events: auto;
  }
}

/* opacity */
@keyframes opacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* iframe */
iframe {
  width: 100%;
  height: auto;
}

.youtube iframe {
  aspect-ratio: 16 / 9;
}

.youtube.short iframe,
.instagram iframe {
  aspect-ratio: 9 / 16;
}

.map iframe,
.calendar iframe {
  aspect-ratio: 3 / 2;
}

/* display */
.d_none {
  display: none;
}

.d_block {
  display: block;
}

.d_iblock {
  display: inline-block;
}

.d_grid {
  display: grid;
}

.sp {
  display: none;
}

@media (max-width: 520px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}

/* [class*="grid_"] 等分 */
[class*="grid_"] {
  --gap: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fill,
      minmax(calc(100% / var(--grid) - var(--gap)), 1fr));
  grid-auto-rows: min-content;
  gap: var(--gap);
}

.grid_2c {
  --grid: 2;
}

.grid_3c {
  --grid: 3;
}

.grid_4c {
  --grid: 4;
}

@media (max-width: 520px) {

  /*768*/
  [class*="grid_"] {
    --gap: 20px;
  }

  [class*="grid_"].sp_2c {
    --grid: 2;
  }

  [class*="grid_"]:not(.sp_2c) {
    grid-template-columns: 1fr !important;
  }
}

/* .flex_2c 按分 */
.flex_2c {
  --gap: 50px;
  --flex-2c: calc((100% - var(--gap)) / 2);
  display: flex;
  gap: var(--gap);
}

.flex_2c>*:first-child {
  width: var(--flex-2c);
}

.flex_2c>*:last-child {
  flex: 1;
}

@media (max-width: 520px) {
  .flex_2c {
    --gap: 20px;
  }

  .flex_2c:not(.sp_2c) {
    flex-flow: column;
  }

  .flex_2c:not(.sp_2c)>*:first-child,
  .flex_2c:not(.sp_2c)>*:last-child {
    width: 100%;
  }
}

/* ctr */
.ctr_flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 520px) {
  .ctr_flex.sp1c {
    flex-flow: column;
  }
}

.ctr_posi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* flex */
body .d_flex {
  display: flex;
}

body .reverse {
  flex-flow: row-reverse;
}

@media (max-width: 520px) {

  body .d_flex.sp1c,
  body .reverse {
    flex-flow: column;
  }
}

/* justify-content */
body .jc_c {
  justify-content: center;
}

body .jc_fs {
  justify-content: flex-start;
}

body .jc_fe {
  justify-content: flex-end;
}

body .jc_sb {
  justify-content: space-between;
}

body .jc_sa {
  justify-content: space-around;
}

/* align-items */
body .ai_c {
  align-items: center;
}

body .ai_fs {
  align-items: flex-start;
}

body .ai_fe {
  align-items: flex-end;
}

body .ai_s {
  align-items: stretch;
}

/* gap */
body .gap10 {
  gap: 10px;
}

body .gap20 {
  gap: 20px;
}

body .gap30 {
  gap: 30px;
}

body .gap40 {
  gap: 40px;
}

body .gap50 {
  gap: 50px;
}

/* width */
body .w100vw {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}

body .w100p {
  width: 100%;
}

body .wbase {
  width: min(90%, var(--base-width));
  margin-inline: auto;
}

body .w980 {
  width: min(90%, 980px);
  margin-inline: auto;
}

/* margin */
body .mrl_a {
  margin-inline: auto;
}

body .mtb_10 {
  margin-block: 10px;
}

body .mtb_20 {
  margin-block: 20px;
}

body .mtb_30 {
  margin-block: 30px;
}

body .mtb_40 {
  margin-block: 40px;
}

body .mtb_50 {
  margin-block: 50px;
}

body .mt0 {
  margin-top: 0px;
}

body .mt10 {
  margin-top: 10px;
}

body .mt20 {
  margin-top: 20px;
}

body .mt30 {
  margin-top: 30px;
}

body .mt40 {
  margin-top: 40px;
}

body .mt50 {
  margin-top: 50px;
}

body .mt100 {
  margin-top: 100px;
}

body .mr0 {
  margin-right: 0px;
}

body .mr10 {
  margin-right: 10px;
}

body .mr20 {
  margin-right: 20px;
}

body .mr30 {
  margin-right: 30px;
}

body .mr40 {
  margin-right: 40px;
}

body .mr50 {
  margin-right: 50px;
}

body .mr100 {
  margin-right: 100px;
}

body .mb0 {
  margin-bottom: 0px;
}

body .mb10 {
  margin-bottom: 10px;
}

body .mb20 {
  margin-bottom: 20px;
}

body .mb30 {
  margin-bottom: 30px;
}

body .mb40 {
  margin-bottom: 40px;
}

body .mb50 {
  margin-bottom: 50px;
}

body .mb100 {
  margin-bottom: 100px;
}

body .ml0 {
  margin-left: 0px;
}

body .ml10 {
  margin-left: 10px;
}

body .ml20 {
  margin-left: 20px;
}

body .ml30 {
  margin-left: 30px;
}

body .ml40 {
  margin-left: 40px;
}

body .ml50 {
  margin-left: 50px;
}

body .ml100 {
  margin-left: 100px;
}

@media (max-width: 520px) {
  body .mt50 {
    margin-top: 30px;
  }

  body .mr50 {
    margin-right: 30px;
  }

  body .mb50 {
    margin-bottom: 30px;
  }

  body .ml50 {
    margin-left: 30px;
  }

  body .mt100 {
    margin-top: 50px;
  }

  body .mr100 {
    margin-right: 50px;
  }

  body .mb100 {
    margin-bottom: 50px;
  }

  body .ml100 {
    margin-left: 50px;
  }
}

/* padding */
body .pt0 {
  padding-top: 0px;
}

body .pt10 {
  padding-top: 10px;
}

body .pt20 {
  padding-top: 20px;
}

body .pt30 {
  padding-top: 30px;
}

body .pt40 {
  padding-top: 40px;
}

body .pt50 {
  padding-top: 50px;
}

body .pt100 {
  padding-top: 100px;
}

body .pr0 {
  padding-right: 0px;
}

body .pr10 {
  padding-right: 10px;
}

body .pr20 {
  padding-right: 20px;
}

body .pr30 {
  padding-right: 30px;
}

body .pr40 {
  padding-right: 40px;
}

body .pr50 {
  padding-right: 50px;
}

body .pr100 {
  padding-right: 100px;
}

body .pb0 {
  padding-bottom: 0px;
}

body .pb10 {
  padding-bottom: 10px;
}

body .pb20 {
  padding-bottom: 20px;
}

body .pb30 {
  padding-bottom: 30px;
}

body .pb40 {
  padding-bottom: 40px;
}

body .pb50 {
  padding-bottom: 50px;
}

body .pb100 {
  padding-bottom: 100px;
}

body .pl0 {
  padding-left: 0px;
}

body .pl10 {
  padding-left: 10px;
}

body .pl20 {
  padding-left: 20px;
}

body .pl30 {
  padding-left: 30px;
}

body .pl40 {
  padding-left: 40px;
}

body .pl50 {
  padding-left: 50px;
}

body .pl100 {
  padding-left: 100px;
}

@media (max-width: 520px) {
  body .pt50 {
    padding-top: 30px;
  }

  body .pr50 {
    padding-right: 30px;
  }

  body .pb50 {
    padding-bottom: 30px;
  }

  body .pl50 {
    padding-left: 30px;
  }

  body .pt100 {
    padding-top: 50px;
  }

  body .pr100 {
    padding-right: 50px;
  }

  body .pb100 {
    padding-bottom: 50px;
  }

  body .pl100 {
    padding-left: 50px;
  }
}

/* [class*="calc_"] */
body .calc_pr {
  padding-right: max(5%, calc((100vw - var(--base-width)) / 2));
}

body .calc_pl {
  padding-left: max(5%, calc((100vw - var(--base-width)) / 2));
}

@media (max-width: 520px) {
  body [class*="calc_"] {
    padding-left: 5%;
    padding-right: 5%;
  }
}

body .fw_b {
  font-weight: bold;
}

body .fw_m {
  font-weight: 500;
}

body .fw_n {
  font-weight: normal;
}

body .fs10 {
  font-size: 1rem;
}

body .fs12 {
  font-size: 1.2rem;
}

body .fs14 {
  font-size: 1.4rem;
}

body .fs16 {
  font-size: 1.6rem;
}

body .fs18 {
  font-size: 1.8rem;
}

body .fs20 {
  font-size: 2rem;
}

body .fs22 {
  font-size: 2.2rem;
}

body .fs24 {
  font-size: 2.4rem;
}

body .fs26 {
  font-size: 2.6rem;
}

body .fs28 {
  font-size: 2.8rem;
}

body .fs30 {
  font-size: 3rem;
}

body .fs35 {
  font-size: 3.5rem;
}

body .fs40 {
  font-size: 4rem;
}

body .fs45 {
  font-size: 4.5rem;
}

body .fs50 {
  font-size: 5rem;
}

body .fs55 {
  font-size: 5.5rem;
}

body .fs60 {
  font-size: 6rem;
}

@media (max-width: 520px) {
  body .fs16 {
    font-size: 1.4rem;
  }

  body .fs18 {
    font-size: 1.6rem;
  }

  body .fs20,
  body .fs22 {
    font-size: 1.8rem;
  }

  body .fs24,
  body .fs26 {
    font-size: 2.2rem;
  }

  body .fs28,
  body .fs30 {
    font-size: 2.6rem;
  }

  body .fs35 {
    font-size: 3rem;
  }

  body .fs40 {
    font-size: 3.4rem;
  }

  body .fs45 {
    font-size: 3.8rem;
  }

  body .fs50 {
    font-size: 4.2rem;
  }

  body .fs55 {
    font-size: 4.6rem;
  }

  body .fs60 {
    font-size: 5rem;
  }
}

/* line-height */
body .lh10 {
  line-height: 1;
}

body .lh12 {
  line-height: 1.2;
}

body .lh14 {
  line-height: 1.4;
}

body .lh16 {
  line-height: 1.6;
}

body .lh18 {
  line-height: 1.8;
}

body .lh20 {
  line-height: 2;
}

/* letter-spacing */
body .ls1 {
  letter-spacing: 1px;
}

body .ls_1 {
  letter-spacing: -1px;
}

/* text-align */
body .t_C,
body .t_Cr,
body .t_Cl {
  text-align: center;
}

body .t_R,
body .t_Rc {
  text-align: right;
}

body .t_L,
body .t_Lc {
  text-align: left;
}

@media (max-width: 520px) {

  body .t_Rc,
  body .t_Lc {
    text-align: center;
  }

  body .t_Cr {
    text-align: right;
  }

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

/* text-indent */
.t_i {
  padding-left: 1em;
  text-indent: -1em;
}
/*widget:5e5cc7bb-7531-4684-a761-1a30443a057f*/
/*instance:470*//*instance mediea*/@media screen and (max-width: 520px){}/*widget:3f5a9c0b-9595-415a-9884-3a104bfd2103*/
/*widget:776b26d9-9737-43ae-8dda-154334bc56b0*/
/*widget:b760b6f5-5077-45b6-baca-2863986ba247*/
/*widget:46c81155-3d3d-4215-95b3-f2260f10fdf7*/
/*widget:537be97e-33c7-4edd-a38d-6bc91a9d29bf*/
/*widget:60fea956-1669-422e-a51b-dc4c8b77ec4e*/
[data-lib="303"]{position: relative;
	z-index: 30;
	--btnAw:380px;
	--btnAm:15px auto;}[data-lib="303"] .left{width: 800px;
	margin: 50px auto 100px;
	color:var(--black);}[data-lib="303"] .category{display: flex;
	justify-content: center;
	font-size: 14px;
	align-items: center;
	margin: 20px auto;
	gap: 15px;}[data-lib="303"] .entry-content{border:1px solid var(--gray);
	padding:0 0 1px;
	margin:50px 10%;
	color:var(--gray);}[data-lib="303"] .entry-content dt{text-align:center;
	font-weight: bold;
	font-size: 1.1em;
	padding:10px 30px;
	background: var(--gray);
	color:var(--white);}[data-lib="303"] .entry-content dt + dd{border-top:1px solid var(--gray);}[data-lib="303"] .entry-content dd{counter-increment: list;
	padding:15px 30px 15px 3em;
	text-indent: -1.2em;}[data-lib="303"] .entry-content dd:before{content: counter(list)". ";}[data-lib="303"] .entry-content dd a{text-decoration: underline;}[data-lib="303"] .entry-content dd a:hover{text-decoration: none;}[data-lib="303"] .left .fixnum{margin-bottom: 30px;}[data-lib="303"] .left figure{border: 1px solid #f1f1f1;
	padding: 20px;
	text-align: center;
	width:auto;
	max-width: 100%;
	margin: 30px 0;}[data-lib="303"] .left figure img{display: block;
	margin: 0 auto;}[data-lib="303"] .left .youtube{width: 90%;
	margin: 20px auto;}[data-lib="303"] .left .richtext{margin: 50px 5%;}[data-lib="303"] .left .fixnum h3{font-weight: bold;
	font-size: 1.3em;
	text-align: left;
	border-bottom: 1px solid #000;
	padding: 20px;
	margin: 20px auto;}[data-lib="303"] .left .container{width: 768px;}[data-lib="303"] .top-news{padding-top: 100px;}[data-lib="303"] .list-news a{grid-template-rows: auto 1fr;
	grid-template-columns: 100px 100px auto 1fr auto;
	grid-template-areas:
"time em i . pic"
"p p p . pic";}[data-lib="303"] .list-news picture{width: 150px;}[data-lib="303"] .list-news img{width: 100%;
	height: 100%;
	border-radius: 10px;}@media screen and (max-width: 520px){[data-lib="303"] .left{width: 90%;
	margin: 40px auto 40px;}[data-lib="303"]{--btnAw:90vw;
	padding: 0;}[data-lib="303"] .entry-content{padding:10px 0 15px;
	margin:30px 5% 20px;}[data-lib="303"] .entry-content dt{padding:0;}[data-lib="303"] .entry-content dd{padding:15px 10px 0 2em;
	text-indent: -1.2em;}[data-lib="303"] .left   figure{border: 1px solid #f1f1f1;
	padding: 8px;
	text-align: center;}[data-lib="303"] .left h2{font-size: 1.3em;}[data-lib="303"] .left .richtext{margin: 20px auto;}[data-lib="303"] .left .youtube{width: 100%;}[data-lib="303"] .left .fixnum h3{font-size: 1.2em;
	padding: 10px 0;}[data-lib="303"] .top-news{padding-top: 40px;}[data-lib="303"] .list-news a{grid-template-rows: auto auto auto;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
        "pic time em"
        "pic i i"
        "pic p p";
	align-items: stretch;}[data-lib="303"] .list-news picture{width: 100px;
	max-height: 100px;}}/*layout:1*//*layout:2*/@charset "utf-8";
/* CSS Document */

/***************************************************
: style.css
***************************************************/
:root {
  --base-width: 1100px;
  --over-width-half: calc((100vw - var(--base-width)) / 2);
  --base-color: var(--black);
  --base-bg: var(--white);
  --ff: "Zen Maru Gothic", serif;
  --webf: "Caveat", cursive;
  --icons: 'Material Icons';
  --transition: 0.3s;

  --black: #505050;
  --white: #fff;
  --gray: #AAB6BD;
  --gray2:#f4f7f9;

  --color_typeB: #036eb8;
  --color_typeB-2: #4f9acd;
  --color_typeB-3: #7aa7d4;
  --color_typeB-4: #5fc4e6;
  --color_typeB-5: #53aae4;
  --color_typeB-6: #a2c4ff;
  --color_typeB-7: #f1f7ff;
  --color_typeG: #57d0c0;
  --color_typeG-2: #9dc15a;
  --color_typeG-3: #a1cd58;
  --color_typeG-4: #0da98c;
  --color_typeP: #cc6a9a;
  --color_typeP-2: #f7a2c1;
  --color_typeP-3: #e5a1c1;
  --color_typeT: #e2cea1;
  --color_typeT-2: #f9f8f3;
  --grad1: linear-gradient(to right, #69e5c2 0%, #036eb8 100%);
  --grad2: linear-gradient(to right, #b7fae2 0%, #8bc4f3 100%);

}

@media (max-width: 520px) {
  :root {
    --base-width: 100%;
    --over-width-half: 5%;
  }
}

body {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-width: var(--base-width);
  max-width: 100vw;
  margin: 0 auto;
  font-size: 1.6rem;
  font-family: var(--ff);
  /* font-feature-settings: "palt"; */
  line-height: 1.6;
  word-break: break-all;
  color: var(--base-color);
  background-color: var(--base-bg);
}

@media (max-width: 520px) {
  body {
    font-size: 1.4rem;
  }
}

/**================================================== 
 section
================================================== **/
section,
article,
aside {
  position: relative;
  z-index: 0;
}

.wrap {
  overflow: hidden;
}

ul {
  grid-area: ul;
}

dl {
  grid-area: dl;
}

a {
  grid-area: btn;
}

picture {
  grid-area: pic;
}

.w_base {
  width: min(90%, var(--base-width));
  margin-left: auto;
  margin-right: auto;
}

.sec-w_base {
  padding-left: var(--over-width-half);
  padding-right: var(--over-width-half);
}

.sec-p1 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.sec-bg1 {
  background: url(/common/images/deko_nami.png) no-repeat top center / 100% auto;
}

.sec-bg2 {
  background: var(--color_typeT-2);
}

.sec-bg3 {
  background-image: url(/common/images/deko_three.png);
  background-repeat: no-repeat;
  background-position: bottom right 5%;
  background-size: auto;
}

.sec-bg4 {
  background-image: url(/common/images/deko_home02.png);
  background-repeat: no-repeat;
  background-position: bottom right 5%;
  background-size: auto;
}

.sec-bg5 {
  background: url(/common/images/deko_home01.png) no-repeat left 5% bottom, linear-gradient(to bottom, transparent 0%, var(--color_typeT-2) 30%);
}

.sec-bg6 {
  background-image: linear-gradient(#F4F6F7 1px, transparent 1px), linear-gradient(to right, #F4F6F7 1px, transparent 1px);
  background-size: 20px 20px;
}

.sec-bg7 {
  background: var(--color_typeB-7);
}

@media screen and (max-width:520px) {
  .sec-bg1 {
    padding-top: 50px;
  }

  .sec-bg2 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .sec-bg3 {
    background-size: auto 120px;
  }

  .sec-bg4 {
    background-size: auto 50px;
  }

  .sec-bg5 {
    background-size: auto 80px, auto;
  }
}


/**================================================== 
 各ページ デコレーション
================================================== **/

*[class^="kazari-deko"] {
  position: absolute;
  z-index: 50;
}

.sec-kazari1 {
  position: relative;
  width: max(80%, var(--base-width));
  margin: 0 auto;
}

.sec-kazari1 .kazari-deko1 {
  width: 230px;
  left: -40px;
  bottom: -103px;
  rotate: 45deg;
  animation: vertical 4s ease-in-out infinite alternate;
}

.sec-kazari1 .kazari-deko2 {
  width: 126px;
  left: -120px;
  bottom: -30px;
  animation: vertical 4.5s ease-in-out infinite alternate;
}

@media screen and (max-width:520px) {
  .sec-kazari1 .kazari-deko1 {
    width: 80px;
    left: 80%;
    bottom: -20px;
    rotate: 45deg;
  }

  .sec-kazari1 .kazari-deko2 {
    width: 66px;
    left: 70%;
    bottom: 10px;
  }
}

.sec-kazari2 {
  position: relative;
}

.sec-kazari2 .kazari-deko1 {
  width: 150px;
  top: -120px;
  right: 180px;
  animation: vertical 4.5s ease-in-out infinite alternate;
}

.sec-kazari2 .kazari-deko2 {
  width: 206px;
  top: -20px;
  right: 130px;
  rotate: 45deg;
  animation: vertical 4s ease-in-out infinite alternate;
}


@media screen and (max-width:520px) {
  .sec-kazari2 .kazari-deko1 {
    width: 60px;
    top: -10px;
    right: 70px;
  }

  .sec-kazari2 .kazari-deko2 {
    width: 100px;
    top: -20px;
    right: 0px;
  }
}

.sec-kazari3 {
  position: relative;
  width: max(80%, var(--base-width));
  margin: 0 auto;
}

.sec-kazari3 .kazari-deko1 {
  width: 130px;
  top: -30px;
  left: -90px;
  animation: vertical 4.5s ease-in-out infinite alternate;
}

.sec-kazari3 .kazari-deko2 {
  width: 206px;
  top: 0;
  left: 0px;
  animation: vertical 4s ease-in-out infinite alternate;
}

@media screen and (max-width:520px) {
  .sec-kazari3 .kazari-deko1 {
    width: 60px;
    top: -10px;
    left: 60px;
  }

  .sec-kazari3 .kazari-deko2 {
    width: 100px;
    top: -20px;
    left: -20px;
  }
}

.sec-kazari4 {
  position: relative;
}

.sec-kazari4 .kazari-deko1 {
  width: 230px;
  right: 220px;
  top: -80px;
  animation: vertical 4s ease-in-out infinite alternate;
}

.sec-kazari4 .kazari-deko2 {
  width: 126px;
  right: 90px;
  top: -70px;
  animation: vertical 4.5s ease-in-out infinite alternate;
}

@media screen and (max-width:520px) {
  .sec-kazari4 .kazari-deko1 {
    width: 115px;
    right: -20px;
    top: -30px;
  }

  .sec-kazari4 .kazari-deko2 {
    width: 60px;
    right: 70px;
    top: 0px;
  }
}

.sec-kazari5 {
  position: relative;
}

.sec-kazari5 .kazari-deko1 {
  width: 280px;
  bottom: -100px;
  right: 30px;
  animation: vertical 4.5s ease-in-out infinite alternate;
  opacity: 0.5;
  mix-blend-mode: multiply;
}

@media screen and (max-width:520px) {
  .sec-kazari5 .kazari-deko1 {
    width: 100px;
    bottom: -80px;
    right: 75%;
  }
}

.sec-kazari6 {
  position: relative;
  width: var(--base-width);
  margin: 0 auto;
}

.sec-kazari6 .kazari-deko1 {
  width: 150px;
  top: -100px;
  left: -97px;
  animation: vertical 4.5s ease-in-out infinite alternate;
}

.sec-kazari6 .kazari-deko2 {
  width: 206px;
  top: -55px;
  left: 0;
  rotate: 45deg;
  animation: vertical 4s ease-in-out infinite alternate;
}

@media screen and (max-width:520px) {
  .sec-kazari6 .kazari-deko1 {
    width: 70px;
    top: -10px;
    left: auto;
    right: 60px;
  }

  .sec-kazari6 .kazari-deko2 {
    width: 103px;
    top: 0px;
    left: auto;
    right: 10px;
  }
}

/**sectionにつける。**/
.sec-kazari7 {
  position: relative;
  z-index: 1;
}

.sec-kazari7 .kazari-deko1 {
  width: 603px;
  top: 0;
  left: -130px;
  opacity: 0.2;
  animation: vertical 4.5s ease-in-out infinite alternate;
}

.sec-kazari7 .kazari-deko2 {
  width: 397px;
  top: 365px;
  right: -154px;
  opacity: 0.2;
  animation: vertical 4s ease-in-out infinite alternate;
}



/**================================================== 
 タイトル
================================================== **/
.titZ {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

/*
.titZ:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 330px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0) 100%);
}
*/

.titZ svg {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -1px;
}

.titZ .h1 {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--white);
  background: var(--color_typeB);
  width: fit-content;
  padding: 15px 100px 30px;
  border-radius: 100vw;
}

.titZ .h1 h1 {
  font-size: 3.6rem;
  line-height: 1.2;
  font-weight: 500;
}

.titZ .h1 i {
  font-family: var(--webf), var(--ff);
  font-size: 2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}


@media screen and (max-width:520px) {
  .titZ {
    height: 70vw;
  }

  .titZ .h1 {
    top: 75%;
    width: 80%;
    padding: 10px 0 15px;
    border-radius: 100vw;
    z-index: 50;
  }

  .titZ .h1 h1 {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 500;
    padding: 0 30px;
  }

  .titZ .h1 i {
    display: none;
  }
}

:root {
  --titAc: var(--color_type2);
  --titAm: 0 0 40px;
  --titAta: left;
  --titAai: flex-start;
  --titAjc: flex-start;
  --titAff: column;
  --titAgap: 0px;
  --titAp: 0;
  --titAfz: 3.8rem;

  --titA_ic: var(--color_typeB);
  --titA_ifz: 2.2rem;
}

.titA {
  display: flex;
  align-items: var(--titAai);
  justify-content: var(--titAjc);
  flex-flow: var(--titAff);
  gap: var(--titAgap);
  font-family: var(--ff);
  font-size: var(--titAfz);
  text-align: var(--titAta);
  color: var(--titAc);
  padding: var(--titAp);
  margin: var(--titAm);
  line-height: 1.3;
  font-weight: 500;

  grid-area: titA;
}

.titA i {
  display: block;
  font-family: var(--webf);
  font-size: var(--titA_ifz);
  font-style: italic;
  color: var(--titA_ic);
  line-height: 1.3;
  font-weight: 400;
}

:root {
  --titBfz: 2.4rem;
  --titBc: var(--black);
  --titBm: 0 0 40px;
  --titBta: center;
  --titBp: 0;
  --titBfw: normal;
  --titBbg: none;
}

.titB {
  font-size: var(--titBfz);
  text-align: var(--titBta);
  color: var(--titBc);
  padding: var(--titBp);
  margin: var(--titBm);
  line-height: 1.5;
  font-weight: var(--titBfw);
  background: var(--titBbg);
  border-radius: 5px;

  grid-area: titB;
}

@media screen and (max-width:520px) {
  :root {
    --titAm: 0 0 20px;
    --titAfz: 2.5rem;
    --titA_ifz: 2rem;
  }

  :root {
    --titBfz: 1.8rem;
  }
}


/**================================================== 
 ボタン
================================================== **/
:root {
  --btnAfz: 1.6rem;
  --btnAw: min(100%, 440px);
  --btnAm: 30px auto;
  --btnAp: 20px 20px;
  --btnAbg: none;
  --btnAbd: none;
  --btnAc: var(--white);
  --btnAfw: normal;
  --btnAta: center;
}

.btnA {
  font-size: var(--btnAfz);
  width: var(--btnAw);
  margin: var(--btnAm);
  padding: var(--btnAp);
  color: var(--btnAc);
  background: var(--btnAbg);
  border: var(--btnAbd);

  position: relative;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 35px;
  align-items: center;
  border-radius: 50px;
  text-align: var(--btnAta);
  font-weight: var(--btnAfw);
  overflow: hidden;
  z-index: 1;
}

.btnA>* {
  position: relative;
  z-index: 5;
}

.btnA:after {
  content: "→";
  display: block;
  font-family: var(--webf);
  font-size: 1.2rem;
  line-height: 1;
  margin-left: 15px;
}

.btnA:before {
  right: 0;
  content: "";
  width: 200%;
  height: 100%;
  position: absolute;
  content: "";
  top: 0;
  transition: .2s linear;
  z-index: -1;
  background: linear-gradient(to right, #38acbe 50%, #69e5c2 50%, #036eb8 100%);
}

.btnA:hover:before,
a:hover .btnA:before {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  right: -100%;
}


:root {
  --btnA-2fz: 1.6rem;
  --btnA-2w: min(100%, 440px);
  --btnA-2m: 30px auto;
  --btnA-2p: 20px 20px;
  --btnA-2bg: none;
  --btnA-2bd: none;
  --btnA-2c: var(--color_typeB);
  --btnA-2fw: normal;
  --btnA-2ta: center;
}

.btnA-2 {
  font-size: var(--btnA-2fz);
  width: var(--btnA-2w);
  margin: var(--btnA-2m);
  padding: var(--btnA-2p);
  color: var(--btnA-2c);
  background: var(--btnA-2bg);
  border: var(--btnA-2bd);

  position: relative;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 35px;
  align-items: center;
  border-radius: 50px;
  text-align: var(--btnA-2ta);
  font-weight: var(--btnA-2fw);
  overflow: hidden;
  z-index: 1;
}

.btnA-2>* {
  position: relative;
  z-index: 5;
}

.btnA-2:after {
  content: "→";
  display: block;
  font-family: var(--webf);
  font-size: 1.2rem;
  line-height: 1;
  margin-left: 15px;
}

.btnA-2:before {
  right: 0;
  content: "";
  width: 200%;
  height: 100%;
  position: absolute;
  content: "";
  top: 0;
  transition: .2s linear;
  z-index: -1;
  background: linear-gradient(to right, var(--color_typeB) 50%, #ffffff 50%, #ffffff 100%);
}

.btnA-2:hover:before,
a:hover .btnA-2:before {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  right: -100%;
}

.btnA-2:hover,
a:hover .btnA-2 {
  color: var(--white);
}

:root {
  --btnBfz: 1.6rem;
  --btnBw: fit-content;
  --btnBm: 30px 0;
  --btnBp: 3px;
  --btnBbg: none;
  --btnBc: var(--black);
  --btnBfw: normal;
  --btnBhv: var(--color_typeB);
}

.btnB {
  font-size: var(--btnBfz);
  width: var(--btnBw);
  margin: var(--btnBm);
  padding: var(--btnBp);
  color: var(--btnBc);
  background: var(--btnBbg);
  border-bottom: 1px solid var(--black);
  border-color: var(--btnBc);

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  text-align: center;
  font-weight: var(--btnBfw);
}

.btnB:after {
  content: "→";
  display: block;
  line-height: 1;
}

.btnB:hover,
a:hover .btnB {
  color: var(--btnBhv);
  border-color: var(--btnBhv);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

@media screen and (max-width:520px) {
  :root {
    --btnAp: 17px;
    --btnA-2p: 17px;
    --btnBfz: 1.4rem;

  }
}



/**================================================== 
header
================================================== **/
.header {
  position: relative;
  width: 100%;
}

.logo {
  aspect-ratio: 1/1;
  width: 290px;
  height: auto;
  border-radius: 50vw;
  background: var(--white);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 74px 40px 0;
  position: absolute;
  top: -80px;
  left: -40px;
  z-index: 100;
  box-shadow: 0 0 23px 15px var(--color_typeB-6);
}

.logo img {
  width: 122px;
  height: auto;
}

header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-template-areas: "menu1"
    "nav";
  align-items: center;
  justify-content: end;
  /*width: 100%;
  min-width: var(--base-width);*/
  background: none;
  padding: 0 2% 0 8%;
  font-weight: 500;
  border-radius: 0 0 0 100px;
}

header.on {
  background: rgba(255, 255, 255, 0.9);
}

header .menu1 {
  grid-area: menu1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  padding: 15px 0 13px;
}

header .menu1 .h-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  gap: 3px;
}

header .menu1 .h-tel a {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color_typeB);
}

header .menu1 .h-tel svg {
  width: 15px;
  height: 20px;
  fill: var(--color_typeB);
}

header .menu1 .h-tel p {
  font-size: 1.2rem;
}

header .menu1 :is(.h-rec, .h-toi, .h-dl) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--grad1);
  color: var(--white);
  line-height: 1;
  font-size: 1.6rem;
  text-align: center;
  padding: 10px 40px;
  border-radius: 50px;
}

header .menu1 :is(.h-rec, .h-toi,.h-dl) svg {
  width: 16px;
  height: 20px;
  fill: var(--white);
}

header nav {
  grid-area: nav;
  padding: 0 0 10px;
}

header nav .gnav {
  display: flex;
  justify-content: flex-end;
  gap: 50px;
}

header nav .gnav a:hover {
  color: var(--black);
}

.hamburger,
#hamburger-check {
  display: none;
}

@media screen and (max-width:520px) {
  .logo {
    width: 140px;
    padding: 0 40px 15px 0;
    top: -40px;
    left: -20px;
    box-shadow: 0 0 15px 10px var(--color_typeB-6);
  }

  .logo img {
    width: 60px;
    height: auto;
  }

  header.on {
    background: none;
  }

  header .menu1 {
    display: none;
  }

  .hamburger {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 50px;
    width: 50px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background: var(--grad1);
    border-radius: 50px;
  }

  #hamburger-check {
    display: none;
  }

  /**タップされる前 open**/
  .hamburger span,
  .hamburger span:before,
  .hamburger span:after {
    content: '';
    display: block;
    height: 1px;
    width: 25px;
    border-radius: 3px;
    background-color: var(--white);
    position: absolute;
  }

  .hamburger span:before {
    bottom: 8px;
  }

  .hamburger span:after {
    top: 8px;
  }

  /**タップされたとき close**/
  #hamburger-check:checked~.hamburger span {
    background-color: rgba(255, 255, 255, 0);
  }

  #hamburger-check:checked~.hamburger span::before {
    bottom: 0;
    transform: rotate(45deg);
  }

  #hamburger-check:checked~.hamburger span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  header nav .gnav {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 100%;
    /*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background: var(--color_typeT-2);
    color: var(--color_typeB);
    transition: var(--transition);
    /*アニメーション設定*/

    font-size: 1.2em;
    flex-flow: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 25px;
    padding: 150px 30px 20px;
    margin: 0;
  }

  header nav .gnav a {
    width: 100%;
    padding: 0 0 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px dotted var(--color_typeB-3);
  }

  header nav .gnav a:after {
    content: "→";
  }

  #hamburger-check:checked~.gnav {
    left: 0;
    /*メニューを画面内へ*/
  }

}


.fix-btn {
  display: none;
}

@media screen and (max-width:520px) {
  .fix-btn {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--grad1);
    padding: 0;
    gap: 0px;
    z-index: 120;
  }

  .fix-btn a {
    display: flex;
    flex-flow: column;
    justify-content: center;
    gap: 0px;
    text-align: center;
    color: var(--white);
    line-height: 1;
  }

  .fix-btn :is(.h-tel, .h-rec, .h-toi) {
    flex: 1;
    flex-flow: column;
    gap: 8px;
    background: none;
    padding: 10px 5px 5px;
    border-left: 1px solid var(--white);
    border-radius: 0;
    font-size: 1.4rem;
  }

  .fix-btn :is(.h-tel, .h-rec, .h-toi) svg {
    width: 15px;
    height: 15px;
    fill: var(--color_typeB);
    background: var(--white);
    padding: 1px;
    margin: 0 auto;
    border-radius: 50px;
    box-shadow: 0 0 0 3px var(--white);
  }

  .fix-btn .h-tel {
    font-size: 1.6rem;
    border: none;
  }

  .fix-btn .h-tel.sisetu {
    background: var(--color_typeB-2);
  }
}

/**================================================== 
 footer
================================================== **/

footer {
  position: relative;
  padding-top: 70px;
  padding-bottom: 55px;
  background: var(--grad2);
  font-weight: 500;

  display: grid;
  grid-template-rows: auto auto 1em;
  grid-template-columns: 112px auto 1fr;
  grid-template-areas: "logo dl ul"
    "sns sns sns"
    "copy copy copy";
  gap: 30px 70px;
  z-index: 1;
}

footer:after{
  content: "";
  width: 200px;
  height: 200px;
  background: url(/common/images/kondou1.png) no-repeat bottom center / contain;
position: absolute;
right: 5%;
bottom: 30px;
}

footer .f-logo {
  grid-area: logo;
  mix-blend-mode: darken;
}

footer ul {
  columns: 2;
}

footer ul li {
  margin: 0 0 20px;
}

footer dd {
  margin: 0 0 30px;
}

footer .sns {
  grid-area: sns;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 50px 0 0;
}

footer .sns img {
  width: 33px;
}

footer .copy {
  grid-area: copy;
  text-align: center;
  font-size: 1.4rem;
}

@media screen and (max-width:520px) {
  footer {
    padding-top: 40px;
    padding-bottom: 80px;

    display: grid;
    grid-template-rows: auto auto auto auto auto;
    grid-template-columns: 1fr;
    grid-template-areas: "logo"
      "dl"
      "ul"
      "sns"
      "copy";
    gap: 10px;
  }

footer:after{

  width: 100px;
  height: 100px;
bottom: 150px;
}

  footer .f-logo {
    text-align: center;
  }

  footer .f-logo img {
    width: 80px;
  }

  footer ul {
    columns: 2;
  }

  footer dd {
    margin: 0 0 1em;
  }

  footer .sns {
    padding: 30px 0 0;
  }

  footer .copy {
    font-size: 1.2rem;
  }
}

/**================================================== 
 パンくずリスト
================================================== **/
#breadcrumb {
  position: relative;
  font-size: 0.8em;
  width: 100%;
  margin: 0 0;
  padding: 13px var(--over-width-half);
  font-weight: normal;
  color: var(--gray);
  z-index: 30;
}

#breadcrumb ul,
#breadcrumb ol {
  max-width: 100%;
  margin: 0 auto;
}

#breadcrumb ul li,
#breadcrumb ol li {
  display: inline-block;
  padding: 0 5px;
}

#breadcrumb ul li+li:before,
#breadcrumb ol li+li:before {
  font-size: 12px;
  line-height: 1;
  top: 1.5em;
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 10px 0 0;
  content: "";
  transform: rotate(45deg);
  vertical-align: middle;
  border-top: 1px solid var(--gray);
  border-right: 1px solid var(--gray);
}


#breadcrumb a {
  text-decoration: none;
}

#breadcrumb a:hover {
  text-decoration: none;
}

@media screen and (max-width: 520px) {
  #breadcrumb {
    padding: 3px 0;
  }

  #breadcrumb ul,
  #breadcrumb ol {
    padding: 0 2%;
  }
}


/**================================================== 
owlet-form
==================================================**/
.sec-contact {
  width: max(80%, var(--base-width));
  margin: 120px auto;
  background: var(--color_typeT-2);
  padding: 80px 40px;
  border-radius: 40px;

  --titAai: center;
}

.sec-contact .table-basic {
  width: 980px;
  margin: 0 auto;
  font-size: 1.8rem;
}


:root {
  --form-fz: 1.6rem;
  --focus: #BC8F8F;
  --alert: #cc0000;
  --minw: 10em;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea,
form select {
  height: auto;
  width: 100%;
  padding: 10px 15px;
  border-radius: 4px;
  border: none;
  box-shadow: 0 0 0 1px #ccc inset;
  background: var(--white);
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  margin: 0 0 5px;
  font-size: var(--form-fz);
}

form input::placeholder {
  color: #ddd;
}

form textarea {
  min-height: 10em;
}

form select {
  width: fit-content;
}

form input[type="text"]:focus,
form textarea:focus,
form select:focus {
  outline: 0;
  box-shadow: 0 0 0 1px var(--focus) inset;
}

form label {
  cursor: pointer;
  display: block;
  width: fit-content;
  line-height: 1;
}

form label+label {
  margin-top: 10px;
}

form input[type="radio"],
form input[type="checkbox"] {
  width: 1em;
  height: 1em;
  margin: 0 5px 0 0 !important;
  accent-color: var(--focus);
}

form input[name*="name"],
form input[name*="kana"],
form input[name*="tel"],
form input[name*="age"],
form input[name*="zip"] {
  width: var(--minw);
  margin: 0 5px;
}

form input[name*="zip"] {
  margin: 0 0 10px;
}

form input.zip2addr {
  border: 1px solid var(--gray);
  padding: 5px 15px;
  border-radius: 5px;
  margin: 0 0 10px;
}

/**------------------------------ 
装飾
 ------------------------------**/
.require {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 2em;
  position: absolute;
  top: 25px;
  right: 10px;
  transform: translateY(-50%);
  display: inline-block;
  width: 3em;
  height: 2em;
  text-align: center;
  color: var(--white);
  border-radius: 3px;
  background: var(--alert);
}

form table th {
  position: relative;
}

.alert {
  margin: 5px 0;
  color: var(--alert);
}

.owlet-input-sample {
  color: #aaa;
  margin: 8px 0 0;
  font-size: 1.4rem;
}

.owlet-rules-title {
  font-weight: bold;
  color: var(--color_typeB);
  text-align: center;
  margin: 40px 0 10px;
  font-size: 1.9rem;
}

.owlet-rules-body {
  width: 100%;
  /* height: 200px;
  overflow-y: scroll;
  font-size: 1.4rem;
  border: 1px solid #eee;*/
  padding: 15px;
  text-align: center;
}

.owlet-rules-body a {
  display: inline;
}

.owlet-rules-body :is(h2, h3) {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 40px auto 15px;
}

.owlet-rules-body h2 {
  margin-top: 0;
}

.owlet-rules-agree {
  text-align: center;
  position: relative;
  margin: 1px auto 80px;
}

.owlet-rules-agree .require {
  position: static;
  margin-left: 15px;
  transform: none;
}

input[type="submit"] {
  font-size: 1.6rem;
  width: 320px;
  margin: 60px auto;
  color: #fff;
  background: var(--grad1);
  border-radius: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 25px 30px;
  cursor: pointer;
  font-weight: bold;
}

form a {
  width: 10em;
  margin: 10px auto;
  display: block;
  text-align: center;
  text-decoration: underline;
}

form .owlet-rules-body a {
  width: 100%;
  text-align: left;
  margin: 5px 0;
}

@media screen and (max-width:520px) {
  :root {
    --minw: 35%;
  }

  form input[name*="kana"] {
    width: 30%;
  }

  form input[name*="tel"] {
    width: 4em;
  }

  .require {
    top: 30px;
  }

  .sec-contact {
    width: 90%;
    margin: 40px auto;
    padding: 40px 15px;
    border-radius: 20px;
  }

  .sec-contact .table-basic {
    width: 100%;
    margin: 0 auto;
    font-size: 1.6rem;
  }

}


/**================================================== 
 ページャー
================================================== **/

.pagenation {
	margin: 30px auto;
	text-align: center;
}

.pagenation span {
	line-height: 38px;
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 5px;
	text-align: center;
	color: var(--color_typeB);
}

.pagenation span.page a {
  border: 1px solid var(--color_typeB);
	color: var(--color_typeB);
	background: var(--white);
}

.pagenation span a {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50px;
}

.pagenation span.page.current,
.pagenation span a:hover {
	color: var(--white);
	background: var(--color_typeB);
		border-radius: 50px;
}

@media screen and (max-width: 520px) {
	.pagenation span {
		line-height: 27px;
		width: 30px;
		height: 30px;
		margin: 3px;
	}

	.pagenation span a {
		min-width: 28px;
	}
}



/**================================================== 
 トグル
================================================== **/
.toggle {
  display: none;
}

.wrap-toggle {}

.wrap-toggle>* {
  margin: 0 0 8px;
  padding: 10px 0;
}

.cl,
.ans {
  padding: 1em 40px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: var(--transition);
}

.cl:before,
.ans:before {
  font-size: 1.5rem;
  position: absolute;
  left: 0;
}

.cl {
  margin: 0 auto;
  display: block;
  position: relative;
  background: var(--color_typeB-2);
  color: var(--white);
  border-radius: 50px;
  font-weight: 500;
}

/*
.cl:before {
  content: "Q";
  top: 50%;
  transform: translateY(-50%);
  font-family: serif;
}*/

.cl::after {
  content: "＋";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
}

.ans {
  display: flex;
  justify-content: space-between;
  gap: 50px;

  height: 0;
  padding: 0 40px;
  overflow: hidden;
  font-size: 0.9em;
}

.ans picture {
  width: 300px;
  flex: none;
}

.ans .richtext {
  flex: 1;
}

/*
.ans:before {
  content: "A";
  top: 0.5em;
}*/

.toggle:checked+.cl+.ans {
  /*開閉時*/
  height: auto;
  padding: 3em 40px 3em;
  transition: var(--transition);
}

.toggle:checked+.cl::after {
  content: "－";
}

@media screen and (max-width:520px) {

  .cl,
  .ans {
    padding: 0.5em 10px 0.5em 1.5em;
    font-size: 1.6rem;
  }

  .cl:before,
  .ans:before {}


  .cl {
    line-height: 1.5;
  }

  .cl::after {
    right: 15px;
  }

  .ans {
    padding: 0 10px 0 1.5em;
  }

  .toggle:checked+.cl+.ans {
    padding: 20px 10px 3em 1.5em;
  }
}

/**================================================== 
テーブル
================================================== **/

/**基本**/
.table-basic table {
  width: 100%;
  background: none;
}

.table-basic :is(th, td) {
  padding: 25px 20px;
}

.table-basic th {
  width: 23%;
  font-weight: bold;
  color: var(--color_typeB);
}

@media screen and (max-width:520px) {
  .table-basic :is(table, tbody, tr, th, td) {
    display: block;
    width: 100%;
  }

  .table-basic :is(th, td) {
    padding: 15px;
  }

  .table-basic th {
    padding-top: 20px;
    padding-bottom: 0;
  }
}

/**================================================== 
リスト
================================================== **/

.list-numC {
  --num: 2;
  --g: 60px;
  --w: calc((100% - var(--g) * (var(--num) - 1)) / var(--num));
  display: flex;
  flex-flow: wrap;
  gap: var(--g);
  position: relative;
  z-index: 5;
}

.list-numC>* {
  width: var(--w);

  display: flex;
  flex-flow: column;
  gap: 20px;
}

.list-numC :is(figure, picture) {
  display: block;
  aspect-ratio: 520/346;
}

.list-numC :is(figure, picture) img {
  border-radius: 30px;
}

@media screen and (max-width:520px) {
  .list-numC>* {
    gap: 15px;
  }

  .list-numC :is(figure, picture) img {
    border-radius: 20px;
  }
}


/**================================================== 
 splide
================================================== **/
/**HERO zoomup Start**/
#splide-type1 .splide__slide img {
  transition: 10s linear;
}

#splide-type1 .splide__slide.is-active img {
  transform: scale(1.15);
  transition-delay: 0s;
}


/**arrow CSS**/
#splide-type3 .splide__arrows {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding: 30px var(--over-width-half) 30px 0;
}

#splide-type3 .splide__arrow,
#splide-type3 .splide__arrow:disabled {
  opacity: 1;
  position: static;
  transform: none;
}

#splide-type3 .splide__pagination {
  flex: 1;
  position: static;
  display: flex;
  padding: 0 30px 0 0;
}

#splide-type3 .splide__pagination>* {
  flex: 1;
}

#splide-type3 .splide__pagination .splide__pagination__page {
  width: 100%;
  border-radius: 0;
  opacity: 1;
  height: 2px;
  background: #e1e1e1;
}

#splide-type3 .splide__pagination .splide__pagination__page.is-active {
  transform: none;
  background: #989898;
}


/**================================================== 
 TOPのLOAD要素
================================================== **/
/***************************************************
 * Generated by SVG Artista on 11/25/2020, 6:25:09 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
#logo_loader {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 25px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 2000;
}

#logo_loader img {
  width: auto;
}

#logo_loader.open {
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

@keyframes slideOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    z-index: -20;
  }
}

#logo_loader.open .op_container {
  display: none;
}

#logo_loader .loadchara{
  width: 250px;
  height: auto;
  margin: 0 0 5px;
}


#logo_loader .tegaki {
  width: min(90%, 434px);
}

#logo_loader .tegaki img{
  width: 100%;
  height: auto;
}

/*
#logo_loader .tegaki span {
  display: block;
  position: relative;
  z-index: 2;
}

#logo_loader .tegaki span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 1;
  transform: scaleX(1) translateX(0);
  transform-origin: left center;
  z-index: 1;
}

@keyframes bgin {
  100% {
    opacity: 1;
    transform: scaleX(1) translateX(100%);
  }
}

#logo_loader .loading1:before {
  animation: bgin 1.2s 0.1s ease-out forwards;
}

#logo_loader .loading1 img {
  animation: fadeIn 1s 0.1s ease-out forwards;
}

#logo_loader .loading2 {
  margin-top: -10px;
  z-index: 1;
}

#logo_loader .loading2:before {
  animation: bgin 1.4s 1.1s ease-out forwards;
}

#logo_loader .loading2 img {

  animation: fadeIn 1.2s 1.1s ease-out forwards;
}

#logo_loader .loading3:before {
  animation: bgin 1.4s 2s ease-out forwards;
}

#logo_loader .loading3 img {
  animation: fadeIn 1.2s 2s ease-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
*/

#logo_loader .loading4 {
  height: 106px;
  opacity: 0;
  animation-name: slideIn;
  animation-delay: 4s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes slideIn {
  to {
    opacity: 1;
  }
}

@media screen and (max-width:520px) {

  #logo_loader img {
    height: 130px;
  }
  
  
#logo_loader .loadchara{
  width: 150px;
}

  #logo_loader img+img {
    height: 80px;
  }
}


/**------------------------------ 
TOP MV
 ------------------------------**/
.sec-mv {
  position: relative;
  width: 100%;
}

.sec-mv>* {
  position: relative;
  z-index: 10;
}

.sec-mv .text {
  width: calc(100% - 90px);
  height: 856px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5%;
  padding: 120px 0;
  margin: 0 0 0 auto;
}

.sec-mv .text h1 {
  flex: 1;
  text-align: center;
}

.sec-mv #splide-type1 {
  aspect-ratio: 850/620;
  width: 60%;
  height: auto;
  border-radius: 100vw 0 0 100vw;
  text-align: right;
  overflow: hidden;
}

.sec-mv #splide-type1 img {
  width: 100%;
  height: 100%;
}

@media screen and (min-width:1500px) {
  .sec-mv #splide-type1 {
    aspect-ratio: unset;
    height: 620px;
  }
}

/**装飾**/

.deko,
.deko-mae {
  position: absolute;
  width: 100%;
  z-index: 1;
  top: 0;
  left: 0;
}

.deko img,
.deko-mae img {
  display: block;
  position: absolute;
}

.deko *[class*="-deko"],
.deko-mae *[class*="-deko"] {
  aspect-ratio: 1/1;
}

@keyframes vertical {
  0% {
    -webkit-transform: translateX(-5px) translateY(-30px);
  }

  100% {
    -webkit-transform: translateY(0px) translateX(0px);
  }
}

.sec-mv .deko-mae {
  z-index: 30;
}

/**deco**/
.mv-deko1 {
  top: -120px;
  left: 137px;
}

.mv-deko2 {
  width: 178px;
  top: 50px;
  left: 410px;
  mix-blend-mode: multiply;
  animation: vertical 4s ease-in-out infinite alternate;
}

.mv-deko3 {
  width: 80px;
  top: 195px;
  left: 414px;
  animation: vertical 5s ease-in-out infinite alternate;
}

.mv-deko4 {
  width: 126px;
  top: 146px;
  left: 18px;

}

.mv-bou1 {
  width: 700px;
  height: 17px;
  top: 13px;
  left: 0;
}

.mv-bou2 {
  width: 17px;
  height: 615px;
  top: 150px;
  left: 32px;
  mix-blend-mode: multiply;
}

.mv-deko5 {
  width: 306px;
  top: 573px;
  left: -43px;
  opacity: 0.5;
}

.mv-deko6 {
  width: 89px;
  top: 726px;
  left: 5px;
  animation: vertical 4s ease-in-out infinite alternate;
}

.mv-deko7 {
  width: 72px;
  top: 543px;
  left: 12px;
  animation: vertical 4.5s ease-in-out infinite alternate;
}

.mv-deko8 {
  width: 120px;
  top: 600px;
  left: 245px;
  animation: vertical 4s ease-in-out infinite alternate;
}

.mv-deko9 {
  width: 183px;
  top: 640px;
  left: 329px;
  rotate: 45deg;
}

.mv-deko10 {
  width: 47px;
  top: 677px;
  left: 492px;
  animation: vertical 4.3s ease-in-out infinite alternate;
}

.mv-deko14 {
  width: 352px;
  top: -31px;
  right: 30px;
  opacity: 0.5;
}

/**deco-mae**/
.mv-bou3 {
  width: 925px;
  height: 20px;
  top: 730px;
  right: 50px;
}

.mv-deko11 {
  width: 257px;
  height: 354px;
  top: 635px;
  right: -25px;
}

.mv-deko12 {
  width: 107px;
  top: 693px;
  right: 190px;
  animation: vertical 4s ease-in-out infinite alternate;
}

.mv-deko13 {
  width: 224px;
  top: 489px;
  right: -92px;
  mix-blend-mode: screen;
}


.sec-pagetit .mv-deko5 {
  top: 300px;
  left: -40px;
  animation: vertical 4s ease-in-out infinite alternate;
}

.sec-pagetit .mv-deko7 {
  top: 580px;
  left: 100px;
}

@media screen and (max-width:520px) {
  .sec-mv .text {
    width: 100%;
    height: auto;
    flex-flow: column;
    gap: 30px;
    padding: 120px 0 60px;
    margin: 0 0 0 auto;
  }

  .sec-mv .text h1 {
    width: 80%;
    margin: 0 auto;
  }

  .sec-mv #splide-type1 {
    width: 90%;
    margin: 0 0 0 auto;
  }

  /**装飾**/

  /**deco**/
  .mv-deko1 {
    width: 176px;
    top: -70px;
    left: 50px;
  }

  .mv-deko2 {
    width: 86px;
    top: 50px;
    left: 164px;
  }

  .mv-deko3 {
    width: 46px;
    top: 120px;
    left: 164px;
  }

  .mv-deko4 {
    width: 62px;
    top: 102px;
    left: auto;
    right: -20px;
  }

  .mv-bou1 {
    display: none;
  }

  .mv-bou2 {
    width: 8px;
    height: 400px;
    top: 26px;
    left: 10px;
  }

  .mv-deko5 {
    width: 139px;
    top: 320px;
    left: -44px;
  }

  .mv-deko6 {
    width: 54px;
    top: 380px;
    left: 8px;
  }

  .mv-deko7 {
    width: 42px;
    top: 300px;
    left: 5px;
  }

  .mv-deko8 {
    width: 71px;
    top: 526px;
    left: 5px;
  }

  .mv-deko9 {
    width: 44px;
    top: 600px;
    left: 28px;
  }

  .mv-deko10 {
    width: 42px;
    top: 70px;
    left: auto;
    right: 38px;
  }

  .mv-deko14 {
    width: 159px;
    top: -70px;
    right: -50px;
    opacity: 0.5;
  }

  /**deco-mae**/
  .mv-bou3 {
    width: 272px;
    height: 10px;
    top: 595px;
    right: 16px;
  }

  .mv-deko11 {
    width: 117px;
    height: 161px;
    top: 547px;
    right: -5px;
  }

  .mv-deko12 {
    width: 53px;
    top: 580px;
    right: 94px;
  }

  .mv-deko13 {
    width: 112px;
    top: 480px;
    right: -50px;
  }

  .sec-pagetit .mv-deko5 {
    top: 150px;
  }

  .sec-pagetit .mv-deko6 {
    top: 340px;
    left: 3px;
    opacity: 0.8;
  }

  .sec-pagetit .mv-deko7 {
    top: 260px;
    left: 80%;
  }
}

/**================================================== 
 TOP
================================================== **/
.top-news {
  padding-top: 60px;
  padding-bottom: 80px;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
  grid-template-areas: "titA ul"
    "btn ul";
  align-items: start;
  gap: 0 100px;
}

.list-news li {
  padding: 40px 15px;
  border-bottom: 1px dotted var(--gray);
}

.list-news li:first-child {
  border-top: 1px dotted var(--gray);
}

.list-news a {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 100px 100px auto;
  grid-template-areas: "time em i"
    "p p p";
  gap: 10px;
  justify-content: start;
}

time {
  grid-area: time;
  white-space: nowrap;
  font-size: 1.4rem;
}

.em {
  grid-area: em;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  color: var(--white);
  font-size: 1.4rem;
  padding: 1px;
  min-width: 100px;
  text-align: center;
}

em[data-name="施設情報"] {
  background: var(--color_typeB-3);
}

em[data-name="採用情報"] {
  background: var(--color_typeG-2);
}

em[data-name="イベント"] {
  background: var(--color_typeP-3);
}

em[data-name="その他"] {
  background: var(--gray);
}

.list-news p {
  grid-area: p;
}
.list-news .i{
    grid-area: i;
    display: flex;
    gap: 5px;
}
.list-news i {
  /*grid-area: i;*/
  color: var(--color_typeB-2);
  font-size: 1.4rem;
  border: 1px solid var(--color_typeB-2);
  padding: 1px 10px;
  text-align: center;
}

@media screen and (max-width:520px) {
  .top-news {
    padding-top: 20px;
    padding-bottom: 40px;
    grid-template-areas: "titA btn"
      "ul ul";
    align-items: start;
    gap: 0 10px;

    --btnBm: 25px 0 0 auto;
  }

  .list-news li {
    padding: 15px 0;
  }

  .list-news a {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr auto;
    grid-template-areas: "time em"
      "i i"
      "p p";
    gap: 10px;
    align-items: start;
  }

  .list-news a p {
    width: 100%;
  }

  .list-news i,
  .em {
    font-size: 1.3rem;
  }
}

/**------------------------------ 
 ------------------------------**/
.top-about {
  padding-top: 60px;
  padding-bottom: 60px;
  background-image: url(../images/about.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.top-about-inner {
  background: rgba(255, 255, 255, 0.8);
  width: 623px;
  margin: 0 auto;
  padding: 40px 40px 15px;

  --titAai: center;
  --titAta: center;

  --titBm: 0 0 10px;

  --bntAm: 50px auto 0;
}

@media screen and (min-width:1100px) {
 .top-about{
   aspect-ratio: 1100/565;
   display: flex;
   justify-content: center;
    align-items: center;
 } 
}

@media screen and (max-width:520px) {
  .top-about {
    padding-top: 30px;
    padding-bottom: 1px;
    background-position: top center;
    background-size: 150% auto;
  }

  .top-about:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70vw);
  }

  .top-about-inner {
    position: relative;
    width: 95%;
    padding: 40px 20px 15px;
    z-index: 2;
  }
}

/**------------------------------ 
 ------------------------------**/
.top-feature {
  padding-top: 120px;
  padding-bottom: 80px;
}

.ttl-p {
  display: flex;
  align-items: center;
  gap: 100px;
}

.ttl-p .titA {
  white-space: nowrap;
}

.list-feature {
  margin: 40px auto 60px;
}

.list-feature li {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
}

.list-feature li+li {
  margin-top: 100px;
}

.list-feature li picture {
  flex: none;
  width: 710px;
}

.list-feature img {
  border-radius: 30px;
}

.list-feature li p {
  white-space: nowrap;
  border-radius: 30px;
  background: var(--gray);
  font-size: 2.4rem;
  color: var(--white);
  padding: 30px 40px;

  position: absolute;
  bottom: 30px;
  right: 0;
}

.list-feature li:nth-child(even) {
  flex-flow: row-reverse;
}

.list-feature li:nth-child(even) picture {
  margin-left: auto;
}

.list-feature li:nth-child(even) p {
  right: auto;
  left: 0;
}

.list-feature li i {
  display: block;
  margin-right: -200px;
}

.list-feature li:nth-child(even) i {
  margin-right: auto;
  margin-left: -200px;
}

/**post**/

.list-feature .f2 i {
  margin-bottom: 150px;
}

.list-feature .f3 i {
  margin-bottom: 70px;
}

@media screen and (max-width:520px) {
  .top-feature {
    padding-top: 60px;
    padding-bottom: 40px;
    --btnAm: 0 auto;
  }

  .ttl-p {
    flex-flow: column;
    align-items: flex-start;
    gap: 20px;
    --titAm: 0;
  }

  .list-feature li {
    flex-flow: column;
  }

  .list-feature li+li {
    margin-top: 80px;
  }

  .list-feature li picture {
    flex: none;
    width: 100%;
    margin: 0 auto 0 -3%;
  }

  .list-feature li p {
    width: 100%;
    text-align: center;
    white-space: normal;
    font-size: 1.6rem;
    color: var(--white);
    padding: 30px 15px;
    margin: -15px -3% 0 auto;

    position: relative;
    bottom: 0;
    right: 0;
  }

  .list-feature li:nth-child(even) {
    flex-flow: column;
  }

  .list-feature li:nth-child(even) picture {
    margin: 0 -3% 0 auto;
  }

  .list-feature li:nth-child(even) p {
    margin: -15px auto 0 -3%;
  }

  .list-feature li i {
    display: block;
    margin-right: 0;
    position: absolute;
    top: 85%;
    left: -8%;
    mix-blend-mode: multiply;
  }

  .list-feature li:nth-child(even) i {
    margin-right: auto;
    margin-left: 0;
    top: 93%;
    left: auto;
    right: -5%;
  }

  .list-feature li i img {
    height: auto;
  }

  .list-feature li.f1 i img {
    width: 120px;
  }

  .list-feature li.f2 i img {
    width: 200px;
  }

  .list-feature li.f3 i img {
    width: 150px;
  }

  .list-feature li:is(.f1, .f2, .f3, ) i {
    margin-bottom: 0;
  }
}


/**------------------------------ 
 ------------------------------**/
.top-numbering {
  padding-bottom: 120px;

  --titAai: center;
}

.top-numbering:before,
.top-numbering:after{
  content: "";
  width: 180px;
  height: 180px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  z-index: 51;
}
.top-numbering:before{
  background-image: url(/common/images/kondou2.png);

  top:0;
  left: 1%;

}
.top-numbering:after{
  background-image: url(/common/images/kondou3.png);
  bottom:20px;
  right: 1%;
}

.list-bumering {
  --num: 2;
  --g: 33px;
  position: relative;
  margin: 60px 0 0;
  z-index: 70;
}

.list-bumering dl {
  border: 3px dotted var(--color_typeB-2);
  background: var(--white);
  border-radius: 30px;
  margin: 0 0 20px;
  padding: 50px 20px 10px;
}

.list-bumering dl dt {
  width: 70%;
  background: var(--color_typeB-2);
  color: var(--white);
  border-radius: 50px;
  padding: 5px 20px;
  text-align: center;
  font-size: 2rem;
  margin: -70px auto 0;
}

.list-bumering dl dd {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 215px 1fr;
  grid-template-areas: "pic numsee"
    "p p";
  align-items: center;
  gap: 10px;
}

.list-bumering dl picture {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.list-bumering dl dd .numsee {
  grid-area: numsee;
  color: var(--color_typeB-2);
  font-size: 2.6rem;
}

.list-bumering dl dd p {
  grid-area: p;
  font-size: 1.4rem;
  text-align: center;
}

.list-bumering p span {
  line-height: 1;
}

.list-bumering .small {
  font-size: 0.7em;
}

.list-bumering .big {
  font-size: 2.6em;
}

.list-bumering .medium {
  font-size: 1.3em;
}

@media screen and (max-width:520px) {
  .top-numbering:before,
.top-numbering:after{
  width: 80px;
  height: 80px;

}
.top-numbering:before{
  top:50px;
left:auto;
right: 1%;
}
.top-numbering:after{
  bottom:20px;
  right: 1%;
}
  
  .top-numbering {
    padding-bottom: 100px;
  }
  .list-bumering {
    --num: 1;
    --g: 25px;
    margin: 40px 0 0;
  }

  .list-bumering dl dd {
    grid-template-rows: auto auto;
    grid-template-columns: 80px 1fr;
  }

  .list-bumering dl dd .numsee {
    font-size: 2.1rem;
  }
}


/**------------------------------ 
 ------------------------------**/
.top-service {
  padding-top: 100px;
  padding-bottom: 100px;
  --titAai: center;

  --btnAm: 60px auto 0;
}

.list-service {
  --num: 3;
  --g: 25px;
}

.list-service li {
  margin-bottom: 50px;
}

.list-service figure {
  position: relative;
  aspect-ratio: 350/320;
  width: 100%;
  height: auto;
}

.list-service img {
  width: 100%;
  height: 100%;
  border: 3px dotted var(--color_typeB-2);
}

.list-service figure figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  color: var(--white);
  background: var(--color_typeB-2);
  position: absolute;
  bottom: -1em;
  left: 0;
  right: 0;
  width: 80%;
  margin: 0 auto;
  padding: 8px 20px;
  border-radius: 50px;
}

.list-service figure figcaption:after {
  content: "→";
}

@media screen and (max-width:520px) {
  .top-service {
    padding-top: 40px;
    padding-bottom: 40px;
    --titAai: center;

    --btnAm: 30px auto 0;
  }

  .list-service {
    --num: 2;
    --g: 10px;
  }

  .list-service li {
    margin-bottom: 30px;
  }

  .list-service figure figcaption {
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 5px 8px;
  }
}



/**------------------------------ 
 ------------------------------**/
.top-group {
  padding-top: 100px;
  padding-bottom: 200px;
  background: url(/common/images/deko_home02.png) repeat-x left bottom;
}

.sec-group {
  padding-top: 100px;
  padding-bottom: 100px;
}

:is(.sec-group, .top-group) .map {
  margin: 60px auto;
}



@media screen and (max-width:520px) {
  .top-group {
    padding-top: 40px;
    padding-bottom: 60px;
    background-size: 80% auto;
  }

  .sec-group {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  :is(.sec-group, .top-group) .map {
    margin: 30px auto;
  }

}

/**------------------------------ 
 ------------------------------**/
.top-guide {
  padding-top: 130px;
  padding-bottom: 130px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 630px;
  grid-template-areas: "titA pic"
    "p pic"
    "btn pic";
  gap: 30px 70px;

  --titAm: 0;

  --btnAjc: space-between;

  --btnAw: min(100%, 370px);
  --btnAm: 0;
  --btnAp: 20px 40px;
  --btnAta: left;
}

.top-guide p {
  grid-area: p;
}

.top-guide img {
  border-radius: 30px;
}

@media screen and (max-width:520px) {
  .top-guide {
    padding-top: 40px;
    padding-bottom: 50px;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: auto;
    grid-template-areas: "titA"
      "pic"
      "p"
      "btn";
    gap: 30px;

    --btnAp: 17px;
    --btnAta: center;
  }
}

/**------------------------------ 
 ------------------------------**/
.sec-links {
  line-height: 1.8;

  --num: 2;
  --g: 0px;

  --titAc: var(--white);
  --titA_ic: var(--white);
  --titAai: center;
  --titAta: center;
  --titAm: 0;

  --btnA-2w: min(100%, 280px);
  --btnA-2m: 0 auto;
  --btnA-2p: 15px 40px;
  --btnA-2ta: left;
}

.sec-links a {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: 30px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 60px 8.6vw;
  color: var(--white);
}

@media screen and (max-width:520px) {
  .sec-links {
    --num: 1;
    --g: 0px;
  }

  .sec-links a {
    gap: 20px;
    padding: 40px 8.6vw;
  }
}

/**------------------------------ 
 ------------------------------**/
.top-download {
  padding-top: 80px;
  padding-bottom: 80px;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr 607px;
  grid-template-areas: "titA pic"
    "p pic"
    "btn pic";
  gap: 0 70px;
  align-items: center;
  line-height: 2;

  --titAm: 0;

  --btnAjc: space-between;

  --btnAw: min(100%, 370px);
  --btnAm: 0;
  --btnAp: 20px 40px;
  --btnAta: left;
}

.top-download p {
  grid-area: p;
}

@media screen and (max-width:520px) {
  .top-download {
    padding-top: 40px;
    padding-bottom: 40px;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: auto;
    grid-template-areas: "titA"
      "pic"
      "p"
      "btn";
    gap: 20px;
    align-items: center;
    line-height: 2;
    --btnAp: 17px;
    --btnAta: center;
  }

  .top-download picture {
    width: 80%;
    margin: 0 auto;
  }
}

/**------------------------------ 
 ------------------------------**/
.sec-CTA {
  padding-top: 60px;
  padding-bottom: 60px;
  --titAai: center;
  --titAm: 0 0 60px;
}

.wrap-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
  text-align: center;
  font-size: 1.6rem;
  z-index: 5;
}

.wrap-btn>* {
  width: min(100%, 370px);
}

.wrap-btn a {
  flex: none;
  font-size: 2.7rem;
  display: flex;
  height: 65px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border-radius: 50px;
  padding: 10px;
}

.wrap-btn svg {
  aspect-ratio: 1/1;
  width: 1em;
}

.wrap-btn .h-tel a {
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--color_typeB);
  margin: 0 0 10px;
}

.wrap-btn .h-tel svg {
  fill: var(--color_typeB);
}

.wrap-btn .h-toi {
  background: var(--grad1);
  color: var(--white);
  font-size: 1.8rem;
}

.wrap-btn .h-toi svg {
  fill: var(--white);
}

.sec-CTA .deko {
  width: var(--base-width);
  right: 0;
  margin: 0 auto;
  z-index: 1;
}

.sec-CTA .cta-deko1 {
  width: 150px;
  top: 145px;
  left: -190px;
}

.sec-CTA .cta-deko2 {
  width: 206px;
  top: 186px;
  left: -84px;
  animation: vertical 4.3s ease-in-out infinite alternate;
}

.sec-CTA .cta-deko3 {
  width: 230px;
  top: -56px;
  right: -40px;
  rotate: 45deg;
  animation: vertical 4s ease-in-out infinite alternate;
}

.sec-CTA .cta-deko4 {
  width: 126px;
  top: 104px;
  right: -110px;
}

@media screen and (max-width:520px) {
  .sec-CTA {
    padding-top: 40px;
    padding-bottom: 50px;
    --titAai: center;
    --titAm: 0 0 30px;
    position: relative;
    z-index: 2;
  }

  .wrap-btn {
    flex-flow: column;
    gap: 30px;
  }

  .wrap-btn a {
    font-size: 2.4rem;
  }

  .sec-CTA .cta-deko1 {
    width: 45px;
    top: 92vw;
    left: 60px;
  }

  .sec-CTA .cta-deko2 {
    width: 115px;
    top: 80vw;
    left: -20px;
  }

  .sec-CTA .cta-deko3 {
    width: 115px;
    right: -20px;
    top: -30px;
  }

  .sec-CTA .cta-deko4 {
    width: 60px;
    right: 70px;
    top: 0px;
  }
}

/**================================================== 
 施設
================================================== **/
.sec-postlist {
  padding-top: 100px;
  padding-bottom: 100px;
  --titBta: left;
  --titBbg: var(--color_typeB-2);
  --titBc: var(--white);
  --titBp: 10px 30px;
}

:is(.big-cat, .min-cat) span input[type="checkbox"] {
  display: none;
}

:is(.big-cat, .min-cat) *:hover {
  opacity: 1;
}

.big-cat {
  display: flex;
  gap: 1px;
  border-bottom: 1px solid var(--color_typeB);
  font-weight: 500;
  margin: 0 0 60px;
}

.big-cat :is(span, a) {
  flex: 1;
  text-align: center;
  margin: 0;
  background: var(--white);
}

.big-cat span {
  padding: 0;
  position: relative;
  z-index: 5;
}

.big-cat a {
  padding: 20px 10px;
}

.big-cat span label {
  display: block;
  width: 100%;
  padding: 20px 10px;
}

.big-cat a:not(.current):hover,
.big-cat span label:not(.current):hover {
  background: var(--color_typeB);
  color: var(--white);
  margin: 0 0 -1px;
}

.big-cat a.current,
.big-cat span *.current {
  background: var(--color_typeB);
  color: var(--white);
  margin: 0 0 -1px;
}


.big-cat a[data-num="0"]{
  display: none!important;
}

.min-cat {
  position: relative;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 0 60px;
  z-index: 70;
}

.min-cat :is(a, span) {
  margin: 0;
  padding: 0;
}

.min-cat :is(a, span label) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:20px;
  padding: 10px 30px;
  border: 1px solid var(--color_typeB-2);
  border-radius:50px;
  color:var(--color_typeB);
  background: var(--white);
  margin: 0;
}
.min-cat :is(a, span label):after{
  content: "→";
  display: block;
  font-family: var(--webf);
  font-size: 1.2rem;
  line-height: 1;
  margin-left: 15px;
}

.min-cat :is(a, span label):hover,
.min-cat :is(a, span).current {
  background: var(--color_typeB-2);
  border: 1px solid var(--color_typeB-2);
  color: var(--white);
}


.list-facility {
  --num: 3;
  --g: 30px;
  margin: 0 0 60px;
}

.list-facility li {
  margin: 0 0 40px;
}

.list-facility li a {
  position: relative;
  height: 100%;
  display: flex;
  flex-flow: column;
  text-align: center;
  gap: 8px;
  background: var(--white);
  padding: 10px 10px 20px;
  border-radius: 40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.list-facility li strong {
  position: absolute;
  top: 10px;
  left: 40px;
  display: inline-block;
  background: var(--color_typeB);
  color: var(--white);
  border-radius: 0 0 5px 5px;
  padding: 5px 10px;
}

.list-facility li strong[data-name="非表示"]{
  display: none;
}

.list-facility li strong[data-name="〇"]{
  background: #58cee1;
}
.list-facility li strong[data-name="△"]{
  background: #ebe87c;
  color: var(--black);
}
.list-facility li strong[data-name="満"]{
  background: #f3998f;
}

.list-facility li i {
  font-family: var(--ff);
  font-size: 1.6rem;
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--color_typeB);
}

.list-facility li i em {
  display: inline-block;
  background: var(--gray);
  color: var(--white);
  padding: 0px 5px;
  border-radius: 5px;
  font-size: 0.85em;
}

.list-facility li h3 {
  font-weight: 500;
  font-size: 2.2rem;
}

.list-facility svg {
  width: 100%;
  height: 100%;
}

.list-facility picture {
  display: block;
  background: var(--white);
  border-radius: 20px;
    overflow: hidden;
}
.list-facility picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pos-deko {
  position: absolute;
  right: -2%;
  top: 200px;
  opacity: 0.5;
  width: auto;
  height: 400px;
  z-index: -1;
}


@media screen and (max-width:520px) {
  .sec-postlist {
    padding-top: 40px;
  }

  .big-cat {
    padding: 0 10px;
    overflow: scroll;
    margin: 0 0 40px;
  }

  .big-cat a,
  .big-cat span label {
    white-space: nowrap;
    padding: 10px 10px;
  }

  .min-cat {
    gap: 10px;
    margin: 15px 0 40px;
  }
  
  .min-cat :is(a, span label){
    padding:5px 20px;
  }

  .list-facility {
    --num: 1;
    --g: 20px;
    margin: 0 0 40px;
  }

  .list-facility li {
    margin: 0 0 20px;
  }

  .list-facility li a {
    border-radius: 30px;
  }

  .pos-deko {
    top: 150px;
    height: 250px;
  }

}


/**------------------------------ 
 ------------------------------**/
.sec-facdetail {}

.sec-fac1 {
  width: max(80%, var(--base-width));
  padding-top: 100px;
  padding-bottom: 80px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: 1fr 60%;
  grid-template-areas:
    "ttl pic"
    "titB pic"
    "p pic"
    "dl pic"
    "kousin pic";
  gap: 30px 70px;
  align-items: start;

  --titAm: 0;

  --titBm: 0;
  --titBta: left;
}

.ttl {
  display: flex;
  flex-flow: column;
  gap: 10px;
}

.ttl h1 {
  font-size: 3.6rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--color_typeB);
}

.ttl i {
  font-family: var(--ff);
  font-size: 2rem;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.ttl i em {
  display: inline-block;
  background: var(--gray);
  color: var(--white);
  padding: 0px 15px;
  border-radius: 5px;
  font-size: 0.85em;
}

.sec-fac1 picture img {
  border-radius: 40px;
}

.list-aki {
  width: 100%;
  display: flex;
  font-size: 2.2rem;
  background: var(--color_typeB);
  color: var(--white);
  border-radius: 30px;
  overflow: hidden;
}

.list-aki dt {
  padding: 15px 30px;
}

.list-aki dd {
  flex: 1;
  padding: 15px 20px;
  background: rgba(255,255,255,0.2);
}

.list-aki dd a{
  display: inline-block;
  font-size: 1.3rem;
  line-height: 1.3;
}

.list-aki[data-name="非表示"]{
  display: none;
}

.list-aki[data-name="〇"]{
  background: #58cee1;
}
.list-aki[data-name="△"]{
 background: #ebe87c;
  color: var(--black);
}
.list-aki[data-name="満"]{
 background: #f3998f;
}

.sec-facdetail .top-news {
  padding-top: 80px;
}




@media screen and (max-width:520px) {
  .sec-facdetail{
    z-index: 2;
  }
  .sec-fac1 {
    width: 90%;
    padding-top: 80px;
    padding-bottom: 40px;
    grid-template-rows: repeat(7, auto);
    grid-template-columns: 1fr;
    grid-template-areas:
      "ttl"
      "pic"
      "titB"
      "p"
      "dl"
      "kousin";
    gap: 15px;
  }

  .ttl h1 {
    font-size: 2.7rem;
  }

  .ttl i {
    font-size: 1.6rem;
  }

  .sec-fac1 picture img {
    border-radius: 30px;
  }

  .list-aki {
    font-size: 1.6rem;
    border-radius: 20px;
  }

  .list-aki dt {
    padding: 15px 20px;
  }

  .list-aki dd {
    padding: 15px 20px;
  }

  .sec-facdetail .top-news {
    padding-top: 40px;
  }

}

/**------------------------------ 
 ------------------------------**/
.sec-fac2 {
  width: max(80%, var(--base-width));
  padding-top: 80px;
  padding-bottom: 170px;
  margin: 0 auto;
  z-index: 50;

  --titAai: center;

  --titBta: left;
  --titBbg: var(--color_typeB-2);
  --titBc: var(--white);
  --titBp: 10px 30px;
}

.list-gallery {
  --num: 4;
  --g: 30px;
  margin: 0 0 60px;
}

:is(.list-gallery, .list-gallery2) li {
  gap: 8px;
  margin: 0 0 20px;
  cursor: pointer;
}

:is(.list-gallery, .list-gallery2) h3 {
  color: var(--color_typeB);
  font-size: 2rem;
  font-weight: 500;
}

.list-gallery picture {
  border-radius: 30px;
  position: relative;
}

.list-gallery picture img {
  aspect-ratio: 520 / 346;
  width: 100%;
  height: 100%;
}

.list-gallery2 {
  --num: 2;
  --g: 40px;
  margin: 0 0 30px;
}

.list-gallery2 picture {
  display: block;
  background: rgba(170, 182, 189, 0.1);
  border-radius: 30px;
  position: relative;
}

.list-gallery picture:after,
.list-gallery2 picture:after {
  content: "open_in_full";
  font-family: var(--icons);
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.list-gallery2 picture img {
  width: 100%;
  height: 100%;
}

*[id^="flow"] {
  cursor: pointer;
}

.viewer-canvas img{
  max-height: 90vh !important;
  object-fit: contain;
}



@media screen and (max-width:520px) {
  .sec-fac2 {
    width: 90%;
    padding-top: 40px;
    padding-bottom: 80px;
  }

  .list-gallery {
    --num: 2;
    --g: 15px;
    margin: 0 0 40px;
  }

  :is(.list-gallery, .list-gallery2) li {
    gap: 8px;
    margin: 0 0 20px;
  }

  :is(.list-gallery, .list-gallery2) h3 {
    font-size: 1.6rem;
  }

  .list-gallery picture {
    border-radius: 20px;
  }

  .list-gallery2 {
    --num: 1;
    --g: 15px;
    margin: 0 0 20px;
  }

  .list-gallery2 picture {
    border-radius: 20px;
  }


}


/**------------------------------ 
 ------------------------------**/
.sec-fac3 {
  padding-top: 80px;
  padding-bottom: 100px;

  background-color: var(--color_typeT-2);
  --titAai: center;
  --titA_ic: var(--color_typeG);
}

.list-oneday {
  width: 90%;
  position: relative;
  margin: 50px auto;
  background: var(--white);

  padding: 50px 10%;
  border-radius: 40px;
}

.list-oneday:before {
  content: "";
  display: block;
  width: 10px;
  height: 100%;
  border-right: 5px dotted var(--color_typeG);
  position: absolute;
  top: 0;
  left: 30%;
}

.list-oneday li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.list-oneday li+li {
  margin: 50px 0 0;
}

.list-oneday li strong {
  position: relative;
  display: block;
  flex: none;
  width: 25%;
  background: var(--color_typeG);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 15px 0 0 15px;
  font-size: 1.8rem;
  margin: 0;
  letter-spacing: 1px;
}

.list-oneday li strong:after {
  content: "";
  width: 5px;
  height: calc(100% + 16px);
  position: absolute;
  background: var(--color_typeG);
  border-radius: 50px;
  top: -8px;
  right: -5px;
}

.list-oneday li dl {
  flex: 1;
  padding: 10px 30px 20px;
  border-radius: 15px;
}

.list-oneday li dl dt {
  font-size: 1.8rem;
  font-weight: bold;
}

.list-oneday picture {
  width: 320px;
  height: auto;
  display: block;
  border-radius: 30px;
  margin: 20px 0;
  border: 5px solid var(--white);
  overflow: hidden;
}

.list-oneday picture img {
  width: 100%;
}



@media screen and (max-width:520px) {
  .sec-fac3 {
    padding-top: 40px;
    padding-bottom: 70px;
  }

  .list-oneday {
    width: 100%;
    margin: 30px auto 60px;

    padding: 30px 10px 30px 30px;
    border-radius: 30px;
  }

  .list-oneday:before {
    left: 25px;
  }

  .list-oneday li {
    flex-flow: column;
    gap: 15px;
  }

  .list-oneday li+li {
    margin: 20px 0 0;
  }

  .list-oneday li strong {
    width: 50%;
    border-radius: 0 10px 10px 0;
    font-size: 1.6rem;
  }

  .list-oneday li strong:after {
    height: calc(100% + 10px);
    top: -5px;
    right: auto;
    left: 0px;
  }

  .list-oneday li dl {
    flex: 1;
    padding: 5px 15px 15px 30px;
    border-radius: 15px;
  }

  .list-oneday li dl dt {
    font-size: 1.6rem;
    font-weight: bold;
  }

  .list-oneday picture {
    width: 100%;
  }

}

/**------------------------------ 
 ------------------------------**/
.sec-fac4 {
  width: max(80%, var(--base-width));
  padding-top: 80px;
  padding-bottom: 100px;
  margin: 0 auto;
  --titAai: center;
}

.list-wakuari {
  --wakuariC: var(--color_typeB);
  display: flex;
  justify-content: center;
  flex-flow: wrap;
  gap: 15px;
  font-size: 2rem;
  font-weight: 500;
  margin: 30px auto 80px;
}

.list-wakuari li {
  border: 1px solid var(--wakuariC);
  background-color: color-mix(in srgb, var(--wakuariC) 5%, white);
  color: var(--wakuariC);
  border-radius: 5px;
  padding: 5px 30px;
}

.list-price {
  border: 2px solid var(--color_typeB);
  background: var(--white);
  padding: 4vw;
  margin: 0 auto 80px;
  border-radius: 40px;

  --titBc: var(--color_typeB);
  --titBm: 0 0 10px;
  --titBta: left;
}

.list-price dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1fr);
  gap: 1px;
  padding: 1px;
  background: var(--color_typeB-5);
  margin: 0 0 30px;
  font-size: 1.8rem;
}

.list-price :is(dt, dd) {
  text-align: center;
  font-weight: 500;
}

.list-price dt {
  grid-row: 1;
  background: none;
  color: var(--white);
  box-shadow: 1px 0 0 0 var(--white);
  padding: 10px 15px;
}

.list-price dd {
  background: var(--white);
  grid-row: 2;
  padding: 15px 15px;
}

.list-price dt:last-of-type {
  box-shadow: none;
}

.list-price .all-price dl {
  background-color: var(--color_typeB);
}

.list-price .detail-price {
  padding: 30px;
  margin: 40px 0 0;
  border-radius: 30px;
  background-color: color-mix(in srgb, var(--color_typeB-5) 10%, white);
}

@media screen and (max-width:520px) {
  .sec-fac4 {
    width: 90%;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .list-wakuari {
    gap: 5px;
    font-size: 1.6rem;
    margin: 30px auto 40px;
  }

  .list-wakuari li {
    padding: 5px 10px;
  }


  .list-price {
    padding: 0;
    margin: 0 0 40px;
    border-radius: 20px;
    overflow: hidden;
  }

  .list-price dl {
    grid-template-columns: 40% 1fr;
    margin: 0 0 20px;
    font-size: 1.4rem;
  }

  .list-price dt {
    grid-row: auto;
    box-shadow: 0 1px 0 0 var(--white);
    padding: 10px 5px;
  }

  .list-price dd {
    grid-row: auto;
    text-align: left;
    padding: 10px 10px;
  }

  .list-price dt:last-of-type {
    box-shadow: none;
  }

  .list-price .all-price {
    width: 90%;
    margin: 20px auto 40px;
  }

  .list-price .all-price dl {
    background-color: var(--color_typeB);
  }

  .list-price .detail-price {
    padding: 20px 15px;
    margin: 0;
    border-radius: 0;
  }
}

/**------------------------------ 
 ------------------------------**/
.sec-fac5 {
  padding-top: 100px;
  padding-bottom: 100px;
  --titAai: center;
}

.list-voice {
  --num: 2;
  --g: 30px;

  width: max(80%, var(--base-width));
  margin: 0 auto;
  justify-content: center;
}

.list-voice li {
  background: var(--white);
  border-radius: 20px;
  padding: 30px;
  border-radius: 20px;
  gap: 10px;
}

.list-voice li h3 {
  font-weight: 500;
  color: var(--color_typeB-5);
  font-size: 1.8rem;
}

@media screen and (max-width:520px) {
  .sec-fac5 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .list-voice {
    --num: 1;
    --g: 20px;

    width: 90%;
  }

}

/**------------------------------ 
 ------------------------------**/
.sec-fac6 {
  padding-top: 80px;
  padding-bottom: 100px;
  --titAai: center;
}

.list-staff {
  --titBm: 10px 0 20px;
  --titBta: left;
  --titBc: var(--color_typeB);
  --titBfw: 500;
}

.list-staff li {
  display: flex;
  flex-flow: column;
  gap: 15px 30px;
  margin: 70px 0 0;
  background: var(--white);
  padding: 40px;
  border: 3px dotted var(--color_typeB);
  border-radius: 30px;
}

.list-staff P {
  margin-bottom: 1em;
}

.list-staff h4 {
  font-size: 2rem;
  font-weight: 500;
  margin: 10px 0;
}

.list-staff .em {
  background: var(--color_typeB-5);
  padding: 5px 15px;
  border-radius: 5px;
}

.list-staff .name {
  font-size: 2.2rem;
  margin: 10px 0;
  font-weight: 500;
}
.list-staff .name + .name:before{
  content: "/";
}

.list-staff picture {
  width: 100%;
  display: flex;
  align-items: center;
  /*align-items: flex-end;*/
  gap:30px;
}

.list-staff picture div{
  flex: 1;
}

.list-staff picture img {
  width: 250px;
  height: 250px;
  object-fit: contain;
  border-radius: 20px;
  display: block;
  background: var(--gray2);
}
/*
.list-staff>*:nth-child(even) {
  flex-flow: row-reverse;
}
*/


.list-staff .text {
  flex: 1;
}

@media screen and (max-width:520px) {
  .sec-fac6 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .list-staff {
    --titBm: 10px 0 20px;
    --titBta: left;
    --titBc: var(--color_typeB);
    --titBfw: 500;
  }

  .list-staff li {
    flex-flow: column;
    gap: 20px;
    margin: 30px 0 0;
    padding: 20px;
    border-radius: 20px;
  }
  
  .list-staff picture {
    width: 100%;
    display: block;
  }
  
  .list-staff picture div{
    text-align: center;
    margin: 20px auto 0;
  }

  .list-staff picture img {
    width: 250px;
    height: auto;
    object-fit: fill;
    margin: 0 auto;
  }

.list-staff picture img +img{
  margin: 10px auto 0;
}

  .list-staff>*:nth-child(even) {
    flex-flow: column;
  }

  .list-staff .text {
    flex: 1s;
  }

  .list-staff .name {
    font-size: 1.8rem;
  }
}


/**------------------------------ 
 ------------------------------**/
.sec-fac7 {
  width: max(80%, var(--base-width));
  margin: 120px auto 40px;
  background: var(--color_typeT-2);
  padding: 80px 40px;
  border-radius: 40px;

  --titAai: center;
}

.sec-fac7 .table-basic {
  width: 980px;
  margin: 0 auto;
  font-size: 1.8rem;
}

@media screen and (max-width:520px) {

  .sec-fac7 {
    width: 90%;
    margin: 40px auto 0;
    padding: 40px 15px;
    border-radius: 20px;
  }

  .sec-fac7 .table-basic {
    width: 100%;
    margin: 0 auto;
    font-size: 1.6rem;
  }
}

/**------------------------------ 
 ------------------------------**/
.sec-flow {
  padding-top: 80px;
  padding-bottom: 80px;
}


.list-flow {
  margin: 70px auto 0;
}

.list-flow li {
  display: flex;
  gap: 50px;
  counter-increment: number;
  background: var(--color_typeT-2);
  padding: 40px;
  margin: 0 0 40px;
  border-radius: 10px;
}

.list-flow li i {
  flex: none;
  display: block;
  text-align: center;
  width: 100px;
  font-size: 2rem;
  font-weight: 500;
  color: var(--color_typeB);
}

.list-flow li i:after {
  display: block;
  content: counter(number, decimal-leading-zero);
  font-size: 4rem;
}

.list-flow dl {
  flex: 1;
}

.list-flow dt {
  font-weight: 500;
  font-size: 2.2rem;
  margin: 0 0 15px;
}

.list-flow dl dd {
  line-height: 1.8;
}

.list-flow dl dd p+p {
  margin-top: 1em;
}

.list-flow picture {
  flex: none;
  width: 400px;
}

.list-flow picture img {
  border-radius: 30px;
}

@media screen and (max-width:520px) {
  .sec-flow {
    padding-top: 40px;
    padding-bottom: 60px;

    --titBta: left;
  }

  .list-flow {
    margin: 40px auto 0;
  }

  .list-flow li {
    flex-flow: column;
    gap: 8px;
    padding: 20px;
  }

  .list-flow li i {
    width: 100%;
    line-height: 1.1;
  }

  .list-flow li picture {
    width: 100%;
  }

  .list-flow picture img {
    border-radius: 20px;
  }

}


/*==============================
==============================*/
.list-faq {
  margin: 0 0 60px;
}

.list-faq dl {
  display: flex;
  flex-flow: column;
  gap: 20px;
  border-bottom: 1px dotted var(--gray);
  padding: 40px 20px;
}

.list-faq dt {
  font-weight: 500;
  font-size: 2rem;
  display: flex;
  gap: 20px;
  color: var(--color_typeB);
}

.list-faq dt:before {
  content: "Q.";
  font-family: var(--webf);
  font-size: 2.2rem;
}

.list-faq dd {
  font-size: 1.6rem;
  display: flex;
  gap: 20px;
}

.list-faq dd:before {
  content: "A.";
  font-family: var(--webf);
  font-size: 2.2rem;
}

.list-faq dd a{
  text-decoration: underline;
}
.list-faq dd a:hover{
  text-decoration: none;
}

@media screen and (max-width:520px) {
  .list-faq {
    margin: 0 0 40px;
  }

  .list-faq dl {
    gap: 15px;
    padding: 20px 5px;
  }

  .list-faq dt {
    font-weight: 500;
    font-size: 1.8rem;
    gap: 10px;
  }

  .list-faq dd {
    gap: 10px;
  }
}

/**------------------------------ 
 ------------------------------**/
.sec-download,
.sec-faq {
  --titBta: left;
  --titBbg: var(--color_typeB-2);
  --titBc: var(--white);
  --titBp: 10px 30px;
}

.sec-faq {
  --titBm: 0;
}

.list-download {
  --num: 2;
  --g: 20px;
  margin: 0 0 80px;
}

.list-download a {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--color_typeB);
  color: var(--color_typeB);
  padding: 20px 15px;
}

.list-download a:after {
  content: "download";
  font-family: var(--icons);
}

.sec-download h4{
  font-size: 2.4rem;
  margin: 0 0 20px;
  color:var(--color_typeB-2);
}

.sec-download h5{
  font-size: 2rem;
  margin: 0 0 20px;
}

@media screen and (max-width:520px) {

  .sec-download,
  .sec-faq {
    --titBm: 0 0 25px;
  }
  .sec-download h4{
    font-size: 1.8rem;
  }
  
  .sec-download h5{
    font-size: 1.6rem;
  }
  .list-download {
    --num: 1;
    --g: 15px;
    margin: 0 0 40px;
  }

  .list-download a {
    gap: 10px;
    padding: 15px;
  }

  .list-download li {
    margin: 0;
  }
}

/**------------------------------ 
 ------------------------------**/

.sec-massage {
  padding-top: 60px;
  padding-bottom: 100px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 1fr 400px;
  grid-template-areas: "titA pic"
    "titB pic"
    "p pic";
  gap: 0 80px;
  --titBta: left;
}

.sec-massage .richtext {
  grid-area: p;
}

.sec-massage .richtext p+p {
  margin-top: 1.5em;
}

.sec-massage picture {
  aspect-ratio: 1/1;
}

.sec-massage picture img {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  object-fit: cover;
}

@media screen and (max-width:520px) {
  .sec-massage {
    padding-top: 0px;
    padding-bottom: 50px;
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr;
    grid-template-areas: "titA"
      "pic"
      "titB"
      "p";
    gap: 20px;
    --titAm: 0;
    --titBm: 0;
    --titBfz: 2.2rem;
  }
}

/**------------------------------ 
 ------------------------------**/
.sec-philosophy {
  padding-top: 80px;
  padding-bottom: 80px;
  --titAai: center;
}

.list-ph {
  columns:3;
  --c: var(--color_typeB);
  z-index:50 ;
}

.list-ph dl {
  break-inside: avoid;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: var(--white);
  padding: 20px;
  border-radius: 30px;
  margin: 0 0 30px;
}

.list-ph dl dt {
  color: var(--c);
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
}

@media screen and (max-width:520px) {
  .sec-philosophy {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .list-ph {
      columns:1;
  }

}

/**------------------------------ 
 ------------------------------**/
.sec-media {
  padding-top: 80px;
}

.list-media {
  --num: 2;
  --g: 33px;
  position: relative;
  margin: 60px 0 0;
  z-index: 70;
}

.list-media dl {
  border: 3px dotted var(--color_typeB-2);
  background: var(--white);
  border-radius: 30px;
  margin: 0 0 20px;
  padding: 50px 20px 20px;
}

.list-media dl dt {
  width: 70%;
  background: var(--color_typeB-2);
  color: var(--white);
  border-radius: 50px;
  padding: 5px 20px;
  text-align: center;
  font-size: 2rem;
  margin: -70px auto 0;
}

.list-media dl dd {
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 215px 1fr;
  grid-template-areas: "pic time"
    "pic titB"
    "pic p";
  align-items: start;
  gap: 5px 30px;

  --titBta: left;
  --titBm: 0;
  --titBfz: 1.8rem;
}

.list-media dl time {
  grid-area: time;
}

.list-media dl picture {
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.list-media dl picture img {
  width: 100%;
  height: 100%;
}

.list-media dl p {
  font-size: 1.4rem;
}


@media screen and (max-width:520px) {
  .sec-media {
    padding-top: 40px;
    padding-bottom: 1px;
  }

  .list-media {
    --num: 1;
    --g: 25px;
    margin: 40px 0 0;
  }

  .list-media dl dt {
    font-size: 1.8rem;
  }

  .list-media dl dd {
    grid-template-rows: auto auto auto 1fr;
    grid-template-columns: 1fr;
    grid-template-areas: "time"
      "titB"
      "pic"
      "p";
    gap: 15px;
  }

}

/**------------------------------ 
 ------------------------------**/
.sec-sdgs {
  padding-top: 130px;
  padding-bottom: 1px;
  --titAai: center;
}

.sec-sdgs-inner {
  width: var(--base-width);
  border: 3px solid var(--color_typeG-4);
  border-radius: 30px;
  margin: 60px auto 40px;
  padding: 30px;


  --titAc: var(--color_typeG-4);
  --titAm: 0 0 20px;
}

.sec-sdgs-inner .logos {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.sec-sdgs-inner .logos img {
  height: 80px;
  width: auto;
}

.detail-sdgs {
  background: color-mix(in srgb, var(--color_typeG) 10%, white);
  margin: 35px auto 20px;
  padding: 30px;
  border-radius: 30px;
}

.detail-sdgs dl {
  display: flex;
  gap: 30px;
  padding: 0 0 20px;
}

.detail-sdgs dl dt {
  flex: none;
  width: 25%;
  font-weight: 500;
  font-size: 2.4rem;
  color: var(--color_typeG-4);
}

.detail-sdgs dl dd strong {
  font-size: 2.2rem;
  font-weight: 500;
  display: inline-block;
  margin: 0 0 8px;
}

.list-sdgs {}

.list-sdgs li {
  width: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "h"
    "pic"
    "p";
  gap: 10px 20px;
  align-items: flex-start;
  border-radius: 15px;
  background: var(--white);
  padding: 20px;
  margin: 0 0 20px;
}

.list-sdgs h3 {
  grid-area: h;
  font-weight: 500;
  font-size: 2rem;
}

.list-sdgs .pic {
  width: 330px;
  display: flex;
  flex-flow: wrap;
  gap: 10px;
}

.list-sdgs .pic img {
  width: 100px;
}

.list-sdgs .text {
  grid-area: p;
  font-weight: normal;
  line-height: 1.8;
  font-size: 1.4rem;
}

@media screen and (max-width:520px) {
  .sec-sdgs {
    padding-top: 60px;
    padding-bottom: 1px;
    --titAai: center;
    --titBfz:1.6rem;
  }

  .sec-sdgs-inner {
    width: 100%;
    border-radius: 20px;
    margin: 40px auto 20px;
    padding: 15px;

    --titAfz: 2.2rem;
  }

  .detail-sdgs {
    border-radius: 20px;
    padding: 20px 15px;
  }

  .detail-sdgs dl {
    flex-flow: column;
    gap: 15px;
    padding: 0 0 20px;
  }

  .detail-sdgs dl dt {
    width: 100%;
    font-size: 2.2rem;
  }

  .detail-sdgs dl dd strong {
    font-size: 2rem;
  }

  .list-sdgs li {
    padding: 20px 15px;
  }

  .list-sdgs h3 {
    font-size: 1.8rem;
  }

  .list-sdgs .pic {
    width: 100%;
  }

  .list-sdgs .pic img {
    width: calc((100% - 20px) / 3);
  }

}


/**------------------------------ 
 ------------------------------**/
.sec-staff {
  padding-top: 60px;
  padding-bottom: 150px;
}

.list-staff2 {
  --num: 3;
  --g: 40px;
}

.list-staff2 li {
  background: var(--white);
  padding: 15px;
  border: 3px dotted var(--color_typeB);
  border-radius: 30px;

  --titBfz: 2rem;
  --titBfw: 500;
  --titBm: 0;

  --btnBm: 10px 15px 5px auto;
  --btnBfz: 1.4rem;
  --btnBc: var(--color_typeB);
}

.list-staff2 .text {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  margin: 15px 0;
  gap:5px;
}

.list-staff2 .em {
  background: var(--color_typeB-2);
  border-radius: 5px;
  font-size: 1.4rem;
  padding: 1px 10px;
}

.list-staff2 .name {
  border: 1px solid var(--color_typeB-2);
  font-size: 1.4rem;
  font-weight: 500;
  padding: 1px 10px;
}

.list-staff2 picture {
  aspect-ratio: 1/1;
}

.list-staff2 picture img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

@media screen and (max-width:520px) {
  .sec-staff {
    padding-top: 40px;
    padding-bottom: 100px;
  }

  .list-staff2 {
    --num: 2;
    --g: 15px;
  }

  .list-staff2 li {
    background: var(--white);
    padding: 5px;

    --btnBfz: 1.2rem;
    --btnBm: 10px auto;
  }

  .list-staff2 .text {
    display: flex;
    justify-content: center;
    flex-flow: column;
    gap: 5px;
    margin: 15px 0;
    text-align: center;
  }

  .list-staff2 .name {
    font-size: 1.3rem;
    padding: 3px 5px;
  }
}


/**------------------------------ 
 ------------------------------**/
.sec-his {
  padding-top: 130px;
  padding-bottom: 100px;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr 630px;
  grid-template-areas: "titA pic"
    "p pic";
  gap: 30px 70px;

  --titAm: 0;

  --btnAjc: space-between;

  --btnAw: min(100%, 370px);
  --btnAm: 0;
  --btnAp: 20px 40px;
  --btnAta: left;
}

.sec-his p {
  grid-area: p;
}

.sec-his img {
  border-radius: 30px;
}

@media screen and (max-width:520px) {
  .sec-his {
    padding-top: 40px;
    padding-bottom: 30px;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: auto;
    grid-template-areas: "titA"
      "pic"
      "p"
      "btn";
    gap: 30px;

    --btnAp: 17px;
    --btnAta: center;
  }
}

.list-history {
  --num: 3;
  --g: 60px;
  justify-content: center;
}

.list-history a {
  box-shadow: 0 0 15px 2px var(--color_typeB-6);
  width: 180px;
  height: 180px;
  background: var(--white);
  border-radius: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  counter-increment: li;
  color: var(--color_typeB);
  font-size: 2.4rem;
  position: relative;
}

.list-history a:before {
  content: 'chapter' counter(li);
  display: block;
  color: var(--black);
  font-weight: normal;
  font-size: 1.6rem;
}

.list-history a:after {
  content: "expand_more";
  font-family: var(--icons);
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.list-history a:hover {
  background: var(--color_typeB-7);
}

@media screen and (max-width:520px) {
  .list-history {
    --num: 3;
    --g: 15px;
    width: 95%;
    margin: 0 auto 100px;
    position: relative;
    z-index: 20;
  }

  .list-history a {
    width: 27vw;
    height: 27vw;
    font-size: 1.8rem;
    gap: 0;
  }
}

.sec-his2 {
  padding-top: 100px;
  --titAai: center;
}

.sec-his2 .sec-bg2 {
  padding: 50px;
  border-radius: 30px;
}

.historys {
  margin: 60px auto 0;
  padding: 0 5%;
}

.historys dl {
  display: flex;
  position: relative;
  gap: 30px;
  padding: 0 0 50px;
}

.historys dl:after {
  content: "";
  display: block;
  height: 100%;
  width: 1px;
  background: var(--gray);
  position: absolute;
  top: 16px;
  left: 8px;
}

.historys dl:before {
  content: "";
  display: block;
  background: var(--color_typeB);
  width: 16px;
  height: 16px;
  border-radius: 50px;
  z-index: 1;
  margin: 8px 0 0;
}

.historys dl:last-child:after {
  display: none;
}

.historys dl dt {
  width: 18%;
  font-size: 3rem;
  color: var(--color_typeB);
  line-height: 1;
}

.historys dl dd small {
  display: inline-block;
  font-size: 1.4rem;
  color: var(--gray);
  margin: 0 0 0 15px;
}

.historys dl dd {
  padding-top: 3px;
  line-height: 2;
}

.historys dl dd picture {
  display: block;
  width: 300px;
  margin: 1em 0;
}

.historys dl dd picture img {
  border-radius: 20px;
}

@media screen and (max-width:520px) {
  .sec-his2 {
    padding-top: 1px;
    margin-top: -50px;
    padding-bottom: 50px;
    --titAai: center;
  }

  .sec-his2 .sec-bg2 {
    padding: 15px 20px;
    border-radius: 20px;
  }

  .historys {
    margin: 30px auto 0;
    padding: 0 5%;
  }

  .historys dl {
    flex-flow: wrap;
    gap: 20px;
    padding: 0 0 30px;
  }

  .historys dl dt {
    width: 80%;
    font-size: 2.4rem;
  }

  .historys dl dd {
    width: 100%;
    padding: 0 0 0 40px;
  }

  .historys dl dd small {
    display: block;
    margin: 0;
  }

  .historys dl dd picture {
    width: 100%;
  }
}

.sec-his3 {
  padding-bottom: 150px;
  --titAai: center;
  --titBc: var(--color_typeB);
  --titBfw: 500;
}

.sec-his3 .richtext {
  background: var(--white);
  padding: 50px 100px;
  margin: 0 auto 60px;
  border-radius: 30px;
  line-height: 1.8;
}

.sec-his3 .richtext p+p {
  margin-top: 1em;
}

.sec-his3-inner {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr 400px;
  grid-template-areas: "h4 pic"
    "btn pic";
  gap: 30px 70px;
  align-items: center;
  background: var(--white);
  padding: 50px 100px;
  border-radius: 30px;


  --btnAjc: space-between;
  --btnAw: min(100%, 370px);
  --btnAm: 0;
  --btnAp: 20px 40px;
  --btnAta: left;
}

.sec-his3-inner h4 {
  grid-area: h4;
  font-size: 3rem;
  font-weight: 500;
}

.sec-his3-inner p {
  grid-area: p;
}

.sec-his3-inner img {
  border-radius: 30px;
}

@media screen and (max-width:520px) {
  .sec-his3 {
    padding-bottom: 100px;
  }

  .sec-his3 .richtext {
    background: var(--white);
    padding: 20px;
    margin: 0 auto 40px;
  }

  .sec-his3-inner {
    padding: 20px;
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;
    grid-template-areas: "h4"
      "pic"
      "btn";
    gap: 20px;

    --btnAp: 17px;
    --btnAta: center;
  }

  .sec-his3-inner h4 {
    font-size: 2rem;
  }
}


/*==================================================
 5つの理由
==================================================*/
.sec-reason {
  width: max(80%, var(--base-width));
  margin: 120px auto 80px;
  padding: 80px 0 1px;
  border-radius: 40px;
  --titAai: center;

}


.list-reason li {
  position: relative;
  z-index: 60;
  counter-increment: number;
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "pic h3"
    "pic text";
  align-items: start;
  gap: 0 50px;
  padding: 40px;

  background: var(--white);
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.list-reason li + li{
  margin-top:50px;
}


.list-reason .titB {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  --titBta: left;
}

.list-reason li .titB:before {
  flex: none;
  content: counter(number, decimal-leading-zero);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50px;
  background: var(--grad1);
  color: var(--white);
  font-size: 2.5rem;
}

.list-reason li .titB:after {
  content: "Reason";
  font-family: var(--webf);
  color: var(--color_typeB);
  font-size: 4rem;
  position: absolute;
  top: -30px;
  left: -15px;
  transform: rotate(-10deg);
}

.list-reason li strong {
  color: var(--color_typeB);
  font-weight: 500;
  font-size: 1.1em;
}

.list-reason li b {
  display: inline-block;
  margin: 5px 0;
  font-weight: 500;
  font-size: 1.1em;
}

.list-reason picture {
  grid-area: pic;
  aspect-ratio: 980/653;
  border-radius: 25px;
  overflow: hidden;
}

.list-reason h3 {
  grid-area: h3;
}

.list-reason .text {
  grid-area: text;
}

@media screen and (max-width:520px) {
  .sec-reason{
    padding-top:1px;
    margin-top: 30px;
    width: 90%;
  }
  .list-reason li {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
    "pic"
    "h3"
      "text";
    gap: 20px;
    padding: 20px;
  }
  
  .list-reason li +li{
    margin-top:30px;
  }

  .list-reason .titB {
    margin-bottom: 0;
  }

  .list-reason li .titB:after {
    font-size: 3rem;
    top: -20px;
  }
}
/*layout:8*//*layout:5*/