@charset "utf-8";
/* CSS Document */
/* ************************************************************************ 
 *	
 *	追加したいCSS
 *
 *	見出しh2指定は
 *	　.contents_css h2:not(.single_txt h2):not(.site_list h2)
 *
 *	見出しh3指定は
 *	.single_txt h1, .single_txt h2, .contents_css h3
 *	
 * ************************************************************************ */
@media print, screen and ( min-width : 896px ) {
	body {
		font-size:17px;
	}
}
@media only screen and ( max-width : 896px ) {
	body {
		font-size:15px;
	}
}
/* header -------------------------------------------------- */
@media print, screen and ( min-width : 1200px ) {
	#nav_block ul.menu > li{
		min-width:1em;
	}
	#nav_block ul > li > a{
		font-size:95%;
	}
	#global-nav .nav-parent-title{
		font-size:160%;
	}
	#header.layout_1 #nav_block ul.menu > li > a,
	#header.layout_3 #nav_block ul.menu > li > a {
		padding:15px 15px;
	}
	#nav_block .sub-menu{
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}
@media ( max-width : 1350px ) and ( min-width : 1200px ) {
	#nav_block ul > li > a{
		font-size:1.1vw;
	}
}


/* footer -------------------------------------------------- */
@media print, screen and ( min-width : 896px ) {
	.contents_list01 .list_text h2{
		font-size:100%;
		height:4em;
	}
	.contents_list01 .list_text h2 .eng{
		margin-top:0.5em;
	}
}
body.cover_color_cover2 .page_contact_bg:after{
	background-color: rgba(255,255,255,0);
}
@media print, screen and ( min-width : 896px ) {
	.no-map .f_sitemap .menu > li{
		width:33%;
	}
}

@media print, screen and ( min-width : 1300px ) {
	#footer{
		font-size:85%;
	}
}
@media ( max-width : 1300px ) and ( min-width : 896px ) {
	#footer{
		font-size:1.1vw;
	}
}



/* -------------------------------------------------- */
.list_blog .entry_info{
	line-height:180%;
}
.list_blog .entry_cat{
	padding:0 0.4em;
	border-radius: 2px;
}
/* -------------------------------------------------- */
.contents_css section h2 .sub{
	font-size:50%;
	color:currentColor;
	padding-top:0.8em;
	font-weight:500;
	letter-spacing:0.1em;
}
/* -------------------------------------------------------------- */
/* = TOP
/* -------------------------------------------------------------- */
/* -------------------------------------------------------------- */
/* = メインビジュアル
/* -------------------------------------------------------------- */
.top_mainimg {
	position: relative;
	z-index: 1;
	/* 1. 全体の背景色（元の :before の役割） */
	background: var(--contents_list-color);
	box-shadow: 0 0 0 100vmax var(--contents_list-color);
	clip-path: inset(0 -100vmax);
}

.top_mainimg:after {
	content: "";
	position: absolute;
	bottom: 0;
	/* 2. 斜めレイヤーも画面いっぱいに広げる */
	left: 50%;
	transform: translateX(-50%);
	width: 100vw; 
	height: 50%;
	background: rgba(255, 255, 255, 0.3);
	z-index: -1;
	clip-path: polygon(0 44%, 100% 0, 100% 100%, 0% 100%);
}
/* -------------------------------------------------------------- */
/* = メインビジュアル 文字
/* -------------------------------------------------------------- */
.top_mainimg h2,
.top_mainimg h3{
	letter-spacing:0em;
}
.top_mainimg h2,
.top_mainimg h3,
.top_mainimg li span{
	font-weight:900;
}
.top_mainimg h2{
	font-size:285%;
	line-height:150%;
	margin-bottom:0.5em;
	color:var(--primary-color);
	white-space:nowrap;
}
.top_mainimg h3{
	margin-bottom:2.5em;
	font-size:125%;
}
@media ( max-width : 1100px ) and ( min-width : 768px ) {
 	.top_mainimg .inner_block{
		font-size:1.44vw;
	}
}
@media only screen and ( max-width : 768px ) {
	.top_mainimg{
		font-size:3vw;
	}
	.top_mainimg h2,
	.top_mainimg h3{
		text-align:center;
	}
	.top_mainimg h2{
		font-size:200%;
	}
	.top_mainimg h3{
		font-size:135%;
		margin-bottom:1em;
	}
}

/* -------------------------------------------------------------- */
/* = ポイントリスト
/* -------------------------------------------------------------- */
.top_mainimg_point_list {
	display: flex;
}
/* 共通の装飾 */
.top_mainimg_point_list li {
	background: var(--primary-color);
	border-radius: 2px;
	color: #fff;
	padding: 1em 0.5em; /* 左右に少し余裕を */
	text-align: center;
	box-sizing: border-box;

}
.top_mainimg_point_list li span{
	display:block;
	font-size:140%;
	letter-spacing:0.01em;
}
/* --- スマホ版（デフォルト） --- */
@media (max-width: 768px) {
	.top_mainimg_point_list {
		flex-wrap: wrap;	   /* 2行になるように折り返しを許可 */
		justify-content: center; /* 中央寄せ */
		gap: 10px;
		margin-bottom:1em;
	}
	.top_mainimg_point_list li {
		width: calc(50% - 10px); /* 2列にするための計算（隙間分を引く） */
		flex-grow: 0;
	}
}

/* --- PC版 --- */
@media print, screen and (min-width: 768px) {
	.top_mainimg_point_list {
		width: 71%; /* 全体の7割に制限 */
		justify-content: space-between; /* 子要素を均等に配置 */
		gap: 2%;
		flex-wrap: nowrap; /* 横一列をキープ */
		font-size:90%;
	}
	.top_mainimg_point_list li {
		flex: 1; /* これが重要！70%の中で均等に広がります */
		width: auto; /* width指定を打ち消す */
	}
}


