@charset "utf-8";

:root {
	--red: #B7282E;
	--white: #FFFFFF;
	--kerosene: #E8D3A5;
	--flood: #115B83;
	--mold: #3C7042;
}

body {
	font-family: "Noto Sans JP", sans-serif;
}

.container {
	max-width: 1000px;
	margin-inline: auto;
}

.contact_btn {
	border-radius: 50px;
	font-weight: bold;
	gap: 12px;
}

.tel_btn {
	font-family: "Jost", "Noto Sans JP", sans-serif;
	font-size: 2rem;
	gap: 11px;
}

.bg_red {
	background-color: var(--red);
}

h2 {
	font-family: "Raleway", sans-serif;
	font-weight: lighter;
}

main hgroup {
	color: var(--white);
}

img {
	max-width: 100%;
	height: auto;
}

@media screen and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
	h2 {
		font-size: 80px;
	}

	main hgroup {
		font-size: 24px;
		margin-bottom: 106px;
	}

}

@media screen and (orientation: portrait),
screen and (max-width: 799px),
screen and (max-height: 599px) {
	h2 {
		font-size: 56px;
	}

	main hgroup {
		font-size: 18px;
		margin-bottom: 56px;
	}

	.container {
		padding: 0 1.25rem;
	}
}

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

  *header

  ---------------------------------------------- */
header {
	background-color: var(--white);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 11;
}

.logo {
	gap: 10px;
}

.menu {
	gap: 20px;
}

.head_contact.contact_btn {
	background-color: var(--red);
	width: 180px;
	padding: 8px 0;
	color: var(--white);
}

/* ナビゲーション */
.open span {
	height: 3px;
	background-color: #000;
	display: block;
}

.open span:first-child {
	width: 27px;
}

.open span:last-child {
	width: 19px;
	margin-top: 6px;
}

nav {
	opacity: 0;
	pointer-events: none;
	background-color: var(--red);
	color: var(--white);
	position: absolute;
	padding: 55px 30px 35px;
	transition: opacity 0.3s ease;
}

nav.active {
	opacity: 1;
	pointer-events: auto;
}

.close {
	position: absolute;
	right: 24px;
	top: 24px;
	width: 50px;
	height: 50px;
}

.close span {
	height: 3px;
	width: 30px;
	background-color: var(--white);
	display: block;
	transform-origin: center;
	position: absolute;
	left: 50%;
}

.close span:first-child {
	transform: translate(-50%) rotate(45deg);
}

.close span:last-child {
	transform: translate(-50%) rotate(-45deg);
}

.nav_menu a {
	display: block;
	padding-top: 20px;
	padding-bottom: 14px;
	border-bottom: solid 1px;
}

.nav_contact .contact_btn {
	background-color: var(--white);
	color: var(--red);
	width: 300px;
	padding: 16px 0;
	margin-top: 30px;
	margin-bottom: 1rem;
}

@media screen and (pointer: fine) and (hover: hover) and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
	header {
		padding: 8px 60px;
	}

	nav {
		top: 24px;
		right: 26px;
	}
}

@media screen and (orientation: portrait),
screen and (max-width: 799px),
screen and (max-height: 599px) {
	header {
		padding: 8px 2%;
	}

	.head_contact.contact_btn {
		display: none;
	}

	.logo img {
		width: 32px;
		height: 32px;
	}

	.logo hgroup p {
		font-size: 10px;
	}

	nav {
		top: 24px;
		right: 0;
	}
}


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

  *MV

  ---------------------------------------------- */
.kv {
	height: 100svh;
	position: relative;
	overflow: hidden;
}

.kv .swiper-slide {
	background-size: cover;
	height: 100%;
}

