@import url(https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap);
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap);

/* --- 色の定義 (CSS変数) --- */
:root {
	--color-blue: #0b81c4;
	--color-white: #fff;
	--color-ocher: #cba300;
	--color-cblue: #a3cb00;
}

@media only screen and (max-width: 750px){
	.submenu_box {display: none !important; }
	.submenu_navi { display: block !important; }
}


/* --- 基本スタイル --- */
html, body {
	letter-spacing: .08em;
}
* {
	border-style: solid;
	border-width: 0;
	box-sizing: border-box;
}
strong {
	font-weight: bolder;
}
.roboto {
	font-family: 'Roboto';
	font-weight: 400;
	letter-spacing: -.02em;
}
#wrap {
	overflow: hidden;
}
.inner {
	width: 100%;
	max-width: calc(1040px + 10%);
	margin: 0 auto;
	padding: 0 5%;
	position: relative;
}
i, em {
	font-style: normal;
}
li {
	list-style: none;
}
a, a:hover, a:active, a:focus {
	color: inherit;
	outline: none;
	text-decoration: none;
	line-height: 1;
}
a:hover {
	opacity: .85;
	transition: all .3s;
}
a:hover img, .tel a:hover {
	transition: all .7s;
	opacity: .7;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
a[href^="tel:"] {
	cursor: default;
}
a[href^="tel:"]:hover {
	opacity: 1;
}

/* --- ヘルパークラス --- */
.txt_center { text-align: center; }
.mgn_a { box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, .3);margin-left: auto; margin-right: auto; }
.tc.blue { color: var(--color-blue); }
.tc.white { color: var(--color-white); }
.bc.blue { border-color: var(--color-blue); }
.bgc.blue { background-color: var(--color-blue); }
.bgc.white { background-color: var(--color-white); }
.bgc.ocher { background-color: var(--color-ocher); }
.bgc.cblue { background-color: var(--color-cblue); }
.bdr.tblr { border-width: 1px; border-style: solid; }
.bdr.tblr.x2 { border-width: 2px; }
.flex { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.flex.start { justify-content: flex-start; }
.flex.center { justify-content: center; }
.flex.stretch { align-items: stretch; }
.flex.ai_center { align-items: center; }
.flex.nowrap { flex-wrap: nowrap; }
.noshrink { flex: 0 0 auto; }
.grow { flex: 1 1 auto; }
.w280 { width: 280px; }
.w6090 { display: block; margin-left: auto; margin-right: auto; width: 60%; }
.mt60 { margin-top: 60px; }
.mt05em { margin-top: .5em; }
.fs08 { font-size: .875em; }


.txt01 { line-height: 1.8; }
.lead01 { font-size: 1.75em; line-height: 1.6; }
.lead01.md { font-size: 1.5em; }
.lead01.sm2 { font-size: 1.125em; }

/* --- ボタン関連 --- */
.btnc, .btnc a { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; position: relative; }
.btnc > a { position: relative; height: 100%; line-height: 1; border: 1px solid transparent; transition: .3s ease-out, background .3s ease-in; }
.btnc.arw > a { padding-right: 1.8em; }
.btnc.arw > a:after { content: url(img/arrow_white.svg); line-height: 1; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: all .3s ease; }


.brief_btnul > li { color: var(--color-blue); background: #fff; border: 2px solid #0b81c4; border-radius: 3px; transition: all .3s; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5); }
.brief_btnul > li a { flex-wrap: nowrap; justify-content: center; align-items: center; height: 4em; }
.brief_btnul > li .ja { display: block; font-size: 1.125em; line-height: 1.1; ; letter-spacing: .05em; }
.brief_btnul > li:hover a { opacity: 1; }
.brief_btnul > li.btnc { transition: .2s; color: #fff;border-color: #fff; }
.brief_btnul > li.btnc:hover { transform: scale(1.02);box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5); }



/* --- 電話番号パーツ --- */
.telparts01 .tel em { color: #0b81c4; font-size: 2.25em; line-height: 1;  letter-spacing: 0; padding: 0 .25em; word-break: keep-all; white-space: nowrap; }

/* --- 供花・供物の流れ --- */
.kyouka_flow .col { width: 78%; }
.kyouka_flow .col.comp_box { width: 18%; padding: 1em; text-align: center; }
.kyouka_flow .col .ttl .ja { padding-top: .5em; display: block; font-size: 1em; line-height: 1.3; }
.kyouka_flow_box { padding: 0; position: relative; }
.kyouka_flow_box .bg_wrap { padding: 1em 1.5em; }
.kyouka_flow_box:nth-of-type(n+2) { margin-top: 1em; }
.kyouka_flow_box .ttl { width: 20%; }
.kyouka_flow_box .box1 { width: 100%; } /* 修正: 60% -> 100% */
.kyouka_flow_box:before { content: ""; width: 0; height: 0; border-left: .8em solid var(--color-blue); border-top: 1.5em solid #f9f9f9; border-bottom: 1.5em solid #f9f9f9; position: absolute; top: 50%; left: calc(100% + 2px); transform: translateY(-50%); }


/* ------------------------------------
 * 幅に応じて表示を切り替える改行タグ
 * ------------------------------------ */

/* 共通設定: SPサイズ用の改行タグは、デフォルト（PCサイズ）では非表示 */
.sp_br {
	display: none;
}

/* --- レスポンシブ --- */
@media (max-width: 767px) {
    /* 既存の .tb_pc (PC用の改行タグ) は非表示 */
	.tb_pc { display: none !important; }
    
    /* 追加: .sp_br (SP用の改行タグ) は表示（強制改行）*/
	.sp_br { display: block; } 
    
    /* ... 既存の 767px 以下のスタイルが続く ... */
}

/* --- レスポンシブ --- */
@media (max-width: 700px) {
	html, body { font-size: calc(32/750*100vw); line-height: 1.5625; letter-spacing: .05em; }
	.inner { max-width: 100%; padding: 0 3.2vw; }
	.tb_pc { display: none; }
	.mt60 { margin-top: calc(60/750*100vw); }
	.w280 { width: calc(500/750*100vw); }
	.lead01 { font-size: 1.3em; line-height: 1.5; }
	.lead01.md { font-size: 1.25em; }
	.brief_btnul > li a { flex-wrap: wrap; padding: .5em; height: 100%; }
	.brief_btnul > li .ja { margin-left: 0; width: 100%; text-align: center; font-size: .8em; line-height: 1.2; letter-spacing: 0em; }
	.kyouka_flow.flex.nowrap { flex-wrap: wrap; }
	.kyouka_flow .col { width: 100%; }
	.kyouka_flow .col.comp_box { margin-top: 1.5em; width: 100%; padding: 1em; }
	.kyouka_flow .col .ttl .ja { font-size: 1.1em; }
	.kyouka_flow_box.flex.nowrap { flex-wrap: wrap; }
	.kyouka_flow_box .bg_wrap { width: 100%; padding: 1em; }
	.kyouka_flow_box:nth-of-type(n+2) { margin-top: .8em; }
	.kyouka_flow_box .ttl { width: 100%; padding: .5em; }
	.kyouka_flow_box .box1 { width: 100%; }
	.kyouka_flow_box:before { display: none; }
.w6090 { width: 90%; }

}
@media screen and (min-width: 700px) {
	a[href^="tel:"] { pointer-events: none; }
}


@media only screen and (max-width: 700px){
.form {
	width: 95%; /* 画面が狭いときはフォームの幅を95%に広げる */
}
.form-base {
	display: block; /* 横並びレイアウトを解除 */
}

.form-side {
  display: block;
  width: 70%; /* 幅を60%に */
  text-align: left; /* ラベルを左揃えに */
  padding: 10px; /* 上下の余白を調整 */
  box-sizing: border-box;
}

.form-main {
  display: block;
  width: 100%;
  background-color: #E5DCD3; /* 背景色を薄いグレーに */
  margin-left: 0;   /* 左マージンをリセット */
  padding: 5px 10px 15px; /* 余白を調整（下を少し多めに） */
  box-sizing: border-box;
}

}

/* form-mainの背景色を常に薄い茶色に設定 */
.form-main {
	background-color: #E5DCD3;
}

/* 請求書作成方法のラベルがはみ出さないように調整 */
.form-line {
	/* 画面幅に応じてフォントサイズを可変にし、はみ出しを防ぎます。
	   clamp(最小サイズ, 推奨サイズ, 最大サイズ) を使用しています。 */
	font-size: clamp(16px, 2.7vw, 22px);
	background-color:#E5DCD3;
}

/* フォームの区切り線を調整 */
.form {
	border-top: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	border-left: none;
	border-right: none;
}
.form li {
	border: none; /* liのデフォルトの枠線をリセット */
	border-bottom: 2px solid #ccc; /* 下線だけを2pxで設定 */
}
.form li:last-child {
	border-bottom: none; /* フォームの一番下のliの下線は不要 */
}
hr {
	border: none;
	border-top: 2px solid #ccc;
	margin: 1.5em auto;
}

/* 旧字体に関する注意書きボックス */
.legacy-char-notice {
	font-size: large;
	background-color: white;
	border: 10px outset red;
	padding: 10px 0px 0px 20px;
	overflow: hidden;
}

/* 注意書きボックス内の画像 */
.legacy-char-img {
	float: right;
	width: 30%;
}


/* フォームボタン共通スタイル（確認・リセットボタン） */
.form-button {
	border: solid 1px #ccc;
	box-shadow: 2px 3px 2px 2px rgba(0, 0, 0, 0.5);
}

#contents::placeholder {
  font-size: 30px; /* ← ここの数値を調整してください */
  color: #999;      /* ← 文字色（任意） */
}