@charset "utf-8";
/* =============================================================
 * お勧め・提案
 * ============================================================= */
.content {
 	padding: 5% 0;
  color: #FFF;
}
.wrap01 {
	width: 80%;
	margin: 0 auto 3%;
	background: #FFF;
	color: #000;
	box-sizing: border-box;
	padding: 2%;
}
.wrap02 {
	width: 80%;
	margin: 0 auto 3%;
	background: #FFF;
	color: #000;
	box-sizing: border-box;
	padding: 2%;
}
.wrap03 {
	width: 80%;
	margin: 0 auto 3%;
	background: #FFF;
	color: #000;
	box-sizing: border-box;
	padding: 2%;
}
.wrap04 {
	width: 80%;
	margin: 0 auto 3%;
	background: #FFF;
	color: #000;
	box-sizing: border-box;
	padding: 2%;
}
.wrap05 {
	width: 80%;
	margin: 0 auto 3%;
	background: #FFF;
	color: #000;
	box-sizing: border-box;
	padding: 2%;
}
.wrap06 {
	width: 80%;
	margin: 0 auto 3%;
	background: #FFF;
	color: #000;
	box-sizing: border-box;
	padding: 2%;
}
.wrap07 {
	width: 80%;
	margin: 0 auto 3%;
	background: #FFF;
	color: #000;
	box-sizing: border-box;
	padding: 2%;
}
.wrap08 {
	width: 80%;
	margin: 0 auto 3%;
	background: #FFF;
	color: #000;
	box-sizing: border-box;
	padding: 2%;
}
.wrap09 {
	width: 80%;
	margin: 0 auto 3%;
	background: #FFF;
	color: #000;
	box-sizing: border-box;
	padding: 2%;
}
.wrap10 {
	width: 80%;
	margin: 0 auto 3%;
	background: #FFF;
	color: #000;
	box-sizing: border-box;
	padding: 2%;
}
.wrap11 {
	width: 80%;
	margin: 0 auto 3%;
	background: #FFF;
	color: #000;
	box-sizing: border-box;
	padding: 2%;
}
.headline {
	margin: 0 0 2%;
	padding: 0 0 1%;
	border-bottom: 1px dotted #000000;
	font-size: 1.8vw;
	font-weight: bold;
	clear: both;
}
.headline .color01	{
	background: #EA5504;
	color: #FFF;
	font-weight: bold;
	padding: 1% 2%;
	font-size: 1.3vw;
}
.headline .color02	{
	background: #FFD200;
	font-weight: bold;
	padding: 1% 2%;
	font-size: 1.3vw;
}
.headline .color03	{
	background: #007BC7;
	color: #FFF;
	font-weight: bold;
	padding: 1% 2%;
	font-size: 1.3vw;
}
.headline .color04	{
	background: #000;
	color: #FFF;
	font-weight: bold;
	padding: 1% 2%;
	font-size: 1.3vw;
}
.headline .color05	{
	background: #999;
	color: #FFF;
	font-weight: bold;
	padding: 1% 2%;
	font-size: 1.3vw;
}
.headline .color06	{
	background: #22AC38;
	color: #FFF;
	font-weight: bold;
	padding: 1% 2%;
	font-size: 1.3vw;
}
.headline .color07	{
	background: #FF3000;
	color: #FFF;
	font-weight: bold;
	padding: 1% 2%;
	font-size: 1.3vw;
}
.headline .color08	{
	background: #00C3FF;
	color: #FFF;
	font-weight: bold;
	padding: 1% 2%;
	font-size: 1.3vw;
}
.headline .color09	{
	background: #FF6AC1;
	color: #FFF;
	font-weight: bold;
	padding: 1% 2%;
	font-size: 1.3vw;
}
.headline .subtitle {
	font-size: 1.2vw;
	color: #00003A;
	font-weight: 900;
}
.wrap01 .box01 {
	width: 65%;
	float: left;
}
.wrap01 .txt01  {
	font-size: 1.3vw;
	font-weight: bold;
}
.wrap01 .txt02 {
	width: 100%;
	display: table;
}
.wrap01 .th {
	width: 3%;
	display: table-cell;
	vertical-align: top;
}
.wrap01 .td {
	display: table-cell;
	vertical-align: top;
}
.wrap01 .box02 {
	padding: 0 7.5%;
	width: 20%;
	float: left;
}
.wrap02 .box01 {
	width: 40%;
	float: left;
}
.wrap02 .txt01 {
	font-size: 1.3vw;
	font-weight: bold;
}
.wrap02 .txt02 {
	width: 100%;
}
.wrap02 .tr {
	width: 100%;
	display: table;
}
.wrap02 .th {
	width: 3%;
	display: table-cell;
	vertical-align: top;
}
.wrap02 .td {
	display: table-cell;
	vertical-align: top;
}
.wrap02 .box02 {
	width: 50%;
	margin: 0 0  3%;
	float: right;
}
.wrap02 .box03 {
	width: 60%;
	margin: 0 auto 3%;
	clear: both;
}
.wrap02 .txt03 {
	text-align: center;
	font-size: 1.3vw;
	font-weight: bold;
	margin: 0 0 3%;
	color: #00003A;
}
.wrap02 .box04 {
	width: 40%;
	float: left;
}
.wrap02 .box05 {
	width: 54%;
	float: right;
}
.wrap03 .box01 {
	width: 45%;
	float: left;
}
.wrap03 .txt01 {
	font-size: 1.3vw;
	font-weight: bold;
}
.wrap03 .txt02 {
	width: 100%;
}
.wrap03 .tr {
	width: 100%;
	display: table;
}
.wrap03 .th {
	width: 3%;
	display: table-cell;
	vertical-align: top;
}
.wrap03 .td {
	display: table-cell;
	vertical-align: top;
}
.wrap03 .box02 {
	width: 50%;
	float: right;
}
.wrap04 .box01 {
	width: 45%;
	float: left;
}
.wrap04 .txt01 {
	font-size: 1.3vw;
	font-weight: bold;
}
.wrap04 .txt02 {
	width: 100%;
}
.wrap04 .tr {
	width: 100%;
	display: table;
}
.wrap04 .th {
	width: 3%;
	display: table-cell;
	vertical-align: top;
}
.wrap04 .td {
	display: table-cell;
	vertical-align: top;
}
.wrap04 .box02 {
	width: 50%;
	float: right;
}
.wrap05 .box01 {
	width: 30%;
	float: left;
}
.wrap05 .txt01 {
	width: 100%;
}
.wrap05 .box02 {
	width: 65%;
	float: right;
}
.wrap06 .box01 {
	width: 35%;
	float: left;
}
.wrap06 .txt01 {
	font-size: 1.3vw;
	font-weight: bold;
}
.wrap06 .txt02 {
	width: 100%;
}
.wrap06 .tr {
	width: 100%;
	display: table;
}
.wrap06 .th {
	width: 3%;
	display: table-cell;
	vertical-align: top;
}
.wrap06 .td {
	display: table-cell;
	vertical-align: top;
}
.wrap06 .box02 {
	width: 60%;
	float: right;
}
.wrap07 .box01 {
	margin: 0 auto 3%;
	width: 100%;
}
.wrap07 .txt01 {
	font-size: 1.3vw;
	font-weight: bold;
}
.wrap07 .txt02 {
	width: 100%;
}
.wrap07 .tr {
	width: 100%;
	display: table;
}
.wrap07 .box02 {
	margin: 0 auto;
	width: 80%;
}
.wrap08 .box01 {
	margin: 0 auto 3%;
	width: 100%;
}
.wrap08 .txt01 {
	font-size: 1.3vw;
	font-weight: bold;
}
.wrap08 .box02 {
	width: 60%;
	margin: 0 0 5%;
	float: left;
}
.wrap08  .txt03 {
	font-size: 1.3vw;
	font-weight: bold;
}
.wrap08 .box02 .image01 {
	width: 49%;
	float: left;
}
.wrap08 .box02 .image02 {
	float: right;
	width: 49%;
}
.wrap08 .box03 {
	width: 30%;
	padding: 0 5%;
	margin: 0 0 5%;
	float: right;
}
.wrap08 .box04 {
	width: 30%;
	padding: 0 10% 0 0;
	float: left;
}
.wrap08 .box04 .txt03 {
	margin: 0 0 5%;
}
.wrap08 .box05 {
	width: 60%;
	float: left;
}
.wrap08 .box05 .image01 {
	width: 49%;
	float: left;
}
.wrap08 .box05 .image02 {
	width: 49%;
	float: right;
}
.wrap09 .box01 {
	width: 55%;
	float: left;
}
.wrap09 .txt01 {
	font-size: 1.3vw;
	font-weight: bold;
	margin: 0 0 3%;
}
.wrap09 .txt02 {
	width: 100%;
	margin: 0 0 5%;
}
.wrap09 .txt03 {
	font-size: 0.9vw;
	color: #FF0000;
}
.wrap09 .tr {
	width: 100%;
	display: table;
}
.wrap09 .th {
	width: 3%;
	display: table-cell;
	vertical-align: top;
}
.wrap09 .td {
	display: table-cell;
	vertical-align: top;
}
.wrap09 .box02 {
	width: 40%;
	margin: 0 0 5%;
	float: right;
}
.wrap09 .box03  {
	width: 49%;
	float: left;
}
.wrap09 .box04  {
	float: right;
	width: 49%;
}
.wrap09 .txt04 {
	text-align: center;
	font-size: 1.3vw;
	font-weight: bold;
}
.wrap10 .headline {
	float: left;
	width: 100%;
}
.wrap10 .sub {
	width: 30%;
	float: right;
	color: #FF0000;
	font-size: 0.9vw;
	font-weight: normal;
	display: table;
}
.wrap10 .th {
	display: table-cell;
}
.wrap10 .td {
	display: table-cell;
}
.wrap10 .box01  {
	width: 55%;
	float: left;
}
.wrap10 .box02 {
	width: 40%;
	margin: 0 0 5%;
	float: right;
}
.wrap10 .txt01  {
	font-size: 1.3vw;
	font-weight: bold;
	margin: 0 0 3%;
	color: #00003A;
}
.wrap10 .txt02 {
	margin: 0 0 5%;
}
.wrap10 .box03  {
	clear: both;
	padding: 0 0 3%;
	margin: 0 0 3%;
	border-bottom: 1px dotted #000000;
}
.wrap10 .box04 {
	width: 47%;
	float: left;
}
.wrap10 .box05 {
	width: 47%;
	float: right;
}
.wrap10 .txt03 {
	text-align: center;
	font-size: 1.4vw;
	margin: 0 0 3%;
	font-weight: bold;
}
.wrap10 .image01 {
	margin: 0 auto 5%;
	width: 80%;
}
.wrap10 .txt04 {
	font-size: 1.2vw;
	font-weight: bold;
}
.wrap10 .box06 {
	padding: 0 0 3%;
	margin: 0 0 3%;
	border-bottom: 1px dotted #000000;
}
.wrap10 .txt06 {
	font-size: 1.8vw;
	font-weight: bold;
}
.wrap10 .txt07 {
	font-size: 1.2vw;
	font-weight: bold;
	margin: 0 0 5%;
	color: #00003A;
}
.wrap10 .image03 {
	margin: 0 auto;
	width: 90%;
	border: 1px solid #000000;
	box-sizing: border-box;
}
.wrap10 .image04 {
	width: 40%;
	margin: 0 0 0 5%;
	float: left;
}
.wrap10 .image05 {
	width: 40%;
	margin: 0 5% 0 0;
	float: right;
}
.wrap11 .box01  {
	margin: 0 0 5%;
}
.wrap11 .txt01  {
	font-size: 1.6vw;
	font-weight: bold;
}
.wrap11 .txt02  {
	font-size: 1.2vw;
}
.wrap11 .txt03  {
	font-size: 1.4vw;
	font-weight: bold;
	color: #00003A;
}
.wrap11 .image01 {
	margin: 0 auto 5%;
	width: 90%;
}
.wrap11 .image02 {
	margin: 0 auto;
	width: 80%;
}
/* 
=============================
　　　　スマホ
=============================
*/
@media screen and (max-width: 699px) {
.wrap01 {
	width: 90%;
	margin: 0 auto 5%;
}
.wrap02 {
	width: 90%;
	margin: 0 auto 5%;
}
.wrap03 {
	width: 90%;
	margin: 0 auto 5%;
}
.wrap04 {
	width: 90%;
	margin: 0 auto 5%;
}
.wrap05 {
	width: 90%;
	margin: 0 auto 5%;
}
.wrap06 {
	width: 90%;
	margin: 0 auto 5%;
}
.wrap07 {
	width: 90%;
	margin: 0 auto 5%;
}
.wrap08 {
	width: 90%;
	margin: 0 auto 5%;
}
.wrap09 {
	width: 90%;
	margin: 0 auto 5%;
}
.wrap10 {
	width: 90%;
	margin: 0 auto 5%;
}
.wrap11 {
	width: 90%;
	margin: 0 auto 0%;
}
.headline .subtitle {
  font-size: 12px;
}
.headline .color01	{
	font-size: 12px;
}
.headline .color02	{
	font-size: 12px;
}
.headline .color03	{
	font-size: 12px;
}
.headline .color04	{
	font-size: 12px;
}
.headline .color05	{
	font-size: 12px;
}
.headline .color06	{
	font-size: 12px;
}
.headline .color07	{
	font-size: 12px;
}
.headline .color08	{
	font-size: 12px;
}
.headline .color09	{
	font-size: 12px;
}
.headline {
  font-size: 16px;
}
.wrap01 .box01 {
  width: 100%;
  float: none;
}
.wrap01 .txt01 {
  font-size: 14px;
}
.wrap01 .box02 {
  width: 80%;
}
.wrap02 .box01 {
  width: 100%;
  float: none;
}
.wrap02 .txt01 {
  font-size: 14px;
}
.wrap02 .box02 {
  width: 100%;
  float: none;
}
.wrap02 .box03 {
  width: 100%;
  margin: 0 auto 10%;
  clear: both;
}
.wrap02 .txt03 {
  font-size: 14px;
	text-align: left;
}
.wrap02 .box04 {
  width: 100%;
  float: none;
	margin: 0 auto 10%;
}
.wrap02 .box05 {
  width: 100%;
  float: none;
}
.wrap03 .box01 {
  width: 100%;
  float: none;
}
.wrap03 .txt01 {
  font-size: 14px;
}
.wrap03 .box02 {
  width: 100%;
  float: none;
}
.wrap04 .box01 {
  width: 100%;
  float: none;
}
.wrap04 .txt01 {
  font-size: 14px;
  font-weight: bold;
}
.wrap04 .box02 {
  width: 100%;
  float: none;
}
.wrap05 .box01 {
  width: 100%;
  float: none;
}
.wrap05 .box02 {
  width: 100%;
  float: none;
}
.wrap06 .txt01 {
  font-size: 14px;
}
.wrap06 .box01 {
  width: 100%;
  float: none;
}
.wrap06 .box02 {
  width: 100%;
  float: none;
}
.wrap07 .txt01 {
  font-size: 14px;
  font-weight: bold;
}
.wrap07 .box02 {
  width: 100%;
}
.wrap08 .txt01 {
  font-size: 14px;
}
.wrap08 .box02 {
  width: 100%;
  margin: 0 0 5%;
  float: none;
}
.wrap08 .txt03 {
  font-size: 14px;
}
.wrap08 .box03 {
  width: 100%;
  padding: 0;
  float: none;
}
.wrap08 .box03 .image01 {
	width: 49%;
}
.wrap08 .box04 {
  width: 100%;
  padding: 0;
  float: none;
}
.wrap08 .box04 .image01 {
	width: 49%;
}
.wrap08 .box05 {
  width: 100%;
  float: none;
}
.wrap09 .box01 {
  width: 100%;
  float: none;
}
.wrap09 .txt01 {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 3%;
}
.wrap09 .txt03 {
  font-size: 12px;
}
.wrap09 .box02 {
  width: 100%;
  margin: 0 0 5%;
  float: none;
}
.wrap09 .txt04 {
  font-size: 14px;
}
.wrap09 .box03 {
  width: 100%;
  float: none;
	margin: 0 0 5%;
}
.wrap09 .box04 {
	width: 100%;
  float: none;
}
.wrap10 .sub {
  width: 100%;
  float: none;
  font-size: 12px;
}
.wrap10 .box01 {
  width: 100%;
  float: none;
}
.wrap10 .txt01 {
  font-size: 14px;
}
.wrap10 .box02 {
  width: 100%;
  float: none;
}
.wrap10 .box04 {
  width: 100%;
  float: none;
}
.wrap10 .txt03 {
  font-size: 14px;
}
.wrap10 .txt04 {
  font-size: 14px;
}
.wrap10 .box05 {
  width: 100%;
  float: none;
}
.wrap10 .txt06 {
  font-size: 14px;
}
.wrap10 .txt07 {
  font-size: 14px;
}
.wrap10 .image04 {
  width: 100%;
	margin: 0 0 5%;
  float: none;
}
.wrap10 .image05 {
  width: 100%;
  margin: 0 0 5%;
  float: none;
}
.wrap11 .txt01 {
  font-size: 14px;
}
.wrap11 .txt03 {
  font-size: 14px;
}
.wrap11 .txt02 {
  font-size: 14px;
}
.wrap11 .image01 {
  width: 100%;
}
.wrap11 .image02 {
  width: 100%;
}
}