@charset "utf-8";


/* PC向けおよび大型タブレット向けのレイアウトの指定：769px～960px */
@media only screen and (min-width:1px) and (max-width:960px){
/*==========================================
 body
===========================================*/
body {
	min-width: 100%;
	text-align: center;
	width: 100%;
}

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

/*==========================================
Menu
===========================================*/    
nav.NavMenu {
position: fixed;	/*表示位置を固定*/
z-index: 2;		/*重ね順を変更*/
top: 0;		/*表示位置を指定*/
left: 0;	/*表示位置を指定*/
background: #ECFEF4;
color: #000;	/*文字色を黒にする*/
text-align: center;		/*テキストを中央揃え*/
width: 100%;	/*全幅表示*/
transform: translateX(100%);	/*ナビを上に隠す*/
height: 100vh;
}

/*トグルボタンが押されたときに付与するクラス*/
nav.NavMenu.active {
transform: translateX(0%);
transition: all 0.6s;	/*アニメーションの時間を指定*/
}
/*トグルを閉じる操作をしたら付与するクラス*/
nav.NavMenu.off {
transition: all 0.6s;	/*アニメーションの時間を指定*/
}

/*トグルボタンのスタイルを指定*/
.Toggle {
  position: fixed;    /* bodyに対しての絶対位置指定 */
  right: 16px;
  top: 12px;
  width: 49px;
  height: 49px;
  cursor: pointer;
  z-index: 3;
  background-color: #048B1F;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Toggle span {
  position: absolute;          /* 中央に重ねるため */
  display: block;
  width: 19px;
  height: 1px;                 /* border-bottom ではなく高さで線を作る */
  background: #FFF;
  transition: .35s ease-in-out;
}

/* 3本線の位置 */
.Toggle span:nth-child(1) {
  top: 16px;
}
.Toggle span:nth-child(2) {
  top: 24px;
}
.Toggle span:nth-child(3) {
  top: 32px;
}

/* active時の変形 */
.Toggle.active span:nth-child(1) {
  transform: rotate(-45deg);
  top: 24px;   /* 真ん中に寄せる */
}
.Toggle.active span:nth-child(2) {
  opacity: 0;  /* 真ん中の線は消す */
}
.Toggle.active span:nth-child(3) {
  transform: rotate(45deg);
  top: 24px;   /* 真ん中に寄せる */
}

/*==========================================
Other
===========================================*/
.NavMenu h1 {
	display: inherit;
}

header section p {
	margin-right: 80px;
}

header section h1 {
max-width: 175px;
min-width: 175px;
width: 100% ;
}

header section {
	margin-left: 16px;
	margin-top: 16px;
}
  
.NavMenu h1 {
	text-align: left;
	margin-top: 20px;
	margin-left: 20px;
	margin-bottom: 45px;
	}
	
.NavMenu ul {
	display: block;
	margin-left: 16px;
	margin-right: 16px;
}

.NavMenu ul li {
	margin-left: 0px;
	margin-bottom: 28px;
	font-size: 1.375em;
}

.NavMenu ul li a {
	border-top-right-radius: 25px;
	border-bottom-left-radius: 25px;
}

.NavMenu ul li a img {
	display: inherit;
}

.NavMenu ul li a {
display: flex;
justify-content: center;
align-items: center;
}

.NavMenu ul li:first-child a img {
	margin-right: 8px;
}

.NavMenu ul li:last-child a img {
margin-left: 8px;
}

header ul li a {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 0px;
}

.btn li {
	font-size: 1.3em;
}

footer .btn {
justify-content: center;
margin-top: 35px;
}

footer .btn li {
	max-width: 349px;
	width: 100%;
	margin-left: 8px;
	margin-right: 8px;
	margin-bottom: 16px;
	margin-left: auto;
margin-right: auto;
}

#mainTop_inner h2 {
	font-size: 2em;
	display: block;
	text-align: center;
}

#mainTop_inner h3 {
	font-size: 1.4em;
	display: block;
	text-align: center;
}

#mt01 {
	position: static;
	text-align: center;
	margin-top: 5px;
}

#mt01 img {
	width: 140px;
	height: auto;
}

#mt02 {
	position: static;
	text-align: center;
	margin-top: -25px;
	margin-bottom: -25px;
    }
	
#mainTop_inner {
	max-width: 100%;
	width: 100%;
}

#freeBlock #as01 {
        left: -1%;
    }
	
#realVoice #as01 {
        left: -1%;
    }

#reasonBlock_inner section h3 img {
    left: 38px;
    top: -20px;
}

#reasonBlock_inner__box figure {
    margin-left: 15px;
}

#merit {
        position: absolute;
        right: -10px;
        top: -36px;
        width: 183px;
        height: auto;
    }
	
