/* 共通 */
#main {
	margin-top: 0px;
}

/*  */
:root {
	--blue100: #186ADF;
	--blue50: #62AAFF;
	--blue30: #A0D7FF;
	/*  */
	--gray100: #D9CDB6;
	--gray70: #EAE6DD;
	--gray50: #F5F5F5;
	/*  */
	--green: #00B900;
	--yellow: #FFBC39;
	--orange: #FF6636;
	--red: #FF3E3E;
	--pink: #ff598d;
	--purple: #ae6fff;
	--white: #fff;
	--black: #353535;

	/* ------------------- */

	--bg-white: var(--white);
	--bg-gray: var(--gray70);
	--bg-blue: var(--blue100);
	--bg-orange: var(--orange);
	--bg-yellow: var(--yellow);
	--bg-green: var(--green);

	/* ------------------- */

	--text-black: var(--black);
	--text-white: var(--white);
	--text-blue: var(--blue100);
	--text-red: var(--red);
	--text-pink: var(--pink);
	--text-purple: var(--purple);
	--text-green: var(--green);
	--text-orange: var(--orange);
	--text-yellow: var(--yellow);

	/* ------------------- */

	--border-black: var(--black);
	--border-gray: var(--gray100);
	--border-blue: var(--blue100);
	--border-orange: var(--orange);
	--border-white: var(--white);
	--border-yellow: var(--yellow);
}

/* svg */
.svg-icon {
	fill: #353535;
	stroke-miterlimit: 10;
	stroke-width: 6px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.svg-s {
	width: 1em;
	height: 1em;
}

.svg-m {
	width: 2em;
	height: 2em;
}

.svg-l {
	width: 5em;
	height: 5em;
}

.svg-white {
	fill: var(--white);
}

.svg-blue {
	fill: var(--blue100);
}

.svg-orange {
	fill: var(--orange);
}

.svg-red {
	fill: var(--red);
}

.svg-yellow {
	fill: var(--yellow);
}

.stroke-white {
	fill: transparent;
	stroke: var(--white);
}

.stroke-blue {
	fill: transparent;
    stroke: var(--blue100);
}

.svg-padding {
	padding: .2rem;
}
.bg-blue {
	background: var(--blue100);
	border-radius: 50%;
}

.bg-white {
	background: var(--bg-white);
	border-radius: 50%;
}

.bg-yellow {
	background: var(--bg-yellow);
	border-radius: 50%;
}

.bg-orange {
	background: var(--bg-orange);
	border-radius: 50%;
}

.bg-gray {
	background: var(--bg-gray);
	border-radius: 50%;
}

/* bread -------------*/

.bread-box {
	background: var(--bg-gray);
	color: var(--text-black);
}

.bread-list {
	color: unset;
}

.bread-list a {
	text-decoration: none;
}


/* header */
header {
	height: 80px;
}

.header-inner {
	display: flex;
	justify-content: space-between;
	/*  */
	max-width: 1200px;
	margin: auto;
}

.header-inner__logo {
	height: 80px;
}

.header-inner__logo-img {
	width: 173px;
	height: 80px;
	object-fit: contain;
}

.header-inner__menu {
	height: 80px;
	background: var(--bg-blue);
}

.header-inner__menu-img {
	width: 80px;
	height: 80px;
}

/*  */

.head-fix-nav {
	position: fixed;
	top: 80px;
	left: 0;
	right: 0;
	height: 100%;
	z-index: 9999;
	/*  */
	background: var(--bg-white);
	/*  */
	display: none;
	opacity: 0;
	transition: .3s;
}

.head-fix-nav__inner {
	width: 100%;
	max-width: 600px;
	padding: 1rem;
	margin: auto;
}

.head-fix-nav__item {
	margin-bottom: 1rem;
}

.text-nav {}

.text-nav__item {
	border-bottom: 1px solid var(--border-gray);
}

.text-nav__link {
	position: relative;
	/*  */
	display: flex;
	align-items: center;
	justify-content: center;
	/*  */
	width: 100%;
	padding: .8rem;
	/*  */
	font-weight: bold;
	color: var(--text-blue);
}

.text-nav__icon {
	position: absolute;
}

.text-nav__icon_left {
	left: 0;
	transform: rotate(90deg);
}

.text-nav__icon_right {
	right: 0;
	transform: rotate(-90deg);
}

/*  */

.box-nav {
	display: flex;
	gap: 1rem;
}

.box-nav__item {
	flex: 1 1 100%;
	border-radius: 16px;
}

.box-nav__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	/*  */
	padding: 1rem;
	width: 100%;
	aspect-ratio: 3/2;
}

.box-nav__text {
	color: var(--text-white);
}

.box-nav__search {
	background: var(--bg-blue);
}

.box-nav__contact {
	background: var(--bg-yellow);
}

.box-nav__estimate {
	background: var(--bg-orange);
}

/*  */

.button-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.button-nav__item {
	flex: 1 0 40%;
}

.button-nav__link {
	position: relative;
	/*  */
	display: flex;
	align-items: center;
	justify-content: center;
	/*  */
	height: 4rem;
	width: 100%;
	padding: .5rem;
	/*  */
	border-radius: 2rem;
	/*  */
	font-weight: bold;
	/*  */
	background: var(--bg-blue);
	color: var(--text-white);

}

.button-nav__icon-right {
	position: absolute;
	right: 1rem;
	transform: rotate(-90deg);
}