@charset "utf-8";

/* 全端末（PC・タブレット・スマホ）共通設定 */
/* LPのWordPress化 */
#plan-space h3 {
	font-size:2.0rem; color:#1d70b7; line-height:1.0; padding-top:15px; margin-bottom:10px; font-weight:900;
	border-top: 1px dotted #1d70b7; box-sizing: border-box;
}
#plan-space h3 span {font-size:0.9rem; color:#050505; display:block; margin-top:10px; font-weight:400;}
#plan-space h3 span.dais {display:inline;font-size:2.8rem; color:#ff0000; font-weight:700;}
#plan-space .top-plan {font-size:1.3rem;}
#plan-space .top-plan span {font-size:2.2rem; color:#ff0000;}
#plan-space .top-plan {margin-bottom:15px;}
#plan-space .plan-ul li b {font-size:0.95rem;}


/*TOPスライダー設定*/
#main-slider #n2-ss-2item1 ,#main-slider #n2-ss-2item5 ,#main-slider #n2-ss-2item6 ,#main-slider #n2-ss-2item3 ,#main-slider #n2-ss-2item4 ,#main-slider #n2-ss-2item7 ,#main-slider #n2-ss-2item8 , #main-slider #n2-ss-2item9 ,#main-slider #n2-ss-2item10 ,#main-slider #n2-ss-2item11 ,#main-slider #n2-ss-2item12 {
	text-shadow: 3px 3px 3px #ffffff, -3px 3px 3px #ffffff, 3px -3px 3px #ffffff, -3px -3px 3px #ffffff, 3px 0px 3px #ffffff, 0px 3px 3px #ffffff, -3px 0px 3px #ffffff, 0px -3px 3px #ffffff; font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; letter-spacing: 0.1rem;
}
#main-slider #n2-ss-2item1 {
	background: -webkit-linear-gradient(transparent 50%, #ffff37 0%); background: -ms-linear-gradient(transparent 50%, #ffff37 0%);
	line-height: 1.2; margin-bottom:10px; margin-top:-30px; padding:0px 10px;
}
#n2-ss-2item3 span {display:inline-block; color:#1d70b7; font-size:1.5rem;}
#n2-ss-2item4 {margin-top:15px;}
#main-slider div#n2-ss-2 .n2-font-1dd959cf474e1ed70085f5c80143f7d4-hover {font-size:1.3rem;}
#n2-ss-2item6 ,#n2-ss-2item9 {margin:10px 0px;}
#n2-ss-2item6 span {display:inline-block; color:#1d70b7; font-size:2.0rem;}
.nidai {font-size:3.0rem; color:#ff0000; display:inline-block;}
.manYen {font-size:1.2rem; color:#555; display:inline-block; margin-left:3px;}
.and {font-size:1.2rem;}

.hosho {margin-top:45px; border-top: 1px dotted #1d70b7; padding:30px 0px;}
.hosho p {font-size:0.9rem;}
.hosho h4 {font-size:1.4rem; margin-top:15px; color: #1d70b7; font-weight:700;}
.hosho-serif{ --bg:#fff;/*吹き出しの中の色*/ --bd:#111;/*枠線の色*/
	--bdw:3px;/*枠線の太さ*/ --r:18px;/*角丸*/ --pad:14px 18px;/*余白*/
	--tail:14px;/*しっぽのサイズ（三角の片辺）*/ --shadow: 3px 3px 0 var(--bd); /* 漫画っぽい影（任意） */
position: relative; display: inline-block;
background: var(--bg); border: var(--bdw) solid var(--bd); border-radius: var(--r);
padding: var(--pad); line-height: 1.7; font-size:1.0rem;
letter-spacing: .01em;
box-shadow: var(--shadow);
}
.hosho-serif span {font-weight:700; font-size:1.2rem; color:#ff0000;}

/* しっぽ（枠線用・黒） */
.hosho-serif::before,
.hosho-serif::after{
content:"";
position:absolute;
top: 26px;
left: 0;
width: 0; height: 0;
pointer-events: none;
}

/* 外側（枠線の黒三角） */
.hosho-serif::before{
transform: translateX(calc(-100% - 2px)); /* 本体の外に出す */
border-top:  calc(var(--tail) + 4px) solid transparent;
border-bottom: calc(var(--tail) + 4px) solid transparent;
border-right: calc(var(--tail) + 6px) solid var(--bd);
}

/* 内側（白で塗る三角） */
.hosho-serif::after{
transform: translateX(calc(-100% - 0px));
border-top:  var(--tail) solid transparent;
border-bottom: var(--tail) solid transparent;
border-right: calc(var(--tail) + 2px) solid var(--bg);
}
.hosho-wrap {
display: flex; align-items: center; /* 縦位置を揃える */
gap: 20px; /* 画像と吹き出しの間隔 */
flex-wrap:nowrap;
}
.hosho-wrap .hosho-serif {max-width:12em; font-size:1.15rem;}

.hosho-wrap .hosho-img {display:block; max-width:200px; height: auto;}
#jishaseko-area .catch-single {display:flex; align-items:center; gap:10px;}

/* 施工実績 */
.contents_lp .lp-meta {padding:0px;}
h3.entry-title {font-size:1.8rem; color:#1d70b7; font-weight:700;}
.lp-meta__table {margin-bottom:30px; width:100%;}
.lp-meta__table th ,.lp-meta__table td{
	border: 1px solid #ccc; padding:15px;
}
.lp-meta__table th {text-align:left; font-weight:500; white-space: nowrap;}

.lp-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* 常に3列 */
	gap: 20px;
}

/* 施工一覧 */
.lp-thumbs {
	display: inline-grid; /* 横幅は中身に合わせる */
	grid-template-columns: repeat(3, auto); /* 各列の幅は中身に合わせる */
	gap: 10px;
}

.lp-thumbs__item img {height:auto; display:block;}
.lp-thumbs__item img {display:block; height:auto; max-width:100%;}

.post-flex {display:flex; align-items: center; gap: 20px; margin-bottom:30px;}
.post-flex a {text-decoration:none;}
h4.entry-title {margin-bottom:10px;}
h4.entry-title::after {
	content: " >> 詳細はこちら"; font-size: 0.80rem; color:#1d70b7; margin-left: 6px;
	padding:3px; border-radius:10px; border:1px solid #1d70b7;
}
.lp-meta-mini {font-size:0.9rem; line-height:1.2;}
.lp-meta__list {
	display: grid;
	grid-template-columns: auto 1fr; /* 左はラベル、右は中身 */
	gap: 4px 10px;                  /* 行間4px、列間10px */
	margin: 0;
}


/* plan */
.eyeCatchBG {background: url(https://frontier-project.co.jp/lp/img/bg_app.png); padding:45px 0px 80px 0px;}
.eye-catch {position:relative;}
.eye-catch img {display:block; margin:0px auto; max-width:400px;}
.eye-catch div {position:absolute; left:50%; transform:translateX(-50%); line-height:1; color:#1d70b7; text-align:center; width:100%;}
.eyca-title {
	bottom:-10px; font-size:1.8rem; font-weight:700;
	text-shadow: #fff 2px 0px 2px, #fff -2px 0px 2px, #fff 0px -2px 2px, #fff -2px 0px 2px, #fff 2px 2px 2px, #fff -2px 2px 2px, #fff 2px -2px 2px, #fff -2px -2px 2px, #fff 1px 2px 2px, #fff -1px 2px 2px, #fff 1px -2px 2px, #fff -1px -2px 2px, #fff 2px 1px 2px, #fff -2px 1px 2px, #fff 2px -1px 2px, #fff -2px -1px 2px, #fff 1px 1px 2px, #fff -1px 1px 2px, #fff 1px -1px 2px, #fff -1px -1px 2px;
}
.eyca-title .plandai2 {color: #ff0000; font-size: 3.0rem;}
.eyca-title .planand {color: #050505; font-size: 1.2rem;}

.eyca-price {font-weight:700; text-align:center; line-height:1.0; margin:15px 0px 45px 0px;}
.eyca-price .eyca-yen {color:#ff0000; font-size:3.0rem; margin-right:5px;}
.eyca-price .eyca-komi {color:#050505; font-size:1.3rem;}

#plan-section .ta2 {margin:45px 15px; width:auto;}
#plan-section .ta2 th ,#plan-section .ta2 td {padding:30px;}
#plan-section .ta2 th {width:30%;}

#plan-section .plan_catch{margin-bottom:45px;}


.form-submit {font-size:1.0rem; padding:10px; display:block; margin:30px auto 0px auto;}

.top-planDiv .hosho-serif {max-width:10em;}

.catch-illust {display:flex; max-width:100%; margin-bottom:15px; max-height:180px;}
.catch-illust img {width: 42%; height: auto; max-width: 100%; display:block; object-fit:contain;}
.catch-illust .illustFirst {margin-right:16%;}
.catch-single {margin-bottom:15px;}
.catch-single img {display:block; margin:0px auto; max-height:180px;}
.plan-ul li {
	background:#1d70b7; color:#fff; display:inline-block; padding: 0px 15px 0px 10px; margin-bottom:5px; margin-right:5px;
	border-radius: 15px; font-size:1.0rem;
}
.plan-ul li::before {
font-family: "Font Awesome 5 Free"; content: "\f14a"; font-weight:400; margin-right:5px;
}
.plan-ul li:last-child {
	display:block; background:transparent; color:#050505; margin:0px; padding:0px; margin-top:10px; font-size:0.8rem;
}
.plan-ul li:last-child::before {content:none;}
.linkShosai {display:block; text-align:center; padding:10px 0px; margin-top:10px; background-color:#ffff37; font-weight:700;}


.fix-bottom {display:none;}

/** WordPress化　LP見積もり　quotation　**/
#quotation td input {font-size:1.0rem; line-height:1.8;}
#quotation td select {font-size:1.0rem; line-height:1.8; padding:5px; border-radius:6px;}
#quotation input[name="firstchoice"] {margin-right:20px;}
#quotation input[name="secondchoice"] {margin-right:20px;}
.ikou {display:inline-block; margin-left:10px; font-size:0.85rem;}
.kibo-ji {display:inline-block ;margin:0px 5px;}
.kibo-hun {display:inline-block ;margin-left:5px;}


/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*画面幅800px以下の設定
 WordPress化 */

	/* 施工一覧 */
	.post-flex {display:block;}
	h4.entry-title::after {content:none;}
	.post-flex {margin-bottom:45px;}
	.post-flex a {text-decoration:underline;}

	
	#quotation input[name="firstchoice"] ,#quotation input[name="secondchoice"] {
		margin:0px; margin-bottom:5px; width:100%; max-width:100%; box-sizing:border-box;
	}

	.plan-P .kochi {border:none; text-decoration:underline;}

	.top-plan-card {margin:30px auto auto auto;}
	
	.fix-bottom {
		position: fixed; bottom:0; left:0; width:100%; display:flex;
		justify-content: space-evenly; background-color: #1d70b7; z-index:9999;
	}
	.fix_bottom-yoso {
		flex: 1; display: flex; justify-content: center; align-items: center; text-align: center;
		border-right: 1px solid #fff;
	}
	.fix_bottom-yoso:last-child {border-right:none; background:#00B900;}
	.fix-bottom a {color:#fff; font-weight:700; font-size:1.0rem; padding:15px 5px;}
	
	footer .gecho span {display:block; font-size:0.85rem; color:#ffff37; margin-top:5px;}

}


/* 画面幅480px以下の設定 ----------------*/

@media screen and (max-width:480px){
	#nav-ab {position:fixed; top:35px; right:10px; z-index: 1000; transition: top 0.3s ease;}
	#nav-ab.fixed-top {top:10px;}
	.fa-house {color:#fff; display:inline-block; margin-left:5px;}
	
/*TOPスライダー設定*/
	#n2-ss-2item3 span {display:inline-block; color:#1d70b7; font-size:1.5rem;}
	#n2-ss-2item4 {margin-top:15px;}
	#n2-ss-2item6 span {display:inline-block; color:#1d70b7; font-size:1.5rem;}
	#main-slider #n2-ss-2item7 ,#main-slider #n2-ss-2item10 {letter-spacing: 0rem;}
	
/** WordPress **/
	#quotation {border-collapse: collapse;}
	#quotation th ,#quotation td {display:block;border:none; font-size:1.0rem;}
	#quotation th {text-align:left; padding:10px 10px 0px 10px; width:auto;}
	#quotation td {border-bottom:1px dotted #ccc; padding:5px 10px 15px 10px;}
	#quotation input ,#quotation textarea {width:100%; max-width:100%; box-sizing: border-box;}
	#quotation textarea {height:5em;}
	#quotation td.kibo {font-size:0.9rem;}
	#quotation td.kibo select {margin-top:5px; margin-left:0px;}
	#quotation .kibodai2 {margin-top:10px;}
	#quotation input[name="firstchoice"] ,#quotation input[name="secondchoice"] {margin:0px;}
	#quotation input[type="checkbox"] {width:auto;}
	#quotation .codedropz-upload-handler h3 {font-size:1.0rem;}
	
	.std h4 {font-size:1.1rem; margin-bottom:15px;}

/* 施工実績 */
	h3.entry-title {font-size:1.3rem; margin-bottom:15px;}
	.lp-meta__table {border-bottom:1px solid #ccc;}
	.lp-meta__table th ,.lp-meta__table td {font-size:0.9rem; display:block; border-bottom:none;}
	.lp-meta__table th {padding:2px 10px; background-color: #ccc;}
	.lp-meta__table td {padding:10px;}
	.lp-gallery {grid-template-columns: 1fr; row-gap: 10px;}
	.lp-gallery figcaption {font-size:0.9rem;}


/** プラン **/
	.eyeCatchBG {padding:30px 0px 45px 0px;}
	.eyca-title {bottom:-5%;}
	.eye-catch img {max-width:250px; width:auto;}
	.eyca-title {font-size:1.2rem;}
	.eyca-title .plandai2 {font-size:1.8rem;}
	.eyca-title .planand {font-size:1.0rem;}
	.eyca-price {margin-bottom:15px;}
	.eyca-price .eyca-yen {font-size:2.5rem;}
	#plan-section .ta2 th {width:100%; padding:0px;}
	#plan-section .ta2 td {padding:15px;}
	#plan-section .plan_catch{margin:0px;}
	#plan-section .ta2_ul {margin-bottom:15px; margin-left:15px;}
	#plan-section .ta2_ul li {line-height:1.4; margin-bottom:8px; font-size:0.9375rem;}
	#plan-section .ta2 img {max-width:250px; margin:45px auto 0px auto;}
	#plan-section .ta2 .ta_para {border-bottom: 1px dotted #1d70b7; margin-top:15px; font-size:1.2rem; padding-bottom:5px;}

	#plan-space .top-plan span {color: #ff0000;}

	.catch-single img {max-height:auto; max-width:110px;}
	.hosho-wrap .hosho-serif {font-size:0.9rem;}
	.hosho-wrap .hosho-img {max-width:120px;}
	
	.fix-bottom {
		position: fixed; bottom:0; left:0; width:100%; display:flex;
		justify-content: space-evenly; background-color: #1d70b7; z-index:9999;
	}
	.fix_bottom-yoso {
		flex: 1; display: flex; justify-content: center; align-items: center; text-align: center;
		border-right: 1px solid #fff;
	}
	.fix_bottom-yoso:last-child {border-right:none; background:#00B900;}
	.fix-bottom a {color:#fff; font-weight:700; font-size:1.0rem;}

	footer li.gecho {line-height:1.3;}	
	
}