@charset "utf-8";
/* ====================================================================

	Default
	
==================================================================== */
/** オブジェクト用 */
:root {
	--ice: #f0f5fc;
	--sky: #079ff0;
	--blue: #0058CE;
	--cobalt: #4458b2;
	--ink: #1C2548;
	--gold: #ecdf14;
	--red: #de0000;

	--text: var(--black, black);
	--border: var(--gray, lightgray);
	--base: var(--ice, white);
	--accent: var(--gold, orange);
	--action: var(--blue, blue);
	--alert: var(--red, red);

	--hover-color: var(--sky);

	--b: 1600;
	--px: clamp(0.75px, (100vw / var(--b)), 1px);
	
	--m: calc(20 * var(--px));
    --m2: calc( var(--m) * 2 );
    --m3: calc( var(--m) * 3 );
    --m4: calc( var(--m) * 4 );
    --m5: calc( var(--m) * 5 );
    --m6: calc( var(--m) * 6 );
    --m7: calc( var(--m) * 7 );
    --m8: calc( var(--m) * 8 );
    --m9: calc( var(--m) * 9 );
    --m10: calc( var(--m) * 10 );
    --ms: calc( var(--m) / 3 * 2 );

    --main-width: 1280px;
	--wrap-padding-inline: var(--m2);
    --header-height: calc(84 * var(--px));

	--extra-size: calc(44 * var(--px));
	--large-size: calc(32 * var(--px));
	--medium-size: calc(27 * var(--px));
	--regular-size: calc(16 * var(--px));
	--small-size: calc(12 * var(--px));

	--transition: 0.3s 0s ease;
}

@media screen and (max-width: 767px) {
	:root {
		--b: 375;
		--px: clamp(0.75px, (100vw / var(--b) * 100), 1px);

		--m: calc(15 * var(--px));

        --main-width: 100%;
		--wrap-padding-inline: var(--m);
		--header-height: calc(60 * var(--px));

		--extra-size: calc(27 * var(--px));
		--large-size: calc(23 * var(--px));
		--medium-size: calc(20 * var(--px));
		--regular-size: calc(15 * var(--px));
		--small-size: calc(11 * var(--px));
	}
}


html {
	-webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
	scroll-behavior: smooth;
}


body {
	width: 100svw;
	background: var(--ice);
	overflow-x: clip;
	position: relative;

	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;/* medium:500, bold:700, */
	font-style: normal;

	font-size: var(--regular-size);
	color: var(--text);
	line-height: 1.75;
	letter-spacing: 0.1ic;
}

img[src*="/logo.png"] {
	width: auto;
	height: 48px;
	aspect-ratio: 552 / 160;
}
img[src*="/logo_pdb_company.png"] {
	aspect-ratio: 512 / 96;
}



/** 疑似要素   
-------------------------------------------------------------------- */
* {
	box-sizing: border-box;
}
*::before,
*::after {
	content: "";
	display: none;
	box-sizing: border-box;
}


/** テキスト   
-------------------------------------------------------------------- */
:is(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
}
p + p:not([class]) {
    margin-top: 1lh;
}
strong {
    font-weight: 700;
}
ul, ol {
	margin-block: 0.75lh;
}
ol {
	list-style: decimal;
	padding-inline-start: 1.5ic;
}
dt {
    font-weight: 400;
}
@media screen and (max-width: 767px) {
	p {
		text-align: left;
	}
}


/** 改行   
-------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	br:is([sp], .sp, .sp-only) {
		display: none;
	}
	br:is([pc], .pc, .pc-only) {
		display: revert;
	}
}
@media screen and (max-width: 767px) {
	br:is([pc], .pc, .pc-only) {
		display: none;
	}
	br:is([sp], .sp, .sp-only) {
		display: revert;
	}
}



/** リンク   
-------------------------------------------------------------------- */
a {
	color: inherit;
    text-decoration: none;
    transition: var(--transition);
}
a:has(img) {
	display: block;
}
a:not([class]) {
	color: currentColor;
	text-underline-offset: 4px;
}
@media (hover: hover) {
	a:not([class]) {
		text-decoration: underline;
	}
	a:not([class]):hover {
		text-decoration: none;
	}
}