/* -------------------------------------------------------------- */
/* = まずは無料相談
/* -------------------------------------------------------------- */
.mail_big_button {
	position: relative;
	margin: 0;
	font-weight: 900;
	font-size: 170%;
	line-height: 1;
	max-width: 500px;
	padding: 0.8em 1.5em;
	z-index: 2;
	border: none; /* ボタンタグの場合の枠線消し */
	cursor: pointer;
	
	/* 初期状態の影 */
	box-shadow: 5px 5px 0px 0px rgba(246, 230, 31, 0.6);
	background: linear-gradient(0deg, rgba(246, 114, 31, 1) 0%, rgba(250, 137, 67, 1) 100%);
	
	/* transitionにbox-shadowとtransformを追加 */
	transition: opacity 0.5s, box-shadow 0.2s, transform 0.1s;
}

/* ホバー時（マウスが乗ったとき） */
.mail_big_button:hover {
	box-shadow: 2px 2px 0px 0px rgba(246, 230, 31, 0.6);
	transform: translate(2px, 2px); /* 少しだけ沈ませる */
}

/* アクティブ時（クリックした瞬間！） */
.mail_big_button:active {
	box-shadow: 0px 0px 0px 0px rgba(246, 230, 31, 0.6); /* 影をゼロにする */
	transform: translate(5px, 5px); /* 影の分だけ完全に押し込む */
	transition: 0.05s; /* 押した瞬間は素早く反応させる */
}
/* -------------------------------------------------------------- */
/* = メインビジュアルレイアウト
/* -------------------------------------------------------------- */
@media print, screen and ( min-width : 768px ) {
 	.top_mainimg .inner_block .img{
		width:33%;
		position: absolute;
		top: 1em;
		right: 0%;
	}
	.top_mainimg .inner_block .mail_big_button{
		position: absolute;
		bottom: -0.5em;
		right: -3%;
	}
	.top_mainimg_point_list{
		padding-right:8%;
	}
	.top_mainimg_br{
		display:none;
	}
}
@media only screen and ( max-width : 768px ) {

	.top_mainimg .inner_block .img{
 		margin-bottom:1em;
 		padding:0 20%;
	}

	.top_mainimg .inner_block .mail_big_button{
		margin:0;
		font-weight:900;
		font-size:200%;
		max-width:100%;
		width:100%;
	}
}

