@charset "utf-8";
/* CSS Document */

/*初期化
-----------------------------------------------------------------------------------*/
/* Box sizing rules */
/* Box sizingの定義 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
/* デフォルトのpaddingを削除 */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
/* デフォルトのmarginを削除 */
body,
h1,
h2,
h3,
h4,
p,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
/* bodyのデフォルトを定義 */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
/* class属性を持つul、ol要素のリストスタイルを削除 */
ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A elements that don't have a class get default styles */
/* classを持たない要素はデフォルトのスタイルを取得 */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
/* img要素の扱いを簡単にする */
img {
	max-width: 100%;
	vertical-align: middle;
}

/* Natural flow and rhythm in articles by default */
/* article要素内の要素に自然な流れとリズムを定義 */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
/* inputやbuttonなどのフォントは継承を定義 */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
/* 見たくない人用に、すべてのアニメーションとトランジションを削除 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* 共通スタイル */
a {
	text-decoration:none;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}


small { font-size:80%; }

/* 文字サイズ */
/* -------------------------------------------------------- */
.fz2rem { font-size: 2rem; }
.fz3rem { font-size: 3rem; }
.fz4rem { font-size: 4rem; }


/* 文字色 */
/* -------------------------------------------------------- */
.red { color:#D80000; }
.orange { color:#FF5900; }
.blue { color:#00F; }
.yellow { color:#FCC700; }
.green { color:#59B200;}
.pink { color: #FF7FBF; }


/* 背景色 */
/* -------------------------------------------------------- */
.bg { background:#f5f5f5; }
.bg_red { background-color:#FFdddd; }

p.indent { text-indent:-1em;padding-left:1em; }
p.indent1 {
	text-indent:-19px;
	padding-left:19px;
	line-height:1.6;
}


/* 余白 */
/* -------------------------------------------------------- */
.ml5 { margin-left:5px; }
.ml10 { margin-left:10px; }
.ml15 { margin-left:15px; }
.ml20 { margin-left:20px; }
.ml25 { margin-left:25px; }
.ml30 { margin-left:30px; }
.ml35 { margin-left:35px; }
.ml40 { margin-left:40px; }
.ml45 { margin-left:45px; }
.ml50 { margin-left:50px; }
.ml55 { margin-left:55px; }
.ml60 { margin-left:60px; }
.ml70 { margin-left:70px; }
.ml80 { margin-left:80px; }
.ml90 { margin-left:90px; }
.ml105 { margin-left:105px; }

.mt0 { margin-top:0 !important; }
.mt5 { margin-top:5px; }
.mt10 { margin-top:10px; }
.mt15 { margin-top:15px; }
.mt20 { margin-top:20px; }
.mt25 { margin-top:25px; }
.mt30 { margin-top:30px; }
.mt35 { margin-top:35px; }
.mt40 { margin-top:40px; }
.mt45 { margin-top:45px; }
.mt50 { margin-top:50px; }
.mt55 { margin-top:55px; }
.mt60 { margin-top:60px; }
.mt70 { margin-top:60px; }
.mt80 { margin-top:80px; }
.mt95 { margin-top:95px; }
.mt100 { margin-top:100px; }
.mt120 { margin-top:120px; }
.mt135 { margin-top:135px; }
.mt150 { margin-top:150px; }
.mt200 { margin-top:200px; }
.mt230 { margin-top:230px; }

.mb5 { margin-bottom:5px; }
.mb10 { margin-bottom:10px; }
.mb15 { margin-bottom:15px; }
.mb20 { margin-bottom:20px; }
.mb25 { margin-bottom:25px; }
.mb30 { margin-bottom:30px; }
.mb35 { margin-bottom:35px; }
.mb40 { margin-bottom:40px; }
.mb45 { margin-bottom:45px; }
.mb50 { margin-bottom:50px; }

.mr5 { margin-right:5px; }
.mr10 { margin-right:10px; }
.mr15 { margin-right:15px; }
.mr20 { margin-right:20px; }
.mr25 { margin-right:25px; }
.mr30 { margin-right:30px; }
.mr35 { margin-right:35px; }
.mr40 { margin-right:40px; }
.mr45 { margin-right:45px; }
.mr50 { margin-right:50px; }


/* 配置 */
/* -------------------------------------------------------- */
.alignce { text-align:center; }
.alignle { text-align:left !important; }
.alignri { text-align:right; }


/* ロールオーバー */
/* -------------------------------------------------------- */
a:hover img {
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}


/* 回り込み */
/* -------------------------------------------------------- */
.fl { float:left; }
.fr { float:right; }


/* 回り込み解除 */
/* -------------------------------------------------------- */
.clearfix::after {
	display: block;
	clear: both;
	content: "";
}

.inner {
	width:1000px;
	margin: 0 auto;
}

.pc { display:block; }
.sp, .f_btn { display:none; }

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

* {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	font-size:1.75em;
	line-height:1.4;
	-webkit-text-size-adjust: none;
	font-family: "メイリオ", meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
	color: #000;
}


#form {
	writing-mode: vertical-rl;
	position: fixed;
	right: 0;
	top: 30%;
	background: #BBBBBB;
	font-size: 2.2rem;
	font-weight: bold;
	padding-top: 10px;
}
#form a {
	color: #FFF;
}
#form span {
	writing-mode: horizontal-tb;
	font-size: 1.2rem;
	background: #51AB47;
	padding: 1px 15px;
	display: inline-block;
	margin-top: 7px;
}


header {
	padding: 20px 0 15px 0;
	border-bottom: 1px solid #E6E6E6;
}
header > div {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}
header h1 {
	text-align: center;
}
header ul {
	display: flex;
}
header ul li {
	margin-left: 20px;
}

nav#gnav {
	border-top: 1px solid #FFF;
  background: -moz-linear-gradient(top, #EFEEEF, #FFF);
  background: -webkit-linear-gradient(top, #EFEEEF, #FFF);
	background: linear-gradient(to bottom, #EFEEEF, #FFF);

}
nav#gnav ul {
	display:flex;
	position: relative;
}
nav#gnav ul::before {
	content: "";
	width: 1px;
	height: 100%;
	position: absolute;
	left: -1px;
	top: 0;
	background: url(../images/gnav_bar.png) no-repeat center center;
}
nav#gnav ul li {
	width:calc(100% / 7);
	text-indent: -9999px;
	position: relative;
}
nav#gnav ul li::after {
	content: "";
	width: 1px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: url(../images/gnav_bar.png) no-repeat center center;
}
nav#gnav ul li:hover { background: #B7ECBC; }
nav#gnav ul li a {
	height: 68px;
	display: block;
}
nav#gnav ul li.n1 a { background: url(../images/gnav1.png) no-repeat center center; }
nav#gnav ul li.n2 a { background: url(../images/gnav2.png) no-repeat center center; }
nav#gnav ul li.n3 a { background: url(../images/gnav3.png) no-repeat center center; }
nav#gnav ul li.n4 a { background: url(../images/gnav4.png) no-repeat center center; }
nav#gnav ul li.n5 a { background: url(../images/gnav5.png) no-repeat center center; }
nav#gnav ul li.n6 a { background: url(../images/gnav6.png) no-repeat center center; }
nav#gnav ul li.n7 a { background: url(../images/gnav7.png) no-repeat center center; }


#mainv {
	background: url(../images/bg_mainv.jpg) no-repeat center top;
	background-size: cover;
	max-height: 500px;
}


main {
	padding-bottom: 50px;
	display: block;
}


footer {
	padding: 0 0 5px 0;
}
footer nav ul {
	display: flex;
	justify-content: center;
}
footer nav ul li::before {
	content: "｜";
	display: inline-block;
}
footer nav ul li:first-child::before,
footer nav ul.sns li::before {
	display: none;
}
footer nav ul.sns {
	margin: 10px 0;
}
footer nav ul.sns li {
	margin: 0 10px;
}
footer .content {
	background: #EEEEEE;
	padding: 25px 0 10px 0;
}
footer .content .left {
	padding-left: 30px;
}
footer .content .right {
	padding-right: 15px;
}
footer .content .copy {
	text-align: center;
	font-size: 1.3rem;
	margin-top: 20px;
}


.ggmap {
	position: relative;
	padding-bottom: 32.5%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	text-align: center;
	margin-top: 20px;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


#spNaviBtn {
	width: 26px;
	height: 26px;
	cursor: pointer;
	position: relative;
	position: fixed;
	top: 15px;
	right: 15px;
	display: none;
	z-index: 99999;
	background: #FFF;
}
#spNaviBtn span {
	margin: -1px 0 0 -13px;
	transition: .2s;
}
#spNaviBtn span:before, #spNaviBtn span:after {
	content: "";
	margin-left: -13.5px;
	transition: .3s;
}
#spNaviBtn span::before {
	margin-top: -10px;
}
#spNaviBtn span::after {
	margin-top: 8px;
}
#spNaviBtn span, #spNaviBtn span::before, #spNaviBtn span::after {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 27px;
	height: 2px;
	background: #4f4a3e;
}
#spNaviBtn.open span {
	background: transparent;
}


