@charset "utf-8";
/* CSS Document */
/* reset */
/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
} /* Reset margin */
body,
h1,
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
} /* Body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  text-rendering: optimizeSpeed;
} /* Images */
img,
picture {
  max-width: 100%;
  display: block;
} /* Forms */
input,
button,
textarea,
select {
  font: inherit;
} /* Remove list styles */
ul,
ol {
  list-style: none;
  padding: 0;
} /* Links */
a {
  text-decoration: none;
  color: inherit;
}
/* /reset */


body{}
header{}
main{}
section{}
hgroup{}
hgroup h1{}
h2{}
h3{}
article{}
footer{}


/*********/
body{
margin: 0 auto;
background-color:hsla(324,0%,100%,1);
background-image:
radial-gradient(at 82% 21%, hsla(168,76%,42%,0.1) 0px, transparent 50%),
radial-gradient(at 94% 15%, hsla(36,93%,56%,0.1) 0px, transparent 50%),
radial-gradient(at 31% 65%, hsla(348,67%,53%,0.1) 0px, transparent 50%),
radial-gradient(at 38% 41%, hsla(247,45%,51%,0.1) 0px, transparent 50%),
radial-gradient(at 5% 4%, hsla(217,91%,48%,0.1) 0px, transparent 50%),
radial-gradient(at 87% 10%, hsla(195,89%,46%,0.1) 0px, transparent 50%);
font-family: "Shippori Mincho";
font-weight: 700;
}
header{display: block;
margin-top: 0px;
padding: 0 3em;}
header img{width: 217px;}
header .pc{display: block;}
header .sp{display: none;}
hgroup{line-height: 1.7;
font-size: 120%;}
hgroup h1{}
hgroup p{font-size: 120%;}

hgroup h2{display: block;
	margin: 2em auto 0;
	line-height: 1.7;
font-size: 1.8em;}
hgroup h3{display: block;
	margin: 1em auto;
	line-height: 1.7;}
main{width: 80%; margin: 0 auto;
padding: 1em;}

@media screen and (max-width: 768px) {
header{display: block;
margin-top: 0px;
padding: 0 1em;}
header img{width: 75px;}
header .pc{display: none;}
header .sp{display: block;}
hgroup{line-height: 1.7;
}
hgroup h1{font-size: 100%;}
hgroup p{font-size: 100%;}

hgroup h2{display: block;
	margin: 2em auto 0;
	line-height: 1.7;
font-size: 1.8em;}
hgroup h3{display: block;
	margin: 1em auto;
	line-height: 1.7;}
main{width: 95%; margin: 0 auto;
padding: 1em;}
}
/*********/

/* ブラウザの自動計算（height: auto）を滑らかにアニメーションさせる設定 */
html {
  interpolate-size: allow-keywords;
}

/* アコーディオン全体の基本設定（レスポンシブ対応） */
.accordion {
  position: relative;
  width: 92%;
  max-width: 600px;
  margin: 0 auto 1em;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background-color: rgba(255,255,255,0.4);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  overflow: hidden;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.accordion {
  position: relative;
  width: 99%;
  max-width: 600px;
  margin: 0 auto 1em;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background-color: rgba(255,255,255,0.4);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  overflow: hidden;
  box-sizing: border-box;
}
}
/* 全ての要素に box-sizing を適用（崩れ防止） */
.accordion * {
  box-sizing: border-box;
}

/* デフォルトの三角アイコンを非表示にする */
.accordion-summary::-webkit-details-marker {
  display: none;
}
.accordion-summary {
  list-style: none;
  outline: none;
  cursor: pointer;
}

/* 最初から見えているテキスト部分 */
.visible-title {
  padding: 24px 20px 70px;
}
@media (min-width: 768px) {
  .visible-title {
    padding: 28px 24px 70px;
  }
}
.visible-title h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #1f2937;
}
@media (min-width: 768px) {
  .visible-title h3 {
    font-size: 1.2rem;
  }
}

