
/******************************
	定義
*******************************/
:root {

	--text-color: #393939;
	--text-color-light: #767676;
	--text-color-darkblue: #1C1965;

	--font-thin:   100;
	--font-normal: 300;
	--font-bold:   500;
	--font-black:  900;

	--margin-side: min(120px,8%);
	--margin-side-request: min(200px,12%);

	--margin-side-mb: min(60px,4%);
	--margin-side-request-mb: min(100px,6%);
/*
	--line-color: #D6D6D9;
	--link_text: #0029ED;
	--link_hover: #F10060;

	--btn_color: #F1F1F2;
	--btn_color_text: #161617;
	--btn_color_border: #721736;

	--arrow-color: #EAEAEA;
	--header_height: 70px;
*/
}


/*--------------------------*/
/*	標準タグ	基本スタイル設定	*/
/*--------------------------*/
* {
	margin: 0;
	padding: 0;
}
html {
}
body {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: var(--font-normal);
	font-size: 16px;
	color: #393939;
	background-color: white;
	width: 100%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.tcol-black {
	color: #232526;
}
table tr.yohaku td{
	padding: 10px;
}

p {
	line-height: 1.6;
}
p.yohaku-tb {
	margin-top: 1rem;
	margin-bottom: 1rem;
}
ul {
	list-style-type: none;
}
ul.dot {
	list-style-type: initial;
}
input,
textarea {
	box-sizing: border-box;
}

/*--------------*/
/*	汎用スタイル	*/
/*--------------*/
.text-left {
	text-align: left !important;
}
.text-center {
	text-align: center !important;
}
.text-right {
	text-align: right !important;
}
.inline {
	display: inline-block;
}

.font-xs {	font-size: 10px !important;	line-height:14px;	}
.font-s {	font-size: 12px !important;	line-height:16px;	}
.font-m {	font-size: 14px !important;	line-height:18px;	}
.font-l {	font-size: 16px !important;	line-height:20px;	}
.font-xl {	font-size: 20px !important;	line-height:24px;	}
.font-xxl {	font-size: 30px !important;	line-height:34px;	}

.font-thin {		font-weight:var(--font-thin) !important;	}
.font-normal {		font-weight:var(--font-normal) !important;	}
.font-bold {		font-weight:var(--font-bold) !important;	}
.font-black {		font-weight:var(--font-black) !important;	}


.mt-0 {	margin-top: 0 !important;	}
.mt-1 {	margin-top: 1rem !important;	}
.mt-2 {	margin-top: 2rem !important;	}
.mb-0 {	margin-bottom: 0 !important;	}
.mb-1 {	margin-bottom: 1rem !important;	}
.mb-2 {	margin-bottom: 2rem !important;	}
.ml-0 {	margin-left: 0 !important;	}
.ml-1 {	margin-left: 1rem !important;	}
.ml-2 {	margin-left: 2rem !important;	}
.mr-0 {	margin-right: 0 !important;	}
.mr-1 {	margin-right: 1rem !important;	}
.mr-2 {	margin-right: 2rem !important;	}
.pt-0 {	padding-top: 0 !important;	}
.pt-1 {	padding-top: 1rem !important;	}
.pt-2 {	padding-top: 2rem !important;	}
.pb-0 {	padding-bottom: 0 !important;	}
.pb-1 {	padding-bottom: 1rem !important;	}
.pb-2 {	padding-bottom: 2rem !important;	}
.pr-0 {	padding-right: 0 !important;	}
.pr-1 {	padding-right: 1rem !important;	}
.pr-2 {	padding-right: 2rem !important;	}
.pl-0 {	padding-left: 0 !important;	}
.pl-1 {	padding-left: 1rem !important;	}
.pl-2 {	padding-left: 2rem !important;	}


.col-white {	color: white;	}
.col-black {	color: var(--text-color);	}
.col-darkgray {	color: var(--text-color-light);	}
.col-darkblue {	color: var(--text-color-darkblue);	}

.indent {	text-indent: 1rem;		}
.nowrap {	white-space: nowrap;	}


/*	テキスト回り込み（回り込みさせる要素に適用する）	*/
.wrap-text {
	float: none;
	max-width: none;
	width:　100%;
}
.wrap-text img {
	margin:0 auto;
}
img {
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	user-select: none;
}
img.fit {
	height: 100%;
	object-position: 50% 0%;
	object-fit: cover;
}


/*	画像
	テキスト	*/
.img-text {
/*	width: 150px;*/
	width: auto;
	padding: 5px;
}
.img-text.w150 {
	width: 150px;
}
.img-text.w300 {
	width: 300px;
}
.img-text.w30per {
	width: 30%;
}
.img-text img {
/*	width: 200px;*/
	object-fit: contain;
}
.img-text p {
}



/*	aタグ以外のリンクで使用	*/
.link-item {	cursor: pointer;	}

/*	PC/スマホでの表示／非表示	*/
@media screen and (min-width: 600px) {
.pc_hide {	display: none;	}
}
@media screen and (max-width: 600px) {
.mb_hide {	display: none;	}
}



/*	テキストの縁取り（白）	*/
.fuchidori {
	font-weight: bold;
/*	color:rgba(1,1,0,.0);*/
	text-align:center;
/*	padding: 40px 0;*/
	-webkit-text-stroke: 1px #FFF;
}





/*	リンク	*/
a { text-decoration: none; }
a:link { color: #707070; }			/*	未訪問のリンク	*/
a:visited { color: #707070; }		/*	訪問済みのリンク	*/
a:hover { color: #DC812A; }			/*	ポイント時のリンク	*/
a:active { color: #707070; }		/*	選択中のリンク	*/

a.white:link { color: white; }			/*	未訪問のリンク	*/
a.white:visited { color: white; }		/*	訪問済みのリンク	*/
a.white:hover { color: #089FDE; }		/*	ポイント時のリンク	*/
a:active { color: #DED108; }		/*	選択中のリンク	*/


/*	リンクに枠	*/
a.square {
	border: 1px solid gray;
	padding: 1rem;
	white-space: nowrap;
}
a.arrow-r {
	position: relative;
	padding-right: 45px;
	padding-left: 20px;
/*	top: 2rem;*/
}
a.arrow-r:after {
	content: "";
	display: inline-block;
	position: relative;
	left: 30px;
	width: 10px;
	height: 10px;
/*	border-top: 2px solid #ca5c27;
	border-right: 2px solid #ca5c27;
*/
	border-top: 2px solid gray;
	border-right: 2px solid gray;
	transform: translateX(-50%) rotate(45deg);
}
a.square.white {
	border: 1px solid white;
}
a.arrow-r.white:after {
	border-top: 2px solid white;
	border-right: 2px solid white;
}

a.arrow-r:hover:after {
	border-top: 2px solid #DC812A;;
	border-right: 2px solid #DC812A;;
}

a.arrow-r.white:hover:after {
	border-top: 2px solid #DED108;;
	border-right: 2px solid #DED108;;
}









/******************************
	ヘッダー・メニュー
*******************************/

header {
	position: relative;

}

header .splash {
	position: relative;
	width: 100%;
}
header .catch {
	position: absolute;
	color: white;
	font-weight: var(--font-black);
	font-size: 4vw;
	bottom: 80%;
	left: 10%;
}
header .lead {
	position: absolute;
	color: white;
	top: 20%;
	left: 10%;
	font-size: 2vw;
	font-weight: var(--font-bold);
}
header .headline {
	position: absolute;
	color: white;
	font-size: 2vw;
	font-weight: var(--font-bold);
	left: 10%;
	bottom: 26%;

}
header .band {
	position: absolute;
	bottom: 20%;
	height: 40%;
	width: 100%;
	background-color: #00101E;
	opacity: .45;
}
header .fm939 {
	position: absolute;
	bottom: 10%;
	right: 3%;
	height: 60%;
}
header .brainpro {
	position: absolute;
	right: 65%;
	bottom: 45%;
	width: 25%;
}
header .brainpro-text {
	position: absolute;
	color: white;
	top: 55%;
	left: 35%;
	font-size: 2vw;
	font-weight: var(--font-bold);
	transform: translateX(-100%);
}
header .futek {
	position: absolute;
	top: 2vw;
	right: 2vw;
	width: 10vw;
}

header .next {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
}

/*	文字左に下矢印	*/
.arrow-down {
    position: relative;
	padding-left: 10px;
}
.arrow-down:before {
	content: "";
	display: inline-block;
	position: relative;
	top: -10px;
	left: 0;
	width: 30px;
	height: 30px;
	border-top: 2px solid white;
	border-right: 2px solid white;
	transform: translateX(-50%) rotate(135deg);
}






#contents {
	position: relative;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s;
}

#contents > .explain {
	margin: 2rem var(--margin-side);
}


/******************************
	各セクション
*******************************/

section {
	position: relative;
	width: 100%;
	margin: 3rem 0 10rem;
}
section .midasi {
	height: 160px;
	background-image:
		url(../images/section_square@2x.png),
		url(../images/section_wave@2x.png),
		url(../images/section_wave@2x.png);
	background-repeat:
		repeat,
		no-repeat,
		no-repeat;
	background-position:
		center,
		center top,
		center bottom;
	background-size:
		auto,
		100% auto,
		100% auto;
	transform: 0.5s;
	text-align: center;
	margin-bottom: 3rem;
    position: relative;

	transition: 1s;
}

section .midasi h3 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);

	white-space: nowrap;

	color: var(--text-color-darkblue);
	background-color: white;
	font-size: 40px;
	font-weight: var(--font-black); 
	line-height: 50px;
	text-align: center;

	height: 50px;
	border: 6px solid var(--text-color-darkblue);
	border-radius: 40px;

	padding: 10px 60px;

	opacity: 1;
	transition: 1s;
}
section .midasi.hide {

	background-size:
		auto,
		100% 0%,
		100% 0%;
    background-position:
		center,
		center 50%,
		center 50%;
}
section .midasi.hide h3 {
	opacity: 0;
background-color:#E7C305;
/*	font-size: 6px;
	height: 6px;*/
}


section > .explain {
	font-size: 18px;
	font-weight: var(--font-bold);
	margin: 2rem var(--margin-side);
	margin-bottom: 2rem;

	text-align: center;
}
section > .explain > p {
	text-align: left;
}



@media screen and (max-width: 600px) {
section .midasi {
	height: 120px;
}
section .midasi h3 {
	top: 60px;
	font-size: 20px;
	padding: 5px 12px;
    width: 88%;
}

}




/******************************
	現場の声
*******************************/
.talks {
	margin: 2rem var(--margin-side);
}
.talk {
	width: 100%;
	white-space: nowrap;
}
.talk.right {
	text-align: right;
}

.talk .sil_human {
	display: inline-block;
    vertical-align: top;
}
.talk .fukidasi .quote {
	white-space: normal;
}
.talk .fukidasi {
	display: inline-block;
	position:relative;
	background:#FFFFFF;
	padding:20px;
	text-align:left;
	border:1px solid #AEAEAE;
	color:#333333;
	font-size:16px;
	border-radius:15px;
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
	width: 60%;
}
.talk .fukidasi:after,.talk .fukidasi:before{
	border: solid transparent;
	content:'';
	height:0;
	width:0;
	pointer-events:none;
	position:absolute;
	top:50%;
}
.talk .fukidasi:after{
	border-color: rgba(255, 255, 255, 0);
	border-top-width:10px;
	border-bottom-width:10px;
	border-left-width:30px;
	border-right-width:30px;
	margin-top: -10px;
}
.talk.left .fukidasi:after{
	border-right-color:#FFFFFF;
	right:100%;
}
.talk.right .fukidasi:after{
	border-left-color:#FFFFFF;
	left:100%;
}
.talk .fukidasi:before{
	border-color: rgba(174, 174, 174, 0);
	border-top-width:11px;
	border-bottom-width:11px;
	border-left-width:33px;
	border-right-width:33px;
	margin-top: -11px;
}
.talk .fukidasi:before{
	border-color: rgba(174, 174, 174, 0);
	border-top-width:11px;
	border-bottom-width:11px;
	border-left-width:33px;
	border-right-width:33px;
	margin-top: -11px;

}
.talk.left .fukidasi:before{
	margin-right: 1px;
	border-right-color:#AEAEAE;
	right:100%;
}
.talk.right .fukidasi:before{
	margin-left: 1px;
	border-left-color:#AEAEAE;
	left:100%;
}

@media screen and (max-width: 600px) {
.talk {
	margin-bottom: 2rem;
}
}



/******************************
	脳波が研究に利用されている分野
*******************************/
.bunya-images {
	margin: 2rem var(--margin-side);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.bunya-images .desc {
	text-align: center;
} 
.bunya-texts {
	margin: 2rem var(--margin-side);
}
.bunya-images > div {
	margin-bottom: 1.6rem;
}


/******************************
	導入事例
*******************************/
.casestudy {
	position: relative;
	width: 100%;
	margin: 5rem 0;
}
.casestudy .title {
	width: calc(100% - 60px);
	background-color: #6598D3;
	padding: 20px 30px;
	text-align: right;
}
.casestudy .title p {
	display: inline-block;
	width:85vw;
	color: white;
	font-size: 20px;
	font-weight: var(--font-bold);
}
.casestudy .profile {
	position: absolute;
	top: 3px;
	left: 20px;
	width: 16vw;
	border: 5px solid white;
	border-radius: 50%;
}
.casestudy .profile.second {
	top: calc(3px + 16vw);
}

@media screen and (max-width: 600px) {
.casestudy .title p {	width: 55vw;	}
.casestudy .profile {	width: 30vw;	}
.casestudy .profile.second {	top: calc(3px + 30vw);}
}
.casestudy .photo {
	width: 100%;
}
.casestudy .name {
	text-align: center;
	font-weight: var(--font-bold);
	font-size: 14px;
	margin: 2rem var(--margin-side);
}
.casestudy .case {
	text-indent: 1rem;
	margin: 2rem var(--margin-side);
}


/******************************
	導入実績
*******************************/
.introductions-list {
	margin: 2rem var(--margin-side);
}

/******************************
	論文一覧
*******************************/
.treatise-list {
	margin: 2rem var(--margin-side);
}
/*
.treatise-list > div.list {
	list-style: none;
	font-size: 12px;
	white-space: nowrap;
	width: 100%;
}
.treatise-list > div.list .title {
	position: relative;
	font-size: 16px;
	white-space: normal;
	display: inline-block;
	text-align: left;
}
.treatise-list > div.r-info {
	display: block;
	text-align: right;
	white-space: normal;
	font-size: 12px;
	width: 100%;
	margin-bottom: 4px;
}
*/

.treatise-list li {
	list-style: none;
	font-size: 12px;
	white-space: nowrap;
	width: 100%;
}
.treatise-list li .title {
/*	margin-left: 20px;*/
	position: relative;
	font-size: 16px;
	white-space: normal;
	display: inline-block;
	text-align: left;
}
.treatise-list li .r-info {
	display: block;
	text-align: right;
	white-space: normal;
	font-size: 12px;
	width: 100%;
	margin-bottom: 4px;
}

.treatise-list a {
	display: inline;
	vertical-align: top;
}
.treatise-list a.icon-pdf-l-NONE {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	right: 8px;
	pointer-events: none;
	cursor: default;
}
.treatise-list a .icon-pdf-l {
	background: url(../images/icon_pdf.png) no-repeat;
	background-size: cover;
	display: inline-block;
	width: 20px;
	height: 20px;
	right: 8px;
	position: relative;
}




/******************************
	手順が簡単な脳波測定
*******************************/
.howto {
	position: relative;
	width: 100%;
	margin-bottom: 10px;
	background-color: #DDE1E3;
    display: flex;
}
@media screen and (max-width: 600px) {
.howto { display: block;	}
}

.howto .order {
	position: relative;
	display: flex;
	background-color: #1B406A;
	justify-content: space-between;
}
.howto .order .number {
	display: inline-block;
	width: 100px;
	font-size: 50px;
	font-weight: var(--font-black);
	color: white;
	text-align: center;
	position: relative;
	top: 23px;
}
.howto .order .photo {
	display: inline-block;
	vertical-align: top;
}
.howto .order .ext1 {
	position: absolute;
	top: 3px;
	left: 90px;
}
.howto .order .ext2 {
	position: absolute;
	bottom: 3px;
	right: -20px;
}
@media screen and (max-width: 600px) {
	.howto .order .ext2 {
		right: 0;
	    bottom: -50px;
	}
}


.howto .text {
	display: inline-block;
	vertical-align: top;
	padding: 20px;

}
.howto .text .title {
	font-weight: var(--font-bold);
	font-size: 14px;
}
.howto .text .desc {
	margin-top: 1rem;
	font-size: 12px;
}

.howto .text .ext1,
.howto .text .ext2 {
	display: inline-block;
}
.howto .text .ext2 {
    vertical-align: top;
	margin: 10px;
}


/******************************
	スペック
*******************************/
.spec {
	margin: 2rem var(--margin-side);
}
.spec .brainpros {
	display: inline-block;
    vertical-align: top;
}
.spec .brainpros img{
	margin-bottom: 2rem;
}
.spec .sheet {
	display: inline-block;
    vertical-align: top;
	margin-left: 1rem;
	padding-top: 2rem;
}
.spec .sheet a.pdficon:before {
	content: '';
	background: url(../images/icon_pdf.png) no-repeat;
	background-size: cover;
	display: inline-block;
	width: 20px;
	height: 20px;
	top: 4px;
	position: relative;
}
.spec img {
	display: block;
	margin-bottom: 6px;
}



/******************************
	費用
*******************************/
.cost {
	margin: 2rem var(--margin-side);
	text-align: center;
}
.cost img {
	width: 100%;
}
.cost .sale {
	width: 100%;
	margin-top: 3rem;
}
.cost .sale > p {
	display: inline-block;
}
.rental-point {
	background-color: #EAEFFC;
	text-align: left;
	margin: 2rem 0;
	padding: 2rem var(--margin-side);
}



/******************************
	サポート
*******************************/
.support1 {
	width: 100%;
	position: relative;
	display: flex;
}
.support1 .photo {
	width: 50%;
	vertical-align: top;
}
.support1 .photo img{
	vertical-align: bottom;
}
.support1 .text {
	padding-left: 20px;
	flex: 1;
}
.support1 .text .underline {
    border-bottom: 1px solid #707070;
}

.support2 {
	width: 100%;
	position: relative;
	text-align: right;
	display: flex;
	flex-direction: row-reverse;
    align-items: flex-end;
}
.support2 .photo {
	width: 55%;
}
.support2 .text {
	display: table;
	padding-right: 20px;
	flex: 1;
}
.support2 .text .underline {
	padding-top: 2rem;
	border-top: 1px solid #707070;
}

@media screen and (max-width: 600px) {
.support1 {
	flex-wrap: wrap;
}

.support1 .photo {
	width: 100%;
}
.support1 .text {
	width: 100%;
}
.support2 {
	margin-top: 3rem;
	flex-wrap: wrap;
}
.support2 .photo {
	width: 100%;
}
.support2 .text {
	width:100%;
	text-align: left;
	padding-left: 20px;
	padding-right: 0;
}

}



/******************************
	歴史
*******************************/
.history {
	margin: 2rem var(--margin-side);
}
.history table {
	width:	100%;
	background: right center / contain no-repeat url(../images/bg_history.jpg);
}
.history table tr td {
	vertical-align: top;
	padding: 10px;
}
.history table tr td:nth-child(1) {
	font-size: 30px;
	font-weight: var(--font-bold);
	color: #707070;
	text-align: right;
}
.history table tr td:nth-child(2) {
	padding-top: 20px;
}
.history table tr td:nth-child(3) {
	text-align: right;
}

.msg {
	margin: 2rem var(--margin-side);
	font-size: 24px;
	font-weight: var(--font-bold);
}


/******************************
	資料請求・問い合わせ
*******************************/
.request {
	background-color: #EAEAEA;
	padding: 4rem var(--margin-side-request);
}

.request h3 {
	color: #707070;
}

.request .explain {
	margin-top: 4rem;
	text-align: center;
}
.request .explain p {
	text-align: left;
	display: inline-block;
}

.request .form {
	margin-top: 3rem;

}
.request .form .row {
	width: 100%;
	text-align: left;
	margin-bottom: 1rem;
}
.request .form .row.onlyinquire {
	display: none;
}

.request .form .row .label {
	display: inline-block;
	text-align: right;
	padding-right: 1rem;
	vertical-align: top;
	width: 30%;
    padding-top: 15px;
}

.request .form .row .field {
	display: inline-block;
	padding-top: 7px;
	width: 60%;
}

.request input[type="email"],
.request input[type="text"],
.request textarea {
	width: 100%;
    padding: 7px;
	box-sizing: border-box;
}
.request input[type="email"],
.request input[type="text"]
{
	height: 2rem;
}
.request input[type="email"].error,
.request input[type="text"].error,
.request textarea.error {
	border: 2px solid red;
	background-color: rgba(255,0,0,0.1);
}




.request-require {
}
.request-require:before {
	content:'必須';
	font-size: 10px;
	color: white;
	height: 16px;
	padding: 1px 5px;
	margin: 0 10px;
	line-height: 14px;
	background-color: #ED6735;
	display: inline-block;
}

@media (max-width: 600px) {

	.request input[type="email"],
	.request input[type="text"],
	.request textarea {
		width: 100%;
	}

.request .form .row .label {
	display: block;
	text-align: left;
	width: 90%;
}
.request .form .row .field {
	display: block;
	width: 100%;
}
.request-require:before {
	content:'';
	padding: 0;
	margin: 0;
}
.request-require:after {
    content: '必須';
    font-size: 10px;
    color: white;
    height: 16px;
    padding: 0px 5px 3px 5px;
    margin: 0 10px;
    line-height: 18px;
    background-color: #ED6735;
    display: inline-block;
    position: relative;
    top: -2px;
}



}

/*radio1*/
.sel-download label {
	margin-bottom: 2rem;	
	margin-right: 1rem;
	white-space: nowrap;
}
.sel-download label span {
	margin-bottom: 1.6rem;
}
.sel-download input[type="radio"] {
	appearance: none;
	display: none;
	opacity: 0;
	width: 1px;
	position: absolute;
	height: 1px;
}
.sel-download input[type="radio"] + span {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	padding: 10px 18px 11px 36px;
	border-radius: 30px;
	font-weight: 500;
	font-size: 14px;
	background: #c3c3c3;
	transition: background 0.5s;
}
.sel-download input[type="radio"] + span::before,
.sel-download input[type="radio"] + span::after {
	position: absolute;
	content: "";
	display: block;
	border-radius: 50%;
	top: 0;
	bottom: 0;
	margin: auto 10px auto 0;
	box-sizing: border-box;
}
.sel-download input[type="radio"] + span::before {
	width: 20px;
	height: 20px;
	background: #fff;
	border: 2px solid #c3c3c3;
	left: 9px;
}
.sel-download input[type="radio"]:checked + span::before {
	border: 3px solid #25529A;
}
.sel-download input[type="radio"] + span::after {
	width: 10px;
	height: 10px;
	background: #c3c3c3;
	left: 14px;
	opacity: 0;
}
.sel-download input[type="radio"]:checked + span {
	background: #25529A;
	color: white;
}
.sel-download input[type="radio"]:checked + span::after {
	background: #25529A;
}

.sel-download input[type="radio"]:checked + span::after {
	opacity: 1;
}

@media (max-width: 600px) {
	.request {
		padding: 4rem var(--margin-side-request-mb);
	}

	.sel-download input[type="radio"] + span {
		padding: 10px 11px 8px 36px;
	}

}
/*radio2*/
.sel-zoomdemo input[type="radio"] {
	appearance: none;
	display: none;
	opacity: 0;
	width: 1px;
	position: absolute;
	height: 1px;
}
.sel-zoomdemo input[type="radio"] + span {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	padding: 10px 11px 11px 36px;
	border-radius: 4px;
	font-weight: 500;
	font-size: 14px;
}
.sel-zoomdemo input[type="radio"] + span::before,
.sel-zoomdemo input[type="radio"] + span::after {
	position: absolute;
	content: "";
	display: block;
	border-radius: 50%;
	top: 0;
	bottom: 0;
	margin: auto 10px auto 0;
	box-sizing: border-box;
}
.sel-zoomdemo input[type="radio"] + span::before {
	width: 20px;
	height: 20px;
	background: #fff;
	border: 2px solid #999999;
	left: 9px;
}
.sel-zoomdemo input[type="radio"] + span::after {
	width: 10px;
	height: 10px;
	background: #999999;
	left: 14px;
	opacity: 0;
}
.sel-zoomdemo input[type="radio"]:checked + span::before {
	border: 2px solid #25529A;
}
.sel-zoomdemo input[type="radio"]:checked + span::after {
	background: #25529A;
	opacity: 1;
}

@media (max-width: 600px) {
	.sel-zoomdemo input[type="radio"] + span {
		padding: 10px 11px 8px 36px;
	}
}


/*送信ボタン*/
button.btn {
  border: none;
  outline: none;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 0.4rem 3rem;
  cursor: pointer;
  user-select: none;
}
button.btn-send {
	color: #fff;
	background-color: #EA6C6C;
	border-radius: 20px;
}
button.btn-send:hover {
  color: #fff;
  background: #B73232;
}
button.btn-send:active {
  color: #fff;
  background: #FF1515;
}
button.btn-send:after {
	content:'〉';
	position: absolute;
	right: 12px;
	font-size: 12px;
	top: 10px;
}


/*資料請求ボタン*/
a.btn.btn-request {
	border: none;
	position: relative;
	display: inline-block;
	padding: 20px 22%;
	font-size: 20px;
	outline: 4px solid #ea6c98;
	outline-offset: 3px;
	cursor: pointer;
	user-select: none;
}
a.btn-request {
	color: #fff;
	background-color: #ea6c98;
	border-radius: 50px;
}
a.btn-request:hover {
  color: #fff;
  background: #CB3268;
}
a.btn-request:active {
  color: #fff;
  background: #EA9DB8;
}




/*送信後の画面*/

#sending {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgb(255 255 255 / 90%);
	user-select: none;
	z-index: 10000;
}
#sending.hide {
	display: none;
}

#sending .msg {
	position: absolute;
	top: 30%;
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
}
#sending .msg p {
	text-align: left;
	color: var(--text-color);
	font-size: 20px;
	width: 70%;
	display: inline;
}
#sending button.btn-sent-close {
	position: absolute;
	bottom: 40%;
	left: 50%;
	transform: translateX(-50%);
	background-color: #405170;
	border-radius: 20px;
	color: white;
}