#spNavi {
	position: fixed;
	height: 100%;
	top: 0;
	right: -70%;
	background: #EEF8ED;
	width: 70%;
	z-index: 999999;
	box-sizing: border-box;
	overflow: scroll;
	display: none;
}
#spNavi ul {
	padding: 0;
}
#spNavi ul li a {
	border-bottom: 1px solid #ddd;
	padding: 10px;
	display: block;
	color: #000
}
#spNaviBtn.open span:before {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#spNaviBtn.open span:after {
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
#spNaviBtn.open span:before, #spNaviBtn.open span:after {
	margin-top: -1px;
}


main table.company {
	width:100%;
	margin-top: 25px;
	border-collapse: collapse;
	border-top: 1px solid #CCCCCC;
}
main table.company caption {
	text-align: left;
	font-size: 1.6rem;
}
main table.company th {
	background: #EEF8ED;
	text-align: left;
	font-weight: normal;
}
main table.company td, main table.company th {
	border-bottom: 1px solid #CCCCCC;
	padding: 10px 15px;
}


.flexbox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flexbox.col2 li {
	width:calc(100% / 2 - 4%);
}
.flexbox.col3 li {
	width:calc(100% / 3);
}
.flexbox.col4 li {
	width:calc(100% / 4 - 1%);
}


