/*@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);


/* HTMLのベース指定部分 */
* {  font-size :12px; line-height:2.0em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0px; }
html { height: 100%; width:100%; }
body { min-height: 100%; width:100%;  margin: 0 auto; padding: 0px; color : #333; line-height: 1.25em;
	font-family: 'Noto Sans Japanese', 'YuGothicM', 'YuGothic', 'Hiragino Kaku Gothic Pro', 'Osaka', 'MS PGothic', 'sans-serif'; position: relative; }

*.pc{ display:block; }
*.smp{ display:none; }

a { color:#617fd4; text-decoration:none; cursor:pointer; }
a:hover{ text-decoration:underline; }
dl, dt, dd, ul, ol, li, div, h1, h2, h3, h4, h5, h6, p { padding:0; margin:0; font-weight:normal; }
li{ list-style-type:none; }
img{vertical-align:middle;}
th{ font-weight:normal; }
hr{ border:0; clear:both; }
h2{ font-size:2em; font-weight:bold; text-align:center; padding:100px 0; border-bottom: 1px solid #ccc; }
h3{ font-size:1.5em; font-weight:bold; color:#666; padding:0;  border-bottom: 1px solid #222; margin:30px 0 10px 0; }
h4{ font-size:1.5em; font-weight:bold; color:#666; text-align:center; padding:0 0 10px 0; }
h5{ font-size:1.5em; font-weight:bold; padding:10px 0; }

@media screen and (max-width: 768px) {
	* { font-size : 1.5vw; }
	h2{ font-size:1.5em; padding:10vw 0; }
	h3{ font-size:1.4em; padding:2vw 0; }
	h4{ font-size:1.4em; padding:0 0 2vw 0; }
	h5{ font-size:1.2em; padding:2vw 0; }
}
@media screen and (max-width: 480px) {
	* { font-size : 3vw; }
	h2{ font-size:1.5em; padding:10vw 0; }
	h3{ font-size:1.4em; padding:2vw 0; }
	h4{ font-size:1.4em; padding:0 0 2vw 0; }
	h5{ font-size:1.2em; padding:2vw 0; }
}


/*--------- -----*/
/*  エラーメッセージ   */
/*---------------*/
.mfp-bg{ background:rgba(255,255,255,.9); }
dl#messagearea{ width:90%; max-width:500px; margin:0 auto; background:rgba(0,0,0,.7); color:#fff; border-radius:10px; padding:30px 0; }
dl#messagearea>dt{ padding:0 0 30px 0; width:90%; margin:0 auto; text-align:center; font-weight:bold; font-size:1.4em; border-bottom: 1px dashed #fff; }
dl#messagearea>dd{ padding:30px 0; width:90%; margin:0 auto; }
dl#messagearea>dd:nth-of-type(2){ color:#fff; cursor:pointer; border-radius:5px; border:2px solid #fff; text-align:center; padding:20px 0; }
dl#messagearea>dd:nth-of-type(2):hover{ background:rgba(255,255,255,.1); }
dl#messagearea>dd>span{ display:block; padding:20px 0; text-align:center; }
@media screen and (max-width: 768px) {
	dl#messagearea{ width:95%; border-radius:1vw; padding:6vw 0; }
	dl#messagearea>dt{ padding:0 0 6vw 0; }
	dl#messagearea>dd{ padding:6vw 0; }
	dl#messagearea>dd:nth-of-type(2){ border-radius:1vw; padding:4vw 0; }
	dl#messagearea>dd>span{ padding:4vw 0; }
}



/* ----------------------------------------------------- */
/* 入力フォーム */
/* ----------------------------------------------------- */

button, label{cursor:pointer;}
button:hover, label:hover{ opacity:.8; }
::-webkit-input-placeholder{ color:#ddd; }
::-moz-placeholder{ color:#ddd; }
:-ms-input-placeholder{ color:#ddd; }

/* テキスト */
input[type="text"],
input[type="password"],
input[type="color"],
input[type="date"],
input[type="datetime-local"] { width:100%; height:40px; font-size:1.2em; padding: 0; text-indent:10px; border: 1px solid #ccc; margin:10px 0; }

/* テキストエリア */
textarea{ width:100%; height:100px; font-size:1.2em; padding:10px; border: 1px solid #ccc; margin:10px 0; }
textarea.midiumtext{ height:200px; }
textarea.longtext{ height:500px; }

/* セレクトボックス */
select{ width:100%; height:40px; text-indent:5px; border: 1px solid #ccc; margin:10px 0; font-size:1.2em; padding-left:10px; }
select option{ font-size:1.2em; }
select.multiselect{ height:100px; font-size:1.2em; }

/* チェックボックス */
.checkbox{ padding:.5em 1.5em .5em 0; display:inline-block; }
.checkbox input[type=checkbox]{ display: none; }
.checkbox input[type=checkbox] + span { display:inline-block; vertical-align:middle; width:25px; height:25px; border: 1px solid #ccc; margin-right:.5em; }
.checkbox input[type=checkbox]:checked + span:after{ content:"\f00c"; font-family:FontAwesome; color:#666; display:inline-block; width:25px; line-height:25px; text-align:center; }

/* ラジオボタン */
.radio{ padding:.5em 1.5em .5em 0; display:inline-block; }
.radio input[type=radio]{ display: none; }
.radio input[type=radio] + span { display:inline-block; vertical-align:middle; width:25px; height:25px; border: 1px solid #ccc; margin-right:.5em; border-radius:50%; }
.radio input[type=radio]:checked + span:after{ content:"\f111"; font-family:FontAwesome; color:#666; display:inline-block; width:23px; line-height:23px; text-align:center; }

/* ボタン */
button{ color:#fff; width:100%; margin:20px 0 0 0; height:50px; line-height:50px; background:#999; border: 1px solid #fff; border-radius:5px; box-shadow: 2px 2px 6px rgba(0,0,0,0.2); transition: background-color .2s; }
button:hover{ box-shadow: 2px 2px 8px rgba(0,0,0,0.5); }

.error input{ border: 2px solid #ffa29d; }
.error textarea{ border: 2px solid #ffa29d; }
.error select{ border: 2px solid #ffa29d; }
.error .inputgroup{ border: 2px solid #ffa29d; }

@media screen and (max-width: 768px) {
	/* テキスト */
	input[type="text"],
	input[type="password"],
	input[type="color"],
	input[type="date"],
	input[type="datetime-local"] { width:100%; height:6vw; font-size:16px; padding: 0; text-indent:1vw; margin:1vw 0; }

	/* テキストエリア */
	textarea{ width:100%; height:6vw; font-size:16px; padding:1vw; margin:1vw 0; }
	textarea.midiumtext{ height:6vw; }
	textarea.longtext{ height:6vw; }

	/* セレクトボックス */
	select{ width:100%; height:6vw; text-indent:1vw; margin:1vw 0; font-size:16px; padding-left:2vw; }
	select option{ font-size:16px; }
	select.multiselect{ height:36vw; font-size:1.16px; }

	/* チェックボックス */
	.checkbox input[type=checkbox] + span { width:2.5vw; height:2.5vw; }
	.checkbox input[type=checkbox]:checked + span:after{ width:2.5vw; line-height:2.5vw; }

	/* ラジオボタン */
	.radio input[type=radio] + span { width:2.5vw; height:2.5vw; }
	.radio input[type=radio]:checked + span:after{ width:2.5vw; line-height:2.5vw; text-align:center; }

	/* ボタン */
	button{ margin:8vw 0 0 0; height:6vw; line-height:6vw; border-radius:1vw; }

}
@media screen and (max-width: 480px) {
	/* テキスト */
	input[type="text"],
	input[type="password"],
	input[type="color"],
	input[type="date"],
	input[type="datetime-local"] { width:100%; height:12vw; font-size:16px; padding: 0; text-indent:2vw; margin:2vw 0; }

	/* テキストエリア */
	textarea{ width:100%; height:12vw; font-size:16px; padding:2vw; margin:2vw 0; }
	textarea.midiumtext{ height:12vw; }
	textarea.longtext{ height:12vw; }

	/* セレクトボックス */
	select{ width:100%; height:12vw; text-indent:1vw; margin:2vw 0; font-size:16px; padding-left:2vw; }
	select option{ font-size:16px; }
	select.multiselect{ height:36vw; font-size:1.16px; }

	/* チェックボックス */
	.checkbox input[type=checkbox] + span { width:5vw; height:5vw; }
	.checkbox input[type=checkbox]:checked + span:after{ width:5vw; line-height:5vw; }

	/* ラジオボタン */
	.radio input[type=radio] + span { width:5vw; height:5vw; }
	.radio input[type=radio]:checked + span:after{ width:5vw; line-height:5vw; text-align:center; }

	/* ボタン */
	button{ margin:4vw 0 0 0; height:12vw; line-height:12vw; border-radius:1vw; }
}

/*   loading    */
#loader-bg { display:none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 98; background:#fff; }
#loader { display:none; position: fixed; top: 50%; left: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; text-align: center; color: #fff; z-index: 99; }

/*   header    */
header{ position:fixed; z-index:97; width:100%;  background:rgba( 255, 255, 255, .8 ); height:100px; }
header>div#head01{ background:rgba(0,0,0,.8); height:30px; }
header>div#head01 * { color:#fff; }
header>div#head01>ul{ display:table; width:100%; height:100%; max-width:1200px; margin:0 auto; }
header>div#head01>ul>li{ display:table-cell; vertical-align:middle; padding:0 5px; }
header>div#head01>ul>li:nth-of-type(2){ text-align:right; }
header>div#head01>ul>li:nth-of-type(2) a{ display:inline-block; padding:0 10px; }
header>div#head01>ul>li:nth-of-type(2) a:hover{ text-decoration:none; color:#FFBA00; }

header>div#head02{ height:70px; }
header>div#head02>ol{ display:table; width:100%; height:100%; max-width:1200px; margin:0 auto; }
header>div#head02>ol>li{ display:table-cell; vertical-align:middle; padding:0 5px; white-space:nowrap; }
header>div#head02>ol>li:nth-of-type(1) img{ height:50px; }

header nav{ text-align:right; }
header nav > div{ display:inline-block; }
header nav > div>a{ display:block; padding:0 10px; color:#222; position:relative; }
header nav > div>a:hover{ text-decoration:none; }
header nav > div>a:hover:after{ content:""; display:block; position:absolute; width:100%; height:5px; left:0; background:#FFBA00; }
header nav > div>a>img{ display:block; margin:0 auto; height:30px; }
header nav > div>a>span{ display:block; margin:0 auto;; text-align:center; }
header div#nav-toggle { display: none; }

@media screen and (max-width: 768px) {
	header{ height:10vw; }
	header>div#head01{ height:3vw; }
	header>div#head01>ul>li{ padding:0 .5vw; }
	header>div#head01>ul>li:nth-of-type(2) a{ padding:0 1vw; }

	header>div#head02{ height:7vw; }
	header>div#head02>ol>li{ padding:0 .5vw; }
	header>div#head02>ol>li:nth-of-type(1) img{ height:5vw; }
	header nav > div>a:hover:after{ height:.5vw; }
	header nav > div>a>img{ height:3vw; }
}
@media screen and (max-width: 480px) {

	header{ height:18vw; }
	header>div#head01{ background:rgba(0,0,0,.8); height:5vw; overflow:hidden; }
	header>div#head01 * { font-size:.8em; }
	header>div#head01>ul>li{ padding:0 1vw; }
	header>div#head01>ul>li:nth-of-type(2) a{ padding:0 2vw; }

	header>div#head02{ height:13vw; }
	header>div#head02>ol>li{ padding:0 1vw; white-space:nowrap; }
	header>div#head02>ol>li:nth-of-type(1) img{ height:9vw; }
	header>div#head02>ol>li:nth-of-type(2) {  }

	header div#nav-toggle { top:5vw; right:0; display: block; width: 10vw; height: 10vw; border: 0.5vw solid #999; border-radius:1vw; cursor: pointer; position:fixed; margin:2vw 2vw 0 0; }
	header div#nav-toggle div {position: relative; margin:1vw auto 0 auto; width:70%; }
	header div#nav-toggle span {display: block; position: absolute; height: .5vw; width: 100%; background:#999; left:0; }
	header div#nav-toggle span:nth-of-type(1) {top: 1.5vw; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }
	header div#nav-toggle span:nth-of-type(2) {top: 3.5vw; }
	header div#nav-toggle span:nth-of-type(3) {top: 5.5vw; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }

	header nav{ position:fixed; z-index:0; display:block; top:18vw; right:0; width:0; height:100%; background:rgba(246,199,73,.8); padding:2vw 0; transition:width .3s; }
	header nav > div{ display:block; width:90%; margin:2vw auto; }
	header nav > div>a{ display:block; text-align:left; padding:3vw 5vw; background:#fff; border-radius:2vw; position:relative; }
	header nav > div>a>img{ display:inline-block; margin:0 auto; height:5vw; }
	header nav > div>a>span{ display:inline-block; margin:0 auto; position:absolute; left:15vw; }


	header nav > ul.smp{ display:table; width:80%; table-layout:fixed; border-spacing:1vw; text-align:center; position:fixed; bottom:0; }
	header nav > ul.smp>li{ display:table-cell; }
	header nav > ul.smp>li>a{ display:block; padding:10px; background:#f48a2b; color:#fff; border-radius:10px; }


	header.open div#nav-toggle span:nth-of-type(1) {top: 3.5vw; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); }
	header.open div#nav-toggle span:nth-of-type(2) {height: 0;}
	header.open div#nav-toggle span:nth-of-type(3) {top: 3.5vw; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); }
	header.open nav{ width:80%; }
}


/* GO TO TOP */
a#gototop{ font-size:0; line-height:0; position:fixed; bottom:-150px; right:20px; z-index:90; border-radius:5px; }
a#gototop>div{ display:block; width:60px; height:60px; border-radius:5px; text-align:center; padding-top:10px; background:rgba(120,120,120,.5); color:#fff; transition:.2s; box-shadow: 2px 2px 10px rgba(0,0,0,0.3); font-size:10px; }
a#gototop>div:before{ content:"\f106"; font-family:FontAwesome; display:block; width:30px; height:30px; line-height:30px; margin:0 auto ; color:#fff; font-size:3.0em; }
a#gototop:hover>div{ background:rgba(120,120,120,.9); }
@media screen and (max-width: 480px) {
	a#gototop{ right:2vw; z-index:90; border-radius:1vw; }
	a#gototop>div{ width:12vw; height:12vw; border-radius:1vw; padding-top:1vw; font-size:2vw; background:rgba(120,120,120,.9); }
	a#gototop>div:before{ width:6vw; height:6vw; line-height:6vw; font-size:6vw; }
}	

/*   footer    ( 通常200px, ログイン時320px )*/
footer{ text-align:center; width:100%; position: absolute; bottom: 0; }
footer * { color:#fff; }
footer>div{ background:#ccc; }
footer>div>div{ width:100%; max-width:1200px; height:120px; margin:0 auto; padding:30px; border-bottom: 1px solid #666; }
footer>div>div>a{ display:inline-block; padding:0 10px; position:relative; }
footer>div>div>a:hover{ text-decoration:none; }
footer>div>div>a:hover:after{ content:""; display:block; position:absolute; width:100%; height:2px; left:0; background:#fff; }
footer>div>div>a>img{ height:50px; }
footer>div>div>a>span{ display:block; color:#666; }

footer>div>p{ width:100%; max-width:1200px; margin:0 auto; line-height:50px; }
footer>div>p>a{ display:inline-block; padding:0 20px; color:#666; }

footer>p{ background:#333; height:150px; line-height:20px;padding:45px 0; }
footer>p>span{ display:block; }
footer>p>span img{ height:40px; }

@media screen and (max-width: 768px) {
	/*( 通常32vw, ログイン時48vw )*/
	footer{  }
	footer>div>div{ display:block; position:fixed; bottom:0; left:0; width:100%; white-space:nowrap; overflow:auto; height:16vw; background:#fff; padding:2vw 0; letter-spacing:-.4em; }
	footer>div>div>a{ width:20%; padding:0 2vw; position:relative; }
	footer>div>div>a>img{ height:12vw; }
	footer>div>div>a>span{ display:none; }

	footer>div>p{ margin:0 auto; padding-top:0; width:100%; border:0; height:12vw; }
	footer>div>p>a{ display:inline-block; padding:0 2vw; }

	footer>p{ height:20vw; line-height:0; padding:2vw 0; }
	footer#login>p{ height:36vw; }
	footer>p>span{ display:block; }
	footer>p>span>img{ height:10vw; }
}



/*   content    */
body>article{ padding:100px 0 200px 0; background:#fff; }
body>article#login{ padding:100px 0 320px 0; }
@media screen and (max-width: 768px) {
	body>article{ padding:10vw 0 32vw 0; }
	body>article#login{ padding:10vw 0 48vw 0; }
}
@media screen and (max-width: 480px) {
	body>article{ padding:18vw 0 32vw 0; }
	body>article#login{ padding:18vw 0 48vw 0; }
}


/* 準備中表示 */
section#underconstruction{
	width:100%; max-width:1200px; margin:0 auto;  padding:200px 50px; text-align:center; background-size: 100px 100px;
	background-image: linear-gradient( -45deg, #b5b6b6 25%, #ffefb8 25%, #ffefb8 50%, #b5b6b6 50%, #b5b6b6 75%, #ffefb8 75%, #ffefb8 );
}
section#underconstruction:after{ content:"UNDER CONSTRUCTION"; color:#fff; font-size:6em; font-weight:bold; text-shadow: 5px 5px 10px 5px rgba(0,0,0,0.4); }
@media screen and (max-width: 768px) {
	section#underconstruction{ padding:20vw 10vw; background-size: 20vw 20vw; }
	section#underconstruction:after{ font-size:.5em; font-weight:bold; text-shadow: 1vw 1vw 2vw 1vw rgba(0,0,0,0.4); }
}


/* アカウント */
section#setting div#auth{ width: 95%; max-width:500px; margin:0 auto; padding:50px 0; }
section#setting div#auth>p{ text-align:center; padding-bottom:50px; }
section#setting div#auth span.error{ display:block; text-align: center; color:#f33; text-decoration: underline; padding-bottom:30px; }
section#setting div#info{ width: 95%; max-width:1200px; margin:0 auto; padding:50px 0; font-size:1.5em; text-align:center; border-bottom: 1px solid #cccc; }
section#setting div#accountview{ width: 95%; max-width:800px; margin:0 auto; padding:50px 0 0 0; display:table; border-collapse: separate; border-spacing:20px; }
section#setting div#accountview>dl{display:table-row;  }
section#setting div#accountview>dl>dt{display:table-cell; padding:20px; border-bottom: 1px solid #ccc; color:#999; width:25%; }
section#setting div#accountview>dl>dt>span{ display:inline-block; }
section#setting div#accountview>dl>dd{display:table-cell; padding:20px; border-bottom: 1px solid #ccc;  }
section#setting div#accountview>dl:nth-last-of-type(1)>dt{ border:0; }
section#setting div#accountview>dl:nth-last-of-type(1)>dd{ border:0; }
section#setting div#accountview>dl>dd ol{ display:table; width:100%; table-layout: fixed; border-collapse: collapse; }
section#setting div#accountview>dl>dd ol>li{ display:table-cell; padding:0; vertical-align:top; }
section#setting div#accountview>dl>dd ol>li button.minbutton{ width:50%; height:40px; line-height:40px; margin:10px; }
section#setting div#btblock{ width: 95%; max-width:800px; margin:0 auto; padding-bottom:100px; }
section#setting div#btblock ol{ display:table; width:100%; border-spacing:10px; }
section#setting div#btblock ol>li{ display:table-cell; }
.ui-datepicker-title{ white-space: nowrap; }
.ui-datepicker-title select{ height:20px; text-indent:0; margin:0; padding-left:0; }
section#setting div#execute_cofirm{ border: 1px solid #000; }



div#execute_cofirm{ position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(255,255,255,.5); color:#fff; z-index:99;
	display:none; justify-content:center; align-items:center; align-content:center; }
div#execute_cofirm.open{ display:flex; }
div#execute_cofirm>dl{ width:90%; max-width:500px; background:rgba(0,0,0,.7); padding:50px; }
div#execute_cofirm>dl>dt{ text-align: center; font-size:1.5em; margin-bottom:20px; }
div#execute_cofirm>dl>dd ol>li{ display:block; padding:.5em 0 .5em 1.5em; }
div#execute_cofirm>dl>dd ol>li:before{ content:"・"; display:inline-block; width:1em; margin-left:-1.0em; }
div#execute_cofirm>dl>dd>ul{ display:table; width:90%; margin:0 auto; table-layout: fixed; border-spacing:10px; }
div#execute_cofirm>dl>dd>ul>li{ display:table-cell; }
div#execute_cofirm>dl>dd button{ display:block; width:100%; max-width:200px; margin:30px auto 0 auto; height:40px; line-height:40px; border-radius:5px;
	background:#FFBA00; border:0; color:#000; }


@media screen and (max-width: 768px) {
	div#execute_cofirm>dl{ max-width:50vw; padding:5vw; }
	div#execute_cofirm>dl>dt{ margin-bottom:2vw; }
	div#execute_cofirm>dl>dd>ul{ border-spacing:1vw; }
	div#execute_cofirm>dl>dd button{ max-width:20vw; margin:3vw auto 0 auto; height:4vw; line-height:4vw; border-radius:.5vw; }
}
@media screen and (max-width: 480px) {
	div#execute_cofirm>dl{ max-width:100vw; padding:10vw; }
	div#execute_cofirm>dl>dt{ margin-bottom:4vw; }
	div#execute_cofirm>dl>dd>ul{ border-spacing:2vw; }
	div#execute_cofirm>dl>dd button{ max-width:40vw; margin:6vw auto 0 auto; height:8vw; line-height:8vw; border-radius:1vw; }
}













/* メールフォーム */
section#contact>div{ width: 95%; max-width:500px; margin:0 auto; padding:50px 0; }
section#contact form#frm dd>ol{ display:table; width:100%; }
section#contact form#frm dd>ol>li{ display:table-cell; padding-left:.5em; }
section#contact form#frm dd>ol>li:nth-of-type(1){ padding:0; }
section#contact form#frm>p{ text-align:center; margin-bottom:50px; }
@media screen and (max-width:768px) {
	section#contact>div{ max-width:50vw; padding:5vw 0; }
	section#contact form#frm>p{ margin-bottom:5vw; }
}
@media screen and (max-width:480px) {
	section#contact>div{ max-width:100%; padding:10vw 0; }
	section#contact form#frm>p{ margin-bottom:10vw; }
}