@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;900&family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;900&family=Roboto&display=swap');

html {
	font-family: 'Roboto', 'Noto Sans JP', san-serif;
	font-weight: 400;
	font-style: normal;
	}

body {
	padding: 70px 0 0 0;
	color: #333;
	background: #fff;
	}
@media screen and (max-width:834px){
body {
	padding: 50px 0 0 0;
	}
}

a {
	color: #009be4;
	text-decoration: none;
	transition: .3s ease;
	}

a:hover {
	color: #54bced;
	}

/* header */
header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	margin: 0;
	padding: 15px;
	background: #1F140D;
	box-shadow: 0 1px 2px rgba(0,0,0,.5);
	z-index: 1000;
	}
@media screen and (max-width:834px){
header {
	height: 50px;
	padding: 10px;
	}
}

header .logo {
	position: relative;
	display: block;
	width: 182px;
	z-index: 1001;
	}
@media screen and (max-width: 834px) {
header .logo {
	width: 137px;
	}
}

header .logo a {
	display: block;
	}

header .logo a img {
	display: block;
	height: 40px;
	}
@media screen and (max-width:834px){
header .logo a img {
	height: 30px;
	}
}

header span.bt {
	display: none;
	}
@media screen and (max-width:834px){
header span.bt {
	position: fixed;
	right: 10px;
	top: 10px;
	display: block;
	width: 30px;
	height: 30px;
	content: "";
	transition: .5s ease;
	}
header span.bt:before {
	position: absolute;
	left: 0px;
	top: 7px;
	width: 30px;
	height: 3px;
	content: "";
	background: #fff;
	transition: .2s ease;
	}
header span.bt:after {
	position: absolute;
	left: 0px;
	bottom: 7px;
	width: 30px;
	height: 3px;
	content: "";
	background: #fff;
	transition: .2s ease;
	}
header span.bt.open:before {
	top: 13.5px;
	transform: rotate(-315deg);
	}
header span.bt.open:after {
	bottom: 13.5px;
	transform: rotate(315deg);
	}
}

header nav {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 70px;
	padding: 40px 0 0 0;
	z-index: 1000;
	}
@media screen and (max-width:834px){
header nav {
	position: fixed;
	right: -100%;
	top: 50px;
	width: 100%;
	padding: 0;
	transition: .5s ease;
	}
header nav.open {
	right: 0px;
	}
}

header nav ul {
	display: block;
	text-align: center;
	}
@media screen and (max-width:834px){
header nav ul {
	text-align: left;
	background: #1F140D;
	}
}

header nav ul li {
	position: relative;
	display: inline-block;
	}
@media screen and (max-width:834px){
header nav ul li {
	display: block;
	width: 100%;
	}
}

header nav ul li a {
	display: block;
	height: 30px;
	padding: 7px 10px 0;
	color: #fff;
	font-size: 14px;
	line-height: 1em;
	border-bottom: 2px solid #1F140D;
	transition: .3s ease;
	}
@media screen and (max-width:834px){
header nav ul li a {
	height: auto;
	padding: 4vw;
	font-size: 4vw;
	border-bottom: 1px solid #555;
	}
}

header nav ul li a:hover {
	color: #fff;
	border-bottom: 2px solid #339933;
	}
@media screen and (max-width:834px){
header nav ul li a:hover {
	border-bottom: 1px solid #333;
	}
}

header nav ul li ul {
	display: none;
	}
@media screen and (max-width:834px){
header nav ul li ul {
	display: block;
	}
}

header nav ul li:hover ul {
	display: block;
	position: absolute;
	left: 50%;
	top: 30px;
	transform: translateX(-50%);
	display: block;
	padding: 0;
	text-align: left;
	background: rgba(51,153,51,.7);
	}
@media screen and (max-width:834px){
header nav ul li:hover ul {
	position: relative;
	left: auto;
	top: auto;
	transform: translateX(0);
	background: #666;
	}
}

header nav ul li ul li {
	display: block;
	width: 100%;
	}

header nav ul li ul a {
	display: block;
	width: 100%;
	height: auto;
	padding: 10px;
	color: #fff;
	white-space: nowrap;
	border: 0;
	}
@media screen and (max-width:834px){
header nav ul li ul a {
	padding: 4vw;
	color: #fff;
	border-bottom: 1px solid #555;
	}
}

header nav ul li ul a:hover {
	color: #fff;
	background: rgba(51,153,51,1);
	border: 0;
	}