.contact_area {
	border: 3px solid #52AB47;
	border-radius: 8px;
	padding: 15px 15px;
}
.contact_area .flexbox {
	align-items: center;
}


#area1 .flexbox li {
	padding: 30px 15px 10px 15px;
	font-size: 1.5rem;
}
#area1 .flexbox li p:last-child {
	margin-top: 10px;
}
#area1 .flexbox li:nth-child(1),
#area1 .flexbox li:nth-child(3) { background: #E2F8E4; }
#area1 .flexbox li:nth-child(2) { background: #FFF8D9; }


h2 {
	border: 1px solid #CDCDCD;
	background: -moz-linear-gradient(top, #EFEEEF, #FFF);
  background: -webkit-linear-gradient(top, #EFEEEF, #FFF);
	background: linear-gradient(to bottom, #EFEEEF, #FFF);
	margin-top: 50px;
	padding: 25px 15px 20px 30px;
	position: relative;
	margin-bottom: 20px;
}
h2::before {
	content: "";
	width: 100%;
	height: 1px;
	background: #FFF;
	position: absolute;
	top: 0;
	left: 0;
}
h2::after {
	content: "";
	width: 8px;
	height: 55px;
	background: #55AD4B;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -27.5px;
}


h3 {
  border-bottom: solid 5px #F1F1F1;
	position: relative;
	color: #408539;
	margin-bottom: 20px;
}

h3:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 5px #93DD8A;
  bottom: -3px;
  width: 50%;
}


.point {
	margin-top: 20px;
}
.point dt {
	position: relative;
	padding-left: 90px;
	border-bottom: 1px solid #F29739;
	padding-top: 10px;
}
.point dt::before {
	content: "";
	width: 81px;
	height: 80px;
	position: absolute;
	left: 0;
	top: 0;
}
.point dt:nth-of-type(1)::before { background: url(../images/point1.png) no-repeat center center; }
.point dt:nth-of-type(2)::before { background: url(../images/point2.png) no-repeat center center; }
.point dt:nth-of-type(3)::before { background: url(../images/point3.png) no-repeat center center; }
.point dd {
	padding: 10px 0 0 90px;
	margin-bottom: 25px;
}


#area2 {
	padding: 0 20px;
	align-items: center;
}
#area2 .right {
	width: 650px;
}