.mv_text {
	display: none;
	position: absolute;
	color: var(--white);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.mv_text .lead {
	font-weight: bold;
	margin-bottom: 39px;
}

.mv_text .lead span {
	background-color: var(--red);
	line-height: 1.8;
}

.mv_text .line {
	width: 85px;
	height: 6px;
	background-color: var(--red);
}

@media screen and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
	.kv .swiper-slide {
		background-position: center;
	}

	.kv .fire {
		background-image: url(img/mv_fire.webp);
	}

	.kv .kerosene {
		background-image: url(img/mv_kerosene.webp);
	}

	.kv .flood {
		background-image: url(img/mv_flood.webp);
	}

	.kv .mold {
		background-image: url(img/mv_mold.webp);
	}

	.mv_text {
		width: 1000px;
		display: none;
	}

	.mv_text .lead {
		font-size: 56px;
		line-height: 71px;
	}

	.mv_text p:not(.lead) {
		font-size: 20px;
		line-height: 40px;
	}
}

@media screen and (max-width: 1280px) and (min-height: 700px) and (orientation: landscape) {
	.kv {
		height: 90svh;
	}

	.kv .swiper-slide {
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		background-color: #242424;
	}
}

@media screen and (orientation: landscape) and (min-width: 1921px) {
	.kv .swiper-slide {
		background-size: contain;
		background-repeat: no-repeat;
		background-color: #242424;
	}

	.kv .fire {
		background-image: url(img/mv_fire-big.webp);

	}

	.kv .kerosene {
		background-image: url(img/mv_kerosene-big.webp);
	}

	.kv .flood {
		background-image: url(img/mv_flood-big.webp);
	}

	.kv .mold {
		background-image: url(img/mv_mold-big.webp);
	}
}

@media screen and (orientation: portrait),
screen and (max-width: 799px),
screen and (max-height: 599px) {
	.kv {
		height: 90svh;
		position: relative;
		overflow: hidden;
	}

	.kv .fire {
		background-image: url(img/mv_fire_sp.webp);

	}

	.kv .kerosene {
		background-image: url(img/mv_kerosene_sp.webp);
	}

	.kv .flood {
		background-image: url(img/mv_flood_sp.webp);
	}

	.kv .mold {
		background-image: url(img/mv_mold_sp.webp);
	}

	.kv .swiper-slide {
		background-position: 50% 44%;
	}

	.kv .swiper-slide:before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgb(0 0 0 / 60%);
	}

	.mv_text {
		display: block;
		width: 90%;
		text-align: center;
	}

	/* .mv_text .line {
		margin: 24px auto 39px;
	} */

	.mv_text .lead {
		font-size: 28px;
	}

	.mv_text p:not(.lead) {
		font-size: 24px;
	}
}

@media screen and (min-width: 750px) and (max-width: 1279px) and (orientation: portrait) {
	.mv_text {
		display: block;
	}

	.mv_text .lead {
		font-size: 40px;
	}

	.mv_text p:not(.lead) {
		font-size: 24px;
	}
}

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

  *footer

  ---------------------------------------------- */
footer {
	background-color: #242424;
	color: var(--white);
}


.footer_menu .item {
	width: 90px;
}

small {
	align-self: flex-end;
}

footer .qualification {
	gap: 1rem;
	align-items: baseline;
}

footer .affiliation {
	align-self: center;
}

.external-link div {
	gap: .5rem
}

@media screen and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
	footer {
		padding: 74px 60px;
	}

	.footer_menu {
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(6, 1fr);
	}

	footer .logo {
		grid-column: span 2 / span 2;
	}

	footer .name {
		grid-column: span 2 / span 2;
		grid-column-start: 4;
	}

	footer .representative {
		grid-column: span 2 / span 2;
		grid-column-start: 4;
		grid-row-start: 2;
	}

	footer .head-office {
		grid-column: span 2 / span 2;
		grid-column-start: 4;
		grid-row-start: 3;
	}

	footer .kitano-branch {
		grid-column: span 2 / span 2;
		grid-column-start: 4;
		grid-row-start: 4;
	}

	footer .obihiro-branch {
		grid-column: span 2 / span 2;
		grid-column-start: 4;
		grid-row-start: 5;
	}

	footer .hakodate-branch {
		grid-column: span 2 / span 2;
		grid-column-start: 4;
		grid-row-start: 6;
	}

	footer small {
		grid-column: span 2 / span 2;
		grid-column-start: 1;
		grid-row-start: 6;
	}

	/* footer .qualification {
		grid-column: span 2 / span 2;
		grid-row: span 3 / span 3;
		grid-column-start: 1;
		grid-row-start: 2;
	} */
	.external-link {
		grid-column: span 2 / span 2;
		grid-row: span 2 / span 2;
		grid-row-start: 4;
	}

	footer .affiliation {
		grid-column: span 2 / span 2;
		grid-row: span 2 / span 2;
		grid-row-start: 2;
	}
}