@media screen and (max-width:834px){
header nav ul li ul a:hover {
	padding: 4vw;
	background: #666;
	border-bottom: 1px solid #555;
	}
}

header li.tel {
	position: absolute;
	right: 220px;
	top: 10px;
	display: block;
	padding-left: 153px;
	}
@media screen and (max-width:834px){
header li.tel {
	position: relative;
	right: auto;
	top: auto;
	padding: 4vw;
	border-bottom: 1px solid #555;
	}
}

header li.tel .num {
	display: block;
	padding: 1px 0 0 33px;
	background: url(../img/icon_tel.svg) 0px 0px no-repeat;
	background-size: 26px 26px;
	}

header li.tel .num a {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1em;
	border: 0;
	}
@media screen and (max-width:834px){
header li.tel .num a {
	color: #fff;
	line-height: 1.5em;
	}
}

header li.tel .title {
	position: absolute;
	left: 0px;
	top: 5px;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1em;
	}
@media screen and (max-width:834px){
header li.tel .title {
	position: relative;
	left: auto;
	top: auto;
	color: #fff;
	font-size: 4vw;
	}
}

header li.tel .time {
	position: absolute;
	right: -7px;
	bottom: -12px;
	color: #fff;
	font-size: 13px;
	line-height: 1em;
	}
@media screen and (max-width:834px){
header li.tel .time {
	position: relative;
	left: auto;
	bottom: auto;
	color: #fff;
	font-size: 3vw;
	}
}

header li.contact {
	position: absolute;
	right: 10px;
	top: 10px;
	display: block;
	}
@media screen and (max-width:834px){
header li.contact {
	position: relative;
	right: auto;
	top: auto;
	padding: 4vw;
	}
}

header li.contact a {
	display: block;
	width: 190px;
	height: 50px;
	padding: 17px 0 0 0;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	background: #339933;
	border-radius: 5px;
	border: 0;
	}
@media screen and (max-width:834px){
header li.contact a {
	width: 100%;
	height: auto;
	padding: 1em 0;
	font-size: 5vw;
	}
}

header li.contact a:hover {
	color: #fff;
	background: #1AB81A;
	border: 0;
	}

/* footer */
footer {
	width: 100%;
	padding: 0;
	background: #1F140D;
	
	}
@media screen and (max-width:834px){
footer {
	}
}

footer div {
	position: relative;
	padding: 60px 0 20px;
	}
@media screen and (max-width:834px){
footer div {
	padding: 10vw 0;
	}
}

footer div a {
	position: absolute;
	left: 20px;
	bottom: 20px;
	display: block;
	width: 150px;
	height: 35.9522px;
	color: #fff;
	}
@media screen and (max-width:834px){
footer div a {
	position: relative;
	left: auto;
	bottom: auto;
	margin: 0 auto 4vw;
	}
}

footer div a img {
	width: 100%;
	height: 100%;
	}

footer div.company {
	position: absolute;
	padding: 0;
	height: auto;
	right: 20px;
	bottom: 20px;
	color: #fff;
	}
@media screen and (max-width:834px){
footer div.company {
	position: relative;
	right: auto;
	bottom: auto;
	margin: 0 auto 4vw;
	text-align: center;
	}
}

footer h2 {
	font-size: 14px;
	line-height: 1.5em;
	}
@media screen and (max-width:834px){
footer h2 {
	font-size: 4vw;
	line-height: 2em;
	}
}

footer p.address {
	color: #fff;
	font-size: 12px;
	line-height: 2em;
	}
@media screen and (max-width:834px){
footer p.address {
	font-size: 3vw;
	line-height: 3em;
	}
}

footer p.notification {
	font-size: 9px;
	line-height: 1em;
	}
@media screen and (max-width:834px){
footer p.notification {
	font-size: 2vw;
	}
}

footer p.copyright {
	display: block;
	color: #fff;
	font-size: 12px;
	line-height: 1em;
	text-align: center;
	}
@media screen and (max-width:834px){
footer p.copyright {
	font-size: 4vw;
	}
}

/* totop */
.totop {
	z-index: 99999999;
	position: fixed;
	right: 20px;
	bottom: 36px;
	display: block;
	width: 40px;
	height: 40px;
	}
@media screen and (max-width:834px){
.totop {
	bottom: 134px;
	right: 10px;
	}
}

.totop a {
	display: block;
	width: 40px;
	height: 40px;
	background: url("../img/totop.svg") center center no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	text-indent: 100%;
	font-size: 0;
	}

