/* --- フォントの指定 ------------------------------ */

/* ヒラギノ角ゴ：W3 を 400 に */
@font-face {
  font-family: "HiraGoFix";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local("Hiragino Sans W3"), local("Hiragino Kaku Gothic ProN W3");
}

/* ヒラギノ角ゴ：W6 を 700 に */
@font-face {
  font-family: "HiraGoFix";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local("Hiragino Sans W6"), local("Hiragino Kaku Gothic ProN W6");
}

/* フォントをカスタムプロパティ（変数）に */
:root {
  --font-base: "HiraGoFix", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", Meiryo;
  --font-accent: "Hiragino Mincho ProN", "Hiragino Mincho", "Yu Mincho", "Noto Serif JP";
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}

/* --- 色の指定 ------------------------------ */
:root {
  --base-color: #00a6d6;
  --accent-color: #9e8135;
}

/* ブラウザが勝手にフォントを合成して表示しない */
html {
  font-synthesis: none;
  overflow-x: hidden;
}

/* --- 全体にかかる設定 ------------------------------ */
body {
  font-family: var(--font-base), var(--font-emoji), sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

/* 「本文へスキップ」でスクロールしてきた際の上部の余白（固定メニューなどがある場合） */
main {
  scroll-margin-top: 100px;
}

/* 要素の上下に余白を付ける */
p,
hr,
ul,
ol,
dl,
table {
  margin-block-end: 2rem;
}

/* 見出しの上下に余白を付ける */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 2rem;
}

/* リスト項目のインデント */
ul,
ol {
  padding-inline-start: 2rem;
}

/* 定義 */
dt {
  font-weight: 700;
}

dd {
  margin-inline-start: 2rem;
}

/* 強調 */
strong {
  font-weight: 700;
}

a:where(:any-link) {
  text-decoration: none;
  color: #06f;
}
a:where(:hover,:active) {
  color: #96f;
}

/* --- コンテナ --- */
/* sp */
.container {
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
  max-width: 1124px;
}

/*　--- 見出し　-------------------------- */

h1 {
  font-size: 12vw;
  font-family: "Zen Antique", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: 0.1rem;
  color: #00a6d6;
	text-shadow: 0px 0px 2px #fff,
	             0px 0px 2px #fff,
	             0px 0px 6px #fff,
	             0px 0px 8px #fff,
	             0px 0px 15px #fff,
	             0px 0px 15px #fff,
	             0px 0px 15px #fff,
	             0px 0px 15px #fff,
	             0px 0px 17px #fff;
               margin: 1rem 0 0.2rem 0;
}

h1 small {
  font-size: 40%;
  letter-spacing: 0;
}

h2 {
  font-size: 1.6rem;
  padding: 5px 10px;
  margin-top: 3rem;
}

/*　--- 内容　-------------------------- */
.main-visual {
  position: relative;
  text-align: center;
}
.main-visual img {
  width: 100%;
}
.main-visual .hosoku {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 0.5rem;
}
.main-visual .tit {
  position: absolute;
  top: -5vw;
  text-align: center;
  width: 100%;
  color: #fff;
}
.main-visual .sub {
  color: #fff;
  font-weight: bold;
  font-size: 2vw;
  background-color: #9e8135;
  display: inline-block;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-accent);
}
.main-visual .price {
  font-weight: bold;
  font-size: 1.2rem;
  background-color: rgba(255, 255, 255, 0.7);
  display: inline-block;
  padding: 0 1rem;
	text-shadow: 0px 0px 2px #fff,
	             0px 0px 2px #fff,
	             0px 0px 6px #fff,
	             0px 0px 8px #fff,
	             0px 0px 8px #fff,
	             0px 0px 8px #fff,
	             0px 0px 8px #fff,
	             0px 0px 12px #fff,
	             0px 0px 12px #fff;
}
.main-visual .price-tit {
  margin-bottom: 0;
  display: inline-block;
  writing-mode: vertical-rl;
  font-size: 5vw;
}
.main-visual .price-l {
  font-size: 18vw;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  color: var(--accent-color);
}
.main-visual .price-s {
  font-size: 10vw;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  color: var(--accent-color);
}
.main-visual .zeikomi {
  font-size: 3vw;
}
.main-visual .soudan {
  color: #fff;
  font-weight: bold;
  font-size: 5vw;
  background-color: #ff9130;
  display: inline-block;
  padding: 8vw 5vw;
  border-radius: 50%;
  text-align: center;
  line-height: 1.5;
  margin: 1rem auto 0 auto;
}
.main-visual .soudan small {
  font-weight: normal;
  font-size: 3vw;
  line-height: 1.2;
  display: inline-block;
  margin-top: 0.5rem;
}

.section--memorial p.tit {
  margin: 2rem 0 0 0;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
}
.section--memorial p.catch {
  font-size: 1.1rem;
  margin: 1rem 0 0 0;
  text-align: center;
}
.price span {
  font-size: 1.7rem;
  font-weight: 600;
}
.point {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 8px;
  margin-bottom: 15px;
}
.point li {
  text-align: center;
  background-color: var(--base-color);
  color: #fff;
  padding: 5px 5px;
  font-size: 3.5vw;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
	text-shadow: 0 0 0 #fff;
  width: 28vw;
}

.recommend-kakomi {
  border: solid 5px #ccc;
  position: relative;
  margin-top: 2rem;
}

.recommend-container {
  counter-reset: number;
}

.section--recommend h2 {
  padding: 0 0;
  margin: 2rem 0 2rem 0;
  font-family: var(--font-accent);
  font-size: 1.6rem;
  font-weight: bold;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: #fff;
  color: var(--base-color);
  text-align: center;
}