/* -------------------------------------------------------------- */
/* = お知らせ
/* -------------------------------------------------------------- */
.top_news .more .button{
	border-radius: 2px;
	font-size:90%;
}
@media print, screen and ( min-width : 768px ) {
	.top_news .more .button{
		margin:0 0.2em;
	}
}
/* -------------------------------------------------------------- */
/* = ホームページのお悩みはありませんか？
/* -------------------------------------------------------------- */
.contents_css h2.bold_h2{
	font-weight:900;
	color:var(--primary-color) !important;
	letter-spacing:0.05em;
	font-size:210%;
	margin-bottom:0.8em !important;
	padding-bottom:0 !important;
}
.contents_css h2.bold_h2:before{
	display:none;
}
@media print, screen and ( min-width : 768px ) {
	.contents_css h2.bold_h2 br{
		display:none;
	}
}
@media only screen and ( max-width : 768px ) {
	.contents_css h2.bold_h2{
		font-size:160%;
	}
}
.contents_css .soudan h2.bold_h2{
	letter-spacing:0.03em;
}
/* -------------------------------------------------------------- */
/* = リスト
/* -------------------------------------------------------------- */
@media ( max-width :1100px ) and ( min-width :768px ) {
	.top_onayami{
		font-size:1.4vw;
	}
}
.onayami_list li{
	text-align:center;
}
.onayami_list span{
	border-radius: 1em;
	border:1px solid #ccc;
	display:block;
	padding:0.8em;
	font-size:90%;
	line-height:140%;
	z-index:1;
	background:#fff;
}
.onayami_list span:before,
.onayami_list span:after{
	position: absolute;
	bottom: -10px;
	right: 18px;
	content: "";
	border-radius: 50%;
	border:1px solid #ccc;
	background:#fff;
	display:block;
	width:20px;
	height:20px;
	z-index:2;
}
.onayami_list span:after{
	position: absolute;
	bottom: -30px;
	right: 30px;
	width:15px;
	height:15px;
}
.onayami_list img{
	margin-top:-0.5em;
}
.onayami_list{
	display: flex;
	text-align: center;
	gap:50px;
	justify-content: center;
	margin-bottom:4em;
}
@media print, screen and ( min-width : 768px ) {
	.onayami_list{
		flex-wrap: nowrap;
	}
	.onayami_list li{
		width:250px;
	}
}
@media only screen and ( max-width : 768px ) {
	.onayami_list{
		font-size:90%;
		flex-wrap: wrap;
		gap:2%;
	}
	.onayami_list li{
		width:48%;
	}
	.onayami_list li:last-child{
		margin-top:1em;
		width:60%;
	}
}
/* -------------------------------------------------------------- */
/* = まずはお気軽にご連絡ください！
/* -------------------------------------------------------------- */
.soudan{
	padding:4em 0;
}
.contents_css.page_css .soudan p.big{
	margin-bottom:0.7em;
	line-height:var(--base_line_height2);
	font-size:130%;
}
.soudan:before{
	content: "";
	display: inline-block;
	position: absolute;
	top: 0em;
	bottom:0em;
	margin-left: calc(-50vw + 50%);
	width: 100vw;
	height: 100%;
	background:var(--contents_list-color);
	z-index:-2;
}
.soudan:after{
	content: "";
	position: absolute;
	top: -25px;
	left: 50%;
	display:block;
	z-index:2;
	width:100px;
	height:60px;
	margin-left:-50px;
	background:linear-gradient(0deg,rgba(246, 114, 31, 1) 0%, rgba(250, 137, 67, 1) 100%);
	clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.soudan_text .mail_big_button{
	margin:0 auto;
}
@media print, screen and ( min-width :768px ) {
	.contents_css.page_css .soudan h2.bold_h2 {
		text-align:left;
	}
	.soudan{
		padding-bottom:0;
	}
	.soudan_img{
		position: absolute;
		top: 0em;
		left: -3%;
		bottom:0;
		overflow:hidden;
		width:43%;
	}
	.soudan_text{
		padding-left:43%;
		padding-bottom:4em;
	}
	.contents_css.page_css .soudan_h2 {
		text-align:left !important;
	}
	.soudan_text .mail_big_button{

	}
}
@media only screen and ( max-width : 768px ) {


	.soudan:after{
		transform: scale(0.8);
	}
	.contents_css.page_css .soudan p.big{
		font-size:110%;
	}
	.soudan_text p.big br{
		display:none;
	}
	.soudan_img img{
		max-width:300px;
	}
	.soudan_text .mail_big_button{
		font-size:150%;
	}
}

/* ------------------------------------------- */
/* = 制作実績の背景なし
/* ------------------------------------------- */
.top_contents_block section:nth-of-type(2n):before{
	background: none;

}
/* ------------------------------------------- */
/* = アイレッツが選ばれるわけ
/* ------------------------------------------- */
section.reason:before{
	content: "";
	display: inline-block;
	position: absolute;
	top: 0em;
	bottom:0em;
	margin-left: calc(-50vw + 50%);
	width: 100vw;
	height: 100%;
	background:var(--contents_list-color);
	z-index:-1;
}
section.reason .colum_3_c li{
	background:#fff;
}
@media print, screen and ( min-width : 896px ) {
	.reason_list h3{
		font-size:120%;
	}
}
@media ( max-width : 1000px ) and ( min-width : 550px ) {
	.colum_3_c.reason_list{
		grid-template-columns: repeat(2, 1fr); 
	}
}
.reason_list h3::before{
	background:#fff;
}
.reason_list p{
	line-height:160%;
}

/* ------------------------------------------- */
/* = タイトル
/* ------------------------------------------- */
.contents_css h2.h2_point{
	font-size:150%;
	color:#333;
	z-index:2;
}
.contents_css.page_css h2.h2_point span{
	font-size:180%;
	color:var(--primary-color);
}
@media only screen and ( max-width : 896px ) {
	h2.h2_point{
		font-size:100%;
	}
}
.contents_css h3.marutitle{
	background:var(--primary-color);
	color:#fff !important;
	padding:0.7em !important;
	border-radius: 5px !important;
	font-size:110%;
}
@media only screen and ( max-width : 896px ) {
	.page_css h3.marutitle{
		font-size:110%;
	}
	#form h3.marutitle{
		margin-bottom:1em !important;
	}
}
.contents_css h3.marutitle:after,
.contents_css h3.marutitle:before{
	display:none !important;
}
.page-anshinpack h3.marutitle{
	background:var(--anshinlite);
}
.page-anshinpack h2:before{
	background:var(--anshinlite);
}
/* -------------------------------------------------- */
.sample_image li a{
	background:#333;
	overflow:hidden;
}
.sample_image .img_caption{
	background:#333;
	color:#fff;
	line-height:150%;
	font-size:90%;
	font-weight:normal;
	padding:1em;
	min-height:5em;
}
@media only screen and ( max-width : 600px ) {
	ul.sample_image{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 10px;
	}
}
/* -------------------------------------------------- */

/* ------------------------------------------- */
/* = 基本テーブル
/* ------------------------------------------- */
.contents_css table td,
.contents_css table th{
	font-size:90%;
	padding:1em;
}
.contents_css table.table{
	background:none;
	border:none;
}
.contents_css table.table td,
.contents_css table.table th{
	border-top:0;
	border-left:none;
	border-right:none;
	border-bottom:1px solid #ccc;
}
.contents_css table.table td{
	border-left:1px solid #fcfcfc;
}
.contents_css table.table tr:nth-child(odd) td{
	background-color:#fcfcfc;

}
.contents_css table.table th{
	background-color:#666;
	color:#fff;
}
.contents_css table.table td{
	background-color:#fff;
}
.contents_css table.table tr:first-child  th:nth-of-type(2){
	border-top-left-radius: 8px;
}
.contents_css table.table tr:first-child th:last-of-type{
	border-top-right-radius: 8px;
}
.contents_css table.table tr:nth-of-type(2)  th:first-child{
	border-top-left-radius: 8px;
}
.contents_css table.table tr:last-child  th:first-child{
	border-bottom-left-radius: 8px;
}
.contents_css table.table tr:last-child  td:first-child{
	border-bottom-right-radius: 8px;
}

.contents_css table.table tr:first-child  th:first-child{
	background:none;
}
.contents_css table.table tr:first-child  td,
.contents_css table.table tr:first-child  th,
.contents_css table.table tr:last-child  td,
.contents_css table.table tr:last-child  th{
	border:none;
}

table.table th.anshinlite,
table.table th.anshin{
	text-align:center;
	font-size:90%;
	line-height:130%;
	padding:1em 0;
}
table.table th.anshinlite span,
table.table th.anshin span{
	font-size:120%;
	color: #aaa;
	border-radius: 2em;
	display:inline-block;
	line-height:1;
	padding:0.5em 2em;
	text-align:center;
	background-color:#fff;
	color:var(--anshinlite);
	margin-top:0.6em;
}
table.table th.anshin span{
	color:var(--anshin);
}
@media only screen and ( max-width : 1000px ) {
	table.table th.anshinlite,
	table.table th.anshin{
		font-size:50%;
		padding:2em 0;
	}
}
table.table th.anshinlite{
	background-color:var(--anshinlite);
}
table.table th.anshin{
	background-color:var(--anshin);
}
table.table td:has(.price){
	font-size:120%;
	line-height:150%;
}
table.plan td:has(.price){
	font-size:100%;
	line-height:150%;
}
/* -------------------------------------------------- */
:root {
	--anshinlite: #00b18d;
	--anshin: #fd8362;
	--tujyou: #215f9a;
	--shopping: #cfaf00;
}