/* メインビジュアル */
#mv {
	padding: 70px 0 30px;
	background: url(../img/mv.jpg) center center no-repeat;
	background-size: cover;
	}
@media screen and (max-width:834px){
#mv {
	padding: 11vw 4vw 4vw;
	background: url(../img/mv.jpg) center right 70% no-repeat;
	background-size: auto 100%;
	}
}

#mv .inner {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,.8);
	}
@media screen and (max-width:834px){
#mv .inner {
	}
}

#mv h2 {
	display: block;
	margin: 0 0 1rem;
	font-size: 75px;
	font-weight: 700;
	line-height: 1.15em;
	}
@media screen and (max-width:834px){
#mv h2 {
	font-size: 10vw;
	}
}

#mv h3 {
	display: block;
	margin: 0 0 10px;
	padding: 10px 20px;
	width: fit-content;
	font-size: 24px;
	font-weight: 500;
	line-height: 1em;
	letter-spacing: .15em;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.8);
	}
@media screen and (max-width:834px){
#mv h3 {
	padding: 5px 10px;
	font-size: 4vw;
	letter-spacing: .05em;
	}
}

#mv h4 {
	display: block;
	margin: 0 0 10px;
	width: fit-content;
	font-size: 40px;
	font-weight: 500;
	line-height: 1em;
	letter-spacing: .05em;
	}
@media screen and (max-width:834px){
#mv h4 {
	font-size: 5vw;
	}
}

#mv ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 30px;
	padding: 0;
	gap: 10px;
	}
@media screen and (max-width:834px){
#mv ul {
	margin: 0 0 15px;
	width: 60%;
	}
}

#mv li {
	display: block;
	width: 180px;
	padding: 5px 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25em;
	text-align: center;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.8);
	border-radius: 50px;
	}
@media screen and (max-width:834px){
#mv li {
	width: 45%;
	font-size: 3.5vw;
	}
}

#mv p {
	display: block;
	font-size: 16px;
	line-height: 1.75em;
	letter-spacing: .15em;
	}
@media screen and (max-width:834px){
#mv p {
	width: 70%;
	font-size: 4vw;
	line-height: 1.5em;
	letter-spacing: 0;
	}
#mv p br {
	display: none;
	}
}

#mv .sp {
	position: absolute;
	right: 50px;
	bottom: 0;
	display: block;
	width: 120px;
	}
@media screen and (max-width:834px){
#mv .sp {
	right: 0;
	width: 20%;
	}
}

/* このようなお悩みございませんか？ */
#problem {
	padding: 50px 0;
	background: #492F1D;
	}
@media screen and (max-width:834px){
#problem {
	padding: 10vw 5vw;
	}
}

#problem div {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 50px 0 50px 350px;
	}
@media screen and (max-width:834px){
#problem div {
	padding: 0;
	}
}

#problem h2 {
	display: block;
	margin: 0 0 20px;
	color: #fff;
	font-size: 25px;
	font-weight: 600;
	line-height: 1.5em;
	letter-spacing: .05em;
	}
@media screen and (max-width:834px){
#problem h2 {
	margin: 0 0 5vw;
	font-size: 5vw;
	text-align: center;
	}
}

#problem img {
	position: absolute;
	left: 100px;
	bottom: 0;
	display: block;
	width: 230px;
	}
@media screen and (max-width:834px){
#problem img {
	position: relative;
	left: auto;
	bottom: auto;
	width: 30%;
	margin: 0 auto;
	}
}

#problem ul {
	display: block;
	margin: 0;
	padding: 0 0 0 30px;
	}
@media screen and (max-width:834px){
#problem ul {
	padding: 0;
	}
}

#problem li {
	display: block;
	margin: 0;
	padding: 10px 0 10px 30px;
	color: #fff;
	font-size: 16px;
	background: url(../img/icon_problem.svg) left center no-repeat;
	background-size: 20px 20px;
	}
@media screen and (max-width:834px){
#problem li {
	font-size: 4vw;
	}
}

/* あんしん電話クラウドなら */
#benefit {
	padding: 50px 0;
	background: #EFE1D7;
	}
@media screen and (max-width:834px){
#benefit {
	padding: 10vw 5vw;
	}
}
#benefit h2 {
	display: block;
	width: 300px;
	margin: 0 auto 30px;
	}
#benefit ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	}
#benefit ul li {
	display: block;
	width: 47%;
	}
@media screen and (max-width:834px){
#benefit ul li {
	width: 100%;
	margin: 0 0 30px;
	}
}
#benefit img {
	display: block;
	width: 100%;
	}