@media screen and (orientation: portrait),
screen and (max-width: 799px),
screen and (max-height: 599px) {
	footer {
		padding: 36px 2%;
	}

	.footer_menu {
		gap: 1rem;
	}

	footer .logo {
		justify-content: center;
	}

	.footer_menu>div:not(.logo):not(.qualification) {
		flex-direction: column;
	}

	footer .qualification a:last-of-type {
		width: 230px;
		margin: auto;
	}

	footer .qualification {
		flex-wrap: wrap;
	}

	footer .qualification a:not(:last-of-type) {
		width: 30%;
	}

	.footer_menu .item {
		margin-bottom: .5rem;
	}
}

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

  *FEATURES ライフケアコーポレーションの特徴

  ---------------------------------------------- */
#features {
	padding: 105px 0 179px;
}

.features_text {
	z-index: 1;
}

#features h3 {
	color: var(--white);
	padding-bottom: 11px;
	border-bottom: solid 1px;
	margin-top: 44px;
	margin-bottom: 24px;
}

#features p span {
	background-color: var(--white);
	color: var(--red);
	line-height: 30px;
	font-size: 18px;
}

.features_contents {
	width: 100%;
}

.features_contents:first-of-type .features_img,
.features_contents:last-of-type .features_text {
	right: 0;
}

.features_img {
	box-shadow: 0 0 25px 0 rgb(0 0 0 / 16%);
}


@media screen and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
	#features h3 {
		font-size: 32px;
	}

	.features_contents:first-of-type {
		margin-bottom: 106px;
	}

	.features_contents {
		height: 360px;
	}

	.features_contents:first-of-type .features_text {
		width: 448px;
	}

	.features_contents:first-of-type .features_text p {
		width: 380px;
	}

}

@media screen and (orientation: portrait),
screen and (max-width: 799px),
screen and (max-height: 599px) {

	.features_text,
	.features_img {
		position: static;
	}

	#features h3 {
		font-size: 20px;
	}
}

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

  *DISASTER RECOVERY 災害復旧とは

  ---------------------------------------------- */
.disaster-recovery_title img {
	width: 100%;
}

.disaster,
.recovery {
	font-family: 'Raleway';
	z-index: 1;
}

.disaster-recovery_title_text {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--white);
}

.disaster {
	color: var(--white);
}

.recovery {
	right: 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	background-image: linear-gradient(to bottom, var(--white) 50%, #9A9A9A 50%);
}


#disaster-recovery .lead p:not(:last-of-type) {
	margin-bottom: 1rem;
}

.article_title {
	color: var(--white);
	position: sticky;
	z-index: 1;
}

#fire .article_title {
	background-color: var(--red);
}

#kerosene .article_title {
	background-color: var(--kerosene);
}

#flood .article_title {
	background-color: var(--flood);
}

#mold .article_title {
	background-color: var(--mold);
}

.article_title h3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 1rem;
}

.article_title h3:after {
	content: '';
	display: block;
	height: 1px;
	background-color: var(--white);
	flex-grow: 1;
}

.article_contents_inner {
	max-width: 730px;
	margin: 0 auto;
}

.article_contents_inner img {
	margin-bottom: 40px;
	box-shadow: 0 0 25px 0 rgb(0 0 0 / 16%);
}

.article_contents_inner p:first-of-type {
	margin-bottom: 24px;
}

#disaster-recovery .lead {
	padding: 96px 0;
	font-size: 18px;
	line-height: 1.5;
}

@media screen and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {

	.disaster,
	.recovery {
		font-size: 80px;
	}

	.disaster-recovery_title_text {
		font-size: 56px;
	}

	.disaster {
		top: -40px;
	}

	.recovery {
		bottom: -45px;
	}

	#disaster-recovery .lead p {
		width: 60%;
		margin-inline: auto;
	}

	.article_title {
		width: 25%;
		padding: 120px 0 0 60px;
		font-size: 30px;
		height: 100vh;
		top: 60px;
	}

	.article_contents {
		width: 75%;
	}

	.article_contents_inner {
		padding: 120px 0;
	}

	.article_contents_inner p:first-of-type {
		margin-top: 80px;
	}
}