#b_tit h2 {
    font-size: 1.5em;
}

#b_tit p {
    font-size: 3.5em;
}

#contact2 h3 {
	font-size: 2.125em;
	display: block;
	margin-bottom: 13px;
}

#contact2 h3 img {
	margin-left: 0px;
	margin-top: 8px;
}

#contact2 p {
	font-size: 0.938em;
}
}


@media only screen and (max-width:768px){
/*==========================================
 Other
===========================================*/
#freeBlock #why {
        position: absolute;
        right: -5px;
        top: -53px;
        width: 156px !important;
        height: auto !important;
    }
	
#realVoice #why {
        position: absolute;
        right: -5px;
        top: -44px;
        width: 156px !important;
        height: auto !important;
    }
	
#copy {
	padding-bottom: 35px;
}

.btn {
	display: block;
}

.btn li {
	margin-left: auto;
	margin-right: auto;
		margin-bottom: 16px;
}

#topForm .inner h2 {
font-size: 1.313em;
	padding-bottom: 30px;
}

#f_navi {
	display: block;
		margin-top: 35px;
}

#f_navi li {
	background-image: none;
	padding-right: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	text-align: center;
}

#mainTop_inner2 ul {
	display: block;
	margin-top: 23px;
}

#mainTop_inner2 ul li {
	border: 3px solid #048B1F;
	border-radius: 5px;
	width: 100%;
	height: 43px;
	flex-direction: row;
	margin-bottom: 8px;
}

#mainTop_inner2 ul li img {
	height: 24px;
	width: auto;
	margin-left: 5px;
}

#mainTop_inner2 h4 {
font-size: 1.125em;
}

#mainTop_inner2 p {
font-size: 0.938em;
}

#mainTop_inner {
    margin-top: 0px;
}

#mainTop_inner h2 {
	font-size: 1.250em;
	text-align: center;
	display: block;
	padding-left: 0px;
	padding-right: 0px;
	line-height: 1.5;
}

#mainTop_inner h2 strong {
	display: block;
}

#mainTop_inner h3 {
	font-size: 1.250em;
	padding-left: 0px;
	padding-right: 0px;
	display: block;
	text-align: center;
		line-height: 1.5;
}

#mainTop_inner h3 strong {
	font-size: 1em;
}

#freeBlock_inner__box {
	display: block;
}

#freeBlock_inner__box #illa02 {
	margin-left: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
}

#realVoice_inner__box {
	display: block;
}

#realVoice_inner__box #illa02 {
	margin-left: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
}

.spbr {
	display: inherit;
}

#mainTop_inner2 ul li img {
    margin-top: 0px;
}

#freeBlock #as01 {
    top: 12px;
}

#freeBlock_inner h2 {
    margin-bottom: 22px;
}

#realVoice_inner h2 {
    margin-bottom: 22px;
}
	
#realVoice #as02 {
    position: absolute;
    top: 2px;
    right: 4%;
}

#merit {
        position: absolute;
        right: -10px;
        top: -36px;
        width: 183px;
        height: auto;
    }
	
#reasonBlock_inner__box figure {
	max-width: 100%;
	width: 100%;
	margin-left: 0px;
	margin-top: 32px;
}

#reasonBlock {
    padding-top: 28px;
    padding-bottom: 40px;
}

#reasonBlock_inner__box {
	display: block;
}

#reasonBlock_inner section h3 img {
    position: absolute;
    left: 77px;
    top: 28px;
}

#comparisonBlock_inner table th img {
    max-width: 120px;
}

#b_tit h2 {
font-size: 1.6em;
}

#b_tit p {
font-size: 2.5em;
}

#contactBlock_inner figure {
    text-align: center;
    margin-top: -150px;
}

#contactBlock {
    padding-top: 185px;
    padding-bottom: 53px;
}

#contactBlock_box {
    border: 3px solid #048B1F;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 27px;
    padding-bottom: 27px;
}
#contact1 {
	border-radius: 12px;
	padding-top: 13px;
	padding-right: 20px;
	padding-bottom: 13px;
	padding-left: 20px;
	display: block;
	margin-bottom: 20px;
}

#contact1 h2 {
	font-size: 1.188em;
	margin-bottom: 10px;
}

#contact1 p {
	font-size: 1em;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: auto;
	padding-bottom: 5px;
	display: inline-block;
	margin-right: auto;
}
}


@media only screen and (max-width: 470px){
/*==========================================
 幅470px以下から ヘッダー等微調節
===========================================*/
#topForm .inner form dl dd label {
	margin-right: 0px;
	display: flex;
}

#contact2 h3 {
	font-size: 1.250em;
}

