@charset "utf-8";

/*=====================================
layout.css
=====================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=M+PLUS+1p:wght@400;500;700&family=Noto+Sans+JP:wght@100..900&family=Oxanium:wght@200..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/*-------------------------------------
 reset
-------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	max-width: 100%;
	line-height: 0;
	vertical-align: bottom;
}
iframe {
	vertical-align: bottom;
	border: 0;
}
table th,
table td {
	vertical-align: top;
}
input,
select,
textarea,
button {
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
select::-ms-expand {
	display: none;
}
*, :after, :before {
	box-sizing: border-box;
}


/*-------------------------------------
 setting
-------------------------------------*/
body {
	position: relative;
	color: #181818;
	font-family: "M PLUS 1p", sans-serif;
	font-size: clamp(16px, 12.432px + 0.464vw, 18px);
	font-weight: 400;
	line-height: 2.1;
	word-break: normal;
	background: var(--color-main);
	-webkit-text-size-adjust: 100%;
}
a {
	color: #000;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
strong {
	font-weight: bold;
}
em {
	font-style: normal;
}


/*-------------------------------------
 root
-------------------------------------*/
:root {

--font-mplus1p: "M PLUS 1p", sans-serif;
--font-oxanium: "Oxanium", sans-serif;
--font-roboto: "Roboto", sans-serif;
--font-inter: "Inter", sans-serif;
--font-noto: "Noto Sans JP", sans-serif;

--color-main: #FFEA28;
--color-gray01: #181818;
--bg-gray: #F8F8F8;

}


/*-------------------------------------
 layout
-------------------------------------*/
#wrapper {
	position: relative;
	padding-top: 204px;
	overflow: hidden;
}
.inner {
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 30px;
}


/*-------------------------------------
 header
-------------------------------------*/
.header {
	position: fixed;
	top: 94px;
	left: 30px;
	right: 30px;
	z-index: 100;
	display: flex;
	align-items: center;
	padding: 26px 20px 23px;
	border-radius: 10px;
	background: rgba(255, 234, 40, 0.9);
	transition: all .4s;
}
.header.is-scrolled {
	top: 30px;
}
.headerLogo {
	margin-right: 40px;
}
.headerLogo img {
	max-width: 200px;
}
.headerPanel {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-grow: 1;
}
.headerNav {
	max-width: 800px;
	flex-grow: 1;
}
.headerNav ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0 0;
	font-family: var(--font-oxanium);
	font-size: 19px;
	font-weight: 500;
	line-height: 1;
}
.headerNav ul li a {
	position: relative;
	padding-bottom: 6px;
	text-decoration: none;
}
.headerLanguage {
	display: flex;
	gap: 10px;
	margin-left: auto;
}
.headerLanguage div a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 55px;
	padding: 5px 0 0;
	color: #A3A3A3;
	font-family: var(--font-oxanium);
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	border-radius: 50%;
}
.headerLanguage .is-current a {
	color: var(--color-main);
	background: var(--color-gray01);
}
.headerContact {
	margin-left: auto;
}
.headerLinkList,
.headerSnsList {
	display: none;
}


@media screen and (max-width: 1400px) and (min-width: 769px) {

.header {
	top: 50px;
	padding: 20px;
}
.headerLogo {
	margin-right: 20px;
}
.headerLogo img {
	max-width: clamp(160px, -80.000px + 20vw, 200px);
}
.headerPanel {
	gap: 5px 15px;
}
.headerNav ul {
	gap: 10px;
	padding-top: 15px;
	font-size: clamp(16px, 12.344px + 0.475vw, 19px);
}
.headerLanguage div a {
	width: clamp(34px, 8.407px + 3.328vw, 55px);
	height: clamp(34px, 8.407px + 3.328vw, 55px);
	font-size: clamp(14px, 10.344px + 0.475vw, 17px);
}
.headerContact .btnStyle01 {
	width: fit-content;
	height: clamp(40px, 15.626px + 3.17vw, 60px);
	font-size: clamp(12px, 5.906px + 0.792vw, 17px);
}


}

@media screen and (max-width: 1200px) and (min-width: 769px) {

.headerLogo {
	padding-top: 10px;
	align-self: flex-start;
}
.headerLogo img {
	max-width: clamp(100px, -7.053px + 13.921vw, 160px);
}
.headerPanel {
	display: grid;
	grid-template-columns: 1fr auto;
}
.headerNav {
	max-width: inherit;
	margin-left: calc(clamp(100px, -7.053px + 13.921vw, 160px) * -1);
	grid-area: 2 / 1 / 3 / 3;
}
.headerLanguage {
	grid-area: 1 / 1 / 2 / 2;
	margin-left: auto;
}
.headerContact {
	grid-area: 1 / 2 / 2 / 3;
	margin-left: auto;
}


}