/******************************
	フッター・サイトマップ関連
*******************************/
footer {
	width: 100%;
	background-color: #232734;
	color: #F5F5F5;
    padding-top: 2rem;
}

footer .logo {
	display: block;
	width: calc(100% - 20px);
	margin: 0 10px;
	padding-bottom: 1rem;
}
footer .logo div {
	display: inline-block;
	width: calc(50% - 20px);
}
footer .logo div:nth-child(1) {
	text-align: center;
	vertical-align: top;
	margin-bottom: 3rem;
}
footer .logo div:nth-child(2) {
	text-align: right;
	vertical-align: bottom;
	margin-top: 3rem;
}

footer .sitemap {
	display: flex;
	border-top: 1px solid white;	
	border-bottom: 1px solid white;	
	padding: 20px 10px;
	margin: 0 20px;
	justify-content: space-between;
	flex-wrap: wrap;
}
footer .sitemap ul {
	flex-wrap: wrap;
}

footer .sitemap li {
	padding: 0 10px;
	line-height: 1.4rem;
	white-space: nowrap;
	font-weight: 200;
}
footer .sitemap li:before{
	content: "";
	position: relative;
	margin-right: 5px;
}
footer .sitemap li a.btn {
	border: 1px solid white;
    border-radius: 15px;
    padding: 3px 20px;
    line-height: 45px;
    font-size: 12px;
}