a:where(:link) {
	color: var(--link-color, inherit);
}
a:where(:visited) {
	color: var(--visited-color, var(--link-color, inherit));
}
a:where(:focus) {
	background: var(--focus-bg, var(--hover-bg, inherit));
	color: var(--focus-color, var(--hover-color, inherit));
}
@media (hover: hover) {
	a:where(:hover) {
		background: var(--hover-bg, inherit);
		color: var(--hover-color, inherit);
	}
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


/** イメージ   
-------------------------------------------------------------------- */
img,
iframe {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	vertical-align: top;
}
img {
	outline: 0;
	-o-object-fit: contain;
	object-fit: contain;
}
picture {
	line-height: 0;
	overflow: hidden;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}













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

	Object
	
==================================================================== */


/** テキスト   
-------------------------------------------------------------------- */
:is(.tagline, .title, .label, .headline) {
	margin-bottom: 0.75lh;
	line-height: 1.5;
}
/* ページ見出し */
.tagline {
	font-size: var(--extra-size);
}

/* セクション大見出し*/
.title {
	font-size: var(--extra-size);
}

/* 汎用的な見出し（アクセス・募集要項・お問い合わせフォーム） */
.label {
	font-size: var(--large-size);
}

/* より具体的な文体の見出し */
.headline {
	font-size: var(--medium-size);
}


.marker {
	background: linear-gradient(to top, var(--marker) , var(--marker) 40%, transparent 40%, transparent);
}

/* 本文外にある注釈へ誘導する参照マーク */
.ref {
	font-size: 10px;
	vertical-align: text-top;
}
.note {
    font-size: 80%;
	text-indent: -1ic;
	padding-left: 1ic;
}
.note2 {
    font-size: 80%;
	text-indent: -2ic;
	padding-left: 2ic;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


:is(.sign, .background-type) {
	font-family: "Lato", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.sign {
	width: fit-content;
	padding-inline: calc(10 * var(--px));
	border-radius: 6px;
	background: var(--blue);

	color: white;
}

section:has(.background-type) {
	position: relative;
}
section:has(.background-type) .wrap {
	position: relative;
	z-index: 1;
}
.background-type {
	letter-spacing: -0.1ex;
	color: white;
	line-height: 1;

	position: absolute;
	left: 50%;
	top: var(--m3);
	z-index: 0;
	translate: -40% 0;

	opacity: 0.5;
}
@media screen and (min-width: 768px) {
	.background-type {
		font-size: calc(284 * var(--px));
	}
}
@media screen and (max-width: 767px) {
	.background-type {
		font-size: calc(110 * var(--px));
	}
}


/** ボタン   
-------------------------------------------------------------------- */
.button {
    display: block;
    width: fit-content;
	padding-block: 0.6lh;
    padding-inline: 1.75ic;
	border-radius: 5lh;
    background: var(--button-bg, var(--action, inherit));
	border: var(--button-border-weight, 0) solid var(--button-border-color, transparent);

	font-size: inherit;
    color: var(--button-color, inherit);
	line-height: 1.5;
	font-weight: 700;
    text-align: center;
	letter-spacing: 0.1ic;
}
.button:has(svg, i, .icon) {
	display: flex;
	align-items: center;
}
@media (hover: hover) {
	.button {
		transition: var(--transition);
	}
	.button:hover {
		background: var(--button-hover-bg, var(--button-bg));
		border: var(--button-border-hover-weight, var(--button-border-weight)) solid var(--button-border-hover-color, var(--button-hover-bg));
		color: var(--button-hover-color, var(--button-color));
	}
}
:where(a, button, .button) svg {
	display: inline-block;
	height: 1lh;
	fill: currentColor;
}
:where(a, button, .button) svg:first-child {
	margin-right: 0.3ic;
}
@media screen and (max-width: 767px) {
	.button {
		padding-block: 0.5lh;
	}
	.button:has(svg) {
		justify-content: center;
	}
}

/** ヘッダー  
-------------------------------------------------------------------- */
header {
	width: 100%;
	height: var(--header-height);
}
header.fixed {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}
header.sticky {
	position: sticky;
	top: 0;
	z-index: 100;
}

body:has(header.fixed, header.sticky) {
	scroll-padding-top: var(--header-height, 0px);
}
body:has(header.fixed, header.sticky) main.content {
	padding-top: var(--header-height);
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


.burger {
	width: var(--m2);
	height: var(--m2);
	position: relative;
	transition: var(--transition);
}
.burger:before,
.burger::after {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--ink);
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
	transition: var(--transition);
}
body:not(.is_show_navigation) .burger::before {
	margin-top: -20%;
}
body:not(.is_show_navigation) .burger::after {
	margin-top: 20%;
}
body:is(.is_show_navigation) .burger::before {
	rotate: 45deg;
}
body:is(.is_show_navigation) .burger::after {
	rotate: -45deg;
}
.burger + nav {
	transition: var(--transition);
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}



/** ラッパー   
-------------------------------------------------------------------- */
.wrap {
	width: auto;
	max-width: var(--main-width);
	box-sizing: content-box;
	padding-inline: var(--wrap-padding-inline);
	margin-inline: auto;

	position: relative;
	z-index: 0;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}




/** セクション   
-------------------------------------------------------------------- */
section.general {
	padding-block: var(--m8);
}
section .heading {
	margin-bottom: var(--m4);
}
section .heading .sign {
	margin-inline: auto;
}
section .heading .title {
	margin-top: 0.3lh;
	text-align: center;
}
@media screen and (min-width: 768px) {
	section .heading .title + p {
		text-align: center;
	}	
}
@media screen and (max-width: 767px) {}


/** カード   
-------------------------------------------------------------------- */
.card {
	padding-block: calc(24 * var(--px));
	padding-inline: calc(24 * var(--px));
	border-radius: calc(24 * var(--px));
	background: white;
	color: black;
}
.card.wide {
	width: 100%;
	border-radius: var(--m2);
	align-items: center;
	gap: var(--m);
}
.card.wide + .card.wide {
	margin-top: var(--m3);
}
.card.wide .text {
	flex: 1 1 auto;
}
.card .headline {
	margin-top: 0.3lh;
}
.card.wide .image {}

@media screen and (min-width: 768px) {
	.card.wide .text {
		width: 40%;
		margin-inline: var(--m);
	}
	.card.wide .image {
		width: 52.96875%;
	}
}
@media screen and (max-width: 767px) {
	.card.wide {
		border-radius: var(--m);
	}
	.card.wide .text {
		order: 2;
	}
}

/** スクロールフレーム  
-------------------------------------------------------------------- */
.scroll-vertical {
	height: 7lh;
	padding-block: var(--m2);
	padding-inline: var(--m2);
	overflow-y: scroll;
}



/** フォーム  
-------------------------------------------------------------------- */
form {}
form dl {}
form dl + dl {
    margin-top: var(--m2);
}
form dd {
	-webkit-margin-start: 0;
	margin-inline-start: 0;
}
form button {
	border: none;
	cursor: pointer;
}
form dt {
	margin-bottom: 0.3lh;
	font-size: calc(18 * var(--px));
	font-weight: 700;
    position: relative;
}
form dd {}
form dd + dd {
	margin-top: var(--m);
}
form dl:has([aria-required], [required]) dt::after {
	content: var(--item-text, "必須");
	display: inline-block;
	padding-inline: 0.5ic;
	background: var(--alert);
	margin-left: 1ic;

    color: var(--white, white);
    font-weight: 500;
	font-size: var(--small-size);
	vertical-align: text-bottom;
}
form label {
    width: fit-content;
    max-width: 100%;
    padding-block: 0.25lh;
}
form label:has(input:is([type="checkbox"], [type="radio"])) {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	-moz-column-gap: 0.5ic;
	column-gap: 0.5ic;
}
form dd .note {
	flex: 0 0 100%;
	color: var(--gray, gray);
}
form dd:has(input:user-invalid) .note {
	color: var(--alert, red);
}
form :is(input, textarea)::placeholder,
option[disabled] {
    color: rgb(from var(--black, black) r g b / 0.5);
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]),
form textarea,
form select {
	padding-inline: 0.5ic;
    background: var(--white, white);
    outline: transparent;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]):focus-visible,
form textarea:focus-visible,
form select:focus-visible {
	outline: var(--outline, dodgerBlue) auto 1px;
    border-color: transparent;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]):user-invalid,
