@charset "UTF-8";

.flex{ --margin:40px; }
@media screen and (max-width: 768px){
	.flex{ --margin:20px; }
}

/**
 * 全体
----------------------------------------------------------------*/
/* フォント */

/* ボディ */
body{
	font-size:14px;
	line-height:1.7;
	color:rgb(51,51,51);
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, Helvetica, sans-serif;
}

/**
 * プロトタイプ
----------------------------------------------------------------*/
/* reCATPCHA */
.grecaptcha-badge{ visibility:hidden; }

img{
	display:block;
	margin:0 auto;
	max-width:100%;
}
em{
	font-style:normal;
	color:rgb(57,181,74);
}
p{ text-align:justify; }
.c{ text-align:center; }
.r{ text-align:right; }
.l{ text-align:left; }
.tel{
	color:inherit;
	text-decoration:none;
}
.relative{ position:relative; }
strong.big{ font-size:150%; }
strong.xbig{ font-size:200%; }
@media screen and (max-width: 768px){
	.safeimg{ max-width:240px; }
}
@media screen and (max-width: 240px){
	.safeimg{ max-width:100%; }
}

/* マウスオーバー */
.hoverable.opacity{
	transition:opacity .2s;
	display:block;
}
.hoverable.opacity.hover{ opacity:.7; }

/* 1カラム */
.one{ margin:40px; }
@media screen and (max-width: 768px){
	.one{ margin:40px 20px; }
}

/* インラインリンク */
.inlinelink{
	color:rgb(57,181,74);
	transition:color .2s;
}
.inlinelink.hover{ color:rgb(136,210,146); }
.inlinelink.pink{ color:rgb(227,101,124); }
.inlinelink.pink.hover{ color:rgb(238,162,176); }

/* GoogleMaps */
.gm > iframe{ height:400px; }

/* YouTube */
.yt > a{ transition:opacity .2s; }
.yt > a.hover{ opacity:.8; }
.yt{
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
}
.yt > iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* マージン */
.tmargin{ padding-top:80px;}
.bmargin{ padding-bottom:80px; }
.tmargin.-narrow{ padding-top:40px;}
.bmargin.-narrow{ padding-bottom:40px; }
.tmargin.-min{ padding-top:20px;}
.bmargin.-min{ padding-bottom:20px; }

/* レイアウト */
.base{
	max-width:1024px;
	margin:0 auto;
	box-sizing:border-box;
}
.wide{
	max-width:1536px;
	margin:0 auto;
	box-sizing:border-box;
}
.base.-narrow{ max-width:768px; }
.base.-xnarrow{ max-width:512px; }
@media screen and (max-width: 768px){
	.base.-smart{ max-width:375px; }
}

/* セーフマージン */
.safe{ padding:40px; }
.safe.-narrow{ padding:20px; }
@media screen and (max-width: 768px){
	.safe{ padding:20px; }
}

/* 分岐 */
.sp{ display:none; }
@media screen and (max-width: 768px){
	.pc{ display:none; }
	.sp{ display:block; }
}

/* 水平線 */
.hr{
	display:block;
	background:#ccc;
	border:0;
	margin:10px 0;
}

/* スクロール */
.scrollable{
	transition:opacity 1s;
	opacity:0;
}
.scrollable.scrolled{ opacity:1; }
 
/* テーブル */
.table{
	width:100%;
	border-top:1px solid rgb(51,51,51);
}
.table th,
.table td{
	border-bottom:1px solid rgb(51,51,51);
	padding:.5em;
}
.table th{ width:80px; }
@media screen and (max-width: 768px){
	.table{ font-size:14px; }
}

/* 段組み */
.multicolumn{ column-count:2; }
@media screen and (max-width: 768px){
	.multicolumn{ column-count:1; }
}

/* グリッド */
.grid > section{
	padding-bottom:40px;
	position:relative;
}
.grid > section > figure{ margin-bottom:10px; }
.grid > section > figure > a{ transition:opacity .2s; }
.grid > section > figure > a.hover{ opacity:.7; }
.grid > section > h2,
.grid > section > h3,
.grid > section > h4,
.grid > section > h5,
.grid > section > h6{
	font-size:120%;
	font-weight:bold;
	margin-bottom:10px;
}
.grid > section > h2 > small,
.grid > section > h3 > small,
.grid > section > h4 > small,
.grid > section > h5 > small,
.grid > section > h6 > small{
	font-size:80%;
	font-weight:normal;
	color:rgb(57,181,74);
	display:block;
}

/* バナー*/
.banners{
	text-align:center;
	padding:20px;
}
.banner{
	display:inline-block;
	transition:opacity .2s;
	max-width:384px;
}
.banner.hover{ opacity:.7; }

/* ボタン */
.buttons{
	text-align:center;
	padding:10px;
}
.button{
	display:inline-block;
	font-size:20px;
	line-height:30px;
	padding:15px 30px;
	color:white;
	margin:10px;
	transition:background .2s;
	box-sizing:border-box;
	position:relative;
	min-width:300px;
	background:rgb(51,51,51);
	border-radius:30px;
	font-weight:bold;
	vertical-align:middle;
}
.button::before{
	content:'';
	display:inline-block;
	width:30px;
	height:30px;
	vertical-align:middle;
	margin-right:10px;
	background:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/interface/icons/circle_arrow.png") scroll no-repeat center center / contain;
}
.button.hover{ background:rgb(57,181,74); }
.button.min{
	font-size:14px;
	line-height:16px;
	padding:6px 16px;
	min-width:140px;
	margin:0;
}
.button.min::before{
	width:16px;
	height:16px;
	margin-right:5px;
}
.button.green{ background:rgb(57,181,74); }
.button.green.hover{ background:rgb(217,225,74); }
@media screen and (max-width: 768px){
	.button{
		font-size:16px;
		line-height:30px;
		padding:10px 50px;
	}
	.button::after{
		width:50px;
		height:50px;
	}
}
@media screen and (max-width: 640px){
	.button{ width:auto; }
}

