@charset "utf-8";

.pcOnly {
    display: block !important;
}

.spOnly {
    display: none !important;
}

@media screen and (max-width: 640px) {
    .pcOnly {
        display: none !important;
    }

    .spOnly {
        display: block !important;
    }

}

/* anchor ----------------------- */
.anchor {
	margin-top: -40px!important;
	padding-top: 40px!important;
	}

/* ex_clearfix
-----------------------------------------*/ 
.ex_clearfix:after {
  content: "";
  clear: both;
  display: block;
}

/* ex_margin
-----------------------------------------*/ 
#sections .ex_marginB0{
 margin-bottom:0px!important;
}
#sections .ex_marginBS{
 margin-bottom:10px!important;
}
#sections .ex_marginBM{
 margin-bottom:20px!important;
}
#sections .ex_marginT0{
 margin-top:0px!important;
}
#sections .ex_marginTSS{
 margin-top:5px!important;
}
#sections .ex_marginTS{
 margin-top:10px!important;
}
#sections .ex_marginTM{
 margin-top:20px!important;
}
#sections .ex_marginTL{
 margin-top:30px!important;
}
#sections .ex_marginTLL{
 margin-top:80px!important;
}
#sections .ex_marginTLLL{
 margin-top:100px!important;
}

/* ex_padding
-----------------------------------------*/ 
#sections .ex_paddingTBL{
	padding-bottom:30px!important;
 padding-top:30px!important;
}

/* mod_section
-----------------------------------------*/ 
.mod_section{
	font-family: "Noto Sans JP",sans-serif!important;
	font-size: 1.13em;
	line-height: 1.6;
	width: 100%;
}
.section-inner {
	margin: 0 auto;
	width: 976px; 
}

.mod_section img {
	max-width: 100%;
	height: auto;
	}

@media screen and (max-width: 640px) {
  .mod_section{
	box-sizing: border-box;
	margin: auto;
	padding: 0 2.60416%;
    width: 100%;
  }
.section-inner {
	width: auto;
	}
}
.mod_section a{
    text-decoration: none;
    color: #000;
	outline: none;
}

.mod_section .font-sizeup {
	font-size: 1.14em;
	}
.mod_section .font-sizeup-l {
	font-size: 1.5em;
	}
.mod_section .font-sizedown {
	font-size: .78em;
	}
.mod_section strong {
	font-weight: bold;
	}
.mod_section .text-center {
	text-align: center;
	}
.mod_section .text-right {
	text-align: right;
	}
.mod_section .text-indent-1 {
	text-indent: -1em;
	padding-left: 1em;
	}
.mod_section .text-indent-2 {
	text-indent: -2em;
	padding-left: 2em;
	}
.mod_section .text-indent-2-5 {
	text-indent: -2.5em;
	padding-left: 2.5em;
	}
.mod_section .text-indent-3 {
	text-indent: -3em;
	padding-left: 3em;
	}

/* ex_anchor ----------------------- */
.ex_anchor:before {
    content: "";
    display: block;
    height: 120px;
    margin-top: -120px;
    visibility: hidden;
}
@media screen and (max-width: 640px) {
	.ex_anchor:before {
		height: 90px;
    	margin-top: -90px;
	}
}

/* btn ----------------------- */
.s_btn.btn_gray {
	border: 3px solid #333;
}
.s_btn.btn_gray a {
	color: #333;
}

.s_btn a:hover:after{
  right: 4px;
}

@media screen and (max-width: 640px) {
.s_btn {
	width: 100%;
}
.s_btn a {
	font-size: 3.6vw;
}
}


/* .mod_billboard_voicefact ----------------------- */
.mod_billboard_voicefact {
	margin: 30px auto;
	width: 976px;
}
.mod_billboard_voicefact img {
	max-width: 100%;
	height: auto;
}
@media screen and (max-width: 640px) {
	.mod_billboard_voicefact {
		width: 100%;
	}
}

/* mv_section
-----------------------------------------*/ 
.mv_section{
	text-align: center;
	width: 100%;
}
.mv_section img {
	max-width: 100%;
	height: auto;
	margin: auto;
	}

@media screen and (max-width: 640px) {
  .mv_section {
	box-sizing: border-box;
	margin: auto;
	padding: 0;
    width: 100%;
  }
}

/* title ----------------------- */