@media screen and (max-width:834px){
	.benefit {
		display: none;
		}
	.benefit_sp {
		display: block;
		}
	}

/* あんしん電話クラウドは電話特殊詐欺の対策に効果的です */
#scene {
	padding: 50px 0;
	background: #492F1D;
	}
@media screen and (max-width:834px){
#scene {
	padding: 10vw 5vw;
	}
}

#scene h2 {
	display: block;
	margin: 0 0 60px;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#scene h2 {
	margin: 0 0 5vw;
	font-size: 5vw;
	}
}

#scene ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	max-width: 900px;
	margin: 0 auto 30px;
	}

#scene li {
	position: relative;
	display: block;
	width: 33%;
	}
@media screen and (max-width:834px){
#scene li {
	width: 100%;
	padding: 10vw 0;
	}
}

#scene li::before {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	display: block;
	width: 290px;
	height: 290px;
	content: "";
	background: #fff;
	border-radius: 20px;
	z-index: 1;
	}
@media screen and (max-width:834px){
#scene li::before {
	width: 100%;
	height: 95%;
	}
}

#scene li img {
	position: relative;
	display: block;
	height: 190px;
	margin: 0 auto 20px;
	z-index: +1;
	}

#scene li p {
	position: relative;
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5em;
	text-align: center;
	z-index: +1;
	}
@media screen and (max-width:834px){
#scene li p {
	font-size: 4.6vw;
	}
}

/* あんしん電話クラウドとは */
#about {
	padding: 50px 0;
	background: #EFE1D7;
	}
@media screen and (max-width:834px){
#about {
	padding: 10vw 5vw;
	}
}

#about h2 {
	display: block;
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#about h2 {
	margin: 0 0 5vw;
	font-size: 5vw;
	}
}

#about p {
	display: block;
	font-size: 14px;
	line-height: 2em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#about p {
	font-size: 4vw;
	text-align: left;
	}
}

#about img {
	display: block;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	}
@media screen and (max-width:834px){
#about img {
	margin-top: 5vw;
	}
}

/* あんしん電話クラウドが選ばれる5つの理由 */
#reason {
	padding: 50px 0;
	background: #492F1D;
	}
@media screen and (max-width:834px){
#reason {
	padding: 10vw 5vw;
	}
}

#reason h2 {
	display: block;
	margin: 0 0 30px;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#reason h2 {
	margin: 0 0 5vw;
	font-size: 5vw;
	}
}

#reason div {
	position: relative;
	display: block;
	width: 100%;
	max-width: 700px;
	margin: 0 auto 20px;
	padding: 40px 50px 30px;
	background: #fff;
	border-radius: 10px;
	}
@media screen and (max-width:834px){
#reason div {
	margin: 0 0 5vw;
	padding: 5vw 5vw 120px;
	}
}

#reason div:nth-child(odd) {
	padding-left: 290px;
	}
@media screen and (max-width:834px){
#reason div:nth-child(odd) {
	padding: 5vw 5vw 120px;
	}
}

#reason h3 {
	display: block;
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5em;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#reason h3 {
	margin: 0 0 .5em;
	font-size: 4.5vw;
	}
}

#reason h3 span {
	display: block;
	color: #00394e;
	font-size: 16px;
	line-height: 1.5em;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#reason h3 span {
	font-size: 4vw;
	}
}

#reason p {
	display: block;
	font-size: 14px;
	line-height: 1.5em;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#reason p {
	font-size: 4vw;
	}
#reason p br {
	display: none;
	}
}

#reason img {
	position: absolute;
	bottom: 0px;
	display: block;
	height: 180px;
	}
@media screen and (max-width:834px){
#reason img {
	height: 120px;
	}
}

#reason div:nth-child(odd) img {
	left: 50px;
	}
@media screen and (max-width:834px){
#reason div:nth-child(odd) img {
	left: auto;
	right: 10vw;
	}
}

#reason div:nth-child(even) img {
	right: 50px;
	}
@media screen and (max-width:834px){
#reason div:nth-child(even) img {
	right: 10vw;
	}
}

/* 提供エリア */
#area {
	padding: 50px 0;
	background: #EFE1D7;
	}
@media screen and (max-width:834px){
#area {
	padding: 10vw 5vw;
	}
}

#area h2 {
	display: block;
	margin: 0 0 30px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#area h2 {
	margin: 0 0 5vw;
	font-size: 5vw;
	}
}

#area p {
	display: block;
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#area p {
	margin: 0 0 5vw;
	font-size: 4vw;
	}
}