/* 見出し */
.h2{
	background:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/interface/h2/lightgreen.png") scroll no-repeat center bottom / 202px;
	text-align:center;
	padding:70px 20px 50px;
	font-size:28px;
	font-weight:bold;
	line-height:1.5;
	box-sizing:border-box;
}
.h2.pink{ background-image:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/interface/h2/pink.png"); }
.h2 > small{
	display:block;
	font-size:16px;
	letter-spacing:.1em;
	line-height:1.2;
	font-weight:normal;
}
.h2_image{ margin-top:40px; }
.h3{
	font-size:20px;
	font-weight:bold;
	margin-bottom:10px;
}
.h4{
	font-size:16px;
	font-weight:bold;
	margin:5px 0;
}
@media screen and (max-width: 768px){
	.h2{ font-size:22px; }
	.h3{ font-size:18px; }
}

/* お問い合わせボックス */
.contactbox{
	margin:40px 20px;
	text-align:center;
}
.contactbox > div{
	max-width:572px;
	padding:20px;
	box-sizing:border-box;
	background:rgb(57,181,74);
	border-radius:40px;
	display:inline-block;
}
.contactbox > div > a{
	border-radius:20px;
	display:block;
	margin-top:-10px;
	transition:opacity .2s;
}
.contactbox > div > a.hover{ opacity:.7; }
.contactbox > div > footer{ display:flex; }
.contactbox > div > footer > a{
	display:inline-block;
	width:calc(50% - 5px);
	border-radius:31px;
	transition:background .2s;
}
.contactbox > div > footer > a:first-child{
	background:rgb(252,239,242);
	margin-right:10px;
}
.contactbox > div > footer > a:last-child{ background:rgb(247,249,218); }
.contactbox > div > footer > a:first-child.hover{ background:rgb(249,216,224); }
.contactbox > div > footer > a:last-child.hover{ background:rgb(236,240,164); }
@media screen and (max-width: 768px){
	.contactbox > div{
		border-radius:8vw;
		padding:5vw;
	}
}

/* 番号付きセクション */
.numsec{ counter-reset:numsec; }
.numsec h3,
.numsec h4,
.numsec h5,
.numsec h6{
	padding-left:70px;
	position:relative;
	line-height:30px;
}
.numsec h3::before,
.numsec h4::before,
.numsec h5::before,
.numsec h6::before{
	content:counter(numsec);
	counter-increment:numsec;
	background:rgb(243,178,193);
	width:60px;
	height:60px;
	text-align:center;
	line-height:60px;
	font-size:26px;
	color:white;
	font-weight:bold;
	display:inline-block;
	border-radius:30px;
	position:absolute;
	left:0;
}
.numsec h3 > small,
.numsec h4 > small,
.numsec h5 > small,
.numsec h6 > small{
	line-height:15px;
	font-size:14px;
	display:block;
	font-weight:normal;
}

/* 価格セクション */
.pricesec{
	--color:rgb(57,181,74);
	--color-hover:rgb(217,225,74);
}
.pricesec.pink{
	--color:rgb(227,101,124);
	--color-hover:rgb(243,178,193);
}
.pricesec > section:not(:last-child){ padding-bottom:40px; }
.pricesec > section > h3,
.pricesec > section > h4,
.pricesec > section > h5,
.pricesec > section > h6{
	background:var(--color);
	color:white;
	font-size:16px;
	font-weight:bold;
	padding:3px 20px;
	border-radius:30px;
	margin-bottom:10px;
}
.pricesec > section > h3::before,
.pricesec > section > h4::before,
.pricesec > section > h5::before,
.pricesec > section > h6::before{ content:'●'; }
.pricesec > section > section{ padding:4px 0; }
.pricesec > section > section:not(:last-child){ border-bottom:1px solid #ccc; }
.pricesec.standalone >section > section{ border-bottom:1px solid #ccc; }
.pricesec.standalone >section > section:first-child{ border-top:1px solid #ccc; }
.pricesec > section > section > div{
	display:flex;
	line-height:30px;
	vertical-align:bottom;
}
.pricesec > section > section > div > h4,
.pricesec > section > section > div > h5,
.pricesec > section > section > div > h6{
	font-size:14px;
	font-weight:bold;
	margin-right:auto;
}
.pricesec > section > section > div > div{
	color:var(--color);
	font-weight:bold;
	text-align:right;
	padding-left:10px;
}
.pricesec > section > section > div > .price_simulator > a{
	display:inline-block;
	font-size:16px;
	background:var(--color);
	color:white;
	width:160px;
	box-sizing:border-box;
	padding:4px 10px;
	text-align:center;
	border-radius:20px;
	transition:background .2s;
}
.pricesec > section > section > div > .price_simulator > a.hover{ background:var(--color-hover); }
.pricesec > section > section > div > .price_estimate{ font-size:18px; }
.pricesec > section > section > div > .price_taxex{
	font-size:18px;
	min-width:160px;
}
.pricesec > section > section > div > .price_taxex > small{ font-size:14px; }
.pricesec > section > section > div > .price_taxin{
	font-size:12px;
	min-width:110px;
	font-weight:normal;
}
.pricesec > section > section > .note{
	margin-top:0;
	margin-bottom:6px;
}

/* エリアバー */
.areabar{
	display:inline-block;
	width:40px;
	height:16px;
	margin-right:6px;
	background:rgb(51,51,51);
	vertical-align:middle;
}
.areabar.green{ background:rgb(57,181,74); }
.areabar.green50{ background:rgb(156,218,164); }
.areabar.lime{ background:rgb(217,225,74); }
.areabar.lightgreen{ background:rgb(212,231,168); }

/* シミュレーターボタン */
.simbuttons > a{
	border-radius:10px;
	display:inline-block;
	transition:background .2s;
}
.simbuttons > a.pink{ background:rgb(252,239,242); }
.simbuttons > a.lime{ background:rgb(247,249,218); }
.simbuttons > a.pink.hover{ background:rgb(249,216,224); }
.simbuttons > a.lime.hover{ background:rgb(236,240,164); }

/* カード */
.cards{
	overflow-x:scroll;
}
.cards > div{
	display:flex;
	flex-wrap:wrap;
	padding:10px 10px 20px;
}
.cards > div > section{
	width:320px;
	padding:10px;
}
.cards > div > section > a{
	background:white;
	border-radius:10px;
	display:block;
	padding:20px 10px 30px;
	position:relative;
	color:rgb(51,51,51);
	font-weight:bold;
	transition:background .2s, color .2s;
}
.cards > div > section > a::after{
	background:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/interface/icons/circle_arrow_green.png") scroll no-repeat center center / cover;
	width:40px;
	height:40px;
	content:'';
	display:block;
	position:absolute;
	bottom:-20px;
	left:0;
	right:0;
	margin:auto;
}
.cards > div > section > a.hover{
	background:rgb(57,181,74);
	color:white;
}
.cards > div > section > a > .cat{
	color:white;
	background:rgb(57,181,74);
	border:1px solid rgb(57,181,74);
	padding:2px 10px;
	position:absolute;
	border-radius:15px;
	top:10px;
	left:5px;
	transition:border-color .2s;0
}
.cards > div > section > a.hover > .cat{ border-color:white; }
.cards > div > section > a > figure{ margin-bottom:10px; }
.cards > div > section > a > h3{
	font-size:16px;
	margin-bottom:4px;
	font-weight:bold;
}
.cards > div > section > a > dl{
	display:flex;
	flex-wrap:wrap;
}
.cards > div > section > a > dl > dt{
	background:rgb(217,225,74);
	padding:2px 10px;
	border-radius:15px;
	width:50px;
	box-sizing:border-box;
	margin-bottom:4px;
}
.cards > div > section > a.hover > dl > dt{ color:rgb(51,51,51); }
.cards > div > section > a > dl > dd{
	width:240px;
	padding-left:10px;
	margin-bottom:4px;
}
.cards > div > section > a > .voice > h4{
	background:rgb(57,181,74);
	border:1px solid rgb(57,181,74);
	color:white;
	padding:0 10px;
	margin:6px 10px 0;
	display:inline-block;
	transition:border-color .2s;0
}
.cards > div > section > a.hover > .voice > h4{ border-color:white; }
.cards > div > section > a > .voice > p{
	border:1px solid #ccc;
	padding:15px 10px 5px;
	font-weight:normal;
	margin-top:-10px;
	transition:border-color .2s;
}
.cards > div > section > a.hover > .voice > p{ border-color:white; }

/* 脚注 */
.note{
	background:rgb(252,239,242);
	padding:5px 10px;
	border-radius:10px;
	margin-top:10px;
	font-size:12px;
}
.note.green{ background:rgb(215,240,218); }

/* ページャー */
.pager > ul{
	padding:20px;
	text-align:center;
}
.pager > ul > li{ display:inline-block; }
.pager > ul > li > *{
	width:20px;
	padding:10px;
	text-align:center;
	display:inline-block;
}
.pager > ul > li > span{ background:rgb(235,247,236); }
.pager > ul > li > a{
	background:rgb(57,181,74);
	color:white;
	transition:background .2s;
}
.pager > ul > li > a.hover{ background:rgb(-42,144,-17); }
.pager > ul > li:first-child > *{ border-radius:4px 0 0 4px; }
.pager > ul > li:last-child > *{ border-radius:0 4px 4px 0; }

/* 背景 */
.bg_aerialwork{ background:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/interface/bg/bg_aerialwork.png") no-repeat center top / 100%; }
.bg_paper{ background:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/interface/bg/bg_paper.png") repeat center center; }
.bg_water{ background:rgb(230,246,255); }
.bg_lime{ background:rgb(236,240,164); }
.bg_lime20{ background:rgb(247,249,218); }

/**
 * ヘッダー
----------------------------------------------------------------*/
@media screen and (max-width: 768px){
	body > header{ height:56px; }
}

/* ヘッドカード */
#hcard{ border-top:6px solid rgb(217,225,74); }
@media screen and (max-width: 768px){
	#hcard{
		border-top:3px solid rgb(217,225,74);
		border-bottom:3px solid rgb(243,178,193);
		background:white;
		height:50px;
		position:fixed;
		top:0;
		left:0;
		right:0;
		z-index:100000;
	}
}

/* ロゴ */
#logo{
	position:absolute;
	margin-left:50%;
	left:-512px;
	width:250px;
}
#logo > a{
	transition:opacity .2s;
	display:inline-block;
}
#logo > a.hover{ opacity:.7; }
@media screen and (max-width: 1024px){
	#logo{
		margin-left:0;
		left:0;
	}
}
@media screen and (max-width: 768px){
	#logo{
		width:125px;
	}
}

/* ヘッダーCTA */
#hcta{
	display:flex;
	justify-content:right;
	padding:0 10px 0 250px;
}
#hcta > a{
	display:block;
	max-width:256px;
	margin:0 5px;
	transition:opacity .2s;
}
#hcta > a.hover{ opacity:.7; }
@media screen and (max-width: 960px){
	#hcta{
		padding-top:18px;
		padding-bottom:18px;
	}
}
@media screen and (max-width: 768px){
	#hcta{ display:none; }
}