footer .copyright {
    text-align: center;
	width: 100%;
    line-height: 3rem;
	font-weight:normal;
	font-size: 12px;
}


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

footer .logo div:nth-child(1),
footer .logo div:nth-child(2) {
	width: 100%;
	text-align: center;
	margin-bottom: 0;
}
footer .sitemap ul {
	width: 100%;
}

}





/******************************

	拡張ボタン

*******************************/
.btn-expand1,
.btn-expand2 {
	margin: 2rem var(--margin-side);
	position: relative;
	background-color: #284A71;
	width: calc(100% - var(--margin-side) * 2);
	padding: 10px 0;
	color: white;
	display: block;
	text-align: center;
	line-height: 5 !important;
}
.coverup {
	height: 0;
	opacity: 0;
	transition: .5s;
/*	visibility: hidden;*/
}
.coverup.open  {
	height: auto;
	opacity: 1;
/*	visibility: visible;*/
}




/******************************

	初期アニメーション（遅延対策）

*******************************/

#contents.hide {
	opacity: 0;
	visibility: hidden;
}
header .splash {
	filter: blur(0);
	opacity: 0;
	transition: 1s;	
}
header .splash.feedin {	opacity: 1;	}
header .splash.blur {	filter: blur(5px);	}
header .catch {			transition: opacity 1s;		}
header .catch.hide {	opacity: 0;	}
header .lead {			transition: opacity 0.5s;	}
header .lead.hide {		opacity: 0;	}
header .band {			transition: 0.5s;	}
header .band.hide {		height: 0;	}
header .fm939 {			transition: right 1s;	}
header .fm939.hide {	right: -100%;	}
header .brainpro {		transition: right 1s;	}
header .brainpro.hide {	right: 100%;	}
header .brainpro-text {
	transition: opacity 0.5s;
	opacity: 1;
}
header .brainpro-text.hide {
	opacity: 0;
}
header .headline {
	transition: 0.5s;
	transform: scale(1.0);
}
header .headline.hide {
	opacity: 0;
	transform: scale(2.0);
}
header .next {
	transition: opacity 0.5s;
	opacity: 1;
	animation: 1s ease-in 1s infinite nextAnim;
	visibility: visible;
}
header .next.hide {
	opacity: 0;
	visibility: hidden;
}
@keyframes nextAnim {
0% {
	bottom: 10%;
	opacity: 0;
	}
30% {
	opacity: 1;
	}
80% {
	opacity: 1;
	}
100% {
	bottom: 0%;
	opacity: 0;
	}
}









