@charset "utf-8";

/* ========================================
	/af/
======================================== */
/* 共通 */
.u-section {
	text-align: left;
}
.visible-sp {
	display: none;
}
.hidden-sp {
	display: block;
}


/*===========================================
  メディアクエリ（SP・タブレット）
===========================================*/
@media screen and (max-width: 767px) {
   /* 表示領域が767px以下の場合に適用 */
   .visible-sp {
		display: block;
	}
	.hidden-sp {
		display: none;
	}
	.campaign div img {
		width: 100%;
		height: auto;
	}

	#afContents div.mainImg div.inner,
	#afContents div.column01 {
		display: none;
	}

	#afContents dl.campaign {
		width: 100%;
	}

	/* header */
	.main {
		padding-top: 0;
	}

	/* header */
	.header-inner {
		padding: 0 15px 10px;
		border-bottom: none;
	}

	.header-log-l {
		float: left;
		margin: 10px 10px 0 0;
		width: 35px;
		height: 35px;
	}

	.header-log-r {
		float: right;
		margin: 10px 0 0 10px;
		width: 140px;
	}

	.header-txt {
		float: left;
		width: 600px;
		margin-top: 26px;
		overflow: hidden;
		text-align: left;
		line-height: 1.8;
		font-size: 1.1rem;
	}

	.header-txt {
		width: 100%;
		text-align: left;
		margin-top: 5px;
		line-height: 1.3;
	}

	/* switch_language */
	.switch_language {
		border-top: none;
		text-align: right;
		margin-right: 10px;
		padding: 0 0 10px;
	}
	.switch_language li {
		display: inline-block;
		margin-left: 5px;
	}
	.switch_language li:first-child {
		margin-left: 0;
	}
	.switch_language a:link,
	.switch_language a:visited {
		text-decoration: none;
		color: #222;
	}
	.switch_language .btn-normal--xs {
		position: relative;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
		border-radius: 3px;
		padding: 7px 20px 7px 10px;
	}
	.switch_language .icon-arw-right {
		position: absolute;
		right: 10px;
	}

   /* mainvisual */
	.mainvisual,
  .mainvisual-max {
		position: relative;
		width: 100%;
		height: auto;
		background-image: url(/af/common/images/main01_sp_01.png);
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 100%;
	}

	.mainvisual:before,
  .mainvisual-max:before {
		content: "";
		display: block;
		padding-top: 55%;
	}

	.mainvisual-preferential {
		margin-bottom: 10px;
	}

	.discount-detail {
		position:absolute;
		left: 4%;
		top: 6%;
		background-image: url(/af/common/images/main01_sp_02.png);
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 100%;
	    width: 75%;
		height: 240px;
	}
  
  .mainvisual-max .discount-detail {
		background-image: url(/af/common/images/main01_sp_03.png);
  }

	.discount {
		position: relative;
		left: 4%;
		top: 57%;
		font-size: 6.5rem;
		color: #d10606;
		font-weight: bold;
	}

	.discount span {
		font-size: 8.6rem;
		letter-spacing: -0.05em;
		margin-right: 5px;
	}

	.mainvisual-txt {
		position: absolute;
		top: 104%;
		left: -3%;
		width: 500px;
	}

	.mainvisual-txt span {
		display: inline-block;
		font-size: 2rem;
		background-color: #fff;
		border-radius: 40px;
		padding: 10px 20px;
		font-weight: bold;
		text-align: center;
		min-width: 360px;
		max-width: 460px;
	}

	/* af-btn */
	.af-btn {
		padding: 15px;
	}

	.af-btn .btn-normal {
		display: table-cell;
		width: 48%;
		min-width: auto;
		height: 50px;
		padding: 11px 15px;
		line-height: 2;
		color: #222;
		text-decoration: none;
	}

	.af-btn .btn-normal:first-child {
		float: left;
	}

	.af-btn .btn-normal:last-child {
		float: right;
	}

	.af-btn-s {
		margin-bottom: 10px;
		width: 100%;
	}

	.af-btn .btn-cv {
		min-width: auto;
		width: 100%;
		height: 60px;
		font-size: 2.4rem;
		color: #fff;
		text-decoration: none;
		line-height: 1.3;
	}

	/* campaign */
	.campaign {
		background-image: url(/af/common/images/campaign_01.png), url(/af/common/images/bg_02.png);
		background-position: center 30px, left top;
		background-repeat: no-repeat, repeat;
		background-size: 90% auto, 100%;
		padding: 30% 15px 30px;
	}

	.campaign dt img {
		display: none;
	}

	.campaign dd div {
		width: 100% !important;
		background-color: #fff;
		box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2);
		-webkit-box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2);
		margin: 0 auto;
		vertical-align: middle;
	}

	.campaign dd .banner {
		display: block;
		width: 100%;
		text-align: center;
	}

	.campaign dd .txt {
		display: block;
		vertical-align: middle;
		font-size: 1.4rem;
		text-align: left;
		font-weight: bold;
		margin-bottom: 20px;
		padding: 0 20px;
	}

	.campaign .banner a img {
		width: 80% !important;
		height: auto !important;
		margin: 20px 0 10px;
	}

	/* feature */
	.feature {
		padding: 35px 0 0;
		background-color: #e9f0f3;
		font-size: 1.5rem;
		line-height: 1.6;
		margin-bottom: 30px;
	}

	.feature h2 {
		font-size: 2.1rem;
		font-weight: bold;
		margin-bottom: 35px;
	}

	.feature-inr {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.feature .feature-list {
		display: inline-block;
		width: 100%;
		vertical-align: top;
		text-align: center;
		margin-bottom: 30px;
		padding-bottom: 30px;
		border-bottom: 1px solid #ccc;
	}

	.feature .feature-list:last-child {
		border-bottom: none;
		margin-bottom: 0;
	}

	.feature-ic  {
		margin-bottom: 20px;
		display: inline-block;
	}

	.feature-ic01 {
		width: 172px;
	}

	.feature-ic02 {
		width: 232px;
	}

	.feature-ic03 {
		width: 179px;
	}

	.feature .feature-list dt {
		color: #25789f;
		font-size: 2.0rem;
		font-weight: bold;
		margin-bottom: 4px;
	}

	/* attention */
	.attention {
		color: #d10606;
		border: 1px solid #d10606;
		font-size: 1.5rem;
		margin: 0 0 30px;
		padding: 14px 14px 14px 37px;
		line-height: 1.8;
		text-align: left;
	}

	.attention li {
		list-style-type: decimal
	}

	/* af-table */
	.af-table {
		font-size: 1.5rem;
		text-align: center;
	}

	.af-table__ttl {
		background: #e9f0f3;
		border: 1px solid #ccc;
		border-bottom: none;
		padding: 15px 12px;
		text-align: left;
	}

	.af-table tbody td {
		padding: 13px;
		text-align: left;
	}

	.af-table tbody {
		display: table;
		width: 100%;
		border-collapse: collapse;
		table-layout: fixed;
		box-sizing: border-box;
	}

	.af-table tbody tr {
		display: table-row;
		vertical-align: middle;
		border: 1px solid #ccc;
	}

	/* table-row */
	.table-row {
		display: block;
	}

	.table-row tbody  .af-table__ttl {
		display: table-cell;
		border: none;
		vertical-align: middle;
		text-align: center;
		border-bottom: 1px solid #ccc;
	}

	.table-row tbody  .af-table__ttl,
	.table-row tbody  td {
		display: block;
	}

	.table-row tbody  td {
		text-align: left;
		padding: 13px;
		line-height: 1.5;
	}

	/* contact */
	.contact-icon-block .txt {
		padding-right: 15px;
		padding-right: 15px;
		padding-left: 65px;
		font-weight: normal;
	}

	.contact-icon-block__img {
		float: left;
		width: 15%;
		text-align: center;
		margin-right: 10px;
	}

	.contact-txt-sp {
		margin-bottom: 15px;
		font-size: 1.4rem;
		font-weight: bold;
	}

	.contact-txt-label {
		display: block;
		background: none;
		font-weight: bold;
		font-size: 1.4rem;
	}

	.phone-number {
		font-size: 2rem;
		font-weight: bold;
	}

	.phone-number a[href^="tel:"] {
		pointer-events: none;
	}

	/* footer */
	.page-top {
		display: block;
		padding: 14px 0 13px;
		background: #000;
		color: #fff !important;
		font-size: 1.6rem;
		text-align: center;
		text-decoration: none !important;
	}

	.footer-other {
		background: #333;
		padding: 25px 0 20px;
	}

	.footer-other-list {
		text-align: center;
		padding: 0 15px;
	}

	.footer-other-item {
		position: relative;
		padding: 0 22px 16px 0;
		display: inline-block;
	}

	.footer-other-item::after {
		content: "|";
		position: absolute;
		right: 10px;
		top: 0;
		color: #fff;
	}

	.footer-other-item:last-child {
		padding-right: 0;
	}

	.footer-other-item:last-child::after {
		content: none;
	}

	.footer-other-link {
		color: #fff !important;
		font-size: 1.2rem;
		padding: 5px 0;
	}

	.footer-other-link:hover {
		color: #fff;
	}

	.footer__copy {
	    display: block;
	    color: #fff;
	    text-align: center;
		font-size: 1.0rem;
	}
}