/* モバイルCTA */
#spcta{ display:none; }
@media screen and (max-width: 768px){
	#spcta{
		position:fixed;
		z-index:100000;
		bottom:0;
		left:0;
		right:0;
		display:flex;
	}
	#spcta > a{
		display:block;
		width:50%;
		transition:opacity .2s;
	}
	#spcta > a.hover{ opacity:.7; }
}

/* モバイルメニュー */
@media screen and (max-width: 768px){
	#spmenu{ display:none; }
	body.clicked #spmenu{ display:block; }
	#spmenu{
		position:fixed;
		z-index:100001;
		top:56px;
		left:0;
		right:0;
		bottom:0;
		background:rgba(227,101,124,0.9);
		overflow-y:scroll;
	}
}

/* ハンバーガーメニュー */
@media screen and (max-width: 768px){
	#open{
		position:absolute;
		right:0;
		border:0;
		width:50px;
		background:white;
		transition:background .2s;
		cursor:pointer;
	}
	#open.hover{ background:rgb(239,243,182); }
	body.clicked #open{ display:none; }
}

/* クローズボタン */
@media screen and (max-width: 768px){
	#close{
		position:fixed;
		z-index:100002;
		top:3px;
		right:0;
		border:0;
		width:50px;
		background:white;
		transition:background .2s;
		cursor:pointer;
	}
	#close.hover{ background:rgb(239,243,182); }
}

