@charset "UTF-8";
/* CSS Document */
/*////　共通style　////*/

html {
	font-size: 62.5%;
	font-weight: 400;
}

body {
	font-family: 'Noto Sans JP', sans-serif, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo";
	font-weight: 400;
	color: #222;
	background-color: #fff;
	padding: inherit;
}

header {
	width: 100%;
	height: 85px;
	background-color: #fff;
	display: flex;
	align-items: center;
	position: fixed;
	z-index: 999;
}

.header_inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header_sp_contact,
.menu-btn {
	display: none !important; /* スマホ用パーツを完全に消す */
}

header nav {
	display: flex;
	justify-content: flex-end;
}

header nav.nav {
	display: block !important; /* PCナビを表示 */
}

header nav ul {
	display: flex;
	align-items: center;
	font-size: 1.6rem;
}

header nav ul li {
	
}

header nav ul li a:hover {
	color: #f53354;
}

header nav ul li.mail,
header nav ul li.tell {
	width: 150px;
}

header nav ul li.mail img,
header nav ul li.tell img {
    width: 150px; /* 画像の本来の幅に合わせて調整 */
    height: auto;
}

header nav ul li.mail a:hover {
	filter: saturate(200%);
}

header nav ul li.tell a:hover {
	filter: drop-shadow(1px 1px 5px #ccc);
}

.contact {
	width: 150px;
}

.pc,
.pc_tab {
	display: block;
}

.sp,
.sp_only {
	display: none;
}

main {
	background-color: #fef2f0;
	padding-top: 85px;
	margin-bottom: -100px;
}

img {
	width: 100%;
	height: auto;
	display: block;
}

h1 {
	display: inline-block;
}

h2 {
	color: #ed1c24;
	font-size: 3.4rem;
	font-weight: 600;
	letter-spacing: 0em;
	text-align: center; 
	margin-bottom: 7rem;
}

h2.problems-h2,
h2.secret-h2 {
	font-size: 4.2rem;
}

h2.problems-h2 .text-small {
	color: #222;
	font-size: 3.4rem;
	display: block;
}

h2.secret-h2 .text-small {
	color: #222;
	font-size: 3.4rem;
	display: inline;
}

h2.flow-tittle {
	margin-bottom: 12rem;
}

h2.price-title::after,
h2.flow-tittle::after,
h2.menu-tittle::after {
    content: '';
	width: 300px;  
    height: 113px; 
    position: absolute;
    top: 5px;
    right: 36%; 
    /* SVG画像を背景に指定 */
    background-image: url("../images/mv-line.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
	animation:blink 1s ease-in-out infinite;
	z-index: 99;
}

h3 {
	color: #222;
	font-size: 3rem;
	font-weight: 600;
	text-align: center;
}

.inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* ページ内リンクの着地位置調整 */
section[id] {
    scroll-margin-top: 85px; /* PCヘッダーの高さ */
}


span.marker {
	background: linear-gradient(transparent 80%, #fff154 80%);
}

span.emphasis {
	font-weight: bold;
	color: #ed1c24;
}

.decorated-wrapper {
    animation: bounce-anim 1.2s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}
@keyframes bounce-anim {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.decorated {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    color: #333333;
    font-weight: bold;
	animation: bounce-anim 1.2s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}

.decorated::before,
.decorated::after {
    content: '';
    width: 30px;  /* 装飾の幅 */
    height: 30px; /* 装飾の高さ */
    background-image: url("../images/decorated-title.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

/* 左側だけ反転させる */
.decorated::before {
    transform: scaleX(-1);
}

.decorated-text {
	font-size: 2.7rem;
	line-height: 1.5;
	margin-top: 4.5rem;
}

.decorated-text02 {
	font-size: 2.7rem;
	line-height: 1.5;
	margin-top: 4.5rem;
	margin-bottom: 3rem;
}

.decorated-text span.strong,
.decorated-text02 span.strong {
	display: inline-block;
    font-size: 130%;
    color: #ed1c24;
	margin: 0 -0.45em;
	vertical-align: middle;
}

.decorated-text span.strong02,
.decorated-text02 span.strong02 {
    display: inline-block;
    font-size: 130%;
    color: #ed1c24;
    margin: 0 0.05em;
    
    /* 一旦基準をテキストの底辺に合わせる */
    vertical-align: baseline; 
    
    /* 1px単位で上に持ち上げる（-0.05em 〜 -0.1em 程度で調整） */
    /* マイナスの値で上に移動します */
    transform: translateY(-0.06em); 
    
    /* 行の高さがズレないように調整 */
    line-height: 1; 
}

/* 2行バージョンのための専用クラス */
.decorated02 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    color: #333333;
    font-weight: bold;
}

.decorated02::before,
.decorated02::after {
    content: '';
    width: 68px;  /* 装飾の幅 */
    height: 94px; /* 装飾の高さ */
    background-image: url("../images/decorated-title02.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

/* 左側だけ反転させる */
.decorated02::before {
    transform: scaleX(-1);
}

.is-2line {
    display: block !important; /* flexを解除 */
    position: relative;
    text-align: center;
    width: fit-content;        /* 文字の幅に合わせる */
    margin: 4.5rem auto 0;     /* 中央寄せ */
    padding: 0 8rem;           /* 左右に装飾用の余白を固定で作る */
}

.is-2line::before,
.is-2line::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 垂直中央 */
    width: 68px;  /* 装飾のサイズを2行に合わせて少し大きく */
    height: 78px;
    background-image: url("../images/decorated-title02.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 左側の装飾 */
.is-2line::before {
    left: 0;
    transform: translateY(-50%) scaleX(-1); /* 反転しつつ中央 */
}

/* 右側の装飾 */
.is-2line::after {
    right: 0;
}

.cta-buttons {
	width: 100%;
	max-width: 768px;
	display: flex;
	margin: 0 auto;
	justify-content: space-between;
}

.cta-buttons a:hover {
	filter: saturate(200%);
}

.cta-buttons div {
	margin: 1.5rem 1.5rem 0 1.5rem;
}

.cta-buttons img {
	width: 26.35431918%;
	max-width: 360px;
	height: auto;
}

.cta-buttons a:hover {
	opacity: .8;
}

.cta-buttons02 {
	width: 100%;
	max-width: 768px;
	display: flex;
	margin: 0 auto;
	justify-content: center;
}

.cta-buttons02 a:hover {
	filter: saturate(200%);
}

.cta-buttons02 div {
	margin: 1.5rem 1.5rem 0 1.5rem;
}

.cta-buttons02 img {
	width: 100%;
	height: auto;
}

.cta-buttons02 a:hover {
	opacity: .8;
}

.cta-buttons03 {
	width: 100%;
	max-width: 768px;
	display: flex;
	margin: 0 auto;
	flex-direction: column;
	justify-content: center;
}

.cta-buttons03 a:hover {
	filter: saturate(200%);
}

.cta-buttons03 div {
	margin: 1.5rem 1.5rem 0 1.5rem;
}

.cta-buttons03 img {
	width: 100%;
	height: auto;
}

.cta-buttons03 a:hover {
	opacity: .8;
}

.cta-buttons04 {
	width: 100%;
	max-width: 768px;
	display: flex;
	margin: 1rem auto 0;
	justify-content: center;
}

.cta-buttons04 a:hover {
	filter: saturate(200%);
}

.cta-buttons04 div {
	margin: 1.5rem 1.5rem 0 1.5rem;
}

.cta-buttons04 img {
	width: 100%;
	height: auto;
}

.cta-buttons04 a:hover {
	opacity: .8;
}

.bottom-notes {
	font-size: 1.2rem;
	line-height: 1.75;
	margin: 4.5rem auto;
}

.bottom-notes02 {
	font-size: 1.2rem;
	line-height: 1.75;
	margin: 9rem auto 4.5rem;
}

/*////　LP　////*/
#lpContent {
}

#lpContent .inner {
	width: 100%;
	max-width: 1200px;
}

#lpContent img {
	width: 100%;
	height: auto;
}

#lpContent section {
	width: 100%;
	position: relative;
}

#lpContent .lineImg {
	width: 32.21083455%;
	height: auto;
	position: absolute;
	top: 10%;
	left: 29.8682284%;
}

#lpContent section.mv p img {
	width: 31.84480234%;
	height: auto;
	margin-top: 8.477306%;
	margin-left: 6.0761347%;
	position: absolute;
	opacity: 0;
    animation: fadeInUp 1.5s ease-out 0.5s forwards;
}

@keyframes fadeInUp {
from {
	opacity: 0;
	transform: translateY(20px); /* 下から20pxの位置から開始 */
}
to {
	opacity: 1;
	transform: translateY(0);    /* 本来の位置へ */
}
}

/* PC・タブレット用：紙飛行機ライン (mv-line.svg) */
.mv .lineImg.pc_tab {
    opacity: 0; /* 最初は透明 */
    /* テキスト(0.5s開始)の後、1.0s遅らせて開始 | 1.5sかけて描画 */
    animation: fadeInLine 1.5s ease-out 1.5s forwards;
}

/* スマホ用：ハートライン (mv-line-sp.svg) */
.mv .lineImg.sp_only {
    opacity: 0;
    /* テキストの後、1.0s遅らせて開始 | 1.5sかけて描画 */
    animation: fadeInLine 1.5s ease-out 1.5s forwards;
}

/* スマホ用：紙飛行機 (mv-line-heart-sp.svg) */
.mv .lineImg02.sp_only {
    opacity: 0;
    /* ハートライン(1.5s開始)の後、1.0s遅らせて開始 | 1.0sで飛ぶ */
    animation: fadeInAirplane 1.0s ease-out 2.5s forwards;
}

@keyframes fadeInLine {
    from {
        opacity: 0;
        transform: translateX(-20px); /* 左から20px */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 紙飛行機用のフェードイン（斜め下から飛んでくる） */
@keyframes fadeInAirplane {
    from {
        opacity: 0;
        transform: translate(-30px, 30px); /* 左下から */
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}


/*// できること //*/
.features {
	padding: 9rem 0;
}

.features ul {
	display: flex;
	text-align: center;
	justify-content: space-between;
}

.features ul li {
	width: 30.83333333%;
	color: #f75f4f;
	background-color: #fff;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.5;
	padding: 35px 30px;
	border: solid 4px #f75f4f;
	border-radius: 30px 30px 0px 30px;
	box-sizing: border-box;
}

/*/// こんなお悩みを抱えていませんか ///*/
.problems {
	background-color: #ffccc0;
	padding: 9rem 0;
	text-align: center;
	position: relative;
}

.problems::after {
    content: '';
    position: absolute;
    /* 真ん中の下に配置 */
    bottom: -40px; /* 三角形の高さ（border-top-width）と同じ数値をマイナスに */
    left: 50%;
    transform: translateX(-50%); /* 中央寄せ */
    /* サイズを0にする */
    width: 0;
    height: 0;
    /* 1. 左右のborderを透明にする（横幅を決める） */
    /* この数値を大きくすると、三角形が横に広くなる */
    border-right: 70px solid transparent; 
    border-left: 70px solid transparent; 
    /* 2. 上のborderに色をつける（高さを決める） */
    /* この数値を小さくすると、三角形が平べったくなる */
    border-top: 40px solid #ffccc0;
    display: block;
    z-index: 1; /* コンテンツや次のセクションとの重なり順を調整 */
}

/* 親コンテナ */
.problems-item-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 5rem;
}

/* 白いカードの基本設定 */
.problems-card {
    width: 31%;
    position: relative; /* イラストの基準点にする */
    padding-bottom: 80px; /* イラストが被る分の余白を下に確保 */
}

.card-content {
    background-color: #fff;
    padding: 4rem 2rem 10rem; /* 下側に広めの余白をあけておく */
    border-radius: 30px 30px 0px 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 軽い影をつけるとプロっぽくなります */
}

/* タイトルとテキスト */
.card-title {
    color: #ed1c24;
    font-size: 3.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.card-text {
    font-size: 1.8rem;
    line-height: 1.6;
}

/* 真ん中のカードだけ少し下げる（デザイン案の再現） */
.card-move-down {
    margin-top: 8rem;
}

/* イラストの配置 */
.card-illust-disign {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* 常に中央配置 */
    width: 38.17204301% !important; /* カード幅に対してのサイズ */
    height: auto;
}

.card-illust-plan {
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%); /* 常に中央配置 */
    width: 44.08602151% !important; /* カード幅に対してのサイズ */
    height: auto;
}

.card-illust-print {
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%); /* 常に中央配置 */
    width: 47.31182796% !important; /* カード幅に対してのサイズ */
    height: auto;
}

.problems-text {
	color: #222;
	font-size: 3.4rem;
	font-weight: 600;
	margin-top: 7rem;
}

.problems-text-big {
	color: #ed1c24;
	font-size: 5.4rem;
	/* 擬似要素の基準点にするため relative を指定 */
    position: relative;
    /* 装飾が入るスペースを右側に確保 */
    padding-right: 0.8em;
}

/* キラキラ装飾の設定 */
.problems-text-big::after {
    content: '';
	width: 76px;  
    height: 76px; 
    position: absolute;
    top: -15px;
    right: 0px; 
    /* SVG画像を背景に指定 */
    background-image: url("../images/icon-sparkle.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
	animation:blink 1s ease-in-out infinite;
}

@keyframes blink {
    0% {
        opacity: 0;   /* 最初は透明 */
        transform: scale(0.9); /* 少し小さく */
    }
    100% {
        opacity: 1;   /* 最後はまた透明に */
        transform: scale(1); /* 少し小さく */
    }
}

/*/// 折込の秘訣 ///*/
.secret {
	background-color: #ffe3dc;
    padding: 12rem 0 10rem;
    position: relative;
}

/* 下側の境界線を「白」で削るパーツ */
.secret::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px; /* 斜めの深さ（お好みで調整） */
    /* 次のセクションの背景色と同じにする */
    background-color: #fef2f0; 
    /* 右側を削るためのマスク */
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    display: block;
}

.secret-text-big {
	color: #ed1c24;
	font-size: 4.5rem;
	/* 擬似要素の基準点にするため relative を指定 */
    position: relative;
    /* 装飾が入るスペースを右側に確保 */
    padding-right: 0.5em;
}

/* キラキラ装飾の設定 */
.secret-text-big::after {
    content: '';
	width: 45px;  
    height: 45px; 
    position: absolute;
    top: -10px;
    right: 0px; 
    /* SVG画像を背景に指定 */
    background-image: url("../images/icon-sparkle.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
	animation:blink 1s ease-in-out infinite;
}

@keyframes blink {
    0% {
        opacity: 0;   /* 最初は透明 */
        transform: scale(0.9); /* 少し小さく */
    }
    100% {
        opacity: 1;   /* 最後はまた透明に */
        transform: scale(1); /* 少し小さく */
    }
}

.secret .graph {
	width: 36.60322108%;
	max-width: 500px;
	height: auto;
}

.secret dl {
	width: 54.1727672%;
	max-width: 740px;
}

.secret dl dt {
	font-size: 3rem;
	/*font-size: 2.19619327vw;*/
	padding-bottom: 1.5rem;
	border-bottom: solid 4px #e9775d;
}

.secret dl dd {
	font-size: 1.6rem;
	/*font-size: 1.17130307vw;*/
	line-height: 1.563;
	padding-top: 2.1rem;
}

.secret dl dd.notes {
	font-size: 1.2rem;
	/*font-size: 0.87847731vw;*/
	line-height: 1.5;
}

.secret-pointBox {
	display: flex;
	justify-content: space-around;
}

.secret-pointBox-list {
	width: 47%;
	padding: 3rem 6rem;
	background-color: #fff;
	border-radius: 30px 30px 0px 30px;
	border: solid 4px #f75f4f;
	box-sizing: border-box;
	position: relative;
}

.secret-pointBox-list img.icon {
	max-width: 135px;
	height: auto;
	position: absolute;
	top: -10%;
	left: -5%;
}

.secret-pointBox-list p {
	font-size: 1.6rem;
	line-height: 1.563;
	margin-top: 2rem;
}

.secret-pointBox-list p.listTitle {
	font-size: 3.5rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 2rem;
}



/*/// デザインの秘訣 ///*/
.secret-design {
	margin-bottom: 15rem;
}

.secret-designBox {
	margin: 6rem 0 10rem 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-around;
}

/*/// 配布プランの秘訣 ///*/
.secret-plan {
	margin-bottom: 15rem;
}

/*/// チラシ印刷の秘訣 ///*/
.secret-print {
	margin-bottom: 15rem;
}

/*/// ご提案イメージ ///*/
.proposal {
    background-color: #fef2f0; 
    padding-top: 5rem;
    padding-bottom: 15rem; /* 下側に斜めパーツを置くための十分な余白 */
    position: relative;
    z-index: 1;           /* 重なり順を明示 */
    overflow: visible;    /* 擬似要素のはみ出しを許可 */
}

/* 下側の境界線を斜めにするパーツ（右肩上がり） */
.proposal::after {
    content: '';
    position: absolute;
    bottom: -1px;  /* 隙間が出ないように1pxだけ食い込ませる */
    left: 0;
    width: 100%;
    height: 100px; /* 斜めの深さ */
    
    /* 重要：次のセクション（料金）の背景色「薄ピンク」と同じにする */
    background-color: #ffe3dc; 
    
    /* polygonで右肩上がりの三角形を作る */
    /* 左側の高さを 0 (100%地点)、右側の高さを 100px (calc(100% - 100px)地点) に設定 */
    clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
    
    display: block;
    z-index: 2; /* proposalの背景より上に配置 */
}

/* 料金プランセクション */
.price {
    padding: 10rem 0 0;
    background-color: #ffe3dc; /* 斜めパーツと同じピンクにする */
    position: relative;
    z-index: 1;
}

.proposal h2 {
	position: relative;
	width: 300px;
	margin: 0 auto;
}

.proposal h2::after {
    content: '';
	width: 84px;  
    height: 53px; 
    position: absolute;
    top: -30px;
    right: -25px; 
    /* SVG画像を背景に指定 */
    background-image: url("../images/proposal-paper-airplane.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
	animation:blink 1s ease-in-out infinite;
}

.proposal section {
	display: flex;
	justify-content: space-around;
	background-color: #fff;
	border: solid 4px #f53354;
	border-radius: 30px 30px 0px 30px;
	margin: 4.5rem auto;
	padding: 4rem 3rem;
	box-sizing: border-box;
}

.proposal section .proposal-Boxleft {
	width: 29.28257687%;
	max-width: 400px;
	background-image: url("../images/proposal-copy.svg");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 295px;
}

.proposal section .proposal-Boxright {
	width: 58.56515373%;
	max-width: 800px;
}

.proposal p:first-child {
	font-size: 3rem;
	display: flex;
	align-items: center;
}
.proposal p:first-child .category {
	display: inline-block;
	width: 126px;
	color: #fff;
	background-color: #f53354;
	font-size: 1.6rem;
	padding: 1.2rem 0;
	margin-right: 1.2rem;
	text-align: center;
	border-radius: 10px 10px 0px 10px;
}

.proposal .example {
	color: #f53354;
	font-size: 2.4rem;
	font-weight: bold;
	margin: 1.2rem 0 2rem;
}

/*.proposal .copy {
	width: 295px;
}*/

.proposal .exampleZoom {
	position: relative;
	margin-top: 3rem;
}

.proposal .exampleZoom p.expansion {
	width: 210px;
	position: absolute;
	right: 0;
	bottom: -2%;
}

.proposal .exampleZoom p.expansion:hover,
.proposal .exampleZoom p.expansion02:hover {
	cursor: pointer;
	opacity: .8;
}

.proposal .exampleZoom img.areaMap {
	max-width: 550px;
	height: auto;
}

.proposal .exampleZoom img.brochure {
	max-width: 370px;
	height: auto;
}

.proposal .exampleZoom p.expansion02 {
	width: 295px;
	position: absolute;
	right: 0;
	bottom: -2%;
}

.proposal-nursing h3,
.proposal-ceremonies h3 {
	width: 343px;
	height: auto;
	margin-bottom: 5rem;
}

.proposal-nursing .illust,
.proposal-ceremonies .illust {
	width: 268px;
	margin: 0 auto 1.2rem;
}

.proposal-purchase h3 {
	width: 283px;
	height: auto;
	margin-bottom: 5rem;
}

.proposal-purchase .illust {
	width: 333px;
	margin: 0 auto 1.2rem;
}

.proposal-purchase .proposal-Boxright ul li {
	font-size: 1.8rem;
	line-height: 2;
	font-weight: bold;
}

.proposal-purchase .proposal-Boxright ul.distribution-list {
	display: flex;
}

.proposal-purchase .proposal-Boxright ul.distribution-list li {
	margin-right: 3rem;
	font-weight: normal;
}



section.proposal-ceremonies {
	margin-bottom: 9rem;
}

.proposal-purchase p.distribution {
	font-size: 2.1rem;
	margin-top: 3rem;
}

.proposal-purchase p.distribution .category {
	display: inline-block;
	width: 126px;
	color: #fff;
	background-color: #f53354;
	font-size: 1.6rem;
	padding: 1.2rem 0;
	margin-right: 1.2rem;
	text-align: center;
	border-radius: 10px 10px 0px 10px;
}

.proposal-ceremonies .ceremoniesList {
	font-size: 1.8rem;
	line-height: 2;
}

.proposal-ceremonies .ceremoniesList span {
	display: block;
	text-indent: 1em;
}

/*料金プラン*/
.price {
    padding: 10rem 0;
    background-color: #ffe3dc;
    position: relative;
    z-index: 1;
}

.price .price-planBox {
    display: flex;
    justify-content: center;
    align-items: stretch; /* カードの高さを一番高いものに合わせる */
    gap: 3.5rem;          /* ＋記号が入るスペースを確保 */
    margin-top: 5rem;
}

.price .price-planBox > div {
    width: 31%;
    background-color: #fff;
    /* paddingを上下4rem、左右1remに絞り、横幅の余裕を作る */
    padding: 2.5rem 1rem; 
    border: solid 4px #f75f4f;
    border-radius: 30px 30px 0px 30px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 上揃えにしてバランスを取る */
}

/* ＋記号の配置（絶対配置で隙間に置く） */
.price .price-planBox > div:not(:last-child)::after {
    content: '+';
    position: absolute;
    right: -3.4rem; /* gapの半分くらいの位置 */
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
    color: #f75f4f;
    font-weight: bold;
}

.price .price-planBox h3 {
	color: #ed1c24;
    font-size: 2.4rem;
    margin-bottom: 2rem;
    line-height: 1.2;
}

/* 金額部分の折り返しを禁止し、1行に収める */
.price .price-planBox-strong {
    display: block;
    font-size: 3.6rem;
    font-weight: 600;
    color: #222;
    margin: 0.5rem 0;
    white-space: nowrap; /* これが重要：勝手な改行を防ぐ */
    letter-spacing: -0.02em; /* わずかに詰めて収まりを良くする */
}

/* 「円（税抜）」などの単位を小さく横に添える */
.price .price-planBox div p {
    font-size: 1.6rem;
    margin: 0;
    display: inline-block;
}

.price .notes {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-top: 1.5rem;
    color: #333;
}

.price .price-example {
	margin: 4.5rem auto;
}

.price .price-example img {
	max-width: 750px;
	height: auto;
	margin: 0 auto;
}

/*ご実施までの流れ*/
.flow {
	padding: 10rem 0;
    background-color: #ffe3dc;
    position: relative;
}

.flow .flow-stepBox {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    position: relative; /* 線の基準点にする */
    z-index: 1;
}

/* 真ん中を通る水平線 */
.flow .flow-stepBox::before {
    content: '';
    position: absolute;
    top: 50%;         /* 上から50%の位置（真ん中） */
    left: 50px;       /* 線の開始位置（調整可能） */
    right: 50px;      /* 線の終了位置（調整可能） */
    height: 4px;      /* 線の太さ */
    background-color: #f75f4f; /* 線の色（ステップの枠線と同じ色） */
    transform: translateY(-50%); /* 自身の太さ分を考慮して中心に */
    z-index: -1;      /* カード（background-color: #fff）の下に潜り込ませる */
}

/* 各ステップのカード */
.flow .flow-stepBox div.flow-stepBox-steps {
    width: 100%;
    max-width: 176px;
    color: #f75f4f;
    background-color: #fff; /* 線を隠すために背景白は必須 */
    padding: 2.5rem 0;
    border: solid 4px #f75f4f;
    border-radius: 30px 30px 0px 30px;
    font-size: 2.4rem;
    font-weight: bold;
    text-align: center;
    position: relative;
    box-sizing: border-box;
}

.flow .flow-stepBox div.flow-stepBox-steps p {
	width: 70px;
	height: 70px;
	position: absolute;
	top: -50px;
	right: 25%;
	left: 25%;
}

.flow .flow-stepBox div.flow-stepBox-steps div {
	display: flex;
	flex-direction: column;
}

.flow .flow-stepBox div.flow-stepBox-steps ul {
	color: #222;
	font-size: 1.4rem;
	font-weight: normal;
	text-align: left;
	position: absolute;
	left: 20%;
	top: 120%;
}

.flow .flow-stepBox div.flow-stepBox-steps ul li::before {
	content: '';
	width: 12px;  
    height: 12px; 
    position: absolute;
    left: -15px; 
    /* SVG画像を背景に指定 */
    background-image: url("../images/flow-icon-check.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}


/*対応可能メニュー*/
.menu {
	padding: 10rem 0;
    background-color: #ffe3dc;
    position: relative;
}

.menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.menu ul li {
	width: 14.58333333%;
	margin-bottom: 3rem;
}

/*//////////////////////*/
/*// モーダルウィンドウ //*/
/* モーダル全体の背景 */
.modal {
    display: none; /* 初期状態は非表示 */
    position: fixed;
    z-index: 10000; /* ヘッダーより上に */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* 背景を暗く */
    overflow: auto;
}

/* 表示される画像 */
.modal-content {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 800px; /* PCでの最大幅 */
    padding: 50px 0;
    animation: zoom 0.3s;
}

@keyframes zoom {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* 閉じるボタン */
.modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.modal-close:hover {
    color: #bbb;
}


@media all and (max-width: 1200px) {
.contact {
	margin-right: 6.5rem;
}

h2.price-title::after,
h2.flow-tittle::after,
h2.menu-tittle::after {
    top: 5px;
    right: 30%; 
}
}

/*////　 ipad 　////*/
@media all and (max-width: 768px) {
.pc,
.sp_only {
	display: none;
}

.sp {
	display: block;
}

header {
	height: 70px !important;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	z-index: 9999;
}

.header_inner {
	max-width: 100% !important;
	height: 100%;
	padding: 0 0 0 10px !important;
	display: flex !important;
	justify-content: space-between !important; /* ロゴと右グループを離す */
	align-items: center !important;
}

/* PC用のナビを完全に無効化して隠す */
header nav.nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(252,243,238,.9);
        /* z-indexをボタン（10001以上）より低く設定 */
        z-index: 9998 !important; 
        transition: right 0.4s ease-in-out;
        padding-top: 100px; /* ボタンを避けるための上部余白 */
    }

/* JSで active クラスがついた時だけ画面内に入れる */
header nav.nav.is-active {
	right: 0 !important;
}

/* メニューの中身を縦並びに強制 */
header nav ul {
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

header nav ul li {
	margin: 20px 0 !important;
	font-size: 2rem !important;
	width: 100%;
	text-align: center;
}

/* PC用の電話とメールボタンをスマホメニュー内では絶対に消す */
.pc-nav {
	display: none !important;
}

/* 右側のボタングループ */
.header-right-group {
	position: relative;
	z-index: 10001 !important; 
	display: flex;
	align-items: center;
	height: 100%;
}

/* 問い合わせボタン */
.header_sp_contact {
	display: block !important;
	width: 140px; /* サイズ調整 */
	margin-right: 20px; /* ハンバーガーとの距離 */
}

/* オレンジのメニューボタン */
.menu-btn {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    background-color: #e9775d;
    cursor: pointer;
    position: relative; /* 子要素 span の絶対基準 */
    z-index: 10002 !important;
    flex-shrink: 0;
}

/* 三本線の共通設定（中央配置の極意） */
.menu-btn span {
    display: block;
    width: 30px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    /* 1. まずボタンの真ん中(50%)に配置 */
    left: 50%;
    top: 50%;
    /* 2. 自分の幅の半分だけ戻して、完全な中心を出す */
    margin-left: -15px; /* width 30px の半分 */
    margin-top: -1px;   /* height 2px の半分 */
    transition: all 0.3s ease-in-out;
}

/* 三本線の初期位置（中心からのオフセットで調整） */
.menu-btn span:nth-child(1) { transform: translateY(-10px); } /* 上に10px */
.menu-btn span:nth-child(2) { opacity: 1; }                    /* 真ん中 */
.menu-btn span:nth-child(3) { transform: translateY(10px); }  /* 下に10px */

/* --- 【重要】開いた時（is-active）の変形 --- */
.menu-btn.is-active span:nth-child(1) {
    /* 真ん中に戻してから45度回転 */
    transform: translateY(0) rotate(45deg);
}
.menu-btn.is-active span:nth-child(2) {
    opacity: 0; /* 真ん中の線を消す */
}
.menu-btn.is-active span:nth-child(3) {
    /* 真ん中に戻してから-45度回転 */
    transform: translateY(0) rotate(-45deg);
}

/* メニューテキスト */
.menu-btn p {
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    margin: 0;
}

h2.problems-h2,
h2.secret-h2 {
	font-size: 3.5rem;
}

h2.problems-h2 .text-small {
	font-size: 2.7rem;
}

h2.secret-h2 .text-small {
	font-size: 2.7rem;
}

h2.price-title::after {
    top: 1%;
    right: 24%; 
}

h2.flow-tittle::after {
    top: -2.6%;
    right: 22%; 
}

h2.menu-tittle::after {
    top: 2%;
    right: 20%;
}

h3 {
	font-size: 3rem;
}

.inner {
	box-sizing: border-box;
}

/* ページ内リンクの着地位置調整 */
section[id] {
	scroll-margin-top: 70px; /* スマホヘッダーの高さ */
}

main {
	/* ヘッダーの高さと同じ数値を指定 */
	padding-top: 70px !important; 
}

.cta-buttons {
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.cta-buttons img {
	width: 100%;
	max-width: 360px;
	height: auto;
}

.cta-buttons02 div {
	margin: 0 1.5rem 0 1.5rem;
}

.decorated {
}

.decorated::before,
.decorated::after {
    width: 25px;  /* 装飾の幅 */
    height: 25px; /* 装飾の高さ */
}

.decorated-text {
	font-size: calc(100vw * 27 / 768);
}

.decorated-text span.strong {
	margin: 0 -0.5em;
}

.bottom-notes02 {
	margin: 4.5rem auto;
}

.is-2line {
	display: flex !important;
	justify-content: center;
	align-items: center; /* 垂直方向の中央揃えを保証 */
	gap: 15px;
	width: 100%;
	padding: 0 10px;
	margin: 4rem auto 1.5rem;
}

.text-group {
	display: block;
	text-align: center;
	flex: 0 1 auto;
	line-height: 1.5; /* 行間を少し詰めると装飾とのバランスが良くなります */
}

.is-2line::before,
.is-2line::after {
	content: '';
	/* 絶対配置(absolute)の残骸があればここで完全に消す */
	position: static !important; 

	/* サイズ固定 */
	width: 68px; 
	height: 94px;
	flex-shrink: 0;

	background-image: url("../images/decorated-title02.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center; /* 背景画像を中央に */
	display: block;

	/* 余計な回転をリセットし、垂直に立てる */
	transform: none !important; 
}

.is-2line::before {
	/* 反転だけを適用。回転(rotate)が混ざっていたら消す */
	transform: scaleX(-1) !important;
}

/*// できること //*/
.features ul {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.features ul li {
	width: 48.17708333%;
	margin: 2rem auto 0;
	padding: 35px 30px;
	border: solid 3px #f75f4f;
	border-radius: 30px 30px 0px 30px;
	box-sizing: border-box;
}

/*/// こんなお悩みを抱えていませんか ///*/
.problems-item-container {
	flex-direction: column;
	align-items: center;
}
.problems-card {
	width: 100%;
	max-width: 400px;
	margin-bottom: 5rem;
}
.card-move-down {
	margin-top: 0; /* スマホでは段差をなくす */
}

.card-illust-plan {
    bottom: -3rem;
}

.card-illust-print {
    bottom: -3rem;
}

.problems-text {
	font-size: 2.7rem;
	margin-top: 7rem;
}

.problems-text-big {
	font-size: 4rem;
    padding-right: 0.8em;
}

/* キラキラ装飾の設定 */
.problems-text-big::after {
	width: 56px;  
    height: 56px; 
    top: -15px;
    right: 0px; 
}

/*/// 折込の秘訣 ///*/
.secret-text-big {
	font-size: 3.6rem;
    /* 装飾が入るスペースを右側に確保 */
    padding-right: 0.5em;
}

/* キラキラ装飾の設定 */
.secret-text-big::after {
	width: 40px;  
    height: 40px; 
    top: -10px;
    right: 0px; 
}

.secret .graph,
.secret dl {
	width: 100%;
	margin: 1rem auto;
}

.secret dl dt {
	font-size: 3.90625vw;
}

.secret dl dd {
	font-size: 2.08333333vw;
}

.secret dl dd.notes {
	font-size: 1.5625vw;
}

.secret-pointBox {
	flex-direction: column;
	justify-content: center;
}

.secret-pointBox-list {
	width: 90%;
	/*padding: 3rem 1.5rem;*/
	margin: 0 auto 5.5rem;
}

/*.secret-pointBox-list img.icon {
	max-width: 110px;
	top: -10%;
	left: -5%;
}*/

.secret-pointBox-list p {
	font-size: 2.08333333vw;
}

.secret-pointBox-list p.listTitle {
	font-size: 4.55729167vw;
}


/*/// デザインの秘訣 ///*/
.secret-designBox {
	flex-direction: column;
	align-items: center;
}


.proposal {
	padding-bottom: 8rem;
}
.proposal::after {
	height: 60px;
	clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}

.proposal section {
	flex-direction: column;
}

.proposal-nursing h3,
.proposal-ceremonies h3,
.proposal-purchase h3{
	width: 50%;
	margin: 0 auto 3rem;
}

.proposal-nursing .illust,
.proposal-ceremonies .illust,
.proposal-purchase .illust {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin: auto;
	width: 50%;
}

.proposal section .proposal-Boxleft {
	width: 100%;
	max-width: 768px;
	background-image: none;
	margin-bottom: 2rem;
}

.proposal section .proposal-Boxright {
	width: 100%;
	max-width: 768px;
}

.price .price-planBox {
	flex-direction: column;
	align-items: center;
	gap: 6rem;
}
.price .price-planBox > div {
	width: 100%;
	max-width: 360px;
	padding: 4rem 2rem;
}
.price .price-planBox > div:not(:last-child)::after {
	right: auto;
	left: 50%;
	bottom: -5rem;
	top: auto;
	transform: translateX(-50%);
}

.proposal .exampleZoom p.expansion {
	width: 180px;
	right: 0;
	bottom: -2%;
}

.proposal .exampleZoom p.expansion02 {
	width: 275px;
	right: 0;
	bottom: -5%;
}
	


/*ご実施までの流れ*/
.flow {
	padding: 5rem 0;
}
	
.flow .flow-stepBox {
    flex-direction: column;
	justify-content: center;
}	

.flow .flow-stepBox::before {
        display: none;
    }

.flow .flow-stepBox div.flow-stepBox-steps {
	margin: 4.5rem auto 6.5rem;
}

.flow .flow-stepBox div.flow-stepBox-steps:nth-child(1) {
	margin-top: 0;
}

.flow .flow-stepBox div.flow-stepBox-steps:nth-child(3) {
	margin-top: 6.5rem;
}

.menu {
	padding: 13rem 0;
    background-color: #ffe3dc;
    position: relative;
}

/* モーダルウィンドウ */
.modal-content {
        width: 95%;
        padding: 100px 0;
    }
}

@media all and (max-width: 576px) {
.secret-pointBox-list img.icon {
	max-width: 23.39688042vw;
}

h2.price-title::after {
	width: 250px;
	height: 94px;
    top: 12px;
    right: 16%; 
}


h2.flow-tittle::after {
	width: 250px;
	height: 94px;
    top: -2.6%;
    right: 14%; 
}

h2.menu-tittle::after {
	width: 250px;
	height: 94px;
    top: 4%;
    right: 10%;
}

}

/*////　 sp 　////*/
@media all and (max-width: 430px) {
.contact {
	width: 100px;
}

.pc_tab {
	display: none;
}

.sp_only {
	display: block;
}

h2 {
	font-size: calc(100vw * 26 / 430);
	margin-bottom: 3.5rem;
}

h2.problems-h2 {
	font-size: 3rem;
}

h2.secret-h2 {
	font-size: 3rem;
	margin-bottom: 5rem;
}

h2.secret-h2 .text-small {
	font-size: 2.4rem;
}

h2.price-title::after {
	width: 180px;
	height: 68px;
    top: -0.5%;
    right: 16%; 
}

h2.flow-tittle::after {
	width: 180px;
	height: 68px;
    top: -0.5%;
    right: 10%; 
}

h2.menu-tittle::after {
	width: 180px;
	height: 68px;
    top: -0.2%;;
    right: 10%;
}

h2.flow-tittle {
	margin-bottom: 3.5rem;
}

h3 {
	font-size: 2.4rem;
}

.decorated {
	gap: 10px;
}

.decorated02 {
	gap: 0;
}

.decorated-text,
.decorated-text02 {
	font-size: calc(100vw * 15 / 430);
}

.decorated-text span.strong,
.decorated-text02 span.strong {
    font-size: 130%;
	margin: 0 -0.5em;
}

.bottom-notes02 {
	margin: 3rem auto;
}

/* 1. 共通のサイズを少し下げる（勝手な折り返しを防ぐため） */
.decorated-text.is-2line,
.decorated-text02.is-2line {
	font-size: 1.4rem !important; /* calcではなく一旦固定値で安定させます */
	line-height: 1.6;
}

/* 2. 特に文字数が多い proposal 側のサイズをさらに調整 */
.proposal .is-2line {
	font-size: 1.3rem !important; 
}

/* 3. 赤い文字が大きすぎて1行を占領しないように調整 */
.is-2line span.strong02 {
	font-size: 130% !important; /* 130%から少し下げて横幅を確保 */
}
	
.is-2line::before,
.is-2line::after {
	/* サイズ固定 */
	width: 60px; 
	height: 74px;
	flex-shrink: 0;
}	

.cta-buttons02 div {
	margin: -1.5rem 1.5rem 0 1.5rem;
}


#lpContent section.mv p img {
	width: 66.97674419%;
	margin-left: 7.6744186%;
}

#lpContent .lineImg {
	width: 42.09302326%;
	top: 0;
	left: inherit;
	right: 0;
}

#lpContent .lineImg02 {
	position: absolute;
	width: 51.39534884%;
	top: 47%;
	left: 0;
}

/*// できること //*/
.features ul {
}

.features ul li {
	width: 100%;
	font-size: 1.4rem;
	margin: 1rem auto 0;
	padding: 12px 6px;
	border: solid 3px #f75f4f;
	border-radius: 18px 18px 0px 18px;
}

/*/// こんなお悩みを抱えていませんか ///*/
/* イラストの配置 */
.card-illust-disign {
    width: 142px !important; /* カード幅に対してのサイズ */
}

.card-illust-plan {
    width: 164px !important; /* カード幅に対してのサイズ */
}

.card-illust-print {
    width: 176px !important; /* カード幅に対してのサイズ */
}

.problems-text {
	font-size: 1.8rem;
	margin-top: 4rem;
}

.problems-text-big {
	font-size: 3.5rem;
    padding-right: 0.8em;
}

/* キラキラ装飾の設定 */
.problems-text-big::after {
	width: 36px;  
    height: 36px; 
    top: -12px;
    right: 0px; 
}

/*/// 折込の秘訣 ///*/
.secret-text-big {
	font-size: 3.6rem;
    /* 装飾が入るスペースを右側に確保 */
    padding-right: 0.5em;
}

/* キラキラ装飾の設定 */
.secret-text-big::after {
	width: 28px;  
    height: 28px; 
    top: -10px;
    right: 0px; 
}

.secret dl dt {
	font-size: 6.97674419vw;
}

.secret dl dd {
	font-size: 3.72093023vw;
}

.secret dl dd.notes {
	font-size: 2.79069767vw;
}

/*/// //////////// ///*/
/*/// デザインの秘訣 ///*/
.secret-design,
.secret-plan,
.secret-print {
	margin-bottom: 1.5rem;
}

.secret-designBox {
	margin: 3rem 0 4.5rem;
}

.secret-pointBox-list {
	width: 100%;
	padding: 3rem 1.5rem;
	margin-bottom: 6rem;
	border: solid 3px #f75f4f;
}

.secret-pointBox-list img.icon {
	max-width: 22vw;
	top: -10%;
	left: -5%;
}

.secret-pointBox-list p {
	font-size: 3.72093023vw;
}

.secret-pointBox-list p.listTitle {
	font-size: 7vw;
}

.proposal-nursing h3,
.proposal-ceremonies h3,
.proposal-purchase h3{
	width: 70%;
}

.proposal p:first-child {
	font-size: 2rem;
	display: block; 
	text-align: left;
}
.proposal p:first-child .category,
.proposal-purchase p.distribution .category {
	font-size: 1.4rem;
	margin-bottom: 0.5em;
	display: block;
}

.proposal-purchase .proposal-Boxright ul.distribution-list {
	flex-direction: column;
}


.proposal .example {
	font-size: 1.8rem;
}

.proposal-purchase .proposal-Boxright ul li {
	font-size: 1.5rem;
}

.proposal-ceremonies .ceremoniesList {
	font-size: 1.5rem;
}

.proposal .exampleZoom p.expansion {
	width: 150px;
	right: 0;
	left: 0;
	bottom: -10%;
	margin: auto;
}

.proposal .exampleZoom p.expansion02 {
	width: 245px;
	right: 0;
	left: 0;
	bottom: -22%;
	margin: auto;
}

/*料金プラン*/
.price {
    padding: 4.5rem 0;
}

.flow .flow-stepBox div.flow-stepBox-steps:nth-child(1) {
	margin-top: 4.5rem;
}

.menu {
	padding: 6rem 0;
}

.menu ul li {
	width: 31.39534884%;
	margin-bottom: 1.2rem;
}

}