@charset "utf-8";

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	Color

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

body{
	background-color: var(--background);
	}

#menu{
	background-color: var(--menu_lv1);
	}

#contents{
	background-color: #fff;
	}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	Breadcrumb

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	
#contents .block.breadcrumb{
	display:-webkit-flex;
	display:flex;
	flex-wrap:wrap;
	font-size:var(--font_size);
}

#contents .block.breadcrumb li:not(:first-child){
	position:relative;
	padding-left:calc(1em + 4px);
}

#contents .block.breadcrumb li:not(:first-child)::before{
	content:"";
	position:absolute;
	top:0.5em;
	left:0.5em;
	width: 0;
	height: 0;
	border-left:4px solid var(--orange);
	border-top:4px solid transparent;
	border-bottom:4px solid transparent;
}

#contents .block.breadcrumb li a{
	display:inline-block;
	text-decoration:none;

}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	h1

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

#contents h1{
	display:-webkit-flex;
	display:flex;
	flex-flow:column;
	gap:5px;
	font-weight:normal;
}

#contents h1 span:first-child{
	font-size:1.6em;
}

#contents h1 span:last-child{
	font-size:2.4em;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	h2

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

#contents .company h2,
#contents .service h2{
	font-size:1.8em;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	h3

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.popup_wrapper .inner h3,
#contents .company h3,
#contents .service h3{
	font-size:var(--pc_font_size);
	line-height: 1.8em;
}

.popup_wrapper .inner h3,
#contents .company h3,
#contents .service.description h3,
#contents .service .example h3,
#contents .service.price h3{
	position:relative;
	padding-left:calc(1em + 5px);
}

.popup_wrapper .inner h3::before,
#contents .company h3::before,
#contents .service.description h3::before,
#contents .service .example h3::before,
#contents .service.price h3::before{
	content:"";
	position:absolute;
	top:calc(0.4em);
	left:0;
	width:1em;
	height:1em;
	background:var(--orange);
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	p

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

#contents p{
	font-size:var(--pc_font_size);
	line-height: 1.8em;
}
/*
#contents .top p,
#contents .company p,
#contents .service p{
	font-size:var(--pc_font_size);
	line-height: 1.8em;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	Anchor

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

#contents a{
	text-decoration:none;
	transition:all 0.2s;
}

#contents a:link,
#contents a:visited{
	color:#192bc2;
}

#contents a:hover,
#contents a:active{
	color:var(--orange);
}

#contents a.link{
	padding-right:1em;
	text-decoration:none;
	background-image:url(/contents/image/link.png);
	background-size:10px;
	background-position:top right;
	background-repeat:no-repeat;
}

#contents a.button{
	color:#fff;
	background:#555;
}

#contents a.button:hover{
	color:#fff;
	background:var(--orange);
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	Popup

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.popup_wrapper{
	position:fixed;
	width:100dvw;
	height:100dvh;
}

.popup_wrapper .outer{
	display:-webkit-flex;
    display:flex;
	-webkit-justify-content:center;
	justify-content:center;
	/*
	-webkit-align-items:center;
	align-items:center;
	*/
	width:100%;
	height:100%;
	overflow-y:scroll;
	overscroll-behavior-y:contain;
	background:rgba(0, 0, 0, 0.8);
	cursor:pointer;
}

.popup_wrapper .inner{
	padding:20px;
	background:#fff;
}

.popup_wrapper .inner h2{
	position:relative;
	padding:5px 5px;
	font-size:1.8em;
	font-weight:normal;
	border-bottom:#bad3eb 3px solid;
}

.popup_wrapper .inner h2::before{
	content:"";
	position:absolute;
	bottom:-3px;
	left:0;
	width:30%;
	border-bottom:var(--orange) 3px solid;
}

.popup_wrapper .inner h3{
	margin-top:30px;
	font-size:1.5em;
}

.popup_wrapper .inner p{
	font-size:var(--pc_font_size);
}

.popup_wrapper .inner > *:not(h2):not(h3){
	margin-top:20px;
}

/*──────────────────┐

	PC

└──────────────────*/

@media screen and (min-width:671px){
	
	.popup_wrapper .inner{
		margin-top:50px;
		margin-bottom:50px;
	}

}/* @media */

/*──────────────────┐

	Mobile

└──────────────────*/

@media screen and (max-width:670px){

	.popup_wrapper .inner{
		margin-top:30px;
		margin-bottom:30px;
	}

}/* @media */