@charset "UTF-8";
/*--------------------------------------------
SIGNUP , CONTACT
---------------------------------------------*/
#signup .text , #contact .text{
	line-height : 1.6;
}
@media screen and (max-width: 768px){
	#signup , #contact{
		padding-bottom : calc( 64 * 100vw / 768 );
	}
	#signup .text , #contact .text{
		padding-top : calc( 48 * 100vw / 768 );
		padding-bottom : calc( 48 * 100vw / 768 );
		font-size : 2.4rem;
	}
}
@media print,screen and (min-width: 769px){
	#signup .text , #contact .text{
		font-size : 1.6rem;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#signup , #contact{
		padding-bottom : calc( 80 * 100vw / 1280 );
	}
	#signup .text , #contact .text{
		padding-top : calc( 48 * 100vw / 1280 );
		padding-bottom : calc( 48 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1280px){
	#signup , #contact{
		padding-bottom : 80px;
	}
	#signup .text , #contact .text{
		padding-top : 48px;
		padding-bottom : 48px;
	}
}
@media print,screen and (min-width: 1280px){
	#contact .layout-form , #contact > .text{
		margin-left : auto;
		margin-right : auto;
		width : 840px;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#contact.input input[name="submitConfirm"]{
		width : calc( 280 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1280px){
	#contact.input input[name="submitConfirm"]{
		width : 280px;
	}
}
#contact.confirm label.required:after{
	content : none;
}
#contact.confirm dd{
	border-bottom-style : solid;
	border-bottom-color : var(--border);
}
@media screen and (max-width: 768px){
	#contact.confirm dt{
		margin-bottom : calc( 32 * 100vw / 768 );
	}
	#contact.confirm dd{
		padding-bottom : calc( 20 * 100vw / 768 );
		border-bottom-width : calc( 2 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#contact.confirm dd{
		border-bottom-width : 1px;
		padding-left : 1em;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#contact.confirm dt{
		margin-bottom : calc( 24 * 100vw / 1280 );
	}
	#contact.confirm dd{
		padding-bottom : calc( 12 * 100vw / 1280 );
	}
	#contact.confirm input[name="contact_submit"] , #contact.confirm input[name="submitBack"]{
		width : calc( 260 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1280px){
	#contact.confirm dt{
		margin-bottom : 24px;
	}
	#contact.confirm dd{
		padding-bottom : 12px;
	}
	#contact.confirm input[name="contact_submit"] , #contact.confirm input[name="submitBack"]{
		width : 260px;
	}
}
#signup.complete p , #contact.thanks p{
	text-align : center;
	line-height : 1.6;
}
@media screen and (max-width: 768px){
	#signup.complete p , #contact.thanks p{
		font-size : 2.4rem;
		margin-top : calc( 64 * 100vw / 768 );
	}
	#signup.complete .link02 , #contact.thanks .link02{
		margin-top : calc( 64 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#signup.complete p , #contact.thanks p{
		font-size : 1.8rem;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#signup.complete p , #contact.thanks p{
		margin-top : calc( 64 * 100vw / 1280 );
	}
	#signup.complete .link02 , #contact.thanks .link02{
		margin-top : calc( 32 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1280px){
	#signup.complete p , #contact.thanks p{
		margin-top : 64px;
	}
	#signup.complete .link02 , #contact.thanks .link02{
		margin-top : 32px;
	}
}
/*--------------------------------------------
COLUMN02
---------------------------------------------*/
@media screen and (max-width: 768px){
	#column02{
		padding-top : calc( 32 * 100vw / 768 );
		padding-bottom : calc( 80 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#column02{
		padding-top : calc( 48 * 100vw / 1280 );
		padding-bottom : calc( 80 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1280px){
	#column02{
		padding-top : 48px;
		padding-bottom : 80px;
	}
}
#column02 .aside dl > div{
	display : flex;
	align-items : center;
	justify-content : center;
}
#column02 .aside label{
	font-weight : 500;
	flex-shrink : 0;
	padding-right : 1em;
}
#column02 .aside select{
	border-style : solid;
	border-color : var(--border);
	padding-left : .5em;
	padding-right : .5em;
	background-color : #fff;
}
@media screen and (max-width: 768px){
	#column02 .aside label{
		font-size : 2.4rem;
	}
	#column02 .aside select{
		border-width : 1px;
		border-radius : calc( 4 * 100vw / 768 );
		font-size : 2.4rem;
		height : calc( 48 * 100vw / 768 );
		width : calc( 480 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#column02 .aside label{
		font-size : 2rem;
	}
	#column02 .aside select{
		font-size : 1.6rem;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#column02 .aside select{
		border-width : 1px;
		border-radius : calc( 4 * 100vw / 1280 );
		height : calc( 48 * 100vw / 1280 );
		width : calc( 480 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1280px){
	#column02 .aside select{
		border-width : 1px;
		border-radius : 4px;
		height : 48px;
		width : 480px;
	}
}
/*--------------------------------------------
PRINT
---------------------------------------------*/
@media print{
	@page{
		size : A4;
	}
	.print{
		margin : 0!important;
		padding : 0!important;
		font-size : 100%!important;
		-webkit-print-color-adjust : exact!important;
		background-color : #fff!important;
		width : 210mm!important;
	}
	.print #headerAuth , .print #header , .print #breadcrumbs , .print .aside , .print .caption02 , .print .tableexport-caption , .print tfoot , .print #btn-copy , .print #footer{
		display : none!important;
	}
	.print #lists{
		margin-top : 0 !important;
	}
	.print .table-wrapper{
		margin : 0 !important;
		padding : 0 !important;
	}
	.print tr{
		background-color : #fff!important;
	}
	.print #table tbody tr:not(:first-child):nth-child(odd){
		background-color : #fafafa !important;
	}
	.print #table{
		table-layout : fixed!important;
	}
	.print thead{
		height : 20mm;
	}
	.print thead th{
		padding-left : 0 !important;
		padding-right : 0 !important;
		height : 12mm!important;
	}
	.print thead th:nth-of-type(1){
		width : 8%!important;
	}
	.print thead th:nth-of-type(2){
		width : 8%!important;
	}
	.print thead th:nth-of-type(3){
		width : 15%!important;
	}
	.print thead th:nth-of-type(4){
		width : 15%!important;
	}
	.print thead th:nth-of-type(5){
		width : 8%!important;
	}
	.print thead th:nth-of-type(6){
		width : 8%!important;
	}
	.print thead th:nth-of-type(7){
		width : 10%!important;
	}
	.print tbody{
		padding-top : 12mm!important;
	}
	.print tbody td:nth-of-type(1){
		width : 8%!important;
	}
	.print tbody td:nth-of-type(2){
		width : 8%!important;
	}
	.print tbody td:nth-of-type(3){
		width : 15%!important;
	}
	.print tbody td:nth-of-type(4){
		width : 15%!important;
	}
	.print tbody td:nth-of-type(5){
		width : 8%!important;
	}
	.print tbody td:nth-of-type(6){
		width : 8%!important;
	}
	.print tbody td:nth-of-type(7){
		width : 10%!important;
	}
	.print tbody td span{
		font-size : 80%!important;
		display : block;
	}
	.print #column02 #lists th , .print #column02 #lists td{
		font-size : inherit!important;
	}
	.print th , .print td{
		color : #333!important;
		font-size : 100%!important;
	}
}
/*--------------------------------------------
PRIVACY
---------------------------------------------*/
#privacy h3{
	font-weight : 500;
	margin-bottom : .5em;
}
#privacy address{
	margin-top : 1em;
	padding-left : 1em;
}
@media screen and (max-width: 768px){
	#privacy .maintitle{
		margin-bottom : calc( 32 * 100vw / 768 );
	}
	#privacy p , #privacy h3 , #privacy li , #privacy address{
		font-size : 2.2rem;
		line-height : 1.6;
	}
	#privacy h3{
		margin-top : calc( 32 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#privacy p , #privacy h3 , #privacy li , #privacy address{
		font-size : 1.6rem;
		line-height : 1.6;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#privacy{
		padding-left : calc( 140 * 100% / 1280 );
		padding-right : calc( 140 * 100% / 1280 );
	}
	#privacy .maintitle{
		margin-bottom : calc( 32 * 100vw / 1280 );
	}
	#privacy h3{
		margin-top : calc( 32 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1280px){
	#privacy{
		padding-left : calc( ( 100% - 1000px ) / 2 );
		padding-right : calc( ( 100% - 1000px ) / 2 );
	}
	#privacy .maintitle{
		margin-bottom : 32px;
	}
	#privacy h3{
		margin-top : 32px;
	}
}
/*--------------------------------------------
FLOW
---------------------------------------------*/
@media screen and (max-width: 768px){
	#flow{
		padding-bottom : calc( 72 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#flow{
		padding-bottom : calc( 72 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1280px){
	#flow{
		padding-bottom : 72px;
	}
}
#flow .tabs{
	display : flex;
}
#flow .tabs li{
	width : 50%;
	border-style : solid;
	border-color : #ccc;
	border-top : 0;
	will-change : border-color;
	transition : border-color .3s ease-in;
	border-width : 1px;
}
#flow .tabs a{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	width : 100%;
	height : 100%;
	will-change : background-color;
	transition : background-color .3s ease-in;
}
#flow .tabs .is-current , #flow .tabs li:hover{
	border-color : #efebe3;
}
#flow .tabs .is-current a , #flow .tabs li:hover a{
	background-color : #efebe3;
}
#flow .tabs .is-current a:before{
	content : "→";
}
@media screen and (max-width: 768px){
	#flow .tabs li{
		height : calc( 56 * 100vw / 768 );
	}
	#flow .tabs a{
		font-size : 2.4rem;
	}
}
@media print,screen and (min-width: 769px){
	#flow .tabs a{
		font-size : 2rem;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#flow .tabs li{
		height : calc( 48 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1280px){
	#flow .tabs li{
		height : 48px;
	}
}
#flow .flow{
	margin-left : auto;
	margin-right : auto;
}
#flow .flow > li{
	counter-increment : no;
}
#flow .flow > li + li:before{
	content : "";
	display : block;
	background : url("../images/ui/icon/down.svg") 0 0 / contain no-repeat;
	margin-left : auto;
	margin-right : auto;
}
#flow .flow picture{
	background-color : #fff;
	border-style : solid;
	border-color : #efebe3;
	margin-left : auto;
	margin-right : auto;
}
#flow .flow picture img{
	width : 100%;
	height : auto;
}
#flow .flow h3{
	font-weight : 500;
}
#flow .flow h3:before{
	content : counter(no)".";
	margin-right : .5em;
	margin-left : .5em;
}
#flow .flow h3 + p{
	line-height : 1.6;
	padding-left : 1em;
}
#flow .flow h3 + p a{
	text-decoration : underline;
}
#flow .flow h3 + p em{
	font-weight : 500;
}
#flow .flow dt , #flow .flow dd{
	line-height : 1.6;
	padding-left : 1em;
	padding-right : 1em;
}
#flow .flow dt{
	flex-shrink : 0;
	font-weight : 500;
}
@media screen and (max-width: 768px){
	#flow .flow{
		margin-top : calc( 56 * 100vw / 768 );
	}
	#flow .flow > li:not(.is-pc) + li:before{
		width : calc( 80 * 100vw / 768 );
		height : calc( 80 * 100vw / 768 );
		margin-top : calc( 48 * 100vw / 768 );
		margin-bottom : calc( 48 * 100vw / 768 );
	}
	#flow .flow picture{
		border-width : calc( 3 * 100vw / 768 );
		padding : calc( 20 * 100vw / 768 );
	}
	#flow .flow picture + h3{
		margin-top : calc( 32 * 100vw / 768 );
	}
	#flow .flow h3{
		font-size : 2.8rem;
	}
	#flow .flow h3 + p{
		font-size : 2.4rem;
		margin-top : calc( 20 * 100vw / 768 );
	}
	#flow .flow dl{
		margin-top : calc( 28 * 100vw / 768 );
	}
	#flow .flow dl > div + div{
		margin-top : calc( 28 * 100vw / 768 );
	}
	#flow .flow dt{
		font-size : 2.6rem;
	}
	#flow .flow dd{
		font-size : 2.4rem;
		margin-top : calc( 12 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#flow .flow h3{
		font-size : 2rem;
	}
	#flow .flow h3 + p{
		font-size : 1.8rem;
	}
	#flow .flow dl > div{
		display : flex;
	}
	#flow .flow dt , #flow .flow dd{
		font-size : 1.8rem;
	}
	#flow .flow dt{
		width : 20%;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#flow .flow{
		margin-top : calc( 48 * 100vw / 1280 );
	}
	#flow .flow > li:not(.is-sp) + li:before{
		width : calc( 80 * 100vw / 1280 );
		height : calc( 80 * 100vw / 1280 );
		margin-top : calc( 48 * 100vw / 1280 );
		margin-bottom : calc( 48 * 100vw / 1280 );
	}
	#flow .flow picture{
		border-width : calc( 3 * 100vw / 1280 );
		padding : calc( 20 * 100vw / 1280 );
	}
	#flow .flow picture + h3{
		margin-top : calc( 20 * 100vw / 1280 );
	}
	#flow .flow h3 + p{
		margin-top : calc( 12 * 100vw / 1280 );
	}
	#flow .flow dl{
		margin-top : calc( 20 * 100vw / 1280 );
	}
	#flow .flow dl > div + div{
		margin-top : calc( 12 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1280px){
	#flow .flow{
		margin-top : 48px;
		width : 800px;
	}
	#flow .flow > li:not(.is-sp) + li:before{
		width : 80px;
		height : 80px;
		margin-top : 48px;
		margin-bottom : 48px;
	}
	#flow .flow picture{
		border-width : 3px;
		padding : 20px;
	}
	#flow .flow picture + h3{
		margin-top : 20px;
	}
	#flow .flow h3 + p{
		margin-top : 12px;
	}
	#flow .flow dl{
		margin-top : 20px;
	}
	#flow .flow dl > div + div{
		margin-top : 12px;
	}
}
/*--------------------------------------------
FLOW PROFILE
---------------------------------------------*/
@media print,screen and (min-width: 769px){
	.flow-profile #flow dt{
		width : 20%;
	}
}
/*--------------------------------------------
FRIENDS
---------------------------------------------*/
@media screen and (max-width: 768px){
	#friends{
		padding-top : calc( 80 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#friends{
		padding-top : calc( 80 * 100vw / 1280 );
		padding-bottom : calc( 80 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1280px){
	#friends{
		padding-top : 80px;
		padding-bottom : 80px;
	}
}
#serarchFriends > div > label{
	font-weight : 500;
}
#serarchFriends input[type="text"]{
	padding-left : 1em;
	padding-right : 1em;
	font-size : 1em;
}
#serarchFriends ul{
	display : grid;
	justify-content : start;
}
#serarchFriends li label{
	display : grid;
	align-items : center;
}
#serarchFriends li input{
	accent-color : var(--bg03);
}
#serarchFriends #searchText{
	display : grid;
	align-items : center;
	grid-template-columns : auto 1fr;
}
#serarchFriends #searchText label{
	padding-right : 1em;
}
@media screen and (max-width: 768px){
	#serarchFriends > div + div{
		margin-top : calc( 48 * 100vw / 768 );
	}
	#serarchFriends > div > label , #serarchFriends input[type="text"]{
		font-size : 2.8rem;
	}
	#serarchFriends input[type="text"]{
		height : calc( 48 * 100vw / 768 );
	}
	#serarchFriends li{
		font-size : 2.4rem;
	}
	#serarchFriends ul{
		margin-top : calc( 32 * 100vw / 768 );
		row-gap : calc( 20 * 100vw / 768 );
		grid-template-columns : repeat( auto-fill , minmax( calc( 240 * 100% / 720 ) , 1fr ) );
	}
	#serarchFriends li label{
		grid-template-columns : calc( 32 * 100vw / 768 ) 1fr;
		column-gap : calc( 8 * 100vw / 768 );
	}
	#serarchFriends li input{
		height : calc( 32 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#serarchFriends > div > label , #serarchFriends input[type="text"]{
		font-size : 1.6rem;
	}
	#serarchFriends li{
		font-size : 1.6rem;
	}
	#serarchFriends #searchText label{
		padding-right : 1em;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#serarchFriends > div + div{
		margin-top : calc( 28 * 100vw / 1280 );
	}
	#serarchFriends input[type="text"]{
		height : calc( 40 * 100vw / 1280 );
	}
	#serarchFriends ul{
		margin-top : calc( 28 * 100vw / 1280 );
		row-gap : calc( 16 * 100vw / 1280 );
		grid-template-columns : repeat(auto-fill , calc( 200 * 100% / 1200 ));
		padding-left : calc( 40 * 100% / 1240 );
	}
	#serarchFriends li label{
		grid-template-columns : calc( 24 * 100vw / 1280 ) 1fr;
		column-gap : calc( 8 * 100vw / 1280 );
	}
	#serarchFriends li input{
		height : calc( 24 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1280px){
	#serarchFriends > div + div{
		margin-top : 28px;
	}
	#serarchFriends input[type="text"]{
		height : 40px;
	}
	#serarchFriends ul{
		margin-top : 28px;
		row-gap : 16px;
		grid-template-columns : repeat(auto-fill , 200px);
		padding-left : 40px;
	}
	#serarchFriends li label{
		grid-template-columns : 24px 1fr;
		column-gap : 8px;
	}
	#serarchFriends li input{
		height : 24px;
	}
}
#listFriendsPrefecture > li{
	width : 100%;
	transition : max-height .3s ease-in;
}
#listFriendsPrefecture > li.is-hidden{
	opacity : 0;
	max-height : 0;
	margin : 0;
}
#listFriendsPrefecture > li > p{
	font-weight : 500;
}
@media screen and (max-width: 768px){
	#listFriendsPrefecture{
		margin-top : calc( 80 * 100vw / 768 );
	}
	#listFriendsPrefecture > li{
		margin-top : calc( 48 * 100vw / 768 );
		margin-bottom : calc( 48 * 100vw / 768 );
	}
	#listFriendsPrefecture > li > p{
		font-size : 2.8rem;
	}
}
@media print,screen and (min-width: 769px){
	#listFriendsPrefecture > li > p{
		font-size : 2rem;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#listFriendsPrefecture{
		margin-top : calc( 80 * 100vw / 1280 );
	}
	#listFriendsPrefecture > li{
		margin-top : calc( 16 * 100vw / 1280 );
		margin-bottom : calc( 16 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1280px){
	#listFriendsPrefecture{
		margin-top : 80px;
	}
	#listFriendsPrefecture > li{
		margin-top : 16px;
		margin-bottom : 16px;
	}
}
.listFriends{
	align-items : flex-start;
	position : relative;
}
.listFriends > li{
	display : grid;
	position : relative;
}
.listFriends picture{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
}
.listFriends picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
.listFriends .icon{
	display : none;
}
.listFriends .list-friendsWans{
	display : contents;
}
.listFriends .list-friendsWans li{
	display : contents;
}
.listFriends .list-friendsWans li > div{
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : center;
	text-align : center;
}
.listFriends h2{
	display : flex;
	align-items : center;
	line-height : 1.4;
	word-break : keep-all;
}
.listFriends h3{
	text-align : center;
	line-height : 1.4;
	word-break : keep-all;
}
.listFriends p{
	text-align : center;
}
.listFriends .list-friendsSns{
	display : contents;
}
.listFriends .list-friendsSns a{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	width : 100%;
	height : 100%;
}
.listFriends .youtube{
	background-color : #c4302b;
}
.listFriends .facebook{
	background-color : #1877f2;
}
.listFriends .instagram{
	background : radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285aeb 90%);
}
.listFriends .ameba{
	background-color : #2d8c3c;
}
.listFriends .ameba img{
	background-color : #fff;
}
.listFriends .twitter{
	background-color : #1da1f2;
}
.listFriends .other{
	background-color : #99cdd5;
}
@media screen and (max-width: 768px){
	.listFriends{
		margin-top : calc( 32 * 100vw / 768 );
	}
	.listFriends > li{
		margin-bottom : calc( 8 * 100vw / 768 );
		grid-auto-rows : calc( 120 * 100vw / 768 );
		grid-template-columns : repeat( 6 ,  calc( 120 * 100% / 720 ) );
		position : relative;
	}
	.listFriends h2{
		grid-row : 1;
		grid-column : 1/7;
		font-size : 2.2rem;
	}
	.listFriends .list-friendsWans picture{
		width : 100%;
		height : 100%;
	}
	.listFriends .list-friendsWans li > div{
		padding-left : calc( 8 * 100% / 120 );
		padding-right : calc( 8 * 100% / 120 );
	}
	.listFriends .list-friendsWans p{
		margin-top : calc( 16 * 100vw / 768 );
		font-size : 2rem;
	}
	.listFriends .list-friendsWans > li:nth-child(n + 4):nth-child(-n+6) picture , .listFriends .list-friendsWans > li:nth-child(n + 4):nth-child(-n+6) > div{
		grid-row : 3;
	}
	.listFriends .list-friendsWans > li:nth-child(n + 7):nth-child(-n+9) picture , .listFriends .list-friendsWans > li:nth-child(n + 7):nth-child(-n+9) > div{
		grid-row : 4;
	}
	.listFriends .list-friendsWans > li:nth-child(n + 10):nth-child(-n+12) picture , .listFriends .list-friendsWans > li:nth-child(n + 10):nth-child(-n+12) > div{
		grid-row : 5;
	}
	.listFriends .list-friendsWans > li:nth-child(n + 13):nth-child(-n+15) picture , .listFriends .list-friendsWans > li:nth-child(n + 13):nth-child(-n+15) > div{
		grid-row : 6;
	}
	.listFriends .list-friendsWans > li:nth-child( 6n + 4 ) picture{
		grid-column : 2;
	}
	.listFriends .list-friendsWans > li:nth-child( 6n + 4 ) > div{
		grid-column : 1;
	}
	.listFriends .list-friendsWans > li:nth-child( 6n + 5 ) picture{
		grid-column : 4;
	}
	.listFriends .list-friendsWans > li:nth-child( 6n + 5 ) > div{
		grid-column : 3;
	}
	.listFriends .list-friendsWans > li:nth-child( 6n + 6 ) picture{
		grid-column : 6;
	}
	.listFriends .list-friendsWans > li:nth-child( 6n + 6 ) > div{
		grid-column : 5;
	}
	.listFriends h3{
		font-size : 2rem;
	}
	.listFriends .list-friendsSns{
		position : absolute;
		top : 0;
		right : 0;
		display : grid;
		justify-content : end;
		width : 100%;
		top : calc( 20 * 100vw / 768 );
		grid-auto-flow : column;
		grid-auto-columns : calc( 80 * 100% / 720 );
		grid-auto-rows : calc( 80 * 100vw / 768 );
	}
	.listFriends .thumbnail > img{
		width : auto;
		height : calc( 72 * 100vw / 768 );
	}
	.listFriends .youtube img{
		height : calc( 36 * 100vw / 768 );
	}
	.listFriends .instagram img{
		height : calc( 50 * 100vw / 768 );
	}
	.listFriends .facebook img{
		height : calc( 72 * 100vw / 768 );
	}
	.listFriends .ameba img{
		height : calc( 60 * 100vw / 768 );
	}
	.listFriends .twitter img{
		height : calc( 80 * 100vw / 768 );
	}
	.listFriends .other img{
		height : calc( 50 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	.listFriends h2{
		position : absolute;
		top : 0;
		left : 0;
		height : 100%;
	}
	.listFriends .list-friendsWans li:nth-child(n + 6):nth-child(-n+10) picture , .listFriends .list-friendsWans li:nth-child(n + 6):nth-child(-n+10) > div{
		grid-row : 2;
	}
	.listFriends .list-friendsWans li:nth-child(6) picture{
		grid-column : 2;
	}
	.listFriends .list-friendsWans li:nth-child(6) > div{
		grid-column : 1;
	}
	.listFriends .list-friendsWans li:nth-child(7) picture{
		grid-column : 4;
	}
	.listFriends .list-friendsWans li:nth-child(7) > div{
		grid-column : 3;
	}
	.listFriends .list-friendsWans li:nth-child(8) picture{
		grid-column : 6;
	}
	.listFriends .list-friendsWans li:nth-child(8) > div{
		grid-column : 5;
	}
	.listFriends .list-friendsWans li:nth-child(9) picture{
		grid-column : 8;
	}
	.listFriends .list-friendsWans li:nth-child(9) > div{
		grid-column : 7;
	}
	.listFriends .list-friendsWans li:nth-child(10) picture{
		grid-column : 10;
	}
	.listFriends .list-friendsWans li:nth-child(10) > div{
		grid-column : 9;
	}
	.listFriends h2{
		font-size : 1.6rem;
	}
	.listFriends h3{
		font-size : 1.4rem;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	.listFriends{
		margin-top : calc( 32 * 100vw / 1280 );
	}
	.listFriends > li{
		margin-bottom : calc( 24 * 100vw / 1280 );
		grid-auto-rows : calc( 100 * 100vw / 1280 );
		grid-auto-columns : calc( 100 * 100% / 1000 );
		grid-template-columns : repeat( auto-fit , calc( 100 * 100% / 1000 ) );
		padding-left : calc( 240 * 100% / 1240 );
	}
	.listFriends h2{
		width : calc( 240 * 100% / 1240 );
		padding-left : calc( 8 * 100% / 1240 );
		padding-right : calc( 8 * 100% / 1240 );
	}
	.listFriends .list-friendsWans img{
		height : calc( 100 * 100vw / 1280 );
	}
	.listFriends .list-friendsWans li > div{
		padding-left : calc( 8 * 100% / 240 );
		padding-right : calc( 8 * 100% / 240 );
	}
	.listFriends .list-friendsWans p{
		margin-top : calc( 8 * 100vw / 1280 );
	}
	.listFriends .thumbnail > img{
		height : calc( 72 * 100vw / 1280 );
		width : auto;
	}
	.listFriends .youtube img{
		height : calc( 36 * 100vw / 1280 );
	}
	.listFriends .instagram img{
		height : calc( 50 * 100vw / 1280 );
	}
	.listFriends .facebook img{
		height : calc( 72 * 100vw / 1280 );
	}
	.listFriends .ameba img{
		height : calc( 60 * 100vw / 1280 );
	}
	.listFriends .twitter img{
		height : calc( 80 * 100vw / 1280 );
	}
	.listFriends .other img{
		height : calc( 50 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1280px){
	.listFriends{
		margin-top : 32px;
	}
	.listFriends > li{
		margin-bottom : 24px;
		grid-auto-rows : 100px;
		grid-auto-columns : 100px;
		grid-template-columns : repeat( auto-fit , 100px );
		padding-left : 240px;
	}
	.listFriends h2{
		width : 240px;
		padding-left : 8px;
		padding-right : 8px;
	}
	.listFriends .list-friendsWans img{
		height : 100px;
	}
	.listFriends .list-friendsWans li > div{
		padding-left : 8px;
		padding-right : 8px;
	}
	.listFriends .list-friendsWans p{
		margin-top : 8px;
	}
	.listFriends .thumbnail > img{
		width : 72px;
		height : 72px;
	}
	.listFriends .youtube img{
		height : 36px;
	}
	.listFriends .instagram img{
		height : 50px;
	}
	.listFriends .facebook img{
		height : 72px;
	}
	.listFriends .ameba img{
		height : 60px;
	}
	.listFriends .twitter img{
		height : 80px;
	}
	.listFriends .other img{
		height : 50px;
	}
}