/**
 * ナビゲーション
----------------------------------------------------------------*/
/* グローバルナビゲーション */
@media screen and (min-width: 769px){
	#gnav > ul{
		text-align:right;
		padding:0 20px;
	}
	#gnav > ul > li{ display:inline-block; }
	#gnav > ul > li > a{
		display:inline-block;
		padding:4px 0 4px 4px;
		color:rgb(51,51,51);
		font-weight:bold;
		line-height:28px;
		transition:color .2s;
	}
	#gnav > ul > li > a::before{
		content:'>';
		font-weight:normal;
	}
	#gnav > ul > li > a.hover{ color:rgb(227,101,124); }
}
@media screen and (min-width: 769px) and (max-width: 960px){
	#gnav > ul{ text-align:center; }
}

/* サービスナビゲーション */
@media screen and (min-width: 769px){
	#snav{ background:rgb(227,101,124); }
	#snav > ul{
		display:flex;
		justify-content:center;
	}
	#snav > ul > li > a{
		display:block;
		border-right:1px solid white;
		font-size:16px;
		line-height:30px;
		padding:10px 15px;
		color:white;
		font-weight:bold;
		text-align:center;
		transition:background .2s;
	}
	#snav > ul > li > a.hover{ background:rgb(243,178,193); }
	#snav > ul > li:first-child > a{ border-left:1px solid white; }
}
@media screen and (min-width: 769px) and (max-width: 960px){
	#snav > ul > li > a{
		font-size:14px;
		padding:4px 8px;
	}
}

/* モバイル */
@media screen and (max-width: 768px){
	#gnav,
	#snav{ text-align:center; }
	#gnav::before,
	#snav::before{
		color:rgb(227,101,124);
		background:white;
		display:inline-block;
		font-size:18px;
		font-weight:bold;
		letter-spacing:.1em;
		padding:4px 20px;
		min-width:200px;
		box-sizing:border-box;
		margin:20px;
		text-align:center;
		border-radius:30px;
	}
	#gnav::before{ content:'全体メニュー'; }
	#snav::before{ content:'サービスメニュー'; }
	#gnav > ul,
	#snav > ul{
		display:flex;
		flex-wrap:wrap;
		border-top:1px solid white;
	}
	#gnav > ul > li,
	#snav > ul > li{ width:50%; }
	#gnav > ul > li > a,
	#snav > ul > li > a{
		display:block;
		background:rgba(51,51,51,0.2);
		color:white;
		font-size:14px;
		font-weight:bold;
		padding:10px;
		border-bottom:1px solid white;
		transition:background .2s;
	}
	#gnav > ul > li:nth-child(2n-1) > a,
	#snav > ul > li:nth-child(2n-1) > a{ border-right:1px solid white; }
	#gnav > ul > li > a.hover,
	#snav > ul > li > a.hover{ background:rgba(51,51,51,0.5); }
}

/**
 * フッター
----------------------------------------------------------------*/
body > footer{
	background:rgb(252,239,242);
}

/* フッターカード */
#fcard{ padding:20px 0; }
@media screen and (max-width: 768px){
	#fcard{ padding:0; }
}

/* フッターナビ */
#fnav > ul{
	display:flex;
	padding:10px;
}
#fnav > ul > li{ width:33.3333%; }
#fnav a{
	transition:color .2s, background .2s;
	padding:0 10px;
	display:inline-block;
}
#fnav a.hover{ color:rgb(227,101,124); }
#fnav > ul > li > a{
	color:rgb(51,51,51);
	font-weight:bold;
	font-size:16px;
	padding-bottom:10px;
}
#fnav > ul > li > ul > li > a{ color:rgb(51,51,51); }
@media screen and (max-width: 768px){
	#fnav > ul{
		display:block;
		padding:0;
		border-bottom:1px solid #ccc;
	}
	#fnav > ul > li{ width:auto; }
	#fnav a{
		padding:10px;
		display:block;
	}
	#fnav > ul > li > a{
		background:rgb(243,178,193);
		color:white;
	}
	#fnav > ul > li > a.hover{
		background:rgb(227,101,124);
		color:white;
	}
	#fnav > ul > li > ul{
		display:flex;
		flex-wrap:wrap;
	}
	#fnav > ul > li > ul > li{ width:50%; }
	#fnav > ul > li > ul > li > a{
		color:rgb(51,51,51);
		border-bottom:1px solid #ccc;
	}
	#fnav > ul > li > ul > li:last-child > a{ border-bottom:none; }
	#fnav > ul > li > ul > li:nth-last-child(2):nth-child(2n-1) > a{ border-bottom:none; }
	#fnav > ul > li > ul > li > a.hover{
		background:rgb(227,101,124);
		color:white;
	}
	#fnav > ul > li > ul > li:nth-child(2n-1) > a{ border-right:1px solid #ccc; }
}

/* フッターロゴ */
#flogo > img{
	margin:20px auto;
	max-width:200px;
}

/* 著作家表記 */
#cr{
	background:rgb(227,101,124);
	color:white;
	text-align:center;
	padding:4px 20px;
	font-size:14px;
}
@media screen and (max-width: 768px){
	#cr{ padding:10px 20px 12vw; }
}

/**
 * メインコンテンツ
----------------------------------------------------------------*/
#cont,
#post{ min-height:500px; }