#area p.notice {
	display: block;
	margin: 0 0 30px;
	font-size: 12px;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#area p.notice {
	margin: 0 0 5vw;
	font-size: 3.5vw;
	}
}

#area h3 {
	display: block;
	width: 100%;
	margin: 0 0 5px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#area h3 {
	font-size: 4.5vw;
	}
}

#area .inner {
	display: flex;
	flex-wrap: wrap;
	width: 100%;	
	max-width: 1000px;
	margin: 0 auto;
	}

#area .inner div {
	width: 20%;
	padding: 0 10px;
	}
@media screen and (max-width:834px){
#area .inner div {
	width: 100%;
	}
}

#area table {
	width: 100%;
	max-width: 200px;
	margin: 0 auto 20px;
	font-size: 12px;
	line-height: 1em;
	}
@media screen and (max-width:834px){
#area table {
	font-size: 3.5vw;
	}
}

#area thead th {
	width: 50%;
	padding: 5px 0;
	color: #fff;
	text-align: center;
	background: #A77E5F;
	}

#area tbody tr:nth-child(odd) {
	background: #FFFFFF;
	}

#area tbody tr:nth-child(even) {
	background: #FFF5EE;
	}

#area tbody th {
	width: 50%;
	padding: 5px 0 5px 10px;
	color: #333;
	}

#area tbody td {
	width: 50%;
	padding: 5px 10px 5px 0;
	color: #333;
	text-align: right;
	}

/* 料金 */
#fee {
	padding: 50px 0;
	background: #492F1D;
	}
@media screen and (max-width:834px){
#fee {
	padding: 10vw 5vw;
	}
}

#fee h2 {
	display: block;
	margin: 0 0 30px;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#fee h2 {
	margin: 0 0 5vw;
	font-size: 5vw;
	}
}

#fee p.notice {
	display: block;
	margin: 0 0 30px;
	color: #fff;
	font-size: 12px;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#fee p.notice {
	margin: 0 0 5vw;
	font-size: 3.5vw;
	}
}

#fee .inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	max-width: 700px;
	margin: 0 auto 20px;
	padding: 30px 50px 0;
	background: #fff;
	border-radius: 10px;
	}
@media screen and (max-width:834px){
#fee .inner {
	padding: 5vw 5vw 0;
	}
}

#fee h3 {
	display: block;
	width: 100%;
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#fee h3 {
	font-size: 4.5vw;
	}
}

#fee .inner div {
	display: block;
	width: 45%;
	max-width: 700px;
	margin: 0 10px 20px;
	padding: 15px 0 10px;
	color: #fff;
	background: #AD7B58;
	border-radius: 5px;
	}
@media screen and (max-width:834px){
#fee .inner div {
	width: 100%;
	margin: 0 0 5vw;
	padding: 5vw 0 2.5vw;
	}
}

#fee .inner .sub {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	background: none;
	}

#fee .inner .sub div {
	width: 30%;
	}
@media screen and (max-width:834px){
#fee .inner .sub div {
	width: 100%;
	}
}

#fee .inner h4 {
	display: block;
	width: 100%;
	margin: 0 auto 5px;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	text-align: center;
	}
@media screen and (max-width:834px){
#fee .inner h4 {
	margin: 0 auto .5vw;
	font-size: 4vw;
	}
}

#fee .inner p {
	display: block;
	width: 100%;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#fee .inner p {
	font-size: 7vw;
	}
}

#fee .inner p span {
	font-size: .8em;
	}

#fee .inner p.notice {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	}
@media screen and (max-width:834px){
#fee .inner p.notice {
	font-size: 3.5vw;
	}
}

/* よくあるご質問 */
#faq {
	padding: 50px 0;
	background: #EFE1D7;
	}
@media screen and (max-width:834px){
#faq {
	padding: 10vw 5vw;
	}
}

#faq h2 {
	display: block;
	margin: 0 0 30px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#faq h2 {
	margin: 0 0 5vw;
	font-size: 5vw;
	}
}

#faq dl {
	display: block;
	width: 100%;
	max-width: 700px;
	margin: 0 auto 20px;
	padding: 20px 0 20px 100px;
	background: #f7fbfc;
	border-radius: 10px;
	}
@media screen and (max-width:834px){
#faq dl {
	padding: 5vw 5vw 5vw 10vw;
	font-size: 4vw;
	}
}

#faq dt {
	position: relative;
	display: block;
	padding: 10px;
	}

