@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/* Noto Sans JP: Thin 100, ExtraLight 200, Light 300, Regular 400, Medium 500, SemiBold 600, Bold 700, ExtraBold 800, Black 900 */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');


/* common start */
:root{
    --site-max-width:100%;
    --site-main-width:100%;
    --site-division:375;
	--site-font-family-Noto-Sans-JP:'Noto Sans JP', sans-serif;
	--site-font-family-Oswald:"Oswald", sans-serif;
    --site-font-size-ratio:calc(100vw / var(--site-division));
}
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    list-style: none;
}
::before,
::after{
    box-sizing: border-box;
}
input, textarea, select {
	outline: none;
}
textarea {
	resize: none;
}
fieldset{
    border: none;
}
img{
	max-width: 100%;
	vertical-align: top;
}
/* common end */


/* -------------------------------base(mobile)↓-------------------------------------- */
body{
	font-family: var(--site-font-family-Noto-Sans-JP);
	max-width: var(--site-max-width);
    margin: auto;
	color: #000000;
}
main{
    max-width: var(--site-main-width);
	margin: auto;
	background-color: #F2F5F7;
}
.is_mobile{
	display: initial !important;
}
.is_desktop{
	display: none !important;
}

/* header start */
header{
	background-color: #ffffff;
	padding: calc(11.28 * var(--site-font-size-ratio)) calc(20 * var(--site-font-size-ratio));
	display: flex;
	flex-direction: row;
	align-items: center;
    justify-content: space-between;
}
header>a>img[src*=logo]{
	width: calc(158.8870849609375 * var(--site-font-size-ratio));
}
header>p{
	font-size: calc(10 * var(--site-font-size-ratio));
	line-height: 150%;
	font-weight: 500;
}
/* header end */

