@charset "utf-8";
/* CSS Document */


/* ----------------------------------------------------
   Basic setting:
------------------------------------------------------- */

/* reset:
--------------------------------------------*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

ul,ol {list-style: none;}
em,address {font-style: normal;}


/* Basic
--------------------------------------------*/

:root {
  --black: #000;
  --white: #fff;
  --gray-back: #F1F1F1;
  --border: solid 2px var(--black);
  --font-family: 'ヒラギノ角ゴ Pro W3' ,'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS  PGothic', sans-serif;
  --font-family_en: "Orbitron", sans-serif;
  --gap: 30px;
  --maru: 10px;	
  --outline1: 1000px;	
  --outline2: 1366px;
  --pa: 3%;
}
@media (max-width: 767px) {
	:root {
		--gap: 20px;
	}
}


@media (min-width: 768px) {
  html {
    font-size: calc(0.875rem + ((1vw - 7.68px) * 0.1736));
    min-height: 0vw;
  }
}
@media (min-width: 1920px) {
  html {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  html {
    font-size: 14px;
  }
}

html {
	position: relative;
}

body {
	font-family: var(--font-family);
	line-height: 2;
	color:  var(--black1);
	position: relative;
}

.outline1,.outline2  {
    margin: 0 auto;
	box-sizing: content-box;
	padding: 0 var(--pa);
}

.outline1 {
	max-width: var(--outline1);
}

.outline2 {
	max-width: var(--outline2);
}


/*---- block_skip ----*/

#block_skip a {
	display:block;
	height: 0;
	overflow: hidden;
	text-align: center;
	color: var(--white);
	background: var(--black);
	font-size: 100%;
}

#block_skip a:focus {
	height: auto;
	line-height: 3em;
}

/*---- link button ----*/

/*-- link --*/

a {color: var(--black);text-decoration: none;transition: all 300ms 0s ease;}
a:focus-visible,
input:focus-visible,
button:focus-visible {outline: 2px var(--white) solid;}


/*-- button --*/

button {border: none;background: none;transition: all 300ms 0s ease;font-family: var(--font-family);color: var(--black);}
button:hover {cursor: pointer;}


/* Utility
--------------------------------------------*/

.pc{display: block;}
.sp{display: none;}

@media screen and (max-width: 767px){
	.pc{display: none;}
	.sp{display: block;}
}

/*---- .align ----*/

.align_c { text-align: center!important; }
.align_l { text-align: left!important; }
.align_r { text-align: right!important; }
.valign-m { vertical-align: middle !important; }
.valign-t { vertical-align: top !important; }
.valign-b { vertical-align: bottom !important; }

/*---- .margin ----*/
.mg_0 { margin: 0!important; }
.mg_1 { margin: 1em!important; }
.mg_2 { margin: 1em!important; }
.mg_t0 { margin-top: 0rem!important; }
.mg_t1 { margin-top: 1rem!important; }
.mg_t2 { margin-top: 2rem!important; }
.mg_t3 { margin-top: 3rem!important; }
.mg_t4 { margin-top: 4rem!important; }
.mg_b0 { margin-bottom: 0!important; }
.mg_b1 { margin-bottom: 1em!important; }
.mg_b2 { margin-bottom: 2em!important; }
.mg_b3 { margin-bottom: 3em!important; }
.mg_l1 { margin-left: 1em!important; }
.mg_r1 { margin-right: 1em!important; }


.inl_blk{display: inline-block}


/*---- color ----*/

.red , .red a{
	color: var(--red);
}

/*---- font ----*/

.itl {font-style: italic;}

.fs110 {font-size: 1.1rem;}
.fs90 {font-size: .9rem;}
.fs80 {font-size: .8rem;}

.nowrap {
	white-space: nowrap;
}

/*---- .width ----*/

.w5 { width: 5%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 65%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }

.w100_sp70 { width: 100%; }

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

	.sp_w100 { width: 100%; }
	.w100_sp70 { width: 70%; }
	.sp_w10 {width: 10%;}
}

/*---- grid system ----*/

.grid {
	display: grid;
	grid-gap: var(--gap);
    justify-content: space-between;
}

.grid.al_c {align-items: center;}

.grid.clm2{grid-template-columns: repeat(2,1fr);}
.grid.clm3{grid-template-columns: repeat(3,1fr);}
.grid.clm4{	grid-template-columns: repeat(4,1fr);}
.grid.clm5{grid-template-columns: repeat(5,1fr);}
.grid.clm6{grid-template-columns: repeat(6,1fr);}

.grid.clm1-2 {grid-template-columns: 1fr 2fr;}
.grid.clm2-1 {grid-template-columns: 2fr 1fr;}
.grid.clm1-3 {grid-template-columns: 1fr 3fr;}
.grid.clm3-1 {grid-template-columns: 3fr 1fr;}
.grid.clm1-4 {grid-template-columns: 1fr 4fr;}
.grid.clm4-1 {grid-template-columns: 4fr 1fr;}
.grid.clm1-5 {grid-template-columns: 1fr 5fr;}
.grid.clm5-1 {grid-template-columns: 5fr 1fr;}
.grid.clm6-1 {grid-template-columns: 6fr 1fr;}

.grid.clm2-1-1 {grid-template-columns: 2fr 1fr 1fr;}

@media screen and (max-width: 767px){
	.grid {
		grid-template-columns: 1fr!important;
	}
	
	.grid.sp_clm2{grid-template-columns: repeat(2,1fr)!important;grid-gap: 1rem;}
	.grid.sp_clm3{grid-template-columns: repeat(3,1fr)!important;grid-gap: 1rem;}
}


/* element setting:
--------------------------------------------*/

