/* リセットCSSの代わり */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.6;
	text-align: center;
	line-height: 2;
}

a {
	text-decoration: none;
	color: inherit;
	transition: all .2s;
}

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

.en {
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	letter-spacing: .1em;
}

.sp {
	display: none;
}

:root {
	--color-base: #fff;
	--color-contrast: #000;
	--color-pink: #F161A5;
	--color-yellow: #FFF4EB;
	--color-gray: #808080;
	--color-light-gray: #DBE3E3;
}

/* common */

.sec {
	margin-top: 4em;
}

.inner {
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}

.inner:has( .en-bg ) {
	position: relative;
	padding-top: 5.8em;
}

.sec .en-bg {
	font-size: 7em;
	line-height: 1;
	color: var(--color-light-gray);
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
}

.ttl-01 {
	letter-spacing: .25em;
	padding: .1em 2em .2em;
	margin-bottom: 1.5em;
	color: var(--color-base);
	background-image:
		url( ../img/2x/ttl-01-before.png),
		url( ../img/2x/ttl-01-bg.png);
	background-position: left center;
	background-size: auto 100%;
	background-repeat:
		no-repeat,
		repeat-x;
}

.ttl-02 {
	text-align: left;
	font-weight: normal;
	margin-bottom: 1.5em;
}

.ttl-02::before {
	display: inline-block;
	content: "";
	width: .8em;
	height: .8em;
	background-color: var(--color-pink);
	margin-right: .4em;
	vertical-align: middle;
	transform: translateY( -.075em );
}

.btn-01 a {
	display: inline-block;
	width: 600px;
	max-width: 100%;
	background-color: var(--color-base);
	border: solid 1px var(--color-contrast);
	padding: .2em 20px .4em;
	margin: 2em 0;
}

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

/* header */

.header {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 125px;
	position: relative;
	padding: 1em 20px;
}

.rec-btn {
	position: absolute;
	top: calc( 50% - 45px );
	right: 20px;
	z-index: 9999;
}

.rec-btn a {
	display: grid;
	place-content: center;
	width: 260px;
	height: 90px;
	color: var(--color-pink);
	border: solid 1px var(--color-pink);
	padding: 10px;
	cursor: pointer !important;
	position: relative;
	z-index: 9999;
}

.rec-btn a .jp {
	background-color: var(--color-pink);
	color: var(--color-base);
	padding: 4px 8px 6px;
	font-weight: bold;
	position: relative;
	transition: all .2s;
}

.rec-btn a .jp::before {
	content: "";
	width: 0;
	height: 0;
	border: solid 5px transparent;
	border-top-color: var(--color-base);
	border-right-color: var(--color-base);
	position: absolute;
	top: 0;
	right: 0;
	transition: all .2s;
}

/* fv-box */

.fv-box {
	position: relative;
}

.fv-box::after {
	content: "";
	height: 25%;
	display: block;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;	
}

.fv-img {
	width: 100%;
}

/* info-box */

.info-box {
	text-align: center;
}

.info-box .read {
	line-height: 2.5;
}

/* group-box */

.group-block {
	padding-top: 2em;
	border-top: solid 1px var(--color-contrast);
	background-color: var(--color-base);
}

.group-wrap {
	padding: 2em 0;
}

.logo-list {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
	margin: 2em 0;
}

.logo-list .logo {
	flex: 1;
}

/* company-box */

.company-box .cont {
	display: flex;
	gap: 2em;
	align-items: center;
	margin-bottom: 4em;
}

.company-box .txt {
	flex: 1;
	text-align: left;
}

.company-box .txt .co-name {
	font-size: 2em;
	font-weight: normal;
}

.company-box .txt .ttl-02 {
	margin-bottom: 0;
}

.company-box .txt .ttl-02 + p {
	margin-left: 1.2em;
	margin-bottom: 1em;
	line-height: 1.5;
}

.company-box .txt .num {
	display: inline-block;
	margin-right: 1em;
}

.company-box .map {
	flex: 1;
}

.map-wrap {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.map-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* footer */

.footer {
	padding: .2em 2em .4em;
	font-size: 14px;
	text-align: center;
	color: var(--color-base);
	background-color: var(--color-gray);
}

/* 1200 */

@media (max-width: 1200px) {

	.header {
		justify-content: flex-start;
	}

	.sec .en-bg {
		font-size: 6em;
		right: 8px;
	}

	.inner:has( .en-bg ) {
		padding-top: 5em;
	}

}

/* 1000 */

@media (max-width: 1000px) {

	.header .logo img {
		max-height: 80px;
		width: auto;
	}

	.sec .en-bg {
		font-size: 5em;
		right: 10px;
	}

	.inner:has( .en-bg ) {
		padding-top: 4.2em;
	}

}

/* 768 */

@media (max-width: 768px) {

	body {
		font-size: 14px;
	}

	.pc {
		display: none;
	}

	.sp {
		display: inline;
	}

	.sec {
		margin-top: 2em;
	}

	.ttl-01 {
		margin-bottom: .75em;
	}

	.header {
		flex-direction: column;
		gap: 10px;
		height: auto;
	}

	.rec-btn {
		position: relative;
		top: inherit;
		right: inherit;
		width: 100%;
	}

	.rec-btn a {
		display: inline-block;
		width: auto;
		height: auto;
		padding: 10px 1em;
	}

	.rec-btn a .btn-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1em;
	}

	.rec-btn a .en {
		text-align: left;
		font-size: 12px;
		line-height: 1.5;
	}

	.rec-btn a .jp {
		white-space: nowrap;
	}

	.sec .en-bg {
		font-size: 10vw;
		right: 0;
		left: 0;
		text-align: center;
	}

	.inner:has( .en-bg ) {
		padding-top: 8.4vw;
	}

	.info-box .read {
		text-align: left;
		line-height: 2;
	}

	.group-block {
		padding-top: 0;
	}

	.logo-list {
		flex-direction: column;
		gap: 2em;
		margin: 0;
	}

	.logo-list .logo img {
		max-height: 60px;
		width: auto;
	}

	.logo-list.pyon-suke .logo img {
		max-height: 90px;
	}

	.btn-01 a {
		margin: 2em 0 .5em;
		padding: .8em 20px 1em;
		line-height: 1.5;
	}

	.company-box .cont {
		flex-direction: column;
		gap: 1em;
		margin-bottom: 3em;
	}

	.company-box .txt {
		width: 100%;
	}

	.company-box .txt .co-name {
		font-size: 1.5em;
		text-align: center;
	}

	.company-box .txt .ttl-02 + p {
		margin-bottom: .5em;
	}

	.company-box .map {
		width: 100%;
	}

	.footer {
		font-size: 12px;
	}

}

/* 769 */

@media (min-width: 769px) {

	.rec-btn a:hover {
		color: var(--color-base);
		background-color: var(--color-pink);
	}

	.rec-btn a:hover .jp {
		color: var(--color-pink);
		background-color: var(--color-base);
	}

	.rec-btn a:hover .jp::before {
		border-top-color: var(--color-pink);
		border-right-color: var(--color-pink);
	}

	.btn-01 a:hover {
		color: var(--color-base);
		background-color: var(--color-contrast);
	}

}