#faq dt:before {
	position: absolute;
	left: -26px;
	top: 9px;
	display: block;
	width: 30px;
	height: 30px;
	content: "Q";
	color: #fff;
	font-size: 15px;
	line-height: 30px;
	text-align: center;
	background: #795338;
	border-radius: 50%;
	}

#faq dd {
	position: relative;
	display: block;
	padding: 10px;
	}

#faq dd:before {
	position: absolute;
	left: -26px;
	top: 9px;
	display: block;
	width: 30px;
	height: 30px;
	content: "A";
	color: #fff;
	font-size: 15px;
	line-height: 30px;
	text-align: center;
	background: #A77E5F;
	border-radius: 50%;
	}

/* お問い合わせ */
#contact {
	padding: 50px 0;
	background: #492F1D;
	}
@media screen and (max-width:834px){
#contact {
	padding: 10vw 5vw;
	}
}

#contact h2 {
	display: block;
	margin: 0 0 30px;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#contact h2 {
	margin: 0 0 5vw;
	font-size: 5vw;
	}
}

#contact div.tel {
	display: block;
	width: 100%;
	max-width: 700px;
	margin: 0 auto 20px;
	padding: 30px 0 20px;
	background: #fff;
	border-radius: 10px;
	}
@media screen and (max-width:834px){
#contact div.tel {
	margin: 0 0 5vw;
	padding: 5vw;
	}
}

#contact div.tel h3 {
	display: block;
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#contact div.tel h3 {
	font-size: 4.5vw;
	}
}

#contact div.tel p {
	display: block;
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#contact div.tel p {
	margin: 0;
	font-size: 4vw;
	}
}

#contact div.tel .num {
	display: block;
	width: 100%;
	max-width: 350px;
	margin: 0 auto 10px;
	padding: 0;
	}
@media screen and (max-width:834px){
#contact div.tel .num {
	max-width: 65vw;
	text-align: right;
	margin: 0 auto;
	padding: 0 0 5vw;
	font-size: 7vw;
	}
}

#contact div.tel .num a {
	display: block;
	margin: 0;
	color: #333;
	font-size: 40px;
	font-weight: 600;
	line-height: 1em;
	}
@media screen and (max-width:834px){
#contact div.tel .num a {
	max-width: 65vw;
	font-size: 7vw;
	}
}

#contact div.support {
	display: block;
	width: 100%;
	max-width: 700px;
	margin: 0 auto 20px;
	padding: 30px 0 20px;
	background: #fff;
	border-radius: 10px;
	}
@media screen and (max-width:834px){
#contact div.support {
	margin: 0 0 5vw;
	padding: 5vw;
	}
}

#contact div.support h3 {
	display: block;
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#contact div.support h3 {
	margin: 0 0 2vw;
	font-size: 4.5vw;
	}
}

#contact div.support p {
	display: block;
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#contact div.support p {
	margin: 0;
	font-size: 4vw;
	text-align: left;
	}
#contact div.support p br {
	display: none;
	}
}

#contact div.form {
	display: block;
	width: 100%;
	max-width: 700px;
	margin: 0 auto 20px;
	padding: 30px 0 20px;
	background: #fff;
	border-radius: 10px;
	}
@media screen and (max-width:834px){
#contact div.form {
	padding: 5vw;
	}
}

#contact div.form p {
	display: block;
	margin: 0 0 20px;
	font-size: 12px;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#contact div.form p {
	margin: 0 0 5vw;
	font-size: 4vw;
	text-align: left;
	}
#contact div.form p br {
	display: none;
	}
}

#contact div.form span.req {
	position: absolute;
	left: 140px;
	top: 10px;
	color: #fff;
	background-color: #930404;
	padding: 2px 4px;
	font-size: 10px;
	border-radius: 5px;
	}

#contact div.form h3 {
	display: inline-block;
	margin: 0 0 5px;
	padding: 10px 0 0 0;
	font-size: 12px;
	text-align: left;
	width: 30%;
	vertical-align: top;
	}
@media screen and (max-width:834px){
#contact div.form h3 {
	font-size: 4vw;
	}
}

.form div {
	position: relative;
	display: block;
	width: 100%;
	max-width: 620px;
	margin: 0 auto 20px;
	padding: 0;
	}

.form input {
	display: inline-block;
	width: 50%;
	padding: 10px;
	font-size: 16px;
	font-weight: 300;
	border: 1px solid #ccc;
	border-radius: 5px;
	}