/* ページ名 */
#pagename{
	background:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/interface/theme/bg_h1.png") scroll no-repeat center center / cover;
	padding:20px;
	box-sizing:border-box;
	min-height:256px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	color:white;
	text-align:center;
}
#pagename > h1{
	font-size:34px;
	letter-spacing:.1em;
	font-weight:bold;
}
#pagename > h1 > small{
	display:block;
	font-size:16px;
	font-weight:normal;
}
@media screen and (max-width: 768px){
	#pagename{
		background-image:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/interface/theme/bg_h1_sp.png");
		min-height:180px;
	}
	#pagename > h1{ font-size:22px; }
	#pagename > h1 > small{ font-size:12px; }
}

/* パン屑リスト */
#pan{
	margin-top:10px;
	font-size:12px;
}
#pan > ol > li{ display:inline; }
#pan > ol > li:not(:last-child)::after{ content:'>'; }
#pan > ol > li > a{
	color:white;
	transition:color .2s;
}
#pan > ol > li > a.hover{ color:rgb(217,225,74); }

/**
 * スポット：TOPページ
----------------------------------------------------------------*/
/* メインビジュアル */
#spot_index_mvis{
	background:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/article/index/bg_mvis.png") scroll no-repeat center bottom / cover;
	height:768px;
	position:relative;
}
#spot_index_mvis > .base > p > img{ margin:0; }
#spot_index_mvis > .base > a{
	display:inline-block;
	margin:0 40px;
	color:white;
	font-size:18px;
	font-weight:bold;
	line-height:60px;
	padding:0 40px;
	border-radius:30px;
	transition:background-color .2s;
	background:rgb(57,181,74) url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/interface/icons/line_arrow_right.png") scroll no-repeat right 5px center / 30px;
}
#spot_index_mvis > .base > a.hover{ background-color:rgb(217,225,74); }
#spot_index_mvis > .base > a > img{
	width:60px;
	display:inline-block;
	margin-right:10px;
}
@media screen and (max-width: 1200px){
	#spot_index_mvis{ background-position:right -180px bottom; }
}
@media screen and (max-width: 768px){
	#spot_index_mvis{
		background:none;
		text-align:center;
		height:auto;
	}
	#spot_index_mvis > .base > a{
		position:absolute;
		bottom:40px;
		left:20px;
		right:20px;
		margin:0;
		padding:0 20px;
	}
}
@media screen and (max-width: 500px){
	#spot_index_mvis > .base > a{
		font-size:3vw;
		padding:0 5vw;
	}
	#spot_index_mvis > .base > a > img{ width:12vw; }
}

/* ピックアップパネル */
#spot_index_pickuppanel{ margin-top:-100px; }
#spot_index_pickuppanel > .flex > li > a{
	background:white scroll no-repeat center top / 100%;
	display:block;
	padding:130px 20px 40px;
	border-bottom:6px solid rgb(217,225,74);
	position:relative;
	top:0;
	transition:background-color .2s, top ease-in-out .1s;
	box-sizing:border-box;
}
#spot_index_pickuppanel > .flex > li > a::after{
	content:'';
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	background:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/interface/icons/line_arrow_bottom.png") scroll no-repeat center center / contain;
	width:80px;
	height:40px;
}
#spot_index_pickuppanel > .flex > li > a.hover{
	background-color:rgb(247,249,218);
	top:-20px;
}
#spot_index_pickuppanel > .flex > li:nth-child(1) > a{ background-image:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/article/index/pickuppanel_tv.png"); }
#spot_index_pickuppanel > .flex > li:nth-child(2) > a{ background-image:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/article/index/pickuppanel_lighting.png"); }
#spot_index_pickuppanel > .flex > li:nth-child(3) > a{ background-image:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/article/index/pickuppanel_aircon.png"); }
#spot_index_pickuppanel > .flex > li > a > h3{
	font-size:24px;
	color:rgb(57,181,74);
	font-weight:bold;
	text-align:center;
	text-shadow:
		0 0 3px white,
		0 0 3px white,
		0 0 3px white,
		0 0 3px white,
		0 0 3px white,
		0 0 3px white,
		0 0 3px white,
		0 0 3px white,
		0 0 3px white,
		0 0 3px white,
		0 0 3px white,
		0 0 3px white,
		0 0 3px white,
		0 0 3px white,
		0 0 3px white,
		0 0 3px white;
}
#spot_index_pickuppanel > .flex > li > a > p{ color:rgb(51,51,51); }
#spot_index_pickuppanel > .flex > li > a > .price{
	font-size:20px;
	color:rgb(57,181,74);
	font-weight:bold;
	text-align:right;
}
#spot_index_pickuppanel > .flex > li > a > .price > small{ font-size:14px; }
@media screen and (max-width: 1024px){
	#spot_index_pickuppanel > .flex{ --margin:20px; }
	#spot_index_pickuppanel > .flex > li > a{ padding:130px 10px 40px; }
	#spot_index_pickuppanel > .flex > li > a > p{ min-height:100px; }
}
@media screen and (max-width: 768px){
	#spot_index_pickuppanel{ margin-top:0; }
	#spot_index_pickuppanel > .flex > li:nth-child(1) > a{ background-image:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/article/index/pickuppanel_tv_sp.png"); }
	#spot_index_pickuppanel > .flex > li:nth-child(2) > a{ background-image:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/article/index/pickuppanel_lighting_sp.png"); }
	#spot_index_pickuppanel > .flex > li:nth-child(3) > a{ background-image:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/article/index/pickuppanel_aircon_sp.png"); }
	#spot_index_pickuppanel > .flex > li:nth-child(1) > a{ left:-40px; }
	#spot_index_pickuppanel > .flex > li:nth-child(2) > a{ left:0; }
	#spot_index_pickuppanel > .flex > li:nth-child(3) > a{ left:40px; }
	#spot_index_pickuppanel > .flex{ display:block; }
	#spot_index_pickuppanel > .flex > li{ width:auto; }
	#spot_index_pickuppanel > .flex > li > a{
		width:364px;
		height:128px;
		border-bottom:0;
		padding:10px 25px 10px 135px;
		margin:10px auto;
		overflow:hidden;
		position:relative;
	}
	#spot_index_pickuppanel > .flex > li > a::after{ content:none; }
	#spot_index_pickuppanel > .flex > li > a.hover{ top:-10px; }
	#spot_index_pickuppanel > .flex > li > a > h3{
		text-align:left;
		font-size:16px;
	}
	#spot_index_pickuppanel > .flex > li > a > p{
		min-height:0;
		font-size:12px;
		letter-spacing:-.05em;
	}
	#spot_index_pickuppanel > .flex > li > a > .price{ font-size:16px; }
}
@media screen and (max-width: 500px){
	#spot_index_pickuppanel > .flex > li:nth-child(n) > a{ left:0; }
}
@media screen and (max-width: 420px){
	#spot_index_pickuppanel{ background:red;}
	#spot_index_pickuppanel > .flex{ padding:0; }
	#spot_index_pickuppanel > .flex > li{ margin:0; }
	#spot_index_pickuppanel > .flex > li > a{
		width:auto;
		height:33.5vw;
		margin:0;
		padding:5px 20px 5px 35vw;
	}
	#spot_index_pickuppanel > .flex > li{ border-bottom:1px solid #ccc; }
	#spot_index_pickuppanel > .flex > li > a > h3,
	#spot_index_pickuppanel > .flex > li > a > .price{ font-size:4vw; }
	#spot_index_pickuppanel > .flex > li > a > p{ font-size:3vw; }
}

