@charset "UTF-8";
/* CSS Document */

/*===============================================================

	root

===============================================================*/

:root {
	--margin: 30px;
	--margin-xs: 10px;
	--margin-s: calc(var(--margin) / 2);
	--margin-l: calc(var(--margin) * 2);
	--margin-section: calc(var(--margin) * 2);
	--aside: 200px;
	--contents-width: calc(1060px + var(--margin) * 2);
	--contents-width-s: calc(880px + var(--margin) * 2);
	--contents-width-xs: calc(660px + var(--margin) * 2);
	--font-xxl: 3rem;
	/* heading1 */
	--font-xl: 2.44rem;
	/* heading2 */
	--font-l: 1.75rem;
	/* heading3 */
	--font-m: 1.33rem;
	/* heading4 */
	--font-s: .85rem;
	--font-xs: 12px;
	--font-lead: 1.11rem;
	--font-caption: var(--font-s);
	--font-caption-s: .75rem;

}

@media (max-width: 768px) {
	:root {
		--margin: 20px;
		--aside: 100%;
		--margin-section: calc(var(--margin) * 3);
		--font-l: 1.57rem;
		--font-xl: 2rem;
	}
}


/*===============================================================

	basic DOM

===============================================================*/

body,
html {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.8;
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	letter-spacing: .1em;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

div {
	margin-left: auto;
	margin-right: auto;
}

p {
	text-align: left;
	margin-top: 0;
	margin-bottom: 0;
}


img {
	/* width: 100%; */
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: bottom;
	display: inline-block;
}

a {
	text-decoration: none;
	color: #000;
}

a:focus,
a:hover {
	opacity: 0.5;
}

h2,
h3,
h4 {
	margin: 0;
}

button {
	border: none;
	background: none;
}

.contents_width {
	max-width: 1200px;
	margin: 0 auto;
}

.contents_inner {
	margin: 0 50px;
}

.pc-only {
	display: block;
}

.sp-only {
	display: none;
}

.pc-br {
	display: block;

}

.sp-br {
	display: none;
}



@media screen and (max-width: 1200px) {
	.contents_width {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.contents_inner {
		margin: 0;
	}
}

@media screen and (max-width: 500px) {
	body {
		font-size: 14px;
	}

	.pc-br {
		display: none;
	}

	.sp-br {
		display: block;
	}

	.view-pc {
		display: none !important;
	}

	.pc-only {
		display: none;
	}

	.sp-only {
		display: block;
	}
}

@media screen and (min-width: 501px) {
	.view-sp {
		display: none !important;
	}
}

/*===============================================================

	リスト

===============================================================*/

ol,
ul {
	padding: 0;
	list-style: none;
}

li {
	text-align: left;
	position: relative;
}



/*===============================================================

	split block

===============================================================*/

.gcol {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	gap: var(--margin);
	justify-content: flex-start;
	align-items: stretch;
}

*+.gcol {
	margin-top: var(--margin);
}

.gcol .col {
	width: 100%;
	margin: 0 !important;
	display: block;
	position: relative;
	list-style: none;
	box-sizing: border-box;
}

.gcol .col> :first-child {
	margin-top: 0 !important;
}

.gcol .col> :last-child {
	margin-bottom: 0 !important;
}

.gcol.align-left {
	justify-content: flex-start;
}

.gcol.valign-top {
	align-items: top;
}

.gcol.valign-middle {
	align-items: center;
}

.gcol.valign-bottom {
	align-items: flex-end;
}


/*---------------------------------------------------------------
	split spacing
---------------------------------------------------------------*/

.gcol.space-none {
	gap: 0;
}

.gcol.space-xs {
	gap: var(--margin-xs);
}

.gcol.space-s {
	gap: var(--margin-s);
}

.gcol.space-l {
	gap: var(--margin-l);
}


/*---------------------------------------------------------------
	split col size
---------------------------------------------------------------*/


/*  sprit 2
---------------------------------------------------------------*/

.gcol.split-2>.col {
	width: calc((100% - var(--margin))/2);
}

.gcol.split-2.space-none>.col {
	width: calc(100%/2);
}

.gcol.split-2.space-xs>.col {
	width: calc((100% - var(--margin-xs))/2);
}

.gcol.split-2.space-s>.col {
	width: calc((100% - var(--margin-s))/2);
}

.gcol.split-2.space-l>.col {
	width: calc((100% - var(--margin-l))/2);
}


/*  sprit 3
---------------------------------------------------------------*/

.gcol.split-3>.col {
	width: calc((100% - var(--margin)*2)/3);
}

.gcol.split-3.space-none>.col {
	width: calc(100%/3);
}

.gcol.split-3.space-xs>.col {
	width: calc((100% - var(--margin-xs)*2)/3);
}

.gcol.split-3.space-s>.col {
	width: calc((100% - var(--margin-s)*2)/3);
}

.gcol.split-3.space-l>.col {
	width: calc((100% - var(--margin-l)*2)/3);
}


/*  sprit 4
---------------------------------------------------------------*/

.gcol.split-4>.col {
	width: calc((100% - var(--margin)*3)/4);
}

.gcol.split-4.space-none>.col {
	width: calc(100%/4);
}

.gcol.split-4.space-xs>.col {
	width: calc((100% - var(--margin-xs)*3)/4);
}

.gcol.split-4.space-s>.col {
	width: calc((100% - var(--margin-s)*3)/4);
}

.gcol.split-4.space-l>.col {
	width: calc((100% - var(--margin-l)*3)/4);
}


/*  sprit 5
---------------------------------------------------------------*/

.gcol.split-5>.col {
	width: calc((100% - var(--margin)*4)/5);
}

.gcol.split-5.space-none>.col {
	width: calc(100%/5);
}

.gcol.split-5.space-xs>.col {
	width: calc((100% - var(--margin-xs)*4)/5);
}

.gcol.split-5.space-s>.col {
	width: calc((100% - var(--margin-s)*4)/5);
}

.gcol.split-5.space-l>.col {
	width: calc((100% - var(--margin-l)*4)/5);
}


/*  sprit 6
---------------------------------------------------------------*/

.gcol.split-6>.col {
	width: calc((100% - var(--margin)*5)/6);
}

.gcol.split-6.space-none>.col {
	width: calc(100%/6);
}

.gcol.split-6.space-xs>.col {
	width: calc((100% - var(--margin-xs)*5)/6);
}


.gcol.split-6.space-s>.col {
	width: calc((100% - var(--margin-s)*5)/6);
}

.gcol.split-6.space-l>.col {
	width: calc((100% - var(--margin-l)*5)/6);
}


/*  diff
---------------------------------------------------------------*/

[class*=" split-diff"].gcol>.col {
	width: calc(60% - var(--margin));
}

.gcol.split-diff-left> :nth-child(2n-1),
.gcol.split-diff-right> :nth-child(2n) {
	width: 40% !important;
}

[class*=" split-diff"].gcol.space-none>.col {
	width: 60%;
}

[class*=" split-diff"].gcol.space-xs>.col {
	width: calc(60% - var(--margin-xs));
}

[class*=" split-diff"].gcol.space-s>.col {
	width: calc(60% - var(--margin-s));
}

[class*=" split-diff"].gcol.space-l>.col {
	width: calc(60% - var(--margin-l));
}


/*---------------------------------------------------------------
	responsive
---------------------------------------------------------------*/

@media (max-width: 768px) {

	.gcol {
		gap: var(--margin) !important;
		justify-content: flex-start;
	}

	.gcol.space-none {
		gap: 0 !important;
	}

	.gcol.reverse {
		flex-direction: column-reverse;
	}

	.gcol:not([class*=" hold"])>.col {
		width: 100% !important;
	}

	/*  hold 2
  ---------------------------------------------------------------*/

	.gcol.hold-2>.col {
		width: calc((100% - var(--margin))/2) !important;
	}

	.gcol.hold-2.space-none>.col {
		width: calc(100%/2) !important;
	}

	.gcol.split-2.space-xs>.col {
		width: calc((100% - var(--margin-xs))/2) !important;
	}

	.gcol.hold-2.space-s>.col {
		width: calc((100% - var(--margin-s))/2) !important;
	}

	.gcol.hold-2.space-l>.col {
		width: calc((100% - var(--margin-l))/2) !important;
	}


	/*  hold 3
  ---------------------------------------------------------------*/

	.gcol.hold-3>.col {
		width: calc((100% - var(--margin)*2)/3) !important;
	}

	.gcol.hold-3.space-none>.col {
		width: calc(100%/3) !important;
	}

	.gcol.hold-3.space-xs>.col {
		width: calc((100% - var(--margin-xs)*2)/3) !important;
	}

	.gcol.hold-3.space-s>.col {
		width: calc((100% - var(--margin-s)*2)/3) !important;
	}

	.gcol.hold-3.space-l>.col {
		width: calc((100% - var(--margin-l)*2)/3) !important;
	}


	/*  hold 4
  ---------------------------------------------------------------*/

	.gcol.hold-4>.col {
		width: calc((100% - var(--margin)*3)/4) !important;
	}

	.gcol.hold-4.space-none>.col {
		width: calc(100%/4) !important;
	}

	.gcol.hold-4.space-xs>.col {
		width: calc((100% - var(--margin-xs)*3)/4) !important;
	}

	.gcol.hold-4.space-s>.col {
		width: calc((100% - var(--margin-s)*3)/4) !important;
	}

	.gcol.hold-4.space-l>.col {
		width: calc((100% - var(--margin-l)*3)/4) !important;
	}


	/*  hold 5
  ---------------------------------------------------------------*/

	.gcol.hold-5>.col {
		width: calc((100% - var(--margin)*4)/5) !important;
	}

	.gcol.hold-5.space-none>.col {
		width: calc(100%/5) !important;
	}

	.gcol.hold-5.space-xs>.col {
		width: calc((100% - var(--margin-xs)*4)/5) !important;
	}

	.gcol.hold-5.space-s>.col {
		width: calc((100% - var(--margin-s)*4)/5) !important;
	}

	.gcol.hold-5.space-l>.col {
		width: calc((100% - var(--margin-l)*4)/5) !important;
	}


	/*  hold 6
  ---------------------------------------------------------------*/

	.gcol.hold-6>.col {
		width: calc((100% - var(--margin)*5)/6) !important;
	}

	.gcol.hold-6.space-none>.col {
		width: calc(100%/6) !important;
	}

	.gcol.hold-6.space-xs>.col {
		width: calc((100% - var(--margin-xs)*5)/6) !important;
	}

	.gcol.hold-6.space-s>.col {
		width: calc((100% - var(--margin-s)*5)/6) !important;
	}

	.gcol.hold-6.space-l>.col {
		width: calc((100% - var(--margin-l)*5)/6) !important;
	}

}




@media screen and (min-width: 500px) {
	header .header__menu_btn {
		display: none;
	}
}




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



	header .header__menu {
		position: fixed;
		right: 0;
		top: 0;
		width: 100%;
		z-index: 99999;
	}

	.header__menu.change-color {
		transition: 0.3s;
		background-color: rgba(255, 255, 255, 0.8);
		height: 60px;
	}


	header .header__menu_btn {
		position: absolute;
		right: 20px;
		top: 20px;
		background: url("../images/menu.png");
		background-size: contain;
		background-repeat: no-repeat;
		width: 30px;
		height: 32px;
		z-index: 99;
	}

	header .header__menu_btn.active {
		background: url("../images/menu-close.png");
		background-repeat: no-repeat;
		background-size: contain;
	}

	header .header__menu__nav {
		width: 100%;
		height: 100%;
		position: fixed;
		background: #fff;
		top: 0;
		left: 0;
		z-index: 98;
		-webkit-overflow-scrolling: touch;
		overflow: scroll;
		overflow-x: hidden;
		overflow-y: auto;
	}

	header .header__menu__nav_inner {
		overflow: scroll;
		overflow-x: hidden;
		overflow-y: auto;
		background: url("../images/main-back.jpg");
		background-size: 50%;
	}

	.menu__logo {
		display: flex;
		padding: 20px;
		margin: 0;
	}

	.menu__logo .duskin__logo {
		display: block;
		width: 20%;
		margin-right: 2rem;
	}

	.menu__logo .repair__logo {
		display: block;
		width: 20%;
	}

	.menu__logo .duskin__logo img,
	.menu__logo .repair__logo img {
		width: 100%;
	}

	.menu-title {
		margin-top: 10vh;
	}

	.menu-title img {
		width: 30%;
		padding-left: 5%;
	}

	.menunav__item li {
		width: 70%;
		margin: 0 auto;
		display: block;
		border-bottom: #fff 3px solid;
		padding: 3%;
	}

	.menunav__item li:last-child {
		border-bottom: none;
		text-align: center;
		margin-top: 30px;
		width: 50px;
		height: 50px;
		background-color: #fff;
		border-radius: 50px;
		position: relative;
	}

	.menunav__item li:last-child img {
		width: 30px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}

	.menunav__item li img {
		width: 15%;
		margin-right: 10%;

	}

	.menunav__item li span {
		width: 60%;
		vertical-align: text-bottom;
	}

}


/*===============================================================

	footer

===============================================================*/

footer nav {
	padding-bottom: 3em;
}

.footer-sublink__inner {
	background: #e1e1e1;
	display: flex;
	font-size: .8em;
	align-items: center;
	padding: 1em 3em;
}

.footer-sublink__inner .footer-duskin__logo {
	margin-right: auto;
}

.footer-sublink__inner .footer-duskin__logo img {
	width: 100px;
}

.footer-sublink__inner a.footer-duskin__logo:after {
	content: none;
}

.footer-sublink__inner a {
	margin-right: 2em;
}

.footer-sublink__inner .copyright {
	margin-left: 5em;
}

.footer-sublink__inner a:after {
	content: url("../images/ico_popwin.gif");
	margin-left: 5px;
	position: relative;
	top: 2px;
}


#page-top {
	display: block;
	transition: 1s;
	position: fixed;
	right: 5vw;
	bottom: 10vh;
	z-index: 9998;
}