#area3 .block {
	transform:skew(0deg, -3.5deg);
	margin-top: 50px;
}
#area3 .block.b01 { background:#AFEA00; }
#area3 .block.b02 { background:#00BEFD; }
#area3 .block.b03 { background:#FF7373; }
#area3 .block.b04 { background:#FFBF00; }
#area3 .block > .flexbox {
	transform:skew(0deg, 3.5deg);
}
#area3 .left {
	padding:15px 0 0 0;
}
#area3 .right {
	padding:20px 10px 0 0;
	width: 465px;
	color: #FFF;
}
#area3 .right dt {
	border-bottom: 1px solid #FFF;
	font-size: 2rem;
	padding: 0 0 0 20px;
	font-weight: bold;
}
#area3 .right dd {
	padding: 10px 20px;
	font-size: 1.5rem;
}
#area3 .block:last-child {
	margin-bottom: 100px;
}


#faq li {
	position: relative;
	padding: 20px 0;
	font-weight: bold;
	font-size: 2rem;
	margin-top: 10px;
}
#faq li:nth-child(odd) {
	background:url(../images/baloon_l.png) no-repeat 110px center;
	padding-left: 150px;
}
#faq li:nth-child(even) {
	background:url(../images/baloon_r.png) no-repeat right 110px center;
	text-align: right;
	padding-right: 150px;
}
#faq li::before {
	content: "";
	position: absolute;
	top: 0;
	width: 105px;
	height: 72px;
	display: block;
	background:url(../images/icon_faq.png) no-repeat left center;
}
#faq li:nth-child(odd)::before {
	left: 0;
}
#faq li:nth-child(even)::before {
	right: 0;
}


.support {
	margin-top: 30px;
	background: #87C580;
	align-items: center;
}
.support div:last-child {
	width: 405px;
	padding: 0 15px;
	color: #FFF;
	font-size: 2.5rem;
	font-weight: bold;
}

#area5 {
	font-size: 1.6rem;
	margin-bottom: 20px;
}
#area5 .left {
	width: 500px;
}
#area5 .right {
	width: 480px;
}


#voice ul {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
}
#voice ul li {
	width:calc(100% / 2 - 20px);
}
#voice ul li .top {
	position: relative;
	padding-left: 120px;
	height: 97px;
	color: #0033D8;
}
#voice ul li .top::before {
	background:url(../images/icon_voice.png) no-repeat left center;
	content: "";
	width: 92px;
	height: 97px;
	display: block;
	position: absolute;
	left: 15px;
	top: 0;
}
#voice ul li .top .name {
	position: absolute;
	right: 0;
	bottom: 10px;
	font-size: 1.4rem;
	color: #000;
}
#voice ul li .txt {
	border: 5px solid #55AD4B;
	padding: 15px 25px;
	min-height: 225px;
}


#step ul li {
	background:url(../images/bg_step.png) no-repeat left center;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	margin: 10px 0 40px 0;
	position: relative;
}
#step ul li .img {
	width: 300px;
}
#step ul li .txt {
	width: 655px;
}
#step ul li .txt .ttl {
	border-bottom: 1px solid #55AD4B;
	padding: 27px 0 0 145px;
	font-size: 2.2rem;
}
#step ul li .txt .ttl.step1 { background:url(../images/step1.png) no-repeat 15px bottom; }
#step ul li .txt .ttl.step2 { background:url(../images/step2.png) no-repeat 15px bottom; }
#step ul li .txt .ttl.step3 { background:url(../images/step3.png) no-repeat 15px bottom; }
#step ul li .txt .ttl.step4 { background:url(../images/step4.png) no-repeat 15px bottom; }
#step ul li .txt p:last-child {
	padding: 5px;
}
#step ul li::after {
	content: "";
	width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 13px solid transparent;
	border-left: 20px solid #FFCC00;
	transform: rotate(90deg);
	position: absolute;
	bottom: -43px;
	left: 50%;
	margin-left: -13px;
}
#step ul li:last-child::after {
	display: none;
}
#step ul li:last-child {
	margin-bottom: 0;
}


#area7 .right {
	width: 640px;
}
#area7 .flexbox.col2 {
	font-size: 1.4rem;
	align-items: center;
	margin-top: 50px;
	margin-bottom: 15px;
}