form textarea:user-invalid,
form select:user-invalid {
	outline: var(--alert, red) auto 1px;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]),
form textarea {
    width: 100%;
	box-sizing: border-box;
    padding-block: 0.25lh;
	border: 1px solid #acacac;
	border-radius: 7px;
}
form input:is([type="checkbox"], [type="radio"]) {
	appearance: auto;
    inline-size: 1ic;
    block-size: 1ic;
    accent-color: var(--action);
}
form label:has(select) {
    position: relative;
}
form label:has(select)::after {
    --size: calc(12 * var(--px));
    display: block;
    width: var(--size);
    height: var(--size);
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    rotate: 45deg;

    position: absolute;
    top: 50%;
    right: calc(var(--m) / 2);
    translate: 0 -50%;

    transition: var(--transition);
    pointer-events: none;
}

form select {
	appearance: none;
    width: auto;
    padding-block: 0.5lh;
    padding-right: var(--m2);
	cursor: pointer;
}
form textarea {
	min-height: 10lh;
	field-sizing: content;
}

form [type="submit"]:is(button, input) {
    margin-block: var(--m2) var(--m);
	margin-inline: auto;
}
@media (hover: hover) {
	form [type="submit"]:is(button, input) {
		cursor: pointer;
	}
}
@media screen and (min-width: 768px) {
    form label:has(select)::after {
        --size: calc(12 * var(--px));
    }
}
@media screen and (max-width: 767px) {
	form dl:has([aria-required], [required]) dt p::after {
		font-size: 75%;
	}
}