/* ------------------------------------------- */
/* = ホームページ制作比較表
/* ------------------------------------------- */
table.plan th,
table.plan td{
	text-align:center !important;
	vertical-align:middle;
	border:none;
	padding:1.5em 0.8em;
	font-weight:500;
	font-size:90%;
	line-height:140%;
}
table .link_block,
table .link_block:hover{
	color:#fff;
}
table.plan tr th:nth-of-type(2),
table.plan tr th:nth-of-type(3),
table.plan tr th:nth-of-type(4),
table.plan tr th:nth-of-type(5){
	color:#fff;
	padding:0;
}
table.plan tr th:nth-of-type(2) a,
table.plan tr th:nth-of-type(3) a,
table.plan tr th:nth-of-type(4) a,
table.plan tr th:nth-of-type(5) a{
	padding:1.5em 0;
}
table.plan tr th:nth-of-type(2){
	background-color:var(--anshinlite);
}
table.plan tr th:nth-of-type(3){
	background-color:var(--anshin);
}
table.plan tr th:nth-of-type(4){
	background-color:var(--tujyou);
}
table.plan tr th:nth-of-type(5){
	background-color:var(--shopping);
}
table.plan tr td:nth-of-type(1),
table.plan tr td:nth-of-type(2),
table.plan tr td:nth-of-type(3),
table.plan tr td:nth-of-type(4){
	background-color:#fff;
}
table.plan tr td:nth-of-type(1){
	color:var(--anshinlite);
}
table.plan tr td:nth-of-type(2){
	color:var(--anshin);
}
table.plan tr td:nth-of-type(3){
	color:var(--tujyou);
}
table.plan tr td:nth-of-type(4){
	color:var(--shopping);
}
.fixed01{
	position: sticky;
	left: 0;
	color: #fff;
	background: #333;
	z-index:2;
}
/* ------------------------------------------- */
/* = プラン
/* ------------------------------------------- */
.page-hajimete section.plan:after{
	content: "";
	display: inline-block;
	position: absolute;
	top: 0em;
	bottom:0em;
	margin-left: calc(-50vw + 50%);
	width: 100vw;
	height: 100%;
	background:#f6f8f9;
	z-index:-1;
}

.plan_list.colum_3_c{
	margin-top:-40px;
}
.plan_list.colum_3_c > li{
	overflow:hidden;
	background: none;
	padding:40px 0px 0px 0px;
}
@media only screen and ( max-width : 896px ) {
	.plan_list.colum_3_c{
		gap:0;
	}
}
.plan_list_inner{
	padding: 10px 30px 80px 30px;
	height: 100%;
}
.plan_list a{
	display: block;
	color: currentColor;
	height: 100%;
	border: 1px solid #aaa;
	border-radius: 8px;
	transition: transform 0.4s, box-shadow 0.4s;
	transform: translateY(0px);
	box-shadow: 0 0 0 rgba(0,0,0,0);
	text-decoration: none; /* リンクの下線を消す */
	background: #fff;
}
@media print, screen and ( min-width : 896px ) {
	.plan_list.colum_3_c{
		gap:20px;
	}
}
.plan_list li.plan_anshin a{
	border:1px solid var(--point-color);
}
@media print, screen and ( min-width : 896px ) {
	.plan_list li a:hover{
		transform: translateY(-15px);
		box-shadow: 5px 10px 20px -5px rgba(0,0,0,0.2);
		opacity: 1;
	}
}

/* おすすめですヨ！------------------------------ */
.plan_list li.plan_anshin a:before {
	content: "＼ おすすめですヨ！ ／";
	display: inline-block;
	position: absolute;
	top: -2.5em; /* 少しゆとりを持たせる */
	left: 50%;
	transform: translateX(-50%); /* 中央揃えの鉄板指定 */
	white-space: nowrap;
	color: var(--point-color);
	padding: 5px 20px;
	font-size: 0.8em;
	font-weight: bold;
}
/* 金額------------------------------- */
.contents_css .plan_list li p.price,
.contents_css .plan_list li p.price2{
	display: flex;
	justify-content: center;
	align-items: center;
	letter-spacing:0.2em;
	gap:10px;
	padding:1em;
	margin-bottom:0;
}
.contents_css .plan_list li p.price,
.contents_css .plan_list li p.price2{
	font-size:110%;
}
.plan_list li .price .eng{
	color:var(--point-color);
	font-size:180%;
}
/* タイトル ------------------------------- */
.plan_list li h3{
	border:none;
	background:var(--contents_list-color);
	padding: 1.5em 0;
	margin-bottom:0;
	font-size: 130%;
	text-align: center;
	line-height: var(--small_line_height);
	border-radius: 8px 8px 0px 0px;
}
.plan_list li h3:before,
.plan_list li h3:after{
	display:none;
}
.plan_list li h3 span.sub{
	display:block;
	font-size:60%;
	line-height:var(--small_line_height);
	padding-bottom:0.8em;
}
.plan_list li.plan_tujyou h3 span.sub,
.plan_list li.plan_anshinlite h3 span.sub{
	color:#333;
}
.plan_list li.plan_tujyou h3{
	color:var(--tujyou);
}
.plan_list li.plan_anshinlite h3{
	color:var(--anshinlite);
}
.plan_list li.plan_anshin h3{
	background:var(--point-color);
	color:#fff;
}
.plan_list li.plan_anshinlite h3 span.eng{
	color: #fff;
	border-radius: 2em;
	display:inline-block;
	line-height:1;
	font-size:65%;
	margin-top:0.5em;
	padding:0.3em 2em;
	text-align:center;
	background:var(--anshinlite);
	letter-spacing:0.2em;
}
.plan_list li.plan_anshin h3 span.eng{
	color: #fff;
	border-radius: 2em;
	display:inline-block;
	line-height:1;
	font-size:65%;
	margin-top:0.5em;
	padding:0.3em 2em;
	text-align:center;

	letter-spacing:0.1em;
	color: var(--point-color);
	background:#fff;
}
.page-anshinpack .plan_list li.plan_anshin h3 span.eng{
	background:var(--anshin);
	color: #fff;
}