/**
 * スポット：料金表
----------------------------------------------------------------*/
/* 工事料金 */
@media screen and (max-width: 1024px){
	#spot_prices_prices > .flex{ display:block; }
	#spot_prices_prices > .flex > div{ width:auto; }
}
@media screen and (max-width: 768px){
	#spot_prices_prices > .flex > .pricesec > section > section > div{
		flex-wrap:wrap;
		justify-content:flex-end;
	}
	#spot_prices_prices > .flex > .pricesec > section > section > div > h4{ width:100%; }
	#spot_prices_prices > .flex > .pricesec > section > section > .note{ justify-content:flex-start; }
}

/* ご対応エリアと出張料金 */
#spot_prices_areamap > .base > .flex > div > figure > img{ margin:0 0 20px; }

/**
 * スポット：過去の事例
----------------------------------------------------------------*/
.workset > figure{ margin-bottom:10px; }
.workset > .cat{
	background:rgb(57,181,74);
	color:white;
	padding:0 15px;
	border-radius:15px;
	display:inline-block;
	margin-bottom:4px;
}
.workset > h2{
	font-size:16px;
	font-weight:bold;
	margin-bottom:10px;
}
.workset > dl{
	display:flex;
	flex-wrap:wrap;
	font-weight:bold;
}
.workset > dl > dt{
	background:rgb(217,225,74);
	padding:2px 10px;
	border-radius:15px;
	width:50px;
	box-sizing:border-box;
	margin-bottom:4px;
}
.workset > dl > dd{
	width:calc(100% - 60px);
	padding-left:10px;
}
.workset > .voice > h4{
	background:rgb(57,181,74);
	color:white;
	padding:0 10px;
	margin-left:10px;
	display:inline-block;
	margin-top:10px;
}
.workset > .voice > p{
	border:1px solid #ccc;
	margin-top:-15px;
	padding:20px 10px 10px;
}

/**
 * スポット：サービス個別
----------------------------------------------------------------*/
/* リードコピー */
#spot_services_leadcopy > .base > .flex > div > p{
	font-size:18px;
	font-weight:bold;
}

/* こんなお悩みありませんか？ */
#spot_services_troubles > .base{
	padding-top:40px;
	padding-bottom:40px;
}
#spot_services_troubles > .base > h2{
	font-size:34px;
	font-weight:bold;
	color:white;
	background:rgb(57,181,74);
	padding:5px 40px;
	max-width:500px;
	text-align:center;
	margin:0 auto 20px;
	border-radius:40px;
}
#spot_services_troubles > .base > ul{
	display:flex;
	flex-wrap:wrap;
	padding:15px 10px;
}
#spot_services_troubles > .base > ul > li{
	font-size:24px;
	font-weight:bold;
	text-align:center;
	padding:5px 10px;
	box-sizing:border-box;
	width:50%;
}
#spot_services_troubles > .base > p{
	font-size:34px;
	font-weight:bold;
	color:rgb(57,181,74);
	margin-top:20px;
	text-align:center;
}
@media screen and (max-width: 768px){
	#spot_services_troubles > .base > h2{
		font-size:24px;
		padding:5px 20px;
		margin:0 20px 10px;
		max-width:unset;
	}
	#spot_services_troubles > .base > ul{ display:block; }
	#spot_services_troubles > .base > ul > li{
		width:auto;
		font-size:18px;
	}
	#spot_services_troubles > .base > p{
		font-size:24px;
		margin-top:10px;
	}
}

/* ご利用の流れ */
#spot_services_flow > .flex > div > h3{
	color:rgb(57,181,74);
	font-size:18px;
	font-weight:bold;
	margin-bottom:4px;
}
#spot_services_flow > .flex > div > h3::before{ content:'●'; }
#spot_services_flow > .flex > div > ol{ counter-reset:numsec; }
#spot_services_flow > .flex > div > ol > li{
	border:1px solid rgb(57,181,74);
	padding:10px 10px 10px 90px;
	font-weight:bold;
	font-size:18px;
	border-radius:10px;
	position:relative;
	position:relative;
	line-height:30px;
	min-height:60px;
}
#spot_services_flow > .flex > div > ol > li:not(:last-child){ margin-bottom:30px; }
#spot_services_flow > .flex > div > ol > li:not(:last-child)::after{
	background:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/interface/icons/flow_arrow.png") scroll no-repeat center top / cover;
	width:80px;
	height:20px;
	content:'';
	display:block;
	margin:auto;
	position:absolute;
	bottom:-20px;
	left:0;
	right:0;
}
#spot_services_flow > .flex > div > ol > li::before{
	content:counter(numsec);
	counter-increment:numsec;
	background:rgb(57,181,74);
	width:60px;
	height:60px;
	text-align:center;
	line-height:60px;
	font-size:26px;
	color:white;
	font-weight:bold;
	display:inline-block;
	border-radius:30px;
	position:absolute;
	left:20px;
}