@media screen and (max-width: 720px) {
   /* 表示領域が720px以下の場合に適用 */
   /* mainvisual */
	.discount {
		left: 2%;
		top: 55%;
		font-size: 5.5rem;
	}
	.mainvisual-txt {
		top: 100%;
		left: -5%;
	}

}

@media screen and (max-width: 680px) {
   /* 表示領域が680px以下の場合に適用 */
   /* mainvisual */
	.discount {
		left: 5%;
		top: 50%;
	}
	.mainvisual-txt {
		top: 92%;
		left: -8%;
	}

}

@media screen and (max-width: 630px) {
   /* 表示領域が630px以下の場合に適用 */
   /* mainvisual */
	.discount {
		left: 4%;
		top: 48%;
    font-size: 5rem;
	}

	.discount span {
		font-size: 7.1rem;
		margin-right: 5px;
	}
	.mainvisual-txt {
		top: 87%;
		left: -10%;
	}
	.mainvisual-txt span {
		font-size: 1.8rem;
		min-width: 320px;
	}

}

@media screen and (max-width: 580px) {
   /* 表示領域が580px以下の場合に適用 */
   /* mainvisual */
	.discount {
		left: 1%;
		top: 47%;
		font-size: 4.5rem;
	}

	.discount span {
		font-size: 6.6rem;
		margin-right: 5px;
	}
	.mainvisual-txt {
		top: 78%;
		left: -19%;
	}
	.mainvisual-txt span {
		min-width: 290px;
	}
}