#b_tit {
	padding-top: 34px;
	padding-bottom: 34px;
}

#b_tit h2 {
font-size: 1.125em;
}

#b_tit h2 strong {
	font-size: 1em;
}

#b_tit p {
font-size: 2.250em;
}

#reasonBlock_inner section h3 img {
        position: absolute;
        left: 17px;
        top: 12px;
        width: 33px;
        height: auto;
    }
	
#reasonBlock_inner section h2 {
    font-size: 1.313em;
}
#reasonBlock_inner section h3 {
    font-size: 1.313em;
}

#reasonBlock_inner__box {
	padding-top: 35px;
	padding-right: 20px;
	padding-bottom: 35px;
	padding-left: 20px;
	margin-top: 10px;
}

    #realVoice #as02 {
        position: absolute;
        top: 42px;
        right: 4%;
        width: 42px;
        height: auto;
    }

#freeBlock #why {
        position: absolute;
        right: -5px;
        top: -53px;
        width: 130px !important;
        height: auto !important;
    }

#freeBlock_inner__box {
	padding-top: 25px;
	padding-right: 25px;
	padding-bottom: 25px;
	padding-left: 25px;
}

#freeBlock_inner__box section h3 {
font-size: 1.313em;
}

#freeBlock #as01 {
        position: absolute;
        top: -1px;
        left: 3%;
        width: 35px;
    }
	
#freeBlock_inner {
        padding-top: 30px;
        padding-bottom: 40px;
    }

#freeBlock_inner h2 {
	font-size: 1.313em;
	margin-bottom: 10px;
}

#freeBlock_inner__box #illa02 {
	max-width: 100%;
	width: 100%;
}

#realVoice #why {
        position: absolute;
        top: -53px!important;
        width: 130px!important;
        height: auto!important;
		left: -17px
    }

#realVoice_inner__box {
	padding-top: 25px;
	padding-right: 25px;
	padding-bottom: 25px;
	padding-left: 25px;
}

#realVoice_inner__box section h3 {
font-size: 1.313em;
}

#realVoice #as01 {
        position: absolute;
        top: -1px;
        left: 3%;
        width: 35px;
    }
	
#realVoice_inner {
        padding-top: 30px;
        padding-bottom: 40px;
    }

#realVoice_inner h2 {
	font-size: 1.313em;
	margin-bottom: 10px;
}

#realVoice_inner__box #illa02 {
	max-width: 100%;
	width: 100%;
}

#page-top {
max-width: 64px;
width: 100%;
}

.form_btn {
    background-position: right 20px center;
}

#topForm {
	padding-top: 50px;
	padding-bottom: 80px;
}

#topForm .inner form {
	border-radius: 10px;
	padding-top: 35px;
	padding-bottom: 35px;
}

.btn li {
	font-size: 1.2em;
}

.btn li img {
	width: 35px;
}

.NavMenu h1 {
	margin-top: 16px;
	margin-left: 16px;
	}
	
header section h1 {
	margin-right: 0px;
	margin-bottom: 16px;
}

header section {
	display: block;
}

header section p {
	margin-right: 16px;
}

    .NavMenu ul li {
        font-size: 1em;
    }
	
.spbr2 {
	display: inherit!important;
}

#comparisonBlock_inner h2 {
font-size: 1.313em;
	margin-bottom: 30px;
}

#comparisonBlock {
	padding-top: 40px;
	padding-bottom: 40px;
}

#comparisonBlock_inner table th img {
    max-width: 100px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.spImg {
		display: inherit;
}

.pcImg {
	display: none!important;
}

#comparisonBlock_inner table th {
    font-size: 0.938em;
	padding-bottom: 0px;
}

#comparisonBlock_inner table td {
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 5px;
	font-size: 0.875em;
	height: 70px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
}

@media only screen and (max-width: 320px){
/*==========================================
 幅320px以下から ヘッダー等微調節
===========================================*/
#reasonBlock_merit dl dd {
	font-size: 0.875em;
}

    #reasonBlock_inner section h3 img {
        left: 2px;
    }
	
    .btn li {
        font-size: 1em;
    }
	
#mainTop_inner h3 {
        font-size: 1em;
    }
	
#mainTop_inner2 h4 {
        font-size: 1em;
    }
	
#mainTop_inner2 p {
        font-size: 0.8em;
    }
}


@media only screen and (max-width: 1000px){
/* 画面中央に固定されるスワイプ案内 */
.swipe-indicator01 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: url(../images/swipe_finger.png) no-repeat center;
    background-size: contain;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 9999;
    background-color: #d6ede657;
    border-radius: 50%;
    border: 1px solid #1e514157;
}
.swipe-indicator01.hide {
    opacity: 0;
}
}