@charset "UTF-8";
/*----------------------------------------

	PC閲覧用
	- box1
	- box2
	
	SP閲覧用
	- box1
	- box2
	
-----------------------------------------*/
.red{color:red;font-weight:bold;font-size: inherit;}
.fs2{font-size: 1.8rem;}
.box_list_in_title{
	font-weight: bold;
	margin-bottom: 16px;
	box-sizing: border-box;
	border-left: 2rem solid #4f5bff;
	padding: 5px 0 5px 1rem;
	border-radius: 8px 0 0 8px;
	margin-top: 15px;
	background: #e6e7ff;
}
/* ==========================================================
	PC閲覧用 481px以上
========================================================== */

@media print, screen and (min-width: 481px) {
	
/*----------------------------------------
 box1
-----------------------------------------*/

	#box1 h2 {
		margin-top: 30px;
	}
	#box1 .inner {
		margin-top: 30px;
		display: flex;
		justify-content: space-between;
	}
	#box1 .inner p{
		width: 430px;
	}
	#box1 .inner img{
		width: 250px;
		height: 184.7px;
	}

/*----------------------------------------
 box2
-----------------------------------------*/
	#box2 {
		margin-top: 30px;
	}
	#box2 .note{
		font-size: 12px;
		font-size: 1.2rem;
		margin-top: 10px;
	}
/*----------------------------------------
	box2.box_list
-----------------------------------------*/	
	#box2 .box_list_in_point{
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
	}
	#box2 .box_list_in_point dl{
		width: 30%;
		clear: both;
	}
	#box2 .box_list_in_point .point{
		display: inline-block;
		background: #3eb2d4;
		padding: 3px 5px;
		color: #fff;
		float: left;
	}
	#box2 .box_list_in_point dd{
		padding-left: 10px;
		font-weight: bold;
		padding-top: 3px;
		margin-bottom: 15px;
		float: left;
	}
	#box2 .box_list img{
		width: 100%;
		height: auto;
	}
	#box2 .pc{
		display: block;
	}
	#box2 .sp{
		display: none;
	}
/*----------------------------------------
	nav
-----------------------------------------*/
	.main_nav .clearfix {
		max-width:700px;
		width: 100%;
		margin: 10px auto;
		display: flex;
		justify-content: space-between;
	}
	.main_nav .clearfix p{
		width: 48%;
	}
	.main_nav .clearfix p > a {
		display: block;
		text-align: center;
		box-sizing: border-box;
		width:100%;
		padding: 7px;
		color: #FFFFFF;
		text-decoration: none;
		font-weight: bold;
		font-size: 13px;
		font-size: 1.3rem;
		background-color: #000066;
		margin: 1px 0 1px 1px;
	}
	.main_nav p > a:hover,
	.main_nav p > a:active {
		background-color: #e4f6ff;
		color: #000;
		border: 1px solid #ccc;
		margin: 0;
	}
/*----------------------------------------
 voice
-----------------------------------------*/
	.voice .inner > p {
		width: 200px;
		height: 148px;	 
		float: left;
		position: relative;
		padding: 5px;
		background-color: #fff;
		border: 1px solid #E8E8E8;
	}
	.voice .inner > p img {
		width: 200px;
		height: 148px;
	}
	.voice .inner > p:before,
	.voice .inner > p:after {
		position: absolute;
		bottom: 12px;
		z-index: -1;
		content: "";
		width: 60%;
		height: 98%;
		box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
	}
	.voice .inner > p:before {
		-webkit-transform: rotate(-2deg);
		transform: rotate(-2deg);
		left: .3em;
	}
	.voice .inner > p:after {
		-webkit-transform: rotate(2deg);
		transform: rotate(2deg);
		right: .3em;
	}
	.voice .inner {
		margin: 20px 0 20px;
	}
	.voice .inner .last {
		padding-bottom: 0px;
	}
	.voice .inner ul {
		width: 470px;
		float: right;

	}
	.voice .inner li.c1 {
		font-size: 17px;
		font-size: 1.7rem;
	}
	.voice .inner li.c2 {
		font-size: 14px;
		font-size: 1.4rem;
		padding: 5px 0 15px;
	}
	.voice .inner li p {
		margin-top: 10px;
	}

}