/** フレックスボックス  
-------------------------------------------------------------------- */
/* flex direction */
:where(.row, [class*="row"], .column, [class*="column"]) {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
:where([class*="row"]) {
	flex-flow: row wrap;
}
:where([class*="row-reverse"]) {
	flex-flow: row-reverse wrap;
}
:where([class*="row"]) > * {
	flex: 0 1 auto;
}
:where([class*="column"]) {
	flex-flow: column wrap;
}
:where([class*="column-reverse"]) {
	flex-flow: column-reverse wrap;
}
@media screen and (min-width: 768px) {
	:where([class*="row-"][class*="pc-"]) {
		flex-flow: row wrap;
	}
	:where([class*="row-reverse"][class*="pc-"]) {
		flex-flow: row-reverse wrap;
	}
}
@media screen and (max-width: 767px) {
	:where([class*="row-"][class*="sp-"]) {
		flex-flow: row wrap;
	}
	:where([class*="row-reverse"][class*="sp-"]) {
		flex-flow: row-reverse wrap;
	}
}

/* flex wrap */
:where([class*="row-nowrap-"], [class*="column-nowrap-"]) {
	flex-wrap: nowrap;
}

/* flex horizontal align */
:where([class*="row-"][class*="start"]) {
	justify-content: flex-start;
}
:where([class*="row-"][class*="end"]) {
	justify-content: flex-end;
}
:where([class*="row-"][class*="center"]) {
	justify-content: center;
}
:where([class*="row-"][class*="between"]) {
	justify-content: space-between;
}

:where([class*="column-"][class*="start"]) {
	align-items: flex-start;
}
:where([class*="column-"][class*="end"]) {
	align-items: flex-end;
}
:where([class*="column-"][class*="center"]) {
	align-items: center;
}

/* flex vertical align */
:where([class*="row-"][class*="top"]) {
	align-items: flex-start;
}
:where([class*="row-"][class*="bottom"]) {
	align-items: flex-end;
}
:where([class*="row-"][class*="middle"]) {
	align-items: center;
}
:where([class*="column-"][class*="top"]) {
	justify-content: flex-start;
}
:where([class*="column-"][class*="bottom"]) {
	justify-content: flex-end;
}
:where([class*="column-"][class*="middle"]) {
	justify-content: center;
}