/* 安心スタートパック------------------------------- */
.page-anshinpack .plan_list{
	gap:10px;
}
.page-anshinpack .plan_list li.plan_anshin h3{
	color:var(--anshin);
}
.page-anshinpack .plan_list li h3{
	background: none;
	margin:0;
	padding:0 0 0.5em 0;
}
/* リスト ------------------------------- */
.plan_list li .check_list{;
	color:#444;
}
.plan_list li .check_list li{
	font-size:80%;
	padding-bottom:0.5em;
	letter-spacing:0.05em;
}

/* ボタン ------------------------------- */
.plan_list .button{
	display:block;
	font-size:90%;
	position: absolute;
	left: 20px;
	bottom:20px;
	right:20px;
	padding-top:0.8em;
	padding-bottom:0.8em;
}


.plan_list li.plan_anshin .button {
	background: var(--point-color);
}
.plan_list li.plan_anshin .button::before{
	background: var(--point-hover-color);
}

/* ------------------------------------------- */
/* = よくあるご質問
/* ------------------------------------------- */
.faq dt{
	background:#f5f5f5;
	padding:0.8em;
	margin-bottom:0.8em;
	border-radius: 2em;
	font-weight:var(--font-bold);
	font-size:110%;
	font-weight:var(--font-bold);
}

.faq dd{
	font-size:95%;
	line-height:200%;
	margin-bottom:3em;

}
.faq dt,
.faq dd{
	padding-left:70px;
}
.faq dt:before,
.faq dd:before{
	content: "Q";
	display:inline-block;
	background:#fff;
	border-radius:50%;
	font-size:20px;
	font-weight:700;
	width:2em;
	line-height:2em;
	text-align:center;
	position: absolute;
	top: 0.6em;
	left: 0.7em;
	color:#fff;
	background:var(--primary-color);
	font-family: "Outfit", sans-serif;
}
.faq dd:before{
	content: "A";
	background:var(--point-color);
	color:#fff;
	position: absolute;
	top: 0em;
}
/* ------------------------------------------- */
/* = お客様の声
/* ------------------------------------------- */
.voice_title{
	padding:2em;
	margin-bottom:5em;
	background:var(--contents_list-color);
	box-shadow: 0 0 0 100vmax var(--contents_list-color);
	clip-path: inset(0 -100vmax);
}
.voice_title{
	padding:2em 0;
	margin-bottom:5em;
}
.contents_css .voice_title p{
	font-size:90%;
	margin-bottom:0em;
}
@media print, screen and ( min-width : 896px ) {
	.voice_title {
		display: flex;
		justify-content: space-between; /* 両端に寄せる */
		align-items: center;
		gap: 60px; /* ％よりpx固定の方が安定します */
	}
	.voice_title .text {
		order: 1;
		flex: 1; /* 残りの幅を全部使う */
		text-align: left;
	}
	.voice_title .img {
		order: 2;
		width: 45%; 
		flex-shrink: 0;
		/* 少しだけ影をつけると「浮き出て」かっこいい */
		box-shadow: 10px 10px 0 var(--contents_list-color-dark, rgba(0,0,0,0.05));
	}
}

.contents_css .voice_title .text h2 {
	font-size: 1.8em;
	color: #333;
	position: relative;
	padding-top: 0.5em;
	padding-bottom: 0.9em;
	margin-bottom: 0.9em;
	text-align:left;
}


/* 見出しの下に短い線を入れる */
.contents_css .voice_title .text h2::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50px;
	height: 3px;
	background: var(--contents_list-color-accent, #333);
}

@media (max-width: 895px) {
	.voice_title {
		display: flex;
		flex-direction: column; /* 縦並び */
		text-align: center;
	}
	.contents_css .voice_title .text h2 {
		font-size: 1.6em;
	}
	.voice_title .img {
		width: 100%;
		margin-bottom: 2em;
	}
	.voice_title .img img {
		width: 100%;
		height: auto;
		/* スマホでは角を丸めると優しい印象に */
		border-radius: 10px;
	}
	.voice_title .text {
		padding: 0 5% 3em; /* 左右に少し余白 */
	}
	.voice_title .text h2::after {
		left: 45%;
		transform: translateX(-50%); /* 線を中央に */
	}
}