/* ビフォーアフター */
#spot_services_beforeafter > figure{
	position:relative;
}
#spot_services_beforeafter > figure::before{
	content:'';
	display:block;
	position:absolute;
	top:-10px;
	left:-10px;
	width:60px;
	height:60px;
	background:scroll no-repeat center center / cover;
}
#spot_services_beforeafter > figure:first-child::before{ background-image:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/interface/icons/works_before.png"); }
#spot_services_beforeafter > figure:last-child::before{ background-image:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/interface/icons/works_after.png"); }

/**
 * スポット：料金シミュレーター
----------------------------------------------------------------*/
#simulator{ counter-reset:numsec; }

/* 設問 */
#simulator .question{
	display:block;
	text-align:center;
}
#simulator .question.disabled{ display:none; }
/* #simulator .question.disabled{ opacity:.5; } */
#simulator .question > h3{
	background:rgb(57,181,74);
	color:white;
	font-size:18px;
	line-height:30px;
	font-weight:bold;
	padding:10px 20px;
	position:relative;
	text-align:justify;
}
#simulator .question > h3::before{
	content:counter(numsec);
	counter-increment:numsec;
	color:rgb(57,181,74);
	width:30px;
	height:30px;
	text-align:center;
	line-height:30px;
	font-size:16px;
	background:white;
	font-weight:bold;
	display:inline-block;
	border-radius:15px;
	margin-right:10px;
}
#simulator .question > .flex{ align-items:stretch; }

/* ラジオボタン */
.radio > input{ display:none; }
.radio > span{
	border-radius:8px;
	border:2px solid rgb(57,181,74);
	color:rgb(57,181,74);
	font-size:28px;
	padding:10px;
	text-align:center;
	font-weight:bold;
	display:block;
	transition:background .2s, border-color .2s, box-shadow .2s;
	cursor:pointer;
	box-sizing:border-box;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	background:white;
}
.radio > span > span{
	font-size:16px;
	display:block;
}
.radio > span > small{
	font-size:14px;
	display:block;
	background:rgb(57,181,74);
	color:white;
	padding:4px 10px;
	border-radius:15px;
	max-width:140px;
	margin:0 auto;
	line-height:1.4;
}
.radio > input:checked + span{ background:rgb(215,240,218); }
.radio > span.hover{
	border-color:rgb(-42,144,-17);
	background:rgb(235,247,236);
	box-shadow:0 0 15px rgba(57,181,74,0.3);
}
.radio > input:disabled + span{
	opacity:.5;
	cursor:not-allowed;
}
.radio > input:disabled + span.hover{
	border-color:inherit;
	background:inherit;
	box-shadow:none;
}
.radio > input:disabled:checked + span{ background:rgb(215,240,218); }
@media screen and (max-width: 1024px){
	.radio > span{ font-size:18px; }
}
@media screen and (max-width: 768px){
	#simulator .question > h3{ font-size:16px; }
	.radio > span{
		font-size:16px;
		padding:10px 5px;
		border-width:1px;
	}
	.radio > span > span{ font-size:14px; }
	.radio > span > small > small{ display:block; }
}

/* 対象選択ボタン */
.q_service > .flex > .radio > span{
	padding:0;
	border:none;
}
.q_service > .flex > .radio > span.hover{ box-shadow:none; }
.q_service > .flex > .radio > span.pink{ background:rgb(252,239,242); }
.q_service > .flex > .radio > span.lime{ background:rgb(247,249,218); }
.q_service > .flex > .radio > span.pink.hover{ background:rgb(249,216,224); }
.q_service > .flex > .radio > span.lime.hover{ background:rgb(236,240,164); }
.q_service > .flex > .radio > input:checked + span.pink{ box-shadow:0 0 10px 4px rgb(243,178,193); }
.q_service > .flex > .radio > input:checked + span.lime{ box-shadow:0 0 10px 4px rgb(217,225,74); }

/* タブ */
#simulator > .tabs > section{ display:none; }
#simulator > .tabs > section.active{ display:block; }

/* ポップアップ */
.popup{
	margin:20px;
	background:white;
	box-shadow:0 0 40px rgb(0,0,0,.2);
	border-radius:20px;
	max-width:600px;
	position:fixed;
	bottom:0;
	right:0;
	z-index:100000;
}
.popup:not(.active){
	position:relative;
	bottom:auto;
	right:auto;
	margin:0 auto;
}
.popup > .close{
	border:0;
	background:white;
	width:40px;
	height:40px;
	position:absolute;
	right:-10px;
	top:-10px;
	border-radius:50%;
	transition:background .2s;
	box-shadow:0 0 6px rgba(0,0,0,.2);
}
.popup:not(.active) > .close{ display:none; }
.popup > .close.hover{ background:rgb(235,247,236); }
.popup > h3{
	position:relative;
	font-size:20px;
	font-weight:bold;
	background:rgb(57,181,74);
	color:white;
	padding:10px 20px 10px 80px;
	border-radius:20px 20px 0 0;
	line-height:1.2;
}
.popup > h3 > small{
	font-size:14px;
	display:block;
}
.popup > h3::before{
	background:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/interface/icons/calc.png") scroll no-repeat center center / cover;
	width:50px;
	height:70px;
	content:'';
	position:absolute;
	top:-16px;
	left:20px;
}
.popup > div{ padding:20px; }
.popup hr{
	border-bottom:1px solid #ccc;
	margin:10px 0;
}
.popup dl{
	display:flex;
	justify-content:space-between;
	font-size:16px;
}
.popup dl > dd{
	text-align:right;
	font-weight:bold;
	padding-left:1em;
}
.popup dl > dd.total{
	text-align:right;
	font-weight:bold;
	color:rgb(57,181,74);
	font-size:24px;
}
.popup dl > dd > small{ font-size:16px; }
@media screen and (max-width: 768px){
	.popup{
		max-width:none;
		bottom:0;
		margin:0;
		width:100%;
		border-radius:0;
		line-height:1.5;
		box-shadow:0 0 8px 2px rgba(0,0,0,.5);
	}
	.popup:not(.active){
		margin:20px;
		width:calc(100% - 40px);
		box-shadow:none;
		line-height:inherit;
	}
	.popup > .close{
		top:-7px;
		right:10px;
	}
	.popup.active > h3{
		font-size:14px;
		padding:5px 10px 5px 40px;
		border-radius:0;
	}
	.popup.active > h3 > small{ display:none; }
	.popup.active > h3::before{
		width:25px;
		height:35px;
		top:-10px;
		left:10px;
	}
	.popup > div{ padding:10px; }
	.popup:not(.active) > div{
		border:1px solid rgb(57,181,74);
		border-radius:0 0 20px 20px;
	}
	.popup hr{ margin:5px 0; }
	.popup dl{ font-size:12px; }
	.popup dl > dd.total{ font-size:16px; }
	.popup dl > dd > small{ font-size:12px; }
}

