@charset 'utf-8';

/* reset
------------------------------------------------ */
body,div,pre,p,a,img,form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object,
figure,figcaption {
	margin: 0;
	padding: 0;
}
html { height: 100%; font-size: 62.5%; }
body {
	width: 100%;
	height: 100%;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	/* font-family: 'Noto Sans JP', sans-serif; */
	font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
	font-size: 1.4rem;
	line-height: 1.6;
	color: #202020;
}

ul,ol { list-style: none; }
img { width: auto; height: auto; max-width: 100%; border: none; vertical-align: top; }
a:link { text-decoration: none; color: #202020; }
a:visited { text-decoration: none; color: #202020; }
a:hover { text-decoration: underline; }
* { box-sizing: border-box; }

/* container
------------------------------------------------ */
#container {
	position: relative;
	overflow: hidden;
}
.wrap{ width: 100%; max-width: 1240px; padding: 0 20px; margin: 0 auto; }
::-webkit-input-placeholder { /* Edge */
color: #B1B1B1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #B1B1B1;
}

::placeholder {
color: #B1B1B1;
  }
@media only screen and (min-width: 769px) {
	.sp{ display: none !important; }
}
@media only screen and (max-width: 768px) {
	.pc{ display: none !important; }
	.wrap{ padding: 0 25px; }
	.lock-scrollber{ position: fixed; left: 0; right: 0; bottom: 0; overflow-y: scroll !important; }
}

.grecaptcha-badge { 
    visibility: hidden;
}


/* header
------------------------------------------------ */
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	z-index: 9;
}
.header-bar{ padding: 8px 0 7px; border-bottom:1px solid #D6D6D6; font-size: 1.3rem; font-weight: 400; letter-spacing: 0.1em; line-height: calc(17 / 13); }
.header-bar--nav ul{ display: flex; flex-wrap: wrap; align-items: center; }
.header-bar--nav ul li a{ color:#363636; }
.header-bar--nav ul li+li::before{ content: '/'; position: relative; top:1px; font-size: 1.6rem; line-height: 1; }
.header-bar--lg a{ margin-left: 10px; color:#1E84CE; }

.header-row{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.header--logo h1{ line-height: 1; }
.header--logo a{ display: block; }
.header--logo a:hover img{ opacity: 0.8; }

.nav--list li > a,
.nav-contact--btn a{ font-size: 1.6rem; font-weight: bold; letter-spacing: 0.1em; line-height: calc(22 / 16); }
.nav--list{  }
.nav-contact--btn a{ display: block; padding: 15px 0; width: 200px; text-align: center; color:#fff; background: rgb(50,160,239); background: linear-gradient(270deg, rgba(50,160,239,1) 0%, rgba(30,132,206,1) 100%); }
.nav-contact--btn a:hover{ text-decoration: none; }


@media only screen and (min-width: 769px) {
	.header-bar .wrap{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
	.header--logo{ width: 280px; }

	#nav{ padding: 18px 0; max-width: calc(100% - 300px); }
	.nav--list{ display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; }
	.nav--list li{ margin: 0 25px; }
	.nav-contact--btn{ margin-left: 25px; display: inline-flex; flex-wrap: wrap; }
	
	.nav-dropdown--group,
	.nav-dropdown--title{ display: none !important; }

	/* en */
	[data-lang="en"] .header-bar{ font-size: 1rem; }
	[data-lang="en"] #nav{ padding: 22px 0; display: inline-flex; }
	[data-lang="en"] .nav--list li{ max-width: 110px; margin: 0 20px; }
	[data-lang="en"] .nav--list li:nth-child(2){ max-width: 76px; }
	[data-lang="en"] .nav--list li > a{ min-height: 40px; font-size: 1.4rem; display: block; line-height: calc(20 / 14); text-transform: uppercase; }
	[data-lang="en"] .nav-contact--btn{ margin-left: 20px; }
	[data-lang="en"] .nav-contact--btn a{ font-size: 1.4rem; width: 180px; text-transform: uppercase; }
	[data-lang="en"] .header-bar--nav ul li+li::before{ font-size: 1.2rem; } 
}

@media only screen and (max-width: 1200px) and (min-width: 769px) {
	.nav--list li{ margin: 0 15px; }
	.nav-contact--btn{ margin-left: 15px; }
}


@media only screen and (max-width: 1100px) and (min-width: 769px) {
	.header--logo{ width: 200px; }
	#nav{ max-width: calc(100% - 220px); }
	.nav--list li > a{ font-size: 1.4rem; }
	.nav--list li{ margin: 0 8px; }
	.nav-contact--btn{ margin-left: 8px; }
	.nav-contact--btn a{ width: 125px; font-size: 1.4rem; }

	[data-lang="en"] .header--logo{ width: 150px; }
	[data-lang="en"] #nav{ padding: 23px 0; max-width: calc(100% - 170px); }
	[data-lang="en"] .header-bar--lg a{ margin-left: 5px;}
	[data-lang="en"] .nav--list li{ max-width: 100px; margin: 0 10px; }
	[data-lang="en"] .nav--list li:nth-child(2){ max-width: 68px; }
	[data-lang="en"] .nav--list li > a{ font-size: 1.2rem; min-height: 36px; }
	[data-lang="en"] .nav-contact--btn{ margin: 0; }
	[data-lang="en"] .nav-contact--btn a{ width: 80px; font-size: 1.2rem; }
}

@media only screen and (max-width: 768px) {
	#header{ padding: 16px 0; }
	.header--logo{ width: 190px; }
	.header--menu-btn{ position: relative; width: 25px; height: 25px; }
	.header--menu-btn span{ position: absolute; transition: all 0.2s; width: 100%; height: 2px; background-color: #707070; }
	.header--menu-btn .bar2{ margin-top: 9px; }
	.header--menu-btn .bar3{ margin-top: 18px; }

	.header--menu-btn.on .bar1 {
		width: 36px;
		-webkit-transform: rotate(45deg) scaleX(0.7);
		margin-top: 12px;
		left: -5px;
	}
	.header--menu-btn.on .bar2 { opacity: 0; }
	.header--menu-btn.on .bar3 {
		width: 36px;
		-webkit-transform: rotate(-45deg) scaleX(0.7);
		margin-top: 12px;
		left: -5px;
	}
	.header-bar--lg{ margin-top: 37px; text-align: center; }
	.header-bar--lg a{ margin: 0 10px; display: inline-block; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.1em; } 

	#nav{ display: none; padding: 0 25px 45px; position: absolute; top: 60px; left: 0; width: 100%; height: calc(100vh - 60px); background-color: #fff; overflow-y: auto; }
	.nav--list02{ display: flex; flex-wrap: wrap; }
	.nav--list02 li:last-child{ width: 100%; }
	.nav--list02 li+li:not(:last-child):before{ position: relative; content: '/'; top:0; font-size: 1.6rem; line-height: 1; margin: 0 2px; }
	.nav--list02 a{ font-size: 1.4rem; font-weight: 400; letter-spacing: 0.072em; line-height: calc(44 / 28); }
	
	.nav--list{ margin-top: 28px; }
	.nav--list > li{ background-repeat: no-repeat; background-position: calc(100% - 20px) 17px; background-size: 25px 25px; border-bottom: 1px solid #D8D8D8; }
	.nav--list > li:first-child{ border-top: 1px solid #D8D8D8; }
	.nav--list li:not(.nav-dropdown){ background-image: url(../../img/share/nav-arrow-1.png); }
	.nav--list li.nav-dropdown{ background-image: url(../../img/share/nav-arrow-2.png); }
	.nav--list li.nav-dropdown.on{ background-image: url(../../img/share/nav-arrow-3.png); }
	.nav--list a{  }
	.nav--list li > a,
	.nav-dropdown--title{ transition: padding .5s; padding: 22px 44px 22px 0; display: block; font-size: 1.5rem; font-weight: bold; letter-spacing: 0.072em; line-height: calc(41 / 30); }
	.nav--list li.nav-dropdown.on .nav-dropdown--title{ padding: 22px 44px 8px 0; }
	.nav-dropdown--group{ display: none; }
	.nav-dropdown--group a{ padding: 20px 0 20px 17px; display: block; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.072em; line-height:calc(41 / 30);  background: url(../../img/share/arrow1.png) no-repeat 0 23px / 10px auto;}
	.nav-dropdown--group a+a{ border-top: 1px dashed #D8D8D8; }

	.nav-contact--btn{ margin-top: 40px; }
	.nav-contact--btn a{ padding: 20px 0; width: 100%; font-size: 1.5rem; line-height: calc(41 / 30); letter-spacing: 0.1em; }

	[data-lang="en"] .nav--list02{ font-size: 1rem; }
	[data-lang="en"] .nav--list02 li+li:before{ position: relative; content: '/'; top:0; font-size: 1.2rem; line-height: 1; margin: 0 2px; }
}

/* main
------------------------------------------------ */
#main {
	padding-top: 122px;
	display: block;
	position: relative;
	width: 100%;
}

@media only screen and (max-width: 1100px) and (min-width: 769px) {
	#main{ padding-top: 119px; }
}
@media only screen and (max-width: 768px) {
	#main{ padding-top: 60px; }
}

/* footer
------------------------------------------------ */
#footer { padding: 80px 0 0; }
.footer--logo{ width: 300px; margin: 0 auto; }
.footer--logo a{ display: block; }
.footer--logo a:hover{ opacity: 0.8; }
.footer-nav{ padding: 57px 5% 68px; }
.f-nav-head{ font-size: 1.8rem; font-weight: bold; letter-spacing: 0.074em; line-height: calc(24 / 18); }
.f-dropdown--group a{ padding-left: 18px; display: block; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.072em; line-height: calc(34 / 14); }
.copyright{ padding: 26px 20px; text-align: center; font-size: 1.4rem; font-weight: 400; line-height: calc(19 /14); border-top:1px solid #B1B1B1; }
.copyright a{ color:#202020; }
.copyright p{ margin-top: 10px; color:#B1B1B1; }

@media only screen and (min-width: 769px) {
	.footer-nav{ display: flex; flex-wrap: wrap; }
	.footer-nav ul li+li{ margin-top: 28px; }
	.footer-nav--col-1{ width: calc(100% - 750px); }
	.footer-nav--col-2{ width: 630px; }
	.footer-nav--col-3{ width: 120px; }
	.f-dropdown--group{ margin-top: 6px; display: block !important; }
	.f-dropdown--group.flex-group{ display: flex !important; }
	.f-dropdown--group a{ position: relative; }
	.f-dropdown--group a:before{ content: ''; position: absolute; left: 0; top: 17px; width: 8px; height: 1px; background-color: #B1B1B1; }
	.f-dropdown--group-col-1{ width: 41.6%; }
	.f-dropdown--group-col-2{ width: calc(100% - 41.6%); }
	
	[data-lang="en"] .f-nav-head{ font-size: 1.6rem; }
	[data-lang="en"] .f-dropdown--group a{ line-height: calc(20 / 14); }
	[data-lang="en"] .f-dropdown--group a+a{ margin-top: 1em; }
	[data-lang="en"] .f-dropdown--group a:before{ top: 10px; }
}

@media only screen and (max-width: 1100px) and (min-width: 769px) {
	.footer-nav{ padding: 57px 0 68px; justify-content: space-around; }
	.footer-nav--col-1{ width: calc(38% - 120px);}
	.footer-nav--col-2{ width: calc(70.7% - 120px); }
	.f-dropdown--group a{ line-height: calc(20 / 14); }
	.f-dropdown--group a+a{ margin-top: 12px; }
	.f-dropdown--group a:before{ top: 10px; }
}

@media only screen and (max-width: 768px) {
	#footer{ padding: 45px 0 30px; }
	.footer--logo{ width: 230px; }
	.footer-nav{ padding: 40px 0 50px; }
	
	.f-nav-head{ display: block; padding: 20px 0; font-size: 1.5rem; line-height: calc(41 / 30); }
	.f-dropdown .f-nav-head{ transition: padding .5s; background: url(../../img/share/nav-arrow-2.png) no-repeat calc(100% - 16px) 18px / 25px 25px; }
	.f-dropdown.on .f-nav-head{ padding: 20px 0 8px; background: url(../../img/share/nav-arrow-3.png) no-repeat calc(100% - 16px) 18px / 25px 25px; }
	.footer-nav--col-1{ border-top:1px solid #D8D8D8; }
	.footer-nav--col-2{ border-top:1px solid #D8D8D8; }
	.footer-nav--col-3{ border-top:1px solid #D8D8D8; }
	.footer-nav--col-3 li{ border-bottom:1px solid #D8D8D8; }
	.f-dropdown--group-col-2{ border-top:1px dashed #D8D8D8; }
	.f-dropdown--group{ display: none; }
	.f-dropdown--group a{ padding: 20px 15px; font-size: 1.5rem; line-height: calc(41 / 30); background: url(../../img/share/arrow1.png) no-repeat 0 25px / 9px auto; }
	.f-dropdown--group a+a{ border-top:1px dashed #D8D8D8; }
	.copyright{ padding: 0 25px; border:0; text-align: left; }
	.copyright a{ font-size: 1.3rem; }
	.copyright p{ margin-top: 13px; font-size: 1.2rem; }
	.slice{ position: relative; }
    .slice:after{ display: inline-block; content: '...'; }
}