#area8 .contact {
	border: 1px solid #ccc;
	margin-bottom: 35px;
}
#area8 .title {
	border: none;
	color: #FFF;
    background: #55AD4B;
	padding: 15px 0 10px 15px;
	position: relative;
	font-size: 2.6rem;
	font-weight: bold;
}
#area8 .pc .title { background: #55AD4B; }
#area8 .sp .title {
	background: #FFBF00;
	padding-left: 50px;
}
#area8 .title::before {
	content: "";
	display: inline-block;
	position: absolute;
}
#area8 .pc .title::before {
	width: 52px;
	height: 45px;
	background:url(../images/icon_pc.png) no-repeat left center;
	left: 10px;
	top: 8px;
}
/*#area8 .sp .title::before {
	width: 23px;
	height: 45px;
	background:url(../images/icon_sp.png) no-repeat left center;
	left: 10px;
	top: 8px;
}*/


#area8 ol {
	border-bottom: 1px solid #ccc;
	margin: 20px;
	padding-bottom: 20px;
}
#area8 ol li {
	position: relative;
	padding: 40px 0 40px 100px;
}
#area8 ol li::before {
	position: absolute;
	width: 80px;
	height: 80px;
}
#area8 ol li::after {
	content: "";
	width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 13px solid transparent;
	transform: rotate(90deg);
	position: absolute;
	bottom: -25px;
	left: 95px;
}
#area8 ol li::after { border-left: 20px solid #55AD4B; }
/*#area8 .pc ol li::after { border-left: 20px solid #55AD4B; }*/
/*#area8 .sp ol li::after { border-left: 20px solid #FFCC00; }*/
#area8 ol li:last-child::after {
	display: none;
}
#area8 ol li.c1 { background:url(../images/contact_pc1.png) no-repeat left center; }
#area8 ol li.c2 { background:url(../images/contact_pc2.png) no-repeat left center; }

/*#area8 .sp ol li.c1 { background:url(../images/contact_sp1.png) no-repeat left center; }
#area8 .sp ol li.c2 { background:url(../images/contact_sp2.png) no-repeat left center; }*/

#area8 .bottom {
	padding: 0 20px 20px 20px;
}
#area8 table.con {
	width:100%;
	border-collapse: collapse;
	font-size: 1.5rem;
}
#area8 table.con caption {
	text-align: left;
}
#area8 table.con th {
	text-align: left;
	width: 9em;
}
#area8 table.con td, main table.con th {
	padding: 10px 15px;
	vertical-align: top;
}
#area8 table.con td input[type="text"], #area8 table.con td textarea {
	width: 60%;
}
#area8 button {
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
}

#area8 .caution li {
	background:url(../images/icon_red.png) no-repeat left 2px;
	padding-left: 20px;
}
#area8 .caution li.flexbox {
	align-items: center;
	background-position: left center;
	margin-top: 10px;
	line-height: 1;
}





/* Z-INDEX */
.formError { z-index: 990; }
.formError .formErrorContent { z-index: 991; }
.formError .formErrorArrow { z-index: 996; }
.ui-dialog .formError { z-index: 5000; }
.ui-dialog .formError .formErrorContent { z-index: 5001; }
.ui-dialog .formError .formErrorArrow { z-index: 5006; }

.inputContainer {
  position: relative;
  float: left;
}

.formError {
  position: absolute;
  top: 300px;
  display: block;
  cursor: pointer;
  text-align: left;
}

.formError.inline {
  position: relative;
  top: 0;
  left: 0;
  display: inline-block;
}

.ajaxSubmit {
  padding: 20px;
  background: #55ea55;
  border: 1px solid #999;
  display: none;
}

.formError .formErrorContent {
  width: 100%;
  background: #f8c842;
  position:relative;
  color: #000;
  font-weight: bold;
  min-width: 170px;
  font-size: 14px;
  padding: 10px 15px;
  border-radius: 2px;
  margin-bottom: 15px;
  &:after{
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    bottom: -15px;
    left: 20px;
    border: 8px solid transparent;
    border-top: 8px solid #f8c842;
  }
}

.formError.inline .formErrorContent {
  box-shadow: none;
  border: none;
  border-radius: 0;
}

.greenPopup .formErrorContent {
  background: #38739C;
}

.blackPopup .formErrorContent {
  background: #38739C;
  color: #FFF;
}

.formError .formErrorArrow {
  display: none;
}

.btnSubmit{
display: block;
width: 330px;
height: 69px;
background-image: url("../images/btn_contact.png");
background-repeat: no-repeat;
border: none;
border: none;
margin: 0 auto;
text-indent: -9999px;
cursor: pointer;
-webkit-appearance: none;
}

.btnSubmit:hover{
    opacity: 0.5;
}


.confitem{
display: block !important;
}

.confitem img{
width: 300px !important;
}