.page_voice dt{
	font-size:120%;
	font-weight:700;
	color:var(--primary-color);
	padding-left:3.5em;
	margin-bottom:1.5em;

}
.page_voice dt::before{
	content: "";
	display:inline-block;
	background:var(--primary-color);
	width:2em;
	height:1px;
	text-align:center;
	position: absolute;
	top: 50%;
	left: 0.5em;
}
@media only screen and ( max-width : 896px ) {
	.page_voice dt{
		font-size:110%;
	}
}
.page_voice dd{
	margin-bottom:5em;
	font-size:95%;
}
@media print, screen and ( min-width : 896px ) {
	.page_voice dd{
		padding:0 1em;
	}
}
p.main_text{

	line-height:200%;
}
.fukidashi{
	display:flex;
}
.fukidashi .img{
	flex-basis:100px;
	flex-grow:1;
	flex-shrink: 0;
}
.fukidashi p{
	flex-grow:0;
	flex-basis:calc(100% - 120px);
	margin-left:20px;
	background:#f5f5f5;
	padding:1.5em;
	border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	font-size:90%;
	line-height:180%;
	margin-bottom:0;
	color:#444;
}
.fukidashi p:after{
	content: "▼";
	display: inline-block;
	position: absolute;
	top: 16px;
	left: -16px;
	color:#f5f5f5;
	transform:rotate(90deg);
	font-size:20px;
}
@media only screen and ( max-width : 896px ) {
	.fukidashi .img{
		flex-basis:80px;
	}
	.fukidashi p{
		flex-basis:calc(100% - 100px);
	}
}
.fukidashi .img img{
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	overflow:hidden;
}
.fukidashi_name{
	display:block;
	margin-top:1em;
	font-size:70%;
	line-height:140%;
	text-align:center;
	color:var(--primary-color);
	font-weight:bold;
}
.page_voice dd .img_right{
	box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1);
}
@media print, screen and ( min-width : 896px ) {
	.page_voice dd .img_right{
		width:30%;
		margin-left:0%;
		margin-bottom:0em;
		float:right;
	}
	.page_voice dd .img_right_text{
		width:65%;
		float:left;
	}
}
@media only screen and ( max-width : 896px ) {
	.page_voice dd .img_right_text{
		margin-bottom:2em;
	}
	.page_voice dd .img_right{
		margin-inline: auto;
		margin-bottom:0em;
		max-width:300px;
	}
}
/* ------------------------------------------- */
/* = フォーム
/* ------------------------------------------- */
#form{
	background:;
}
#form:before{
	content: "";
	display: inline-block;
	position: absolute;
	top: 0em;
	bottom:0em;
	margin-left: calc(-50vw + 50%);
	width: 100vw;
	height: 100%;
	z-index:-1;
	background:url(image/form_bg.jpg) 50% 0% no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
}
#form .privacy{
	padding-top:2em;
	padding-bottom:0em;
	background:none;
}
#fixed-nav {
	z-index: 10;
}
@media print{
	#fixed-nav {
		display:none;
	}
}

#fixed-nav a {
	background:var(--point-color);
	color:#fff !important;
	padding:1em;
	line-height:140%;
	z-index:3;
	text-align:center;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s, visibility 0.5s;
}
/* 非表示にするためのクラス（.hidden）の変更 */
#fixed-nav a.hidden {
	opacity: 0;
	visibility: hidden;
}
@media print, screen and ( min-width : 896px ) {
	#fixed-nav a{
		position: fixed;
		bottom: 5em;
		right:0%;
	}
	#fixed-nav a{
		position: fixed;
		bottom: 5em;
		right:0%;
		border-radius: 1em 0em 0em 1em;
		padding:1em 2em;
	}
}
@media only screen and ( max-width : 896px ) {
	#fixed-nav a{
		position: fixed;
		bottom: 0;
		right:0%;
	}
	#fixed-nav a{
		width:100%;
	}
	#fixed-nav br{
		display:none;
		font-size:90%;
	}
}
/* ------------------------------------------- */
/* = POINT
/* ------------------------------------------- */


.colum_3_c > li:has(.point_icon),
.colum_3_c > li:has(.point_icon2){
	font-size:90%;
	border-radius: 8px;
	padding:2em;
}
.colum_3_c > li:has(.point_icon) p,
.colum_3_c > li:has(.point_icon2) p{
	font-size:90%;
}
/* TOP以外 */
h3:has(.point_icon),
h3:has(.point_icon2){
	padding:0.5em 1em 1em 1em;
	color:var(--primary-color);
	font-weight:500;
}
/* TOP以外 */
.point_icon{
	background:var(--primary-color);
	color:#fff;
	font-size:70%;
	line-height:150%;
	display:inline-block;
	padding:1em;
	text-align:center;
	position: absolute;
	top: -3em;
	left: -3em;
	border-radius: 50%;
}

.point_icon span{
	font-size:200%;
	display:block;
}

@media print, screen and ( min-width : 896px ) {
	.colum_3_c .point_icon{
		font-size:65%;
	}
}
.colum_3_c > li:has(.point_icon){

}
h3:has(.point_icon2) {
	padding:0.5em 1em 1em 1em;
	color:var(--primary-color);
	font-weight:500;
}
.point_icon2{
	background:var(--primary-color);
	color:#fff;
	font-size:130%;
	width:2em;
	line-height:2em;
	display:inline-block;
	text-align:center;
	position: absolute;
	top: -1.5em;
	left: -1.5em;
	border-radius: 50%;
	font-weight:500;
}


/* ------------------------------------------- */
/* = 制作スケジュール
/* ------------------------------------------- */
.number{
	background:var(--primary-color);
	color:#fff;
	font-size:90%;
	line-height:150%;
	display:inline-block;
	line-height:2em;
	width:2em;
	text-align:center;
	position: absolute;
	top: 0em;
	left: 1.2em;
	border-radius: 50%;
}
.nagare{
	width: min(100%, 896px);
	margin-inline: auto;
}
.nagare dt .number{
	position: absolute;
	top: 0.8em;
	left: 0.6em;
}
.nagare dt{
	padding:0.8em;
	padding-left:3em;
	font-size:115%;
	line-height:var(--base_line_height);
	font-weight:700;
	color:var(--primary-color);
	background:#fff;
	background:var(--contents_list-color);
	border-radius: 2em;

}
@media only screen and ( max-width : 896px ) {
	.nagare{
		font-size:95%;
		line-height:var(--base_line_height);
	}
}
.nagare dd{
	padding-bottom:3em;
	padding-top:1em;
	padding-left:4em;
	border-top:none;
	font-size:95%;
	color:#444;
}
.nagare dd:before{
	content: "";
	display: inline-block;
	position: absolute;
	left: 1.8em;
	top:0;
	bottom:0;
	border-left:3px solid var(--primary-color);
	z-index:0;
	opacity: 0.5;
}
.nagare dd:last-child{
	padding-bottom:0px;
}
.nagare dd:last-child:before{
	display:none;
}