.recommend-container h3 {
  color: var(--accent-color);
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.recommend-container .item {
  counter-increment: number;
  border-top: 1px solid #ccc;
  padding: 0 1rem;
}

/* 丸数字の吹き出し */
.recommend-container .item h3::before {
  content: counter(number);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  margin-right: 8px;

  background: var(--accent-color);
  color: #fff;
  border-radius: 50%;

  font-size: 1rem;
  font-weight: bold;
  line-height: 1;

  vertical-align: middle;
}

.section--map {
  background-color: #80c1e0;
  padding: 3rem 0;
  text-align: center;
}

.section--map h2 {
  background-color: transparent;
  text-align: center;
  font-size: 2.4rem;
  font-family: var(--font-accent);
  font-weight: bold;
  color: #fff;
  padding: 0;
  margin: 0 0 2rem 0;
}

.googlemap {
  position: relative;
  width: 100%;
  margin-bottom: 2rem;
  padding-top: 45%;
  height: 0;
}

.googlemap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.contact {
  text-align: center;
  margin: 3rem 0;
  padding: 0;
}

.contact p {
  margin-bottom: 0;
}
.contact p a {
  color: #000;
  font-size: 8vw;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  display: block;
  margin-top: 1rem;
}
/* --- フッター ------------------------------ */
footer {
  background-color: var(--accent-color);
  color: #fff;
  padding: 1rem 0 2rem 0;
  text-align: center;
}

address {
  text-align: center;
  margin: 1rem;
}

address img {
  width: 200px;
  margin: 0 auto;
}

.copyright {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-size: 0.8rem;
}

/* --- メディアクエリ設定用 ------------------------------ */
/* tb */
@media (min-width: 768px) {
  
h1 {
  font-size: 6vw;
  letter-spacing: 1rem;
  margin: 5vw 0 2vw 0;
}
.main-visual .hosoku {
  font-size: 0.7rem;
}
.main-visual .sub {
  font-size: 1.2rem;
  padding: 0.3rem 1.6rem;
}
.main-visual-container {
  display: grid;
  grid-template-columns: max-content max-content;
  width: max-content;
  margin: -1rem auto 0 auto;
}
.main-visual-container div {
  margin: 0 1rem;
}
.main-visual .price {
  font-size: 1.2rem;
  padding: 0 1rem 0 1rem;
}
.main-visual .price-tit {
  font-size: 1.4rem;
  line-height: 1;
}
.main-visual .price-l {
  font-size: 6rem;
  color: var(--accent-color);
  line-height: 1.3;
}
.main-visual .price-s {
  font-size: 3rem;
  color: var(--accent-color);
  line-height: 1.3;
}
.main-visual .zeikomi {
  font-size: 0.8rem;
}
.main-visual .soudan {
  font-size: 1.7rem;
  padding: 2.5rem 1rem;
  text-align: center;
  line-height: 1.5;
}
.main-visual .soudan small {
  font-size: 0.8rem;
  line-height: 1.2;
  margin-top: 0.5rem;
}

.section--memorial p.tit {
  font-size: 2rem;
}
.section--memorial p.catch {
  font-size: 1.6rem;
}
.price span {
  font-size: 1.7rem;
}
.point {
  margin-top: 10px;
  margin-bottom: 15px;
}
.point li {
  padding: 5px 5px;
  font-size: 0.9rem;
  width: 115px;
}

.recommend-kakomi {
  margin-top: 3rem;
  border-top: 4px solid #ccc;
}

.section--recommend h2 {
  font-size: 2rem;
  margin: 4rem 0 0 0;
}


.recommend-container .item {
  counter-increment: number;
  padding: 0 1.5rem;
  border-right: 1px solid #ccc;
}
.recommend-container .item:nth-child(3),
.recommend-container .item:nth-child(5) {
  border-right: 0 solid #ccc;
}

.recommend-container h3 {
  color: var(--accent-color);
  font-size: 1.1rem;
  font-weight: bold;
}

.recommend-container .item {
  counter-increment: number;
}

.section--map {
  background-color: #80c1e0;
  padding: 3rem 0;
}

.section--map h2 {
  font-size: 2rem;
  padding: 0;
  margin: 0 0 2rem 0;
}

.contact {
  text-align: center;
  margin: 3rem 0;
  padding: 20px;
}

.contact p {
  margin-bottom: 0;
  font-size: 1.2rem;
}
.contact p a {
  color: #000;
  font-size: 2.5rem;
  display: block;
  margin-top: 1rem;
}
}

/* pc */
@media (min-width: 1025px) {
  .container {}

  .recommend-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    position: relative;
  }  
  
  .recommend-container .item {
    counter-increment: number;
  }
  
  .recommend-container .item:nth-child(1),
  .recommend-container .item:nth-child(2),
  .recommend-container .item:nth-child(3) {
    grid-column: span 2;
  }
  
  .recommend-container .item:nth-child(4),
  .recommend-container .item:nth-child(5) {
    grid-column: span 3;
  }
  
}
@media (min-width: 1280px) {
 .hero-img h1 {
  left: calc((100vw - 1200px) / 2 + 2rem);

}

.main-visual .price {
  position: absolute;
  left: 60px;
  bottom: 120px;
}

.main-visual .soudan {
  position: absolute;
  right: 100px;
  bottom: 120px;
}

}

/* pc-l */
@media (min-width: 1440px) {
  .container {}
}


/* --- 表示・非表示 ------------------------------ */

.disp_pc {
  display: none;
}

@media (min-width: 768px) {
.disp_sp {
  display: none;
}
.disp_pc {
  display: inline;
}
}