/**
 * スポット：お問い合わせフォーム
----------------------------------------------------------------*/
#contactform table{ width:100%; }
#contactform table th,
#contactform table td{ padding:10px 0; }
#contactform table th{
	vertical-align:top;
	min-width:130px;
	padding-right:10px;
}
#contactform table tr > th::before{
	content:'任意';
	background:rgb(215,240,218);
	color:white;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	margin-right:10px;
	padding:4px 10px;
	vertical-align:middle;
}
#contactform table tr.req > th::before{
	content:'必須';
	background:rgb(57,181,74);
}
#contactform [type="submit"]{
	display:inline-block;
	font-size:20px;
	line-height:30px;
	padding:15px 30px;
	color:white;
	margin:10px;
	transition:background .2s;
	box-sizing:border-box;
	position:relative;
	min-width:300px;
	background:rgb(57,181,74);
	border-radius:30px;
	font-weight:bold;
	vertical-align:middle;
	border:none;
}
#contactform [type="submit"]:hover{
	background:rgb(217,225,74);
	border:none;
}
#contactform .uploads{ display:flex; }
#contactform .uploadbutton{
	width:calc((100% - 20px) / 3);
	border:2px solid rgb(57,181,74);
	border-radius:10px;
	color:rgb(57,181,74);
	background:rgb(215,240,218);
	text-align:center;
	box-sizing:border-box;
	font-weight:bold;
	font-size:14px;
	padding:10px;
	line-height:1.5;
	transition:background .2s;
	cursor:pointer;
	word-break:break-all;
}
#contactform .uploadbutton > small{ font-size:inherit; }
#contactform .uploadbutton:not(:first-child){ margin-left:20px; }
#contactform .uploadbutton::before{
	content:'';
	background:url("https://sakura-denki12.com/wp-content/themes/sakuradenki/image/interface/icons/upload.png") scroll no-repeat center center / cover;
	width:40px;
	height:40px;
	display:block;
	margin:0 auto;
	padding:10px;
}
#contactform .uploadbutton:hover{ background:white; }
#contactform .uploadbutton input[type="file"]{ display:none; }
@media screen and (max-width: 768px){
	#contactform table,
	#contactform table tbody,
	#contactform table tr,
	#contactform table th,
	#contactform table td{ display:block; }
	#contactform table th{ padding:10px 0 0; }
	#contactform [type="submit"]{
		font-size:16px;
		line-height:30px;
		padding:10px 50px;
		min-width:0;
	}
}
@media screen and (max-width: 640px){
	#contactform [type="submit"]{ width:auto; }
	#contactform .uploads{ display:block; }
	#contactform .uploadbutton{ width:auto; }
	#contactform .uploadbutton:not(:first-child){
		margin-left:0;
	}
}

/**
 * 投稿コンテンツ
----------------------------------------------------------------*/
#post{ padding-bottom:80px; }
#post > *{
	max-width:1024px;
	margin:0 auto;
}
#post .wp-block-columns{
	padding:40px 20px;
	box-sizing:border-box;
}
#post_post{
	padding:20px;
}
#post_post h2{
	font-size:30px;
	padding-top:20px;
}
#post_post h3{
	font-size:16px;
	padding-top:10px;
	font-weight:bold;
	color:rgb(57,181,74);
}
#post_post table tr > td:first-child{ min-width:120px; }
#post_post table tr > td{ padding:10px; }
@media screen and (max-width: 768px){
	#post_post h2{ font-size:18px; }
}

/**
 * ContactFormカスタマイズ
----------------------------------------------------------------*/
/* メッセージ：成功時 */
.wpcf7 form.sent .wpcf7-response-output{
	background:#d5edda;
	color:#185626;
	border:1px solid #c4e5cc !important;
	padding:10px
}

/* メッセージ：失敗時 */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{
	background:#f7d7da;
	color:#711d26;
	border:1px solid #f4c6cb !important;
	padding:10px
}

/* 個別：エラー文 */
.wpcf7-not-valid-tip{
	color:red !important;
	margin-top:5px;
	font-size:12px !important;
}

span.wpcf7-form-control,
span.wpcf7-list-item{ display:block !important; }
span.wpcf7-spinner{
	display:block !important;
	text-align:center;
}

/**
 * フォーム
----------------------------------------------------------------*/
.richform{ font-size:18px; }
@media screen and (max-width: 768px){
	.richform{ font-size:16px; }
}
.richform label{ display:block; }
.richform .buttons br{ display:none; }
.richform select{
	border:1px solid var(--gray);
	padding:.4em .5em;
	border-radius:var(--border-radius);
	font-size:18px;
	width:100%;
}
.frame{
	border-radius:.3em;
	background:#f5f5f5;
	font-size:12px;
	padding:10px;
	border:1px solid #ccc;
	height:200px;
	overflow-y:scroll;
	-webkit-overflow-scrolling:touch;
}