@charset "utf-8";

/*----------------------------------------------------------------
 for index.html
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 outline
----------------------------------------------------------------*/
#outline .container{ padding: 1px 20px 30px 20px; }
@media screen and (min-width: 768px) {
#outline .container{ padding: 1px 0 65px 0; }
}

#outline h2{
	margin				: 10px 0 35px 0;
	text-align			: left;
}
#outline h2>img{ width: 50%; }

@media screen and (min-width: 768px) {
#outline h2{ margin: 30px 0 60px 0; }
#outline h2>img{ width: auto; }
}

/* btn
-----------------------------------------------------*/
#outline .btn.online-store{ padding: 30px 0; }
#outline .btn.news i{
	top: 5px;
}


/* information
-----------------------------------------------------*/
#outline .information{ margin: 60px 0 -10px 0; }

#outline .information>dl{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
}
#outline .information>dl>dt{
	flex				: 0 0 60px;
	font-family			: "游明朝", YuMincho,  "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; 
	font-size			: 18px;
}
#outline .information>dl>dd{ flex: 1; }

/* information-list
---------------------------------*/
#outline .information .information-list{ border-left: 1px solid #000; }

#outline .information .information-list li{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: column;
	padding				: 10px 22px;
	font-size			: 14px;
}
#outline .information .information-list .date{ font-size: 12px; }
#outline .information .information-list li a{
	text-decoration		: none;
	color				: #3399ff;
}

@media screen and (min-width: 768px) {
#outline .information .information-list li{
	flex-direction		: row;
	align-items			: top;
	padding				: 10px 22px;
}
#outline .information .information-list .date{ flex: 0 0 110px; }
#outline .information .information-list li a{ flex: 1; }
}

/* view-all
---------------------------------*/
#outline .information .view-all{ margin: 20px; }

/*----------------------------------------------------------------
 profile
----------------------------------------------------------------*/
#profile{}
#profile .container{ padding: 45px 20px 80px 20px; }

@media screen and (min-width: 768px) {
#profile .container{ padding: 40px 0 115px 0; }
}

#profile .profile{
	position: relative;
	padding: 0 0 80px 0;
}
@media screen and (min-width: 768px) {
#profile .profile{
	padding: 0 0 115px 0;
}	
}
/* name-card
-----------------------------------------------------*/
#profile .name-card{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	justify-content		: space-between;
	align-items			: center;
	margin				: 50px 0 25px 0;
}
#profile .name-card>.name{ font-family: "游明朝", YuMincho,  "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }

#profile .name-card>.name>span{ display: block; }
#profile .name-card>.name>.ja{ font-size: 25px; }
#profile .name-card>.name>.en{
	font-size			: 10px;
	font-style			: italic;
}

#profile .name-card>.image img{
	position			: relative;
	left				: 5px;
	border-radius		: 50%;
	width				: 195px;
}
@media screen and (max-width: 320px) {
#profile .name-card>.image img{ width: 45vw; }
}
@media screen and (min-width: 768px) {
#profile .name-card{
	margin				: 50px 0 35px 0;
	width				: 530px;
}
#profile .name-card>.name{ padding: 0 0 0 10px; }
#profile .name-card>.image img{
	left				: 0;
	width				: 350px;
}
}

/* image
-----------------------------------------------------*/
#profile p.image{
	position			: absolute;
	bottom				: 0px;
	right				: 20px;
}
#profile p.image img{ border-radius: 50%; }
@media screen and (min-width: 768px) {
#profile p.image{
	right				: initial;
	left				: 50%;
}
}

#profile .project-list{
	margin: 20px 0 0 0;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
#profile .project-list{
	flex-direction: row;	
}
#profile .project-list li{
	flex: 0 0 calc(100% / 2 - 20px);
}
}