/* ==========================================================
	SP閲覧用 480px以下
========================================================== */

@media screen and (max-width: 480px) {

/*----------------------------------------
 box1
-----------------------------------------*/

	#box1 h2 {
		margin-top: 30px;
	}
	#box1 .inner {
		margin-top: 30px;
	}
	#box1 img{
		width: 100%;
	}

/*----------------------------------------
 box2
-----------------------------------------*/

	#box2 {
		margin-top: 30px;
	}

	#box2 .note{
		font-size: 12px;
		font-size: 1.2rem;
		margin-top: 10px;
	}
	#box2 .box_list{
		margin-bottom: 30px;
	}
	#box2 .box_list_in_point{
		margin-top: 20px;
		display: flex;
		flex-wrap: wrap;
	}
	#box2 .box_list_in_point dl{
		width: 50%;
		clear: both;
	}
	#box2 .box_list_in_point dl:nth-child(3){
		width: 100%;
	}
	#box2 .box_list_in_point .point{
		display: inline-block;
		background: #3eb2d4;
		padding: 3px 5px 2px;
		color: #fff;
		float: left;
	}
	#box2 .box_list_in_point dd{
		padding-left: 10px;
		font-weight: bold;
		padding-top: 3px;
		margin-bottom: 10px;
		float: left;
	}
	#box2 .box_list img{
		width: 100%;
		height: auto;
		margin: 15px auto;
	}
	#box2 .pc{
		display: none;
	}
	#box2 .sp{
		display: block;
	}
/*----------------------------------------
	main_nav
-----------------------------------------*/

	.main_nav .clearfix {
		width:90%;
		display: block;
		margin: 5px auto 0;
	}
	.main_nav .clearfix p > a {
		display: block;
		text-align: center;
		padding: 7px;
		color: #FFFFFF;
		text-decoration: none;
		font-weight: bold;
		font-size: 13px;
		font-size: 1.3rem;
		background-color: #000066;
		margin: 1px;
	}
	.nav01{
		margin-bottom: 10px;
	}
	.main_nav p > a:hover,
	.main_nav p > a:active {
		background-color: #e4f6ff;
		color: #000;
		border: 0.5px solid #ccc;
	}
/*----------------------------------------
 voice
-----------------------------------------*/
	.voice{
		margin-top: 30px;
	}
	.voice .inner {
		padding-bottom: 20px;
		margin-bottom: 10px;
	}
	.voice.inner.last {
		padding-bottom: 0px;
		margin-bottom: 0px;
		border-bottom: none;
	}
	.voice li.c1 {
		font-size: 1.7rem;
		line-height: 1.2;
	}
	.voice li.c2 {
		font-size: 14px;
		font-size: 1.4rem;
		padding: 5px 0 15px;
	}
	.voice p.photo {
		width: 38%;
		height: auto;	 
		float: right;
		position: relative;
		padding: 5px;
		margin: 0 0 4% 4%;
		background-color: #fff;
		border: 1px solid #E8E8E8;
	}
	.voice p.photo img {
		width: 100%;
		height: 100%;
	}
	.voice p.photo:before,
	.voice p.photo:after {
		position: absolute;
		bottom: 12px;
		z-index: -1;
		content: "";
		width: 60%;
		height: 98%;
		box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
	}
	.voice p.photo:before {
		-webkit-transform: rotate(-2deg);
		transform: rotate(-2deg);
		left: .3em;
	}
	.voice p.photo:after {
		-webkit-transform: rotate(2deg);
		transform: rotate(2deg);
		right: .3em;
	}
	.voice .cmnlink {
	  float: left;
	  margin: 20px 0 10px;
	}

}