@media screen and (max-width: 550px) {
   /* 表示領域が550px以下の場合に適用 */
   /* mainvisual */
	.discount {
		left: 1%;
		top: 42%;
		font-size: 4rem;
	}

	.discount span {
		font-size: 6.1rem;
		margin-right: 5px;
	}

	.mainvisual-txt {
		top: 74%;
		left: -21%;
	}

	.mainvisual-txt span {
		min-width: 270px;
	}
}

@media screen and (max-width: 490px) {
   /* 表示領域が490px以下の場合に適用 */
   /* mainvisual */
   .discount-detail {
		left: 4%;
		top: 4%;
	}
	.discount {
		left: 2%;
		top: 39%;
		font-size: 3.5rem;
	}


	.discount span {
		font-size: 5.6rem;
		margin-right: 5px;
	}

	.mainvisual-txt {
		top: 66%;
		left: -26%;
	}

	.mainvisual-txt span {
		min-width: 235px;
		font-size: 1.5rem;
	}

}

@media screen and (max-width: 440px) {
   /* 表示領域が440px以下の場合に適用 */
   /* mainvisual */
	.discount {
		left: 1%;
		top: 35%;
		font-size: 3rem;
	}

	.discount span {
		font-size: 5.1rem;
		margin-right: 5px;
	}

	.mainvisual-txt {
		top: 59%;
		left: -33%;
	}

	.mainvisual-txt span {
		min-width: 195px;
		font-size: 1.3rem;
	}
}

@media screen and (max-width: 400px) {
   /* 表示領域が400px以下の場合に適用 */
   /* mainvisual */
	.discount {
		left: 1%;
		top: 32%;
		font-size: 3rem;
	}

	.discount span {
		font-size: 4.1rem;
		margin-right: 5px;
	}

	.mainvisual-txt {
		top: 53%;
		left: -42%;
	}

	.mainvisual-txt span {
		min-width: 160px;
		font-size: 1.2rem;
		padding: 8px 10px;
	}
}

@media screen and (max-width: 375px) {
   /* 表示領域が375px以下の場合に適用 */
   /* mainvisual */
	.discount-detail {
		width: 72%;
	}
	.discount {
		left: 0;
		top: 28%;
		font-size: 3em;
	}

	.discount span {
		font-size: 3.9rem;
		margin-right: 5px;
	}

	.mainvisual-txt {
		top: 49%;
		left: 0%;
		width: 205px;
	}

	.mainvisual-txt span {
		min-width: 205px;
		font-size: 1.2rem;
		padding: 7px 7px;
	}
}