/******************************

	上の戻るフローティング

*******************************/
#back_top_float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	cursor: pointer;
	z-index: 8;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA8CAYAAAA+CQlPAAAAAXNSR0IArs4c6QAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAPqADAAQAAAABAAAAPAAAAAB8K1uhAAACRklEQVRoBe3bTarCMBAH8PHxBLduxROoICh6CEFdews9iVt3gi7ceAJBBZeeQNx4BxEREX0kMFLKwzTTJGNJCjL1I01++dfWz9xwOHyBh8uvMI/HY6/oo9EIfrwSR7ABHpkML1ZD4l7EHEGGxCOT4cVqSNyLmCPIkHhkMrxYDYlzxPx8Pjm6lX2yJT6ZTGC32/kFn8/n0Gq1oFgswnQ6ZcE7T1ygK5UKNJtNqNfr0Gg0WPBO4VE0xsyFdwb/D82JdwL/hObCW4cnQXPgrcJ10K7x1uAUtEu8FfhsNnufshCjW20f7Y3DBbpWq8nztAr7en3+LsMm3igc0eJFiWpZLpdwOp1UD7P2IscYXAe93W4hn8/D4XCA1WrFgjcC10Wfz2fo9/vQ6XTg8Xiw4FPDqWiMmQufCp4WzYknw3XQm80GcPdGbLy6Tp4E3+/38pSV5Ogt0JfLRT6n49j4dV18u92GxWIR30yi6yR4qVSS76NVPSC61+upHvq+XwdfrVZhMBi82+qskODlclnZBwWNG9XBYxvdSoKrOkmDxm3bxhuHm0C7wBuFm0TbxhuD20DbxBuBr9drecrSOXojKmk1/ZxPDRfo6/UKNtE4OSbxqeCI7na7ODbr1RSeDOdA46yawJPgx+NR7t4uk0Y01rR4+ZNO3FjSer/fgRON4xT42+0mL4VCAW9OVElw8Znatyy6YBw3aVfHxlmuAZ7l9ChjD4lTZi3LbULiWU6PMvaQOGXWstwmJJ7l9ChjD4lTZi3LbXK+/sXyD+9wUViJ/4JSAAAAAElFTkSuQmCC");
	background-size: contain;
	background-repeat: no-repeat;

	opacity: 0.8;
	width: 41px;
	height: 40px;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

}
img#back_top_float{
}
@media screen and (max-width: 600px) {
#back_top_float {
	right: 10px;
	bottom: 10px;
}
}