/* スーッと真下に開く滑らかな設定 */
.hidden-content {
  height: 0; /* 最初は高さを完全にゼロにする */
  opacity: 0;
  overflow: hidden; /* はみ出たテキストを隠す */
  padding: 0 20px; 
  color: #000;
  line-height: 1.6;
  font-size: 0.95rem;
  
  /* 通常の滑らかな減速（ease）で0.3秒かけて綺麗に開閉させます */
  transition: 
    height 0.3s ease, 
    opacity 0.2s ease,
    padding 0.3s ease;
}
@media (min-width: 768px) {
  .hidden-content {
    padding: 0 24px;
    font-size: 1rem;
  }
}

/* アコーディオンが開いたとき */
.accordion[open] .hidden-content {
  height: auto; 
  opacity: 1;
  padding-bottom: 80px; /* 下部ボタンの重なりを防ぐスペース */
}

/* ボタンの親要素を完全に「下部中央」に固定配置する */
.btn-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 18px 0;
  background: linear-gradient(to top, #fff 70%, rgba(255,255,255,0));
  pointer-events: none;
}

/* 丸いボタンのデザイン（マウスオーバー時にふわっと透明化） */
.btn-circle {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(-40deg, #0115bf, #818eff);
  transition: opacity 0.2s ease, background-color 0.2s ease;
  pointer-events: auto;
}


/* 丸いボタン単体をホバーしたときの処理 */
@media (hover: hover) {
  .btn-circle:hover {
    opacity: 0.75;
  }
}

/* 2本の独立した線で「∨」を作る */
.btn-circle::before,
.btn-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px;
  height: 2.5px;
  background-color: #fff;
  border-radius: 2px;
  transition: transform 0.3s ease;
}

/* 左側の線の初期状態（∨の左半分） */
.btn-circle::before {
  left: 14px;
  transform: translateY(-50%) rotate(40deg);
}

/* 右側の線の初期状態（∨の右半分） */
.btn-circle::after {
  right: 14px;
  transform: translateY(-50%) rotate(-40deg);
}

/* アコーディオンが開いた時：線の傾きを逆にして「∧」にする */
.accordion[open] .btn-circle::before {
  transform: translateY(-50%) rotate(-40deg);
}
.accordion[open] .btn-circle::after {
  transform: translateY(-50%) rotate(40deg);
}

.accordion[open] .btn-circle {
  background-color: #2563eb;
}

/*アコーディオン内の装飾*/
.site-section{
	margin: 0 auto 1em;
}
.visible-title h3{
	display: block;
	margin: 1em auto 0;
	line-height: 1.7;
font-size: 1.4em;}
@media screen and (max-width: 768px) {
.site-section{
	margin: 0 auto 1em;
}
.site-section h2{
	display: block;
	margin: 1em auto 0;
	line-height: 1.7;
font-size: 1.5em;}
.visible-title h3{
	display: block;
	margin: 1em auto 0;
	line-height: 1.7;
font-size: 1.4em;}
}
.js-microcms-embed{
	font-family: Noto Sans, "sans-serif";
	font-weight: 400;
	line-height: 1.7;
}

/*footer*/
footer{display: block; width: 100%; padding: 0 1em 1em; font-family: Noto Sans, "sans-serif"; font-weight: 400;}
.policy{display: inline-block; font-size: 12px; padding: 0 2em; text-decoration: underline;}
.copyright {display: inline-block; font-size: 12px;padding: 0 2em;}

@media screen and (max-width: 768px) {
footer{display: flex; width: 100%; padding: 0 1em 1em; font-family: Noto Sans, "sans-serif"; font-weight: 400;}
.policy{display: flex; justify-content: flex-start; font-size: 12px; width: 48%; padding: 0 0.5em; text-decoration: underline;}
.copyright {width: 48%;display: flex; justify-content: flex-end; font-size: 10px; padding: 0 0.5em; text-align: right;}
}