@media screen and (max-width: 320px) {
   /* 表示領域が320px以下の場合に適用 */
	/* mainvisual */
	.discount-detail {
		width: 68%;
	}

	.discount {
		left: 6%;
		top: 22%;
		font-size: 2.5em;
	}

	.discount span {
		font-size: 4rem;
		margin-right: 5px;
	}

	.mainvisual-txt {
		top: 40%;
		left: 5px;
		width: 190px;
	}

	.mainvisual-txt span {
		min-width: 160px;
		font-size: 1.1rem;
		padding: 7px 7px;
	}

}

/*===========================================
  メディアクエリ（PC）
===========================================*/
@media screen and (min-width: 768px) {
   /* 表示領域が768px以上の場合に適用 */
 	.visible-pc {
		display: block;
	}
	.hidden-pc {
		display: none;
	}

	/* header */

	.header-log-l {
		float: left;
		margin: 23px 10px 0 0;
		width: 60px;
		height: 60px;
	}

	.header-log-r {
		float: right;
		margin: 23px 0 0 10px;
	}

	.header-txt {
		float: left;
		width: 590px;
		margin-top: 26px;
		overflow: hidden;
		text-align: left;
		line-height: 1.8;
		font-size: 1.1rem;
	}

	/* switch_language */
	.switch_language {
		display: block;
		margin: 0 auto 0;
		padding: 10px 0 13px;
		max-width: 1000px;
		text-align: right;
		border-top: 1px solid #ccc;
	}
	.switch_language li {
		display: inline-block;
		margin-left: 5px;
	}
	.switch_language a:link,
	.switch_language a:visited {
		text-decoration: none;
		color: #222;
	}
	.switch_language .btn-normal--xs {
		position: relative;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
		border-radius: 3px;
		padding: 7px 20px 7px 10px;
	}
	.switch_language .icon-arw-right {
		position: absolute;
		right: 10px;
	}

	/* mainvisual */

	.mainvisual,
  .mainvisual-max  {
		position: relative;
		width: 1000px;
		min-height: 400px;
		margin: 0 auto 40px;
		background: url(/af/common/images/main01_pc.png) no-repeat left top;
	}
  
  .mainvisual-max {
		background: url(/af/common/images/main03_pc.png) no-repeat left top;
  }

	.mainvisual-preferential {
		margin-bottom: 30px;
	}

	.discount {
		position: absolute;
		left: 15.5%;
		top: 50%;
		font-size: 7.5rem;
		color: #d10606;
		font-weight: bold;
		letter-spacing: -0.05em;
	}

	.discount span {
		font-size: 9rem;
	}

	.mainvisual-txt {
		position: absolute;
		top: 77%;
		left: 5%;
		width: 500px;
	}

	.mainvisual-txt span {
		display: inline-block;
		font-size: 2.8rem;
		background-color: #fff;
		border-radius: 40px;
		padding: 10px 20px;
		font-weight: bold;
		text-align: center;
		min-width: 360px;
		max-width: 460px;
	}

	/* af-btn */
	.af-btn .btn-normal {
		width: 340px;
		height: 50px;
		line-height: 2;
		color: #222;
		text-decoration: none;
	}

	.af-btn .btn-normal:hover {
		color: #fff;
	}

	.af-btn .btn-normal:first-child {
		margin-right: 18px;
	}

	.af-btn-s {
		margin-bottom: 30px;
	}

	.af-btn .btn-cv {
		width: 700px;
		height: 80px;
		font-size: 3.4rem;
		color: #fff;
		text-decoration: none;
		line-height: 1.5;
	}

	/* campaign */
	.campaign {
		background-image: url(/af/common/images/campaign_01.png), url(/af/common/images/bg_02.png);
		background-position: center 40px, left top;
		background-repeat: no-repeat, repeat;
		background-size: 434px 88px, 120px 102px;
		padding: 140px 0 40px;
	}

	.campaign dt img {
		display: none;
	}

	.campaign dd div {
		width: 700px !important;
		background-color: #fff;
		padding: 20px;
		box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2);
		-webkit-box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2);
		margin: 0 auto 20px;
		vertical-align: middle;
	}

	.campaign dd .banner {
		display: table-cell;
		width: 300px;
		text-align: left;
	}

	.campaign dd .txt {
		display: table-cell;
		vertical-align: middle;
		font-size: 2.0rem;
		text-align: left;
		font-weight: bold;
	}

	.campaign .banner a img {
		width: 280px !important;
		height: 156px !important;;
	}

	/* feature */
	.feature {
		padding: 50px 0;
		background-color: #e9f0f3;
		font-size: 1.5rem;
		line-height: 1.6;
		margin-bottom: 50px;
	}

	.feature h2 {
		font-size: 3.2rem;
		font-weight: bold;
		margin-bottom: 50px;
	}

	.feature-inr {
		width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}

	.feature .feature-list {
		display: inline-block;
		width: 31%;
		vertical-align: top;
		text-align: center;
	}

	.feature-ic  {
		margin-bottom: 30px;
		display: inline-block;
	}

	.feature-ic01 {
		width: 172px;
	}

	.feature-ic02 {
		width: 232px;
	}

	.feature-ic03 {
		width: 179px;
	}

	.feature .feature-list dt {
		color: #25789f;
		font-size: 2.0rem;
		font-weight: bold;
		margin-bottom: 20px;
	}

	/* attention */
	.attention {
		color: #d10606;
		border: 1px solid #d10606;
		font-size: 1.5rem;
		margin-bottom: 50px;
		padding: 30px 30px 30px 45px;
		line-height: 1.8;
		text-align: left;
	}

	.attention li {
		list-style-type: decimal
	}

	/* table */
	.af-table {
		font-size: 1.5rem;
		text-align: center;
	}

	.af-table__ttl {
		display: block;
		background: #e9f0f3;
		border-bottom: 1px solid #ccc;
		padding: 15px 12px;
		text-align: center;
	}

	.af-table tbody {
		display: table;
		width: 100%;
		border-collapse: collapse;
		table-layout: fixed;
		box-sizing: border-box;
	}

	.af-table tbody tr {
		display: table-cell;
		vertical-align: middle;
		border: 1px solid #ccc;
	}

	.af-table tbody td {
		display: block;
		padding: 13px;
		text-align: center;
	}

	/* table-row */
	.table-row {
		width: 50%;
		float: right;
	}
	
	.table-row tbody tr {
		display: table-row;
	}

	.table-row tbody td {
		display: table-cell;
		text-align: left;
	}

	.table-row tbody  .af-table__ttl {
		display: table-cell;
		border-right: 1px solid #ccc;
		vertical-align: middle;
		width: 25%;
	}

	/* table contact */
	.contact-icon-block {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}

	/* contact */
	.contact-icon-block .txt {
		display: inline-block;
		margin: 0;
		padding-right: 20px;
		width: 38%;
	}

	.contact-icon-block__img {
		float: left;
		width: 100px;
		text-align: center;
	}

	.contact-icon-block .contact-txt-pc {
		width: auto;
	}

	.contact-txt-label {
		background-color: #25789f;
		padding: 5px;
		color: #fff;
		font-size: 1.1rem;
	}

	.phone-number {
		display: inline-block;
		font-size: 2rem;
	}
		
	/* footer */
	.page-top {
		position: fixed;
		right: 10px;
		bottom: 97px;
		width: 42px;
		padding: 16px 0 15px;
		border-radius: 3px;
		background: rgba(0, 0, 0, 0.5);
		font-size: 1rem;
		-webkit-transition: opacity 0.1s ease-in-out;
		transition: opacity 0.1s ease-in-out;
	}

	.page-top a:link,
	.page-top a:hover {
		color: #fff;
	}

	.page-top .icon {
		color: #fff;
	}

	.footer-other {
		background: #333;
		padding: 25px 0 0
	}

	.footer-other-link {
		color: #fff !important;
		font-size: 1.2rem;
		padding: 5px 0
	}

	.footer-other-list {
		text-align: center;
		padding: 0 15px
	}
	.footer-other-item {
		position: relative;
		padding: 0 22px 16px 0;
		display: inline-block;
	}
	.footer-other-item::after {
		content: "|";
		position: absolute;
		right: 10px;
		top: 0;
		color: #fff
	}
	.footer-other-item:last-child {
		padding-right: 0
	}
	.footer-other-item:last-child::after {
		content: none
	}

	.inquiry-footer {
	    padding: 5px 0 23px;
	    background: #333;
	}

	.footer__copy {
	    display: block;
	    color: #fff;
	    text-align: center;
		font-size: 1.0rem;
	}

}