/* ------------------------------------------- */
/* = 安心パック
/* ------------------------------------------- */
section.anshin_title{
	padding:0;
}
.anshin_title_banner:after{
	content: "";
	display: block;
	z-index:-1;
}


.page_title.anshinpack{
	background:#f6f8f9;
	padding:3em 0;
	display:block !important;
}
.anshin_title_banner{
	z-index:2;
	text-align:center;
	margin-inline: auto;
	width: min(90%, 1050px);
}
@media print, screen and ( min-width : 1100px ) {
	.anshin_title_banner{
		font-size:125%;
	}
}
@media ( max-width : 1100px ) and ( min-width : 768px ) {
	.anshin_title_banner{
		font-size:1.8vw;
	}
}
@media only screen and ( max-width : 768px ) {
	.anshin_title_banner{
		font-size:3.2vw;
	}
}

@media ( min-width : 1300px ) {
	.anshin_title_banner{
		padding-right:400px;
	}
	.anshin_title_banner:after{
		position: absolute;
		top: 0px;
		right:4%;
		width:400px;
		height:100%;
		background:url(image/title_bg.png) 50% 50% no-repeat;
		-moz-background-size:100% auto;
		background-size:100% auto;
	}


}

@media ( max-width : 1300px ) and ( min-width : 768px ) {
	.anshin_title_banner{
		padding-right:35%;
	}
	.anshin_title_banner:after{
		position: absolute;
		top: 0px;
		right:4%;
		width:38%;
		height:100%;
		background:url(image/title_bg.png) 50% 50% no-repeat;
		-moz-background-size:100% auto;
		background-size:100% auto;
	}
}

@media only screen and ( max-width : 768px ) {
	.anshin_title_banner:after{
		margin-top:1em;
		width:100%;
		height:8em;
		background:url(image/title_bg.png) 50% 50% no-repeat;
		-moz-background-size:contain;
		background-size:contain;
	}
}
.anshin_title_banner h1{
	font-weight:900;
	margin-bottom:0.2em !important;
	color:var(--anshinlite) !important;
	letter-spacing:0.05em;
	font-size:255%;
	font-style:italic;
}
.anshin_title_sub{
	display:block;
	font-size:160%;
	color:#333;
	letter-spacing:0.05em;
	font-weight:900;
}
.anshin_title_banner h2:after{
	display:none !important;
}
.anshin_title_banner p{
	font-size:100%;
	line-height:160%;
	padding-bottom:1em;
	font-weight:700;
}
@media only screen and ( max-width : 768px ) {
	.anshin_title_banner h2{
		font-size:240%;
		letter-spacing:0.02em;
	}
	.anshin_title_sub{
		font-size:140%;
	}
}
/* ------------------------------------------- */
/* = ポイントリスト
/* ------------------------------------------- */
.anshin_title_banner .anshin_point{
	display: flex;
	justify-content: center;
}
.anshin_title_banner .anshin_point{
	justify-content: center;
	gap: 2%;
	flex-wrap: nowrap;
}

.anshin_title_banner .anshin_point span{
	color:var(--anshinlite) ;
	border-radius: 2px;
	background:var(--anshinlite);
	font-size:90%;
	line-height:100%;
	padding:0.6em 1em;
	font-weight:900;
	color:#fff;
	font-style:italic;
}
/* ------------------------------------------- */
/* = 初めてのホームページにうれしい機能
/* ------------------------------------------- */
span.anshinkinou{
	display:inline-block;
	font-size:50%;
	line-height:100%;
	padding:0.8em 2em 0.8em 3.5em;
	margin:0em auto 1em auto;
	color:#fff !important;
	text-align:center;
}
.anshin_title_banner span.anshinkinou{
	font-size:80%;
}

span.anshinkinou:after{
	background:var(--anshinlite);
	content: "";
	display:inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0em;
	width:100%;
	z-index:-1;
	clip-path: polygon(5% 0, 95% 1%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
}
span.anshinkinou:before{
	content: "";
	display:inline-block;
	background:url(image/mark.png) 50% 50% no-repeat;
	-moz-background-size:1.3em auto;
	background-size:1.3em auto;
	width:2em;
	height:2em;
	position: absolute;
	top: 0.3em;
	left: 1em;
}
/* ------------------------------------------- */
/* = サービスリスト
/* ------------------------------------------- */
.page-anshinpack .plan_list li{
	padding-bottom:1em;
}
.page-anshinpack .colum_2_c li{
	background:#fff;
}
dl.anshin_price{
	display:flex;
	align-items: center;
	flex-wrap: wrap;
	align-items: stretch;
	padding-top:0.5em;
}
dl.anshin_price dt,
dl.anshin_price dd{
	margin:0;
	display: flex; /* 中身を上下中央にするため */
	align-items: center;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	padding: 0.5em 0.5em; /* 上下の余白を揃える */
}
dl.anshin_price dt{
	flex-basis: 40%;
	justify-content: flex-end;
}
dl.anshin_price dd{
	flex-basis: 60%;
	justify-content: flex-start;
}
dl.anshin_price dt span{
	color: #aaa;
	border-radius: 2em;
	display:block;
	line-height:1;
	font-size:70%;
	padding:0.5em 1em;
	text-align:center;
	border:2px solid #aaa;
	font-weight:bold;
}
dl.anshin_price dd .price{
	font-size:150%;
	display:inline-block;
	margin-right:0.5em;
}
.plan_anshinlite dd .price{
	color:var(--anshinlite);
}
.plan_anshin dd .price{
	color:var(--anshin);
}
dl.anshin_price dd .price2{
	font-size:130%;
	margin-right:0.2em;
	color:#555;
}
.anshin_title .plan_list{
	padding:2em 0;
}
.anshin_title .plan_list:before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	margin-left: calc(-50vw + 50%);
	width: 100vw; /* 150vwだと横スクロールが出る可能性があるので100に */
	height: 100%;
	
	/* 背景色を塗りつつ、その上に細い白線を引く */
	background: repeating-linear-gradient(
		-45deg,
		var(--anshinlite),
		var(--anshinlite) 24px,
		rgba(255, 255, 255, 0.2) 24px,
		rgba(255, 255, 255, 0.2) 25px 
	);
	
	z-index: -1;
	opacity: 0.7;
}
@media print, screen and ( min-width : 896px ) {
	.anshin_title .plan_list{
		font-size:120%;
	}
	.anshin_title .plan_list.colum_2_c > li{
		margin:0;
	}
}


