@charset "utf-8";
/******************************************************************************
******************************************************************************
**
** sp.cssにおいて ( var.3.1.3 )
** -- baseでは基本タグとサイト大枠のCSS指定
** -- headerではヘッダーのCSS指定
** -- global navではグローバルナビのCSS指定
** -- contentではコンテント・メイン・サイドナビのCSS指定
** -- footerではフッターのCSS指定
** -- pagetopではページトップボタンのCSS指定
** -- indexではトップページのCSS指定
** -- pageでは汎用ページのCSS指定
** -- styleでは汎用ページのコンテンツ（データ入れ）で使用する基本タグのCSS指定
**
** 注意事項
** -- CSSの命名規則はApplicatsオリジナルの命名規則を採用しています。
** -- 初期フォントサイズはreset.cssにて13pxにリセットしています。
** -- 行間は1.6にリセットしています。
**        単位は不要です。(スタイル崩れする可能性有)
** -- コンテンツ内のフォントサイズ・行間は
**        [ base ]のcontentsクラスで指定しています。
**        変更する場合はこちらを変更してください。
**
******************************************************************************
******************************************************************************/

/*-------------------------------------------------------------------------------------------------------
*********************************************************************************************************
*********************************************************************************************************
******
****** style
******
*********************************************************************************************************
*********************************************************************************************************
-------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------
******************************************************************************
** base
******************************************************************************
----------------------------------------------------------------------------*/
html, body {
	overflow-x: hidden;
	background-color: #f1f1f1;
}
.con{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
}
/*----------------------------------------------------------------------------
******************************************************************************
** header
******************************************************************************
----------------------------------------------------------------------------*/
.hd_logo {
	text-align: center;
}
.hd_logo img {
	width: 40vw;
	height: auto
}

/*----------------------------------------------------------------------------
******************************************************************************
** global nav
******************************************************************************
----------------------------------------------------------------------------*/
.nav {
	margin-top: 5vw;
}
.nav_list {}
.nav_list li:last-child{
	margin-top: 5vw;
}
.nav_list a{
	background: linear-gradient(to bottom, orange, #FD4102);
	border-radius: 3vw;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: #FFF;
	font-size: 5vw;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	width: 70vw;
	height: 15vw;
	position: relative;
	line-height: 1.2;
}
.nav_list a.clicked{
	background: linear-gradient(to bottom, #D23602, #FD4102);
	pointer-events: none;
}
.nav_list a span{
	font-size: 0.7em;
}
.nav_list a.unclicked{
	pointer-events: none;
}
.nav_list a.done{
	background: #C8C8C8!important;
	color: #666;
	pointer-events: none;
}
.nav_list span.done::before{
	background: url("../images/icon_finished.png") no-repeat;
	background-size: contain;
	content: "";
	height: 16vw;
	width: 16vw;
	position: absolute;
	top: calc(50% - 8vw);
	left: calc(50% - 8vw);
}

/*----------------------------------------------------------------------------
******************************************************************************
** content
******************************************************************************
----------------------------------------------------------------------------*/
.profile{
	text-align: center;
	margin-top: 2vw;
	font-weight: bold;
	font-size: 7vw;
}
.profile span{
	font-size: 4vw;
}
.logout{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10vw;
}
.logout a{
	background-color: #333;
	border-radius: 8vw;
	color: #FFF;
	font-weight: bold;
	font-size: 4vw;
	text-decoration: none;
	padding: 0.5em 1em;
}

/*----------------------------------------------------------------------------
******************************************************************************
** footer
******************************************************************************
----------------------------------------------------------------------------*/
.ft {
	padding: 1rem;
}
.ft_copy {
	font-size: 0.6rem;
	text-align: center;
}