/*-------------------------------------
 topicpath
-------------------------------------*/
.topicpath {
	padding-bottom: 30px;
	color: #B9B9B9;
	font-family: var(--font-roboto);
	font-size: 14px;
}
.topicpath ol {
	display: flex;
	flex-wrap: wrap;
}
.topicpath ol li {
	line-height: 1.5;
}
.topicpath ol li + li:before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-inline: 8px;
	vertical-align: middle;
	border-radius: 50%;
	background: var(--color-gray01);
}


/*-------------------------------------
 main
-------------------------------------*/
.main {
	position: relative;
	z-index: 1;
}


/*-------------------------------------
 pagetop
-------------------------------------*/
.pagetop a {
	position: relative;
	position: fixed;
	right: 30px;
	bottom: 50px;
	z-index: 10;
	display: flex;
	width: 114px;
	height: 114px;
	border-radius: 20px;
	border: 1px solid var(--color-gray01);
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s linear;
}
.pagetop a:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 22px;
	height: 28px;
	background: url(../images/icn_pagetop.svg) no-repeat 0 0 / 100% auto;
	transform: translate(-50%, -50%);
}
.pagetop.is-scrolled a {
	opacity: 1;
	visibility: visible;
}


/*-------------------------------------
 footer
-------------------------------------*/
.footer {
	position: relative;
	background: var(--bg-gray);
}
.footer .inner {
	display: grid;
	grid-template-columns: calc(45% - 15px) 1fr;
	gap: 30px;
	padding-top: 100px;
	padding-bottom: 135px;
}
.footerLogo {
	grid-area: 1 / 1 / 2 / 2;
}
.footerGroup {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 2.158px + 2.32vw, 30px);
	max-width: 590px;
	grid-area: 1 / 2 / 3 / 3;
}
.footerNav {
	padding-top: 18px;
}
.footerNavList ul li {
	font-family: var(--font-oxanium);
	font-size: clamp(20px, 7.510px + 1.624vw, 27px);
	font-weight: 500;
}
.footerNavList ul li a {
	position: relative;
	padding-bottom: 6px;
	text-decoration: none;
}
.footerLink {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding-top: 18px;
}
.footerLinkList ul li {
	margin-bottom: 20px;
	line-height: 1;
}
.footerLinkList ul li a {
	display: inline-block;
	font-family: var(--font-roboto);
	font-size: clamp(15px, 11.432px + 0.464vw, 17px);
}
.footerLinkList ul li a:after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 12px;
	vertical-align: bottom;
	border-radius: 5px;
	background: url(../images/icn_arw_y02.svg) no-repeat center center / 11px auto var(--color-gray01);
}
.footerLinkList ul li .icon-blank {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 10px;
	vertical-align: sub;
}
.footerSnsList {
	margin-top: auto;
	color: #B9B9B9;
	font-family: var(--font-roboto);
	font-size: clamp(15px, 11.432px + 0.464vw, 17px);
}
.footerSnsList dt {
	margin-bottom: 5px;
}
.footerSnsList dd ul {
	display: flex;
	gap: 10px;
	opacity: 0.2;
}
.footerCopyright {
	font-family: var(--font-inter);
	font-size: clamp(13px, 5.863px + 0.928vw, 17px);
	align-self: flex-end;
	grid-area: 2 / 1 / 3 / 2;
}












/*-------------------------------------------------------------------
 Media Queries
-------------------------------------------------------------------*/

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

.forPC { display: none !important; }
.forSP { display: block; }
img.forSP, br.forSP, span.forSP { display: inline-block }

body {
	font-size: 15px;
	line-height: 2;
}


/*-------------------------------------
 layout
-------------------------------------*/
#wrapper {
	padding-top: 80px;
}


/*-------------------------------------
 header
-------------------------------------*/
.header {
	top: 18px;
	left: 20px;
	right: 20px;
	padding: 11px 4px 11px 10px;
}
.header.is-scrolled {
	top: 18px;
}
.headerLogo img {
	max-width: 124px;
}
.headerPanel {
	position: absolute;
	top: 78px;
	left: 0;
	right: 0;
	flex-direction: column;
	align-items: flex-start;
	max-height: calc(100vh - 78px);
	padding: 50px 50px 80px;
	background: var(--color-main);
	overflow-x: hidden;
	overflow-y: auto;
	transition: all .4s;
	opacity: 0;
	visibility: hidden;
	z-index: -2;
}
.headerPanel.is-open {
	opacity: 1;
	visibility: visible;
	z-index: 5;
}
.headerNav {
	max-width: inherit;
}
.headerNav ul {
	display: block;
	padding: 0;
}
.headerNav ul li {
	margin-top: 20px;
}
.headerLinkList {
	display: block;
}
.headerLinkList ul li {
	line-height: 1;
}
.headerLinkList ul li + li {
	margin-top: 16px;
}
.headerLinkList ul li a {
	font-size: 14px;
}
.headerLinkList ul li a:after {
	content: "";
	display: inline-block;
	width: 17px;
	height: 17px;
	margin-left: 10px;
	vertical-align: bottom;
	border-radius: 5px;
	background: url(../images/icn_arw_y02.svg) no-repeat center center / 9px auto var(--color-gray01);
}
.headerLinkList ul li .icon-blank {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	vertical-align: sub;
	background: url(../images/icn_blank01.svg) no-repeat 0 0 / 100% auto;
}
.headerSnsList {
	display: block;
	color: #B9B9B9;
	font-family: var(--font-roboto);
	font-size: 14px;
}
.headerSnsList dd ul {
	display: flex;
	gap: 12px;
	opacity: 0.2;
}
.headerSnsList dd ul li img {
	width: 52px;
}
.headerLanguage {
	order: -1;
	margin-left: 0;
}
.headerLanguage div a {
	width: 44px;
	height: 44px;
	padding: 3px 0 0;
	font-size: 14px;
}
.headerContact {
	padding-top: 20px;
}