/* footer start */
footer{
	width: calc(322 * var(--site-font-size-ratio));
	margin: calc(calc(4700 - 2371 - 2269) * var(--site-font-size-ratio)) auto 0;
	padding-bottom: calc(calc(4891 - 156.7353515625 - 4700) * var(--site-font-size-ratio));
	text-align: center;
}
footer>img[src*=logo]{
	width: calc(230.1123046875 * var(--site-font-size-ratio));
}
footer>div{
	margin-top: calc(calc(4774.74 - 4700 - 51.367584228515625) * var(--site-font-size-ratio));
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
footer>div>a{
	color: inherit;
	text-decoration: none;
	font-size: calc(14 * var(--site-font-size-ratio));
	line-height: 150%;
	font-weight: 500;
}
footer>small{
	display: block;
	margin-top: calc(calc(4838.74 - 4774.74 - 21) * var(--site-font-size-ratio));
	font-size: calc(12 * var(--site-font-size-ratio));
	line-height: 150%;
	font-weight: 500;
}
/* footer end */

/* common start */
.common-title{
    width: fit-content;
    margin: calc(calc(100 - 60) * var(--site-font-size-ratio)) auto 0;
    display: block;
    text-align: center;
    font-weight: 900;
    font-size: calc(28 * var(--site-font-size-ratio));
    background-image: linear-gradient(to bottom, transparent 0 75%, #FFFB00 75% 100%);
    transform: skewX(-10deg);
}
.common{
    background-color: #ffffff;
	width: calc(335 * var(--site-font-size-ratio));
	margin: calc(calc(186 - 100 - 45.9) * var(--site-font-size-ratio)) auto 0;
    padding: calc(calc(225 - 186) * var(--site-font-size-ratio)) calc(calc(39 - 20) * var(--site-font-size-ratio));
	color: #464646;
}
.common>p{
    margin: calc(calc(320 - 216 - 80) * var(--site-font-size-ratio)) auto calc(calc(405 - 383 - 2) * var(--site-font-size-ratio));
    padding: calc(calc(54 - 39) * var(--site-font-size-ratio)) calc(calc(54 - 39 - 5) * var(--site-font-size-ratio));
    font-weight: 900;
    font-size: calc(18 * var(--site-font-size-ratio));
	border-style: solid;
	border-color: #FF4A4A;
	border-left-width: calc(5 * var(--site-font-size-ratio));
	border-bottom-width: calc(2 * var(--site-font-size-ratio));
	border-right: none;
	border-top: none;
}
.common>div{
    font-weight: 500;
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: 170%;
}
.common>div>span{
    display: block;
    font-weight: 700;
    font-size: calc(18 * var(--site-font-size-ratio));
}
/* common end */

/* popup_wrapper_visible common start */
.popup_wrapper_visible>.popup_content{
	width: calc(335 * var(--site-font-size-ratio));
	background-color: #ffffff;
	padding: calc(calc(212 - 151) * var(--site-font-size-ratio)) calc(20 * var(--site-font-size-ratio));
	position: relative;
}
.popup_wrapper_visible>.popup_content>.popupoverlay_close{
	position: absolute;
	width: calc(25 * var(--site-font-size-ratio));
	left: calc(calc(312 - 20) * var(--site-font-size-ratio));
	top: calc(calc(168 - 151) * var(--site-font-size-ratio));
}
/* popup_wrapper_visible common end */

/* work_detail start */
.work_detail{
	background-color: #ffffff;
}
/* work_detail end */
/* -------------------------------base(mobile)↑-------------------------------------- */


/* -----------------desktop(include ipad)↓-------------------- */
@media screen and (min-width: 768px){
    :root{
        --site-division: 1440;
    }
	.is_mobile{
		display: none !important;
	}
	.is_desktop{
		display: initial !important;
	}

	/* header start */
	header{
		padding: calc(20 * var(--site-font-size-ratio)) calc(99 * var(--site-font-size-ratio));
	}
	header>a>img[src*=logo]{
		width: calc(223.8046875 * var(--site-font-size-ratio));
	}
	header>p{
		font-size: calc(14 * var(--site-font-size-ratio));
	}
	/* header end */

	/* footer start */
	footer{
		width: calc(871 * var(--site-font-size-ratio));
		margin: calc(calc(4262.24 - 2093 - 2122) * var(--site-font-size-ratio)) auto 0;
		padding-bottom: calc(calc(4485 - 4262.24 - 184.80810546875) * var(--site-font-size-ratio));
	}
	footer>img[src*=logo]{
		width: calc(302.5489501953125 * var(--site-font-size-ratio));
	}
	footer>div{
		margin-top: calc(calc(4375.05 - 4262.24 - 67.51317596435547) * var(--site-font-size-ratio));
		justify-content: center;
		gap: calc(40 * var(--site-font-size-ratio));
	}
	footer>div>a{
		font-size: calc(16 * var(--site-font-size-ratio));
	}
	footer>small{
		margin-top: calc(calc(4429.05 - 4375.05 - 24) * var(--site-font-size-ratio));
	}
	/* footer end */

	/* common start */
	.common-title{
		margin: calc(calc(170 - 90) * var(--site-font-size-ratio)) auto 0;
		font-size: calc(34 * var(--site-font-size-ratio));
	}
	.common{
		width: calc(1000 * var(--site-font-size-ratio));
		margin: calc(calc(264 - 210 - 14) * var(--site-font-size-ratio)) auto 0;
		padding: calc(calc(304 - 264) * var(--site-font-size-ratio)) calc(calc(304 - 264) * var(--site-font-size-ratio));
	}
	.common>p{
		margin: calc(calc(392 - 304 - 54) * var(--site-font-size-ratio)) auto calc(calc(405 - 383 - 2) * var(--site-font-size-ratio));
		padding: calc(calc(397 - 392) * var(--site-font-size-ratio)) calc(calc(275 - 260 - 6) * var(--site-font-size-ratio));
		font-size: calc(20 * var(--site-font-size-ratio));
		border-left-width: calc(6 * var(--site-font-size-ratio));
	}
	/* common end */

	/* popup_wrapper_visible common start */
	.popup_wrapper_visible>.popup_content{
		width: calc(1000 * var(--site-font-size-ratio));
		padding: calc(calc(342 - 252) * var(--site-font-size-ratio)) calc(calc(413 - 220) * var(--site-font-size-ratio));
	}
	.popup_wrapper_visible>.popup_content>.popupoverlay_close{
		width: calc(30 * var(--site-font-size-ratio));
		left: calc(calc(1157 - 220) * var(--site-font-size-ratio));
		top: calc(calc(279 - 252) * var(--site-font-size-ratio));
		cursor: pointer;
	}
	.popup_wrapper_visible>.popup_content>a{
		cursor: pointer;
	}
	/* popup_wrapper_visible common end */
}

@media screen and (min-width: 1440px){
    :root{
        --site-max-width: 1960px;
        --site-main-width: 1960px;
        --site-font-size-ratio:1px;
    }
}
/* -----------------desktop(include ipad)↑-------------------- */