@media screen and (orientation: portrait),
screen and (max-width: 799px),
screen and (max-height: 599px) {

	.disaster,
	.recovery {
		font-size: 32px;
	}

	.disaster-recovery_title_text {
		font-size: 24px;
	}

	.disaster {
		top: -20px;
	}

	.recovery {
		bottom: -20px;
	}

	#disaster-recovery .lead p {
		padding: 0 1.25rem;
	}

	#disaster-recovery article {
		flex-direction: column;
	}

	.article_contents_inner {
		padding: 120px 4%;
	}

	.article_title {
		padding: 40px 0 40px 1rem;
		font-size: 24px;
		top: 40px;
	}

	.article_contents_inner p:first-of-type {
		margin-top: 24px;
	}
}

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

  *FLOW ご依頼から復旧作業完了までの流れ

  ---------------------------------------------- */
#flow {
	padding: 137px 0;
}

.flow_nav {
	position: relative;
	overflow: hidden;
}

.flow_contents {
	background-color: var(--white);
	position: relative;
	text-align: center;
	height: 250px;
	box-shadow: 0 0 25px 0 rgb(0 0 0 / 16%);
}

.num {
	width: 60px;
	aspect-ratio: 1;
	border-radius: 50%;
	color: var(--white);
	display: grid;
	place-items: center;
	position: absolute;
	top: -10%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 26px;
}

.num>div {
	margin-top: .5rem;
}

.flow_contents h3 {
	margin-top: 1.5rem;
}

.swiper-button-prev,
.swiper-button-next {
	left: 0;
	width: 55px;
	height: 56px;
}

.swiper-button-next {
	bottom: 1rem;
	top: auto;
}

.swiper-button-prev:after,
.swiper-button-next:after {
	content: '' !important;
	background-image: url(img/slide_btn.svg);
	width: 55px;
	height: 56px;
	background-size: cover;
}

.swiper-button-next:after {
	transform: scale(-1, 1);
}

@media screen and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
	.flow_nav {
		width: calc(100% - ((100% - 1000px)/2));
		margin-left: calc((100% - 1000px)/2);
		padding: 0 116px;
	}

	.flow_contents {
		width: calc(100% / 3.5);
		padding: 32px;
	}

	.flow_contents img {
		margin-top: 1rem;
	}
}

@media screen and (orientation: portrait),
screen and (max-width: 799px),
screen and (max-height: 599px) {
	.flow_nav {
		width: 100%;
		padding: 0 70px 0 83px;
	}

	.flow_contents {
		width: 100%;
		padding: 1rem;
	}

	.flow_contents img {
		margin-top: 3rem;
	}
}

@media screen and (min-width: 750px) and (max-width: 1279px) and (orientation: portrait) {
	.flow_contents {
		width: 50%;
	}
}

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

  *CASE 災害復旧事例

  ---------------------------------------------- */
#case {
	background-color: #F8F8F8;
	padding: 97px 0 143px;
}

#case hgroup {
	color: var(--red);
}

.case_list {
	position: relative;
	overflow: hidden;
}

.case_contents {
	width: 350px;
	background-color: var(--white);
	box-shadow: 0 0 25px 0 rgb(0 0 0 / 16%);
}

.case_contents h3 {
	padding: 32px;
}

.case_contents img {
	width: 100%;
}

.tag {
	position: absolute;
	top: 0;
	left: 0;
	padding: 4px 13px;
	color: var(--white);
}

.fire .tag {
	background-color: var(--red);
}

.kerosene .tag {
	background-color: var(--kerosene);
}

.flood .tag {
	background-color: var(--flood);
}

.mold .nav {
	background-color: var(--mold);
}

@media screen and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
	.case_list {
		width: calc(100% - ((100% - 1000px)/2));
		margin-left: calc((100% - 1000px)/2);
		padding: 0 116px;
	}
}