.headerBtn {
	position: absolute;
	top: 5px;
	right: 4px;
	z-index: 7;
	display: block;
	width: 50px;
	height: 50px;
	cursor: pointer;
}
.headerBtn span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
	position: absolute;
	left: 6px;
	width: 38px;
	height: 2px;
	background-color: var(--color-gray01);
}
.headerBtn span:nth-of-type(1) {
	top: 19px;
}
.headerBtn span:nth-of-type(2) {
	top: 29px;
}
.headerBtn.is-open span {
	top: 24px;
}
.headerBtn.is-open span:nth-of-type(1) {
	-webkit-transform: rotate(-380deg);
	transform: rotate(-380deg);
}
.headerBtn.is-open span:nth-of-type(2) {
	-webkit-transform: rotate(380deg);
	transform: rotate(380deg);
}


/*-------------------------------------
 topicpath
-------------------------------------*/
.topicpath {
	font-size: 11px;
}
.topicpath ol li + li:before {
	width: 2px;
	height: 2px;
	margin-inline: 8px;
}


/*-------------------------------------
 pagetop
-------------------------------------*/
.pagetop a {
	right: 30px;
	bottom: 30px;
	width: 60px;
	height: 60px;
	border-radius: 10px;
}
.pagetop a:before {
	width: 12px;
	height: 18px;
}


/*-------------------------------------
 footer
-------------------------------------*/
.footer .inner {
	display: block;
	width: fit-content;
	margin-inline: auto;
	padding-top: 47px;
	padding-bottom: 41px;
}
.footerLogo img {
	width: 176px;
}
.footerGroup {
	display: block;
	max-width: inherit;
	padding: 0 0 0 32px;
}
.footerNav {
	padding-top: 32px;
}
.footerNavList ul li {
	font-size: 19px;
}
.footerLinkList ul li {
	margin-top: 16px;
	margin-bottom: 0;
}
.footerLinkList ul li a {
	font-size: 14px;
}
.footerLinkList ul li a:after {
	width: 17px;
	height: 17px;
	margin-left: 10px;
	border-radius: 5px;
	background-size: 9px auto;
}
.footerLinkList ul li .icon-blank {
	width: 20px;
	height: 20px;
	margin-left: 10px;
}
.footerSnsList {
	margin: 0;
	font-size: 14px;
}
.footerSnsList dt {
	margin-bottom: 0;
}
.footerSnsList dd ul {
	display: flex;
	gap: 12px;
	opacity: 0.2;
}
.footerSnsList dd ul li img {
	width: 52px;
}
.footerCopyright {
	padding-top: 40px;
	font-size: 12px;
	text-align: center;
}




}




@media screen and (min-width: 769px) {

.forPC { display: block; }
.forSP { display: none !important; }
img.forPC, br.forPC, span.forPC { display: inline-block }


.headerNav ul li a:before,
.headerLanguage div a,
.pagetop a,
.pagetop a:before,
.footerNavList ul li a:before {
	text-decoration: none;
	transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	backface-visibility: hidden;
}

.headerNav ul li a:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	opacity: 0;
	background-color: var(--color-gray01);
}
.headerNav ul li a:hover:before {
	width: 100%;
	opacity: 1;
}
.headerLanguage div a:hover {
	color: var(--color-main);
	background: var(--color-gray01);
}
.pagetop a:hover {
	background: var(--color-gray01);
}
.pagetop a:hover:before {
	filter: brightness(0) saturate(100%) invert(100%) sepia(96%) saturate(5553%) hue-rotate(331deg) brightness(105%) contrast(103%);
}
.footerNavList ul li a:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	opacity: 0;
	background-color: var(--color-gray01);
}
.footerNavList ul li a:hover:before {
	width: 100%;
	opacity: 1;
}

a[href^="tel:"] {
	pointer-events: none;
}

}