.form .submitbtn input {
	display: block;
}
.form hr {
	margin: 0 40px 20px;
	border: none;
	border-width: 1px 0 0 0;
	border-top: 1px solid #ccc;
}
.form .confTxt {
	display: inline-block;
	padding: 5px 0 0;
}
@media screen and (max-width:834px){
.form input {
	font-size: 4vw;
	}
}

.form textarea {
	display: inline-block;
	width: 50%;
	height: 150px;
	padding: 10px;
	font-size: 16px;
	font-weight: 300;
	border: 1px solid #ccc;
	border-radius: 5px;
	}

.form .agreement label {
	display: block;
	font-size: 12px;
	text-align: center;
	}
@media screen and (max-width:834px){
.form .agreement label {
	font-size: 4vw;
	}
}

.form .agreement label input {
	display: inline;
	width: auto;
	margin-right: .5em;
	}

.form .submitbtn input {
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
	padding: 20px 0;
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	line-height: 1em;
	background: #339933;
	border: 0;
	cursor: pointer;
	transition: .3s ease;
	}

.form .submitbtn input:hover {
	background: #1AB81A;
	}

@media screen and (max-width:834px){
	#contact div.form span.req {
	position: static;
	}
	#contact div.form h3,.form input,.form textarea {
		display: block;
		width:100%;
	}
	hr {
		display: none;
	}
	#contact div.form span.req {
		margin-left: 1em;
	}
}
/* confirm */
section#formconfirm {
	width: 100%;
	margin: -70px 0 0;
	padding: 50px 0;
	background: #EFE1D7;
	}
@media screen and (max-width: 767.98px) {
section#formconfirm {
	margin: -50px 0 0 0;
	padding: 10vw 4vw;
	}
}

section#formconfirm h2 {
	display: block;
	padding: 0 0 10px 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1em;
	text-align: center;
	}
@media screen and (max-width: 767.98px) {
section#formconfirm h2 {
	font-size: 6vw;
	}
}

section#formconfirm p {
	display: block;
	padding: 20px 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.8em;
	text-align: center;
	}
@media screen and (max-width: 767.98px) {
section#formconfirm p {
	font-size: 16px;
	text-align: left;
	}
section#formconfirm p br {
	display: none;
	}
}

section#formconfirm div.button input#backbutton {
	background: #999;
	}

section#formconfirm div.button input#backbutton:hover {
	background: #aaa;
	}

section#formconfirm p.error {
	margin: 0 0 20px 0;
	color: #c00;
	}

section#formconfirm div.errm {
	margin: 0 0 50px 0;
	padding: 30px;
	background: #fff;
	border: 2px solid #c00;
	border-radius: 5px;
	}

section#formconfirm div.errm p.error_messe {
	margin: 0;
	padding: 20px 0;
	color: #c00;
	}

section#formconfirm table {
	margin: 0 auto;
	width: 700px;
	color: #333;
	background: #fff;
	border: 1px solid #ccc;
	border-collapse: collapse;
	}
@media screen and (max-width: 767.98px) {
section#formconfirm table {
	width: 100%;
	}
}

section#formconfirm table th {
	width: 30%;
	padding: 10px;
	font-weight: 300;
	}

section#formconfirm table td {
	width: 70%;
	padding: 10px;
	font-weight: 500;
	}

section#formconfirm table tr:nth-child(odd){
	background: #fafafa;
	}

section#formconfirm table tr:nth-child(even){
	background: #fff;
	}

section#formconfirm div.buttons {
	display: block;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	padding: 0;
	border: 0;
	text-align: center;
	background: none;
	}

section#formconfirm div.buttons input {
	display: inline-block;
	width: 40%;
	margin: 0 5px;
	padding: 20px 0;
	color: #fff;
	font-size: 22px;
	text-align: center;
	background: #f60;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	transition: .3s ease;
	}
@media screen and (max-width: 767.98px) {
section#formconfirm div.buttons input {
	width: 45%;
	font-size: 18px;
	}
}

section#formconfirm div.buttons input:hover {
	background: #fa0;
	}

section#formconfirm div.buttons input.backbutton {
	background: #999;
	}

section#formconfirm div.buttons input.backbutton:hover {
	background: #aaa;
	}

/* thanks */
section#thanks {
	width: 100%;
	min-height: calc(100vh - 92px);
	margin: -70px auto 0;
	padding: 20px 0 50px 0;
	background: #EFE1D7;
	}
@media screen and (max-width: 767.98px) {
section#thanks {
	min-height: calc(100vh - 223px);
	margin: -50px 0 0 0;
	padding: 10vw 4vw;
	}
}