@media screen and (orientation: portrait),
screen and (max-width: 799px),
screen and (max-height: 599px) {
	.case_list {
		width: 100%;
		padding: 0 116px;
	}
}

@media screen and (min-width: 750px) and (max-width: 1279px) and (orientation: portrait) {}

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

  *Q&A よくある質問 

  ---------------------------------------------- */
#faq hgroup {
	color: var(--red);
	margin-bottom: 44px;
}

.faq_nav {
	gap: 1rem;
	margin-bottom: 56px;
}

.faq_nav button {
	padding: 18px 28px;
	border: solid 2px;
	border-radius: 60px;
	color: var(--red);
	font-weight: bold;
}

.faq_nav button.active {
	background-color: var(--red);
	color: var(--white);
}

#faq article:not(.open) {
	display: none;
}

#faq article dl dt,
#faq article dl dd {
	border: solid 2px var(--red);
	position: relative;
}

#faq article dl dd.hidden {
	display: none;
}

#faq article dl dt {
	font-size: 20px;
	color: var(--red);
	cursor: pointer;
}

#faq article dt:not(:first-of-type) {
	margin-top: 1rem;
}

#faq article dl dt:before,
#faq article dl dt:after,
#faq article dl dd:before {
	font-family: 'Raleway';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

#faq article dl dt:before {
	content: 'Q';
}

#faq article dl dt:after {
	content: '';
	background-image: url(img/faq_open.svg);
}

#faq article dl dt.active:after {
	background-image: url(img/faq_close.svg);
	height: 2px;
}

#faq article dl dd:before {
	content: 'A';
	color: var(--red);
}

#faq article dl dd {
	display: none;
	overflow: hidden;
	font-size: 18px;
	background-color: #F7F7F7;
}

#faq article dl dd.open {
	display: flex;
}

#faq article dl dt.active {
	background-color: var(--red);
	color: var(--white);
}

@media screen and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
	#faq {
		padding: 150px 0 0;
	}

	#faq article dl dt,
	#faq article dl dd {
		padding: 30px 64px;
	}

	#faq article dl dt:before {
		font-size: 44px;
		left: 1rem;
	}

	#faq article dl dt:after {
		width: 22px;
		height: 22px;
		font-size: 44px;
		right: 30px;
	}

	#faq article dl dd:before {
		font-size: 44px;
		left: 1rem;
	}
}

@media screen and (orientation: portrait),
screen and (max-width: 799px),
screen and (max-height: 599px) {
	#faq {
		padding: 56px 0 0;
	}

	.faq_nav {
		flex-direction: column;
	}

	.faq_nav button {
		text-align: center;
		font-size: 14px;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
	}

	#faq article dl dt,
	#faq article dl dd {
		padding: 14px 32px;
	}

	#faq article dl dt:before,
	#faq article dl dd:before {
		font-size: 24px;
		left: .5rem;
	}

	#faq article dl dt:after {
		width: 16px;
		height: 16px;
		background-size: cover;
		right: .5rem;

	}
}

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

  *AREA 対応エリア

  ---------------------------------------------- */
#area {
	background-image: url(img/area.webp);
	background-repeat: no-repeat;
	background-position: 60% 45%;
}

#area hgroup {
	color: var(--red);
	margin-bottom: 44px;
}

#area h3 {
	font-weight: bold;
}

@media screen and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
	#area {
		padding: 150px 0 331px;
	}

	#area h3 {
		font-size: 60px;
	}
}

@media screen and (orientation: portrait),
screen and (max-width: 799px),
screen and (max-height: 599px) {
	#area h3 {
		font-size: 32px;
	}

	#area {
		background-size: contain;
		padding: 150px 0 201px;
	}
}

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

  *CONTACT お問い合わせ

  ---------------------------------------------- */
#contact {
	padding: 116px 0;
}

.contact_contents {
	background-color: var(--white);
}

/* 電話 */
.tel>p {
	margin-bottom: 40px;
}

.tel>div {
	gap: 30px;
	margin-bottom: 64px;
}

.tel h3 {
	padding: 26px 45px;
	background-color: var(--red);
	color: var(--white);
	border-radius: 3px;
}