.ttl_function {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

@media screen and (max-width: 640px) {
	.ttl_function {
		font-size: 18px;
	}
}
.ttl_offer {
	border-bottom: #333 solid 1px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 1px;
	padding-bottom: .5em;
	text-align: center;
	width: 100%;
}
@media screen and (max-width: 640px) {

}
.ttl_offer_sub {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}


/* button ----------------------- */

.btn_voicefact {
	margin: auto;
	max-width: 400px;
}	
.btn_voicefact a {
	background: #fff;
	border: #666 solid 1px;
	border-radius: 100vh;
	box-sizing: border-box;
	display: block;
	padding: 10px;
	position: relative;
	text-align: center;
	transition: all 0.2s linear;
}
.btn_voicefact a::after {
	background: url("../img/ico_arrow.webp");
  	background-size: contain;
	content: '';
	display: inline-block;
	height: 24px;
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.2s linear;
	vertical-align: middle;
	width: 32px;
  }
  .btn_voicefact a:hover {
	background: #efefef;
	transition: all 0.2s linear;
  }
  .btn_voicefact a:hover::after {
	right: 14px;
	transition: all 0.2s linear;
  }

  @media screen and (max-width: 640px) {
	.btn_voicefact {
		width: 90%;
	}
	.btn_voicefact a::after {
	right: 10px;
	}
	.btn_voicefact a:hover::after {
		right: 4px;
	}
}

.btn_detail {
	font-size: 14px;
	text-align: right;
}
.btn_detail a {
	padding-right: 28px;
	position: relative;
	text-decoration: underline;
	transition: all 0.2s linear;
}
.btn_detail a::after {
	background: url("../img/ico_arrow.webp");
  	background-size: contain;
	content: '';
	display: inline-block;
	height: 16px;
	margin-left: 5px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.2s linear;
	vertical-align: middle;
	width: 24px;
}
.btn_detail a:hover {
	text-decoration: none;
	transition: all 0.2s linear;
}
.btn_detail a:hover::after {
	right: -6px;
	transition: all 0.2s linear;

}

/* column ----------------------- */

/*-------------------------
    two_one_block
-------------------------*/
.two_one_block,
.two_one_block_center {
    display : flex;
    flex-wrap : wrap;
    justify-content:space-between;
}

.two_one_block::after,
.two_one_block_center::after{
    content:"";
    display: block;
    width: 48%;
}

.two_one_block .column,
.two_one_block_center .column{
    width: 48%;
}
.two_one_block .column img,
.two_one_block_center .column img{
	height: auto;
	width: 100%;
}

.two_one_block_center .column:nth-child(odd) {
	margin-left: auto;
}

.two_one_block_center .column:nth-child(even) {
	margin-right: auto;
}
@media screen and (max-width: 640px) {

.two_one_block::after,
.two_one_block_center::after{
    content:"";
    display: block;
    width: 100%;
}
.two_one_block .column,
.two_one_block_center .column{
    width: 100%;
	margin-bottom: 0.6em;
	margin-top: 1em;
}
.two_one_block_center .column:nth-child(odd),
.two_one_block_center .column:nth-child(even) {
	margin-left: 0;
	margin-right: 0;
}
.two_one_block .column:first-child,
.two_one_block_center .column:first-child{
	margin-top: 0;
}
}

/*-------------------------
   three_one_block
-------------------------*/
.three_one_block{
    display : flex;
    flex-wrap : wrap;
    justify-content:space-between;
}

.three_one_block::after{
    content:"";
    display: block;
    width: 31%;
}

.three_one_block .column{
    width: 31%;
    margin-bottom: 1em;
}

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

.three_one_block::after{
    content:"";
    display: block;
    width: 100%;
}
.three_one_block .column {
	margin: 0 auto 1em;
    width: 90%;
}
	
}


/* banner ----------------------- */

.bnr_contact_wrap {
	background: #ccc;
	padding: 30px 0;
}

.bnr_contact_placeholder {
	width: 100%;
}

.bnr_contact_wrap.is-fixed {
	bottom: 0;
	left: 50%;
	margin: 0;
	position: fixed;
	transform: translateX(-50%);
	z-index: 100;
}

@media screen and (max-width: 640px) {
	.bnr_contact_wrap.is-fixed {
		left: 0;
		margin-top: 0 !important;
		padding-bottom: 8px !important;
		padding-top: 8px !important;
		right: 0;
		transform: none;
		width: auto;
	}
	.bnr_contact_wrap.is-fixed .ttl_function {
		font-size: 4vw!important;
	}
	.bnr_contact_wrap.is-fixed .two_one_block_center {
    	display : flex;
    	flex-wrap : wrap;
		margin-top: -90px;
		width: 100%;
	}

	.bnr_contact_wrap.is-fixed .two_one_block_center::after{
    	content:"";
    	display: block;
    	width: 48%;
	}

	.bnr_contact_wrap.is-fixed .two_one_block_center .column{
		font-size: 3vw!important;
		width: 48%;
		margin: auto 1%;
    	width: 48%!important;
	}
	.bnr_contact_wrap.is-fixed .btn_voicefact {
		width: 100%;
	}
	.bnr_contact_wrap.is-fixed .btn_voicefact a {
	padding: 3vw;
	position: relative;
	text-align: center;
	transition: all 0.2s linear;
}
	.bnr_contact_wrap.is-fixed .btn_voicefact a::after {
	height: 3vw;
	position: absolute;
	right: 3vw;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.2s linear;
	vertical-align: middle;
	width: 4vw;
  }
}