/*---- img  ----*/

img {border: none;vertical-align: middle;}


/*-- icon --*/

:is(.icon, .icon_blank) {
    margin: 0 6px;
    vertical-align: middle !important;
    width: auto;
    height: 24px;
}
.icon_blank {
    height: 17px;
    margin-bottom: 4px;
}

/*-- iframe --*/
iframe {
    width: 100%;
    height: 300px;
    border: none;
}

/*---- dl ----*/

dl {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 1.5rem;
	grid-row-gap: .5rem;
}

dl dt {
	font-weight: bold;
}



/* header:
--------------------------------------------*/

header {
	display: grid;
	grid-template-columns: 65px 1fr;
	grid-column-gap: 2rem;
	align-items: center;
	background: var(--black);
	padding-right: var(--pa);
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 99;
}
body {
	padding-top: 65px;
}

header .logo img{
	height: 65px;
}

header ul.sec_nav {
	justify-self: flex-end;
}

header ul.sec_nav li {
	display: inline-block;
	margin-left: 2rem;
}

header ul.sec_nav li a {
	font-weight: 500;
	font-size: 1.1rem;
	color: var(--white);
	opacity: .8;
}
header ul.sec_nav li a:hover{
	opacity: 1;
}

@media screen and (max-width: 959px){
	header ul.sec_nav li a {
		font-size: 1rem;
	}
}


/* gdpr setting :(when change, /common/tmp/js.php must be changed)
--------------------------------------------*/

#gdpr{
	background: var(--black);
	color:#fff;
	padding: 1rem!important;
	width:100%;
	z-index:999;
	display:none;
	border-radius: var(--maru);
	max-width: var(--outline2);
	bottom:15px;
	left: 50%!important;
	transform: translateX(-50%)!important;
}
@media screen and (max-width: 767px){
	#gdpr{
		width: 95%!important;
		bottom:7px;
	}
}

#gdpr.on{
	display:table;
}

#gdpr a{
	color:#fff;
	text-decoration: underline;
}
#gdpr a:hover{
	text-decoration: none;
}

#gdpr .btn a{
	display:block;
	text-align:center;
	margin:1em auto 0!important;
	width:12em;
	text-decoration:none;
	transition:all 0.3s;
	background: rgba(255,255,255,0.15)!important;
	border:solid 1.5px rgba(255,255,255,0.25);
	border-radius: 5px;
}

#gdpr .btn a:hover{ background:rgba(255,255,255,0.25)!important;}


#gdpr.ja_gdpr h2{
	margin: 0.5rem 0!important;
}


/* footer:
--------------------------------------------*/

footer {
	background: var(--black);
	color: var(--white);
	padding: 4rem 0 1.5rem;
}

footer a{
	color: var(--white);
}

footer .footer1 {
	display: grid;
	grid-gap: var(--gap);
	grid-template-columns: 35% 1fr;
	align-items: center;
}

footer .footer1 :is(.left,.right) {
	display: grid;
	grid-row-gap: 1.5rem;
}

footer .footer1 .left{
	justify-self: center;
}

footer .footer1 .left img{
	width: 80%;
	max-width: 150px;
	margin: 0 auto;
}

footer .footer1 .left a{
	display: block;
	padding: .7rem 2rem .7rem 1rem;
	background: rgba(255,255,255,0.15) url("../img/arrow01.svg") no-repeat center right 7px;
	background-size: 12px;
	border-radius: 5px;
	border: solid 1.5px rgba(255,255,255,0.25);
}

footer .footer1 .left a:hover{
	background: rgba(255,255,255,0.25) url("../img/arrow01.svg") no-repeat center right 5px;
	background-size: 12px;	
}

footer .footer1 .right h2{
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.4;
}

footer .footer1 .right dl dd img:nth-of-type(1){
	width: 20%;
	margin-right: 1rem;
}
footer .footer1 .right dl dd img:nth-of-type(2){
	width: 10%;
}

footer .footer2 {
	display: grid;
	grid-gap: var(--gap);
	grid-template-columns: auto 1fr;
	margin-top: 4rem;
	align-items: center;
}

footer .footer2 ul li{
	display: inline-block;
	margin-right: 1.5rem;
}

footer .footer2 ul li a{
	opacity: .8;
	font-size: 0.9rem;
}
footer .footer2 ul li a:hover{
	opacity: 1;
}

footer .footer2 small{
	opacity: .8;
	justify-self: end;
	font-size: 0.8rem;
}

@media screen and (max-width: 767px){
	footer {
		background: var(--black);
		color: var(--white);
		padding: 3rem 0 1.5rem;
	}
	footer :is(.footer1,.footer2) {
		grid-template-columns: 1fr;
	}
	footer .footer1 .right dl dd img:nth-of-type(1){
		width: 33%;
	}
	footer .footer1 .right dl dd img:nth-of-type(2){
		width: 20%;
	}

	footer .footer2 {
		text-align: center;
		margin-top: 2rem;
	}
	footer .footer2 small {
		justify-self: center;
	}
}


/*--  page_top --*/

#page_top {
	display: block;
	right: 5px;
	z-index: 5;
}

#page_top a {
	display: grid;
	width: 40px;
	height: 40px;
	background: var(--black);
	border: 2px solid #fff;
	align-items: center;
    justify-content: center;
	border-radius: 5px;
}

#page_top a img{
	width: 10px;
}

#page_top a:hover {
	opacity: 0.8;
}

/*-- copy --*/

#copy {
	background: #444;
	padding: 1.2rem 105px 1.5rem 0;
}

#copy small{
	color: var(--white);
	display: block;
	line-height: 1rem;
}