section#thanks h2 {
	display: block;
	padding: 50px 0 20px 0;
	font-size: 30px;
	font-weight: 600;
	line-height: 1em;
	text-align: center;
	}
@media screen and (max-width: 767.98px) {
section#thanks h2 {
	font-size: 6vw;
	}
}

section#thanks p {
	display: block;
	padding: 20px 0;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.8em;
	text-align: center;
	}
@media screen and (max-width: 767.98px) {
section#thanks p {
	font-size: 16px;
	text-align: left;
	}
section#thanks p br {
	display: none;
	}
}

section#thanks a {
	display: block;
	padding: 20px 0;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.8em;
	text-align: center;
	}

/* 逋ｺ菫｡縺ｧ縺阪↑縺�分蜿ｷ */
#not-available {
	padding: 50px 0;
	background: #EFE1D7;
	}
@media screen and (max-width:834px){
#not-available {
	padding: 10vw 5vw;
	}
}

#not-available h2 {
	display: block;
	margin: 0 0 30px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#not-available h2 {
	margin: 0 0 5vw;
	font-size: 5vw;
	}
}

#not-available p.notice {
	display: block;
	margin: 0 0 30px;
	font-size: 12px;
	line-height: 1.5em;
	text-align: center;
	letter-spacing: .1em;
	}
@media screen and (max-width:834px){
#not-available p.notice {
	margin: 0 0 5vw;
	font-size: 3.5vw;
	}
}

#not-available .inner {
	display: flex;
	flex-wrap: wrap;
	width: 100%;	
	max-width: 1000px;
	margin: 0 auto;
	}

#not-available .inner div {
	width: 50%;
	padding: 0 10px;
	}
@media screen and (max-width:834px){
#not-available .inner div {
	width: 100%;
	padding: 0;
	}
}

#not-available table {
	width: 100%;
	max-width: 500px;
	font-size: 12px;
	line-height: 1em;
	}
@media screen and (max-width:834px){
#not-available table {
	font-size: 3.5vw;
	}
}

#not-available tbody tr:nth-child(odd) {
	background: #fefefe;
	}

#not-available tbody tr:nth-child(even) {
	background: #FEF2E8;
	}

#not-available tbody th {
	width: 30%;
	padding: 5px 0 5px 10px;
	color: #333;
	}

#not-available tbody td {
	width: 70%;
	padding: 5px 10px 5px 0;
	color: #333;
	}
/*----追加コード----*/
.img-box {
	display: table;
  }
  @media (max-width: 750px) {
.img-box {
	  display: block;
	  width: 100%;
	}
  }
.img-box .text-area {
	display: table-cell;
	width: 650px;
	padding-right: 30px;
	vertical-align: top;
  }
  @media (max-width: 750px) {
.img-box .text-area {
	  display: block;
	  width: 100%;
	  padding-right: 0;
	}
  }
.img-box .text-area .ttl {
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 25px;
  }
  @media (max-width: 750px) {
.img-box .text-area .ttl {
	  font-size: 2rem;
	  margin: 0 0 10px;
	}
  }
.img-box .text-area .ttl small {
	display: block;
	font-size: 18px;
  }
.img-box .text-area ul li {
	background-color: #fff;
	font-size: 18px;
	font-weight: 700;
	padding: 8px 50px 12px;
	position: relative;
	margin: 0 0 10px;
  }
  @media (max-width: 750px) {
.img-box .text-area ul li {
	  font-size: 18px;
	  padding: 4px 25px 6px;
	  margin: 0 0 7px;
	}
  }
.img-box .text-area ul li i {
	position: absolute;
	left: 10px;
	top: -7px;
  }
  @media (max-width: 750px) {
.img-box .text-area ul li i {
	  left: 5px;
	  top: -3px;
	}
  }
  @media (max-width: 750px) {
.img-box .text-area ul li i img {
	  width: 15px;
	}
  }
  @media (max-width: 750px) {
.img-box .img-area {
	  display: block;
	  width: 100%;
	  text-align: center;
	  padding-top: 20px;
	}
  }
  .container {
	margin-right: auto;
	margin-left: auto;
	padding-left: 20px;
	padding-right: 20px;
	max-width: 1120px;
  }
  @media (max-width: 1023px) {
	.container {
	  padding-left: 40px;
	  padding-right: 40px;
	}
  }
  @media (max-width: 750px) {
	.container {
	  padding-left: 25px;
	  padding-right: 25px;
	}
  }