.tel>div a {
	color: var(--red);
	font-family: 'Jost', "Noto Sans JP",
		sans-serif;
	display: flex;
	gap: .5rem;
}

.tel>div p {
	font-size: 14px;
}

#contact hr {
	margin-bottom: 64px;
	color: #D3D3D3;
}

/* メールフォーム */
.mailtbl {
	width: 100%;
}

.mailtbl th,
.mailtbl td {
	display: block;
}

.mailtbl th {
	margin-bottom: 1rem;
}

.mailtbl td {
	margin-bottom: 2rem;
}

.mailtbl td input:not(.checkbtn),
.mailtbl td textarea {
	width: 100%;
	padding: 16px 0 16px 30px;
	border: solid 1px #000;
	border-radius: 3px;
	background-color: #F9F9F9;
}

.mailtbl td select {
	padding: 16px 0 16px 30px;
	border: solid 1px #000;
	border-radius: 3px;
	background-color: #F9F9F9;
	background-image: url(./img/select.svg);
	background-position: right 10px center;
	background-repeat: no-repeat;
	background-size: 35px;
}

.mailtbl th span {
	font-size: 14px;
	background-color: var(--red);
	color: var(--white);
	padding: 0 6px;
	margin-right: 1rem;
}

.mailtbl td>div {
	gap: 28px;
}

.mailtbl td>div+input {
	margin-top: 1.5rem;
}

.privacypolicy {
	overflow: scroll;
	height: 240px;
	border: solid 1px #212121;
	padding: 1rem;
	margin-bottom: 2rem;
}

.privacypolicy h2,
.privacypolicy h3 {
	font-size: 16px;
	font-weight: bold;
}

.privacypolicy h3,
.privacypolicy h4:not(:first-of-type) {
	margin-top: 1rem;
}

.checkbox {
	gap: 1rem;
	margin-bottom: 50px;
}

input#checkBtn {
	width: 20px;
	height: 20px;
}

#submitBtn {
	margin: auto;
	display: block;
	font-size: 1.5rem;
	background-color: #242424;
	color: var(--white);
	text-align: center;
	padding: 1rem;
	border-radius: 80px;
}

.messageBox {
	border: solid var(--red);
	padding: 1rem;
	margin-top: 1rem;
	line-height: 1.5;
}

.mailtbl td.hope label input,
.mailtbl td.kind label input {
	margin-right: .5rem;
	vertical-align: middle;
}

.mailtbl td.kind label span,
.mailtbl td.hope label span {
	vertical-align: middle;
}
.mailtbl td input.p-postal-code {
	width: 10rem;
}
.mailtbl td input.p-region {
	width: 10rem;
	margin-bottom: 1rem;
}

@media screen and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
	.contact_contents {
		padding: 80px;
	}

	.tel>div {
		gap: 30px;
	}

	.tel>div a {
		font-size: 40px;
	}

	.mailtbl td select {
		width: 360px;
	}

	#submitBtn {
		width: 370px;
	}
}

@media screen and (orientation: portrait),
screen and (max-width: 799px),
screen and (max-height: 599px) {
	.tel>div {
		flex-direction: column;
		gap: 1.5rem;
	}

	.tel>div a {
		font-size: 30px;
	}

	.mailtbl td>div {
		flex-wrap: wrap;
	}

	.contact_contents {
		padding: 1.5rem;
	}

	.mailtbl td select,
	#submitBtn {
		width: 100%;
	}
}

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

  *認定書

  ---------------------------------------------- */
#certification {
	padding-bottom: 104px;
}

#certification p {
	font-size: 24px;
	margin-bottom: 3rem;
}

#certification .qualification {
	gap: 1.5rem;
}

#certification .qualification a:not(:last-of-type) img {
	width: calc((1000px - 300px)/3) !important;
}

@media screen (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {}

@media screen and (orientation: portrait),
screen and (max-width: 799px),
screen and (max-height: 599px) {}

/* ----------------------------------------------
pc
@media screen and (pointer: fine) and (hover: hover) and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {}

smp
@media screen and (orientation: portrait),
screen and (max-width: 799px),
screen and (max-height: 599px) {}
  ---------------------------------------------- */