@charset "utf-8";

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

@ DESKTOP

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

	
/**************************************
  (content)
**************************************/
#content {
	position: relative;
}


/*** section ***/
#content .section {
	position: relative;
	padding-top: 80px;
	padding-bottom: 80px;
}

#content .section.bg_01 {
	background: url(../img/bg_texture_01.jpg);
}
#content .section.bg_02 {
	background: url(../img/bg_texture_02.jpg);
}

#content .section.pt_0 {
	padding-top: 0;
}
#content .section.pb_0 {
	padding-bottom: 0;
}


/** block **/
#content .section .block {
	position: relative;
	margin-bottom: 60px;
}
#content .section .block:last-child {
	margin-bottom: 0;
}



	
/**************************************
  headline
**************************************/
#content .headline {
	font-size: 150%;
	line-height: 1.6;
}

#content .headline.underline,
#content .headline.wideline {
	border-bottom: 2px solid #000;
}
#content .headline.underline {
	display: inline-block;
}



	
/**************************************
  textbox
**************************************/
#content .textbox {
	max-width: 760px;
}

#content .textbox.wide {
	max-width: none;
}
#content .textbox.wide.center {
	text-align: center;
}

#content .textbox p {
	margin-bottom: 1.2em;
}
#content .textbox p:last-child {
	margin-bottom: 0;
}



	
/**************************************
  imagebox
**************************************/
#content .imagebox {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

#content .imagebox .box {
	width: 100%;
}
#content .imagebox .box img {
	display: block;
	width: 100%;
}

#content .imagebox .box .caption {
	font-size: 74%;
	line-height: 1.6;
	margin-top: 0.2em;
}

#content .imagebox.col_2 .box {
	width: calc((100% / 2) - ((24px * 1) / 2));
}

#content .imagebox.col_3 .box {
	width: calc((100% / 3) - ((24px * 2) / 3));
}



	
/**************************************
  tablebox
**************************************/
#content .tablebox {
	
}

#content .tablebox table {
	width: 100%;
	border-top: 1px dotted #000;
}
#content .tablebox table tr {
	border-bottom: 1px dotted #000;
}
#content .tablebox table tr th,
#content .tablebox table tr td {
	padding: 0.6em 0 0.8em;
}
#content .tablebox table tr th {
	font-size: 98%;
	font-weight: normal;
	text-align: left;
	line-height: 1.6;
	padding-right: 2.0em;
	min-width: 10.0em;
	white-space: nowrap;
}
#content .tablebox table tr td {
	width: 100%;
	font-size: 86%;
	line-height: 1.6;
}

#content .tablebox .caption {
	font-size: 86%;
	line-height: 1.6;
	margin-top: 1.0em;
}



	
/**************************************
  profilebox
**************************************/
#content .profilebox {
	display: flex;
	gap: 24px;
}

#content .profilebox .photo {
	width: 50%;
}
#content .profilebox .photo img {
	display: block;
	width: 100%;
}

#content .profilebox .summary {
	width: 50%;
}
#content .profilebox .summary .status {
	font-size: 82%;
	line-height: 1.2;
}
#content .profilebox .summary .name {
	font-size: 187%;
	line-height: 1.2;
	margin-bottom: 1.2em;
}
#content .profilebox .summary .text {
	font-size: 92%;
}

#content .profilebox.photosmall .photo {
	width: 32%;
}
#content .profilebox.photosmall .summary {
	width: 68%;
}



	
/**************************************
  contactbox
**************************************/
#content .contactbox {
	text-align: center;
}
#content .contactbox .button {
	margin-bottom: 26px;
}
#content .contactbox .button:last-child {
	margin-bottom: 0;
}



	
/**************************************
  line
**************************************/
#content hr {
	height: 0;
	margin: 0;
	border: none;
	border-bottom: 2px solid #666;
}



	
/**************************************
  dotline
**************************************/
#content hr.dotline {
	height: 0;
	margin: 0;
	border: none;
	border-bottom: 2px dotted #000;
}



	
/**************************************
  space
**************************************/
#content hr.space {
	height: 0;
	margin: 0;
	border: none;
}








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

@ TABLET

////////////////////////////////////////////////////////////
***********************************************************/
@media only screen and (max-width: 960px) {

	/**************************************
	  (content)
	**************************************/
	#content {

	}

	/*** section ***/
	#content .section {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	/** block **/
	#content .section .block {
		margin-bottom: 40px;
	}


	/**************************************
	  headline
	**************************************/
	#content .headline {

	}
	#content .headline.underline,
	#content .headline.wideline {
		padding-bottom: 0.3em;
	}


	/**************************************
	  textbox
	**************************************/
	#content .textbox {

	}
	

	/**************************************
	imagebox
	**************************************/
	#content .imagebox {

	}

	#content .imagebox .box .caption {
		font-size: 84%;
	}

	#content .imagebox.col_2 .box {
		width: 100%;
	}

	#content .imagebox.col_3 .box {
		width: 100%;
	}


	/**************************************
	  tablebox
	**************************************/
	#content .tablebox {

	}

	#content .tablebox table {
		display: block;
	}
	#content .tablebox table tbody {
		display: block;
	}
	#content .tablebox table tr {
		display: block;
	}
	#content .tablebox table tr th,
	#content .tablebox table tr td {
		display: block;
		padding: 1.0em 0 1.5em;
	}
	#content .tablebox table tr th {
		font-weight: bold;
		padding-right: 0;
		padding-bottom: 0;
	}
	#content .tablebox .caption {
		margin-top: 2.0em;
	}


	/**************************************
	  profilebox
	**************************************/
	#content .profilebox {
		display: block;
	}

	#content .profilebox .photo {
		width: 100%;
		margin-bottom: 30px;
	}

	#content .profilebox .summary {
		width: 100%;
	}
	#content .profilebox .summary .status {
		margin-bottom: 0.4em;
	}
	#content .profilebox .summary .name {
		margin-bottom: 0.8em;
	}

	#content .profilebox.photosmall .photo {
		width: 100%;
	}
	#content .profilebox.photosmall .summary {
		width: 100%;
	}



	
	/**************************************
	  contactbox
	**************************************/
	#content .contactbox {
		
	}
	#content .contactbox .button {
		
	}



	
	/**************************************
	  line
	**************************************/
	#content hr {
		
	}
	
	
	
		
	/**************************************
	  dotline
	**************************************/
	#content hr.dotline {
		border-bottom: 1px dotted #000;
	}
	
	
	
		
	/**************************************
	  space
	**************************************/
	#content hr.space {
		
	}





}





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

@ MOBILE

////////////////////////////////////////////////////////////
***********************************************************/
 @media only screen and (max-width: 520px) {

	
	/**************************************
	  (example)
	**************************************/
	.example {
		position: relative;
	}
	
}