#page-top img {
	width: 72px;
}

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

	.footer-sublink__inner {
		background: #fff;
		display: block;
		letter-spacing: -1em;
	}

	.footer-sublink__inner .footer-duskin__logo {
		width: 100%;
		display: block;
		text-align: center;
		padding: 10% 0 7%;
		/* width: 100%;
		text-align: center;
		padding: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none; */
	}

	.footer-sublink__inner .copyright {
		margin-left: 0;
		width: 100%;
		font-size: .5em;
		text-align: center;
		letter-spacing: 0;
		margin-top: 2rem;
	}

	.footer-sublink__inner a {
		width: 50%;
		display: inline-block;
		text-align: center;
		letter-spacing: 0;
		margin-right: 0;
	}


	#page-top {
		right: 3vw;
		bottom: 5vh;
	}

	#page-top img {
		width: 60px;
	}

	.pagetop {
		cursor: pointer;
		position: fixed;
		right: 30px;
		bottom: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		transition: .3s;
		opacity: 0;
	}

	.sp-contact-block {
		display: flex;
		padding: 30px 20% 0 20px;
		gap: 3%;
		height: 10vh;
	}

	.sp-contact-block a {
		background-color: #cf005a;
		border-radius: 25px 25px 0 0;
		font-size: .8em;
		color: #fff;
		width: 100%;
		text-align: center;
	}

	.sp-contact-block a img {
		width: 30%;
		margin: 0 35%;
	}
}