.kaisetu_block{
	padding:20px;
	border-radius:8px;
	background:#f6f8f9;
	overflow:hidden;
}
.kaisetu_block h3{
	margin:-20px;
	margin-bottom:20px;
	background:var(--anshinlite);
	color:#fff !important;
	border:none;
	padding:0.5em 1em;
	font-size:110%;
}
.kaisetu_block li{
	padding-bottom:0em;
	margin-bottom:0.5em;
	color:(--anshinlite);
	font-weight:bold;
}
h3.anshinkinou:after,
h3.anshinkinou:before,
.kaisetu_block h3:after,
.kaisetu_block h3:before{
	display:none !important;
}
.page-anshinpack .point_icon{
	background:var(--anshinlite);
}
.page-anshinpack .colum_2_c:not(.plan_list) h3,
.page-anshinpack .colum_3_c:not(.plan_list) h3,
.page-anshinpack .colum_2_c:not(.plan_list) h4,
.page-anshinpack .colum_3_c:not(.plan_list) h4{
	border-bottom: 2px solid var(--anshinlite);
	color:var(--anshinlite);
}
.page-anshinpack .colum_2_c:not(.plan_list) h4,
.page-anshinpack .colum_3_c:not(.plan_list) h4{
	color:var(--anshinlite);
}


.page-anshinpack .colum_2_c:not(.plan_list) h3::before,
.page-anshinpack .colum_3_c:not(.plan_list) h3::before,
.page-anshinpack .colum_2_c:not(.plan_list) h4::before,
.page-anshinpack .colum_3_c:not(.plan_list) h4::before{
	border-left:2px solid var(--anshinlite);
	border-bottom:2px solid var(--anshinlite);
}
/* -------------------------------------------------- */
.dekirukoto_list{

}
.dekirukoto_list h3{
	font-size:110%;
}

@media only screen and ( max-width : 896px ) {
	.dekirukoto_list{
		font-size:70%;
		gap: 2px;
		grid-template-columns: repeat(2, 1fr); 
	}
}

/* single -------------------------------------------------- */
.jirei_block section{
	padding:2em 0;
}
.colum_4.product_img_list li{
	border-radius: 5px;
	overflow:hidden;
	box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1);
}
@media print, screen and ( min-width : 896px ) {
	.product_dl{
	  	display:flex;
		flex-wrap: wrap;
		align-items: center;
		background:#666;
	}
	.product_dl dt{
		flex-basis: 30%;
	}
	.product_dl dd{
		flex-basis: 70%;
		flex-grow:0;
	}
}
.product_dl{
	border-radius: 10px;
	overflow:hidden;
}
.product_dl dt{
	padding:0.5em 1.5em;
}
.product_dl dd{
	padding:1.5em;
}
.product_dl dt{
	background:#666;
	color:#fff;
}
.product_dl dd{
	background:#f5f5f5;
}
.product_dl dd:after{
	content: "";
	display: block;
	background:#ccc;
	width:180%;
	height:1px;
	position: absolute;
	bottom: 0;
	right: 0;
}
.product_dl dd:last-child:after{
	display:none;
}
.product_dl dd .button{
	margin:0.5em;
	font-size:90%;
	padding-top:0.5em;
	padding-bottom:0.5em;
	margin:0.2em;
}
.product_dl dd .entry_cat{
	border:none;
	padding:0;
	font-size:90%;
	color:currentColor;
}
.product_dl dd .entry_cat:before{
	content: "・";
}
/* list -------------------------------------------------- */
@media only screen and ( max-width : 600px ) {
	body:not(.home) .list_blog .list_img{
		background:#f5f5f5;
		padding:2em 20% 1em 20%;
	}
	body:not(.home) .related_box .list_blog .list_img{
		background:#fff;
		padding:1em;
	}
	body:not(.home) .related_box .list_blog .blog_list_cat span{
		display:block;
	}

}
.cf_product_top section:nth-of-type(1){
	padding-top:3em;
}
.cf_product_top section:nth-of-type(2n):before{
	content: "";
	display: inline-block;
	position: absolute;
	top: 0em;
	bottom:0em;
	margin-left: calc(-50vw + 50%);
	width: 100vw;
	height: 100%;
	background:#f6f8f9;
	z-index:-1;
}
.blog_list_cat:has(.cat_anshinpack) {
	background:var(--anshin);
}
.blog_list_cat:has(.cat_shopping-site) {
	background:var(--point-color);
}
@media print, screen and ( min-width : 896px ) {
	.cat_description p{
		text-align:center;
	}
}
body:not(.home) .related_box .list_blog .blog_list_cat,
body:not(.home) .related_box .list_blog .entry_info{
	display:none;
}