@charset "utf-8";

body, text {
font-family: 'Noto Sans JP', sans-serif;
word-break: break-all;
-webkit-text-size-adjust: 100%;
letter-spacing: 1px;
font-weight: 500;
font-size: 16px;
line-height: 1.6;
margin: 0;
background-image: url(image/bg.png);
background-repeat: repeat;
background-size: 310px;}

a:hover {color: #8b7456;}
a {text-decoration: none;}
a{outline: none;}
:focus {outline: none;}
::-moz-focus-inner {border: 0;}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;}

img {vertical-align: bottom; backface-visibility: hidden;}
iframe {vertical-align: bottom;}

h1, h2, h3, p {margin: 0; font-size: 100%; font-weight: normal;}
ul, li {list-style: none; margin: 0; padding: 0;}


/* Opning -------------------------------------------------------- */
.opning {
background: #fff;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9000;
background-image: url(image/bg.png);
background-repeat: repeat;
background-size: 310px;}

.opning p {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
z-index: 9999;
max-width: 500px;
width: 70%;}

.opning p img {width: 100%;}

/* under 1200 -------------------------------------------------------- */
@media (max-width : 1200px) {
.opning p {width: 40%;}
}

/* under 800 -------------------------------------------------------- */
@media (max-width : 800px) {
.opning p {width: 280px;}
}


/* Header ---------------------------------------------------*/
.header-wrap {
padding: 20px 0;
margin: 0 auto;
width: 95%;
max-width: 1100px;
overflow: hidden;}

.header-left {
float: left;
width: 370px;}

.header-right {
float: right;
width: 430px;}

.head-tel {
float: left;
width: 240px;}

.link-botan {padding-top: 10px; float: right;}

.link-botan a {
display: inline-block;
padding: 10px 30px;
color: #fff;
background-color: #ffba00;
border-radius: 40px;}

.link-botan2 {margin: 20px auto 0; text-align: center;}

.link-botan2 a {
display: inline-block;
padding: 10px 50px;
color: #fff;
background-color: #b890cf;
border-radius: 40px;}

.main-visual {
background-image: url(image/main-visual.png);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 2000px;
height: 600px;}

.main-visual-text-wrap {
margin: 0 auto;
width: 95%;
max-width: 1100px;}

.main-visual-text {
width: 500px;
margin-top: 100px;}

/* under 1200 -------------------------------------------------------- */
@media (max-width : 1200px) {
.header-wrap, .main-visual-text-wrap {max-width: 780px;}

.main-visual {
background-size: 1500px;
height: 450px;}

.main-visual-text {
width: 300px;
margin-top: 70px;}

.header-left {width: 270px;}
.header-right {width: 370px;}
.head-tel {width: 180px;}
.link-botan {padding-top: 0; magin-top: 0;}
}

/* under 800 -------------------------------------------------------- */
@media (max-width : 800px) {
.header-wrap {padding: 13px 0;}
.header-left {width: 230px;}
.side-tel {width: 100%; margin-top: 30px;}

.main-visual {
background-image: url(image/main-visual-sp.png);
background-size: 700px;
height: 290px;}

.main-visual-text {
width: 280px;
margin-top: 40px;}
}


/* PC Menu ---------------------------------------------------*/
.pc-navi ul {
width: 940px;
margin: 70px auto;
overflow: hidden;}

.pc-navi li a {
float: left;
width: 146px;
margin: 0 5px;
display: inline-block;}

.pc-navi li img {width: 100%;}

/* under 1200 -------------------------------------------------------- */
@media (max-width : 1200px) {
.pc-navi ul {width: 740px; margin: 30px auto;}
.pc-navi li a {width: 112px;}
}

/* under 800 -------------------------------------------------------- */
@media (max-width : 800px) {
.pc-navi ul {width: 90%; max-width: 500px;}
.pc-navi li a {width: 30%; margin: 1.6%;}
}


/* Drawer Menu ---------------------------------------------------*/
.drawer-menu {
box-shadow: 0px 0px 3px rgba(0, 0, 0, .1);
z-index: 8100;
top: 0;
left: auto;
right: 0;
margin: auto;
position: fixed;
transform: translateX(100%);
transition: all 1s;
width: 300px;
text-align: center;
background-color: #fff;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;}

.drawer-menu ul {
width: 70%;
margin: 80px auto 30px;}

.drawer-menu li {
list-style-type: none;
padding: 0;
width: 70%;
margin: 0 auto;}

.drawer-menu li a {
display: block;
padding: 15px 0;}

.drawer-menu.active {transform: translateX(0px);}

.navToggle {
display: block;
position: fixed;
margin: auto;
top: 0px;
right: 0px;
width: 70px;
height: 69px;
cursor: pointer;
z-index: 8200;
text-align: center;}

.navToggle span {
display: block;
position: absolute;
width: 30px;
border-bottom: solid 3px #ffba00;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
left: 20px;}

.navToggle span:nth-child(1) {
top: 22px;}

.navToggle span:nth-child(2) {
top: 34px;}

.navToggle span:nth-child(3) {
top: 46px;}

.navToggle span:nth-child(4) {
border: none;
color: #eee;
font-size: 10px;
font-weight: bold;
top: 54px;
letter-spacing: 1px;}

.navToggle.active span:nth-child(1) {
top: 34px;
left: 20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);}

.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
top: 34px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.drawer-menu {width: 80%; max-width: 300px;}
}


/* Introduction area ---------------------------------------------------*/
.introduction-box-left {
float: left;
width: 61%;}

.introduction-box-right {
float: right;
width: 37%;
overflow: hidden;}

.introduction-1 {overflow: hidden;}

.aisatsu-left {
float: left;
width: 73%;}

.aisatsu-right {
float: right;
width: 23%;}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.introduction-box-left, .introduction-box-right {
float: none;
width: 100%;}

.introduction-box-left {margin-bottom: 20px;}

.aisatsu-left, .aisatsu-right {
float: none;
width: 100%;}

.aisatsu-left {margin-bottom: 20px;}
.aisatsu-right img {display: block; margin: 0 auto; max-width: 400px; width: 90%;}
}

/* info area ---------------------------------------------------*/
.kokuban {
	background-color: #759741;
	background-image: url(image/kouban.jpg);
	background-size: 100%;
	background-position: bottom right;
	background-repeat: no-repeat;
	padding: 30px 30px 60px;
	border-radius: 15px;
	color: #fff;
}
@media screen and (max-width : 800px) {
.kokuban {
	padding: 20px 20px 10%;
	background-size: 650px;
	background-position: bottom right;
}
}

/* Contents area ---------------------------------------------------*/
.contents-sub-ttl {width: 240px; margin-bottom: 10px;}

.contents1-left {
float: left;
width: 20%;}

.contents1-right {
float: right;
width: 76%;}

.contents2-left {
float: left;
width: 45%;}

.contents2-right {
float: right;
width: 53%;}

.bg-color-gray {
background-color: #f3f3f3;
border-radius: 10px;
padding: 20px 25px 25px;
margin-top: 20px;}

.contents-img-mgn1 {margin-top: 90px;}
.contents-img-mgn2 {margin-top: 40px;}
.contents-img-mgn3 {margin-top: 20px;}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.contents1-left, .contents1-right, .contents2-left, .contents2-right {
float: none;
width: 100%;}

.contents1-left img {width: 160px; display: block; margin: 0 auto;}
.contents2-left img {max-width: 400px; display: block; margin: 0 auto;}
.contents1-left, .contents2-left {margin-bottom: 20px;}
.contents-img-mgn1, .contents-img-mgn2, .contents-img-mgn3 {margin-top: 0;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.contents-sub-ttl {width: 220px;}
.contents1-left, .contents2-left {margin-bottom: 10px;}
.bg-color-gray {padding: 14px 19px 19px;}
}


/* Price area ---------------------------------------------------*/
.price-list-box li {
float: left;
border-radius: 10px;
padding: 20px;}

.plan-hidari {background-color: #f2f8ff; width: 40%; margin-right: 2%;}
.plan-naka {background-color: #fef3f3; width: 28%; margin-right: 2%;}
.plan-migi {background-color: #e9f4db; width: 28%;}

.plan2-right {width: 58%; background-color: #fef3f3;}

.plan3-left {width: 58%; margin-right: 2%; background-color: #f2f8ff;}
.plan3-right {width: 40%; background-color: #fef3f3;}

.price-ex-img {margin: 0 auto; max-width: 200px;}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.plan-hidari {width: 100%; margin-right: 0; margin-bottom: 16px;}
.plan-naka {width: 100%; margin-right: 0; margin-bottom: 16px;}
.plan-migi {width: 100%;}

.plan3-left {width: 100%; margin-right: 0; margin-bottom: 16px;}
.plan3-right, .plan2-right {width: 100%;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {

}


/* Contact area ---------------------------------------------------*/
.contact-tel {width: 300px; margin: 30px auto;}
.policy {margin-top: 20px;}

#formWrap {
width: 100%;
max-width: 700px;
height: auto;
margin: 0 auto;}

input#formbutton {
cursor: pointer;
-webkit-appearance: none;
width: 140px;
padding: 13px 0 12px;
margin: 0 5px;
background: #52771c;
border: 1px solid #52771c;
color: #fff;
border-radius: 50px;
letter-spacing: 2px;
text-indent: 2px;
text-align: center;
transition: .2s;
font-size: 14px;
font-weight: bold;}

#formbutton:hover {
background-color: #fff;
color: #52771c;
border:1px solid #52771c;}

.input_area {
width:100%;
border: 1px solid #ccc;
height: 35px;
padding: 10px;
margin: 5px 0 20px;
-webkit-appearance: none;}

.input_area2 {
width:100%;
border: 1px solid #ccc;
padding: 10px;
-webkit-appearance: none;}

.contact-text {
text-align: center;
max-width: 900px;
margin: 0 auto 60px;}

/* under1200  ---------------------------------------------------*/
@media screen and (max-width : 1200px) {
input#formbutton {font-size: 13px;}
}

/* under800  ---------------------------------------------------*/
@media screen and (max-width : 800px) {
.contact-tel {width: 250px; margin: 20px auto;}

.contact-text {
text-align: left;
margin: 0 auto 30px;}

input#formbutton {font-size: 12px; padding: 13px 0 13px;}
.denwa-large {font-size: 27px;}
}

/* under330  ---------------------------------------------------*/
@media screen and (max-width : 330px) {
input#formbutton {width: 120px;}
}


/* footer -------------------------------------------------------- */
footer {
padding: 60px 0 10px;
background-image: url(image/foot-bg.png);
background-repeat: no-repeat;
background-size: 1800px;
background-position: bottom center;}

address {font-style: normal; text-align: center;}
.foot-tel, .foot-mail {text-align: center;}
.foot-logo {max-width: 300px; width: 60%; margin: 0 auto 30px;}

.copy {
font-size: 13px;
text-align: center;
color: #fff;
margin-top: 200px;}

/* under1200  ---------------------------------------------------*/
@media screen and (max-width : 1200px) {
footer {background-size: 1300px;}
.copy {margin-top: 150px;}
}

/* under800  ---------------------------------------------------*/
@media screen and (max-width : 800px) {
footer {padding: 40px 0 0; margin-bottom: 50px; background-size: 1000px;}
.copy {padding-bottom: 10px; margin-top: 130px;}
}



/* Other -------------------------------------------------------- */
main {display: block;}

.section-inner {
overflow: hidden;
max-width: 1050px;
width: 92.8%;
margin: 0 auto;
padding: 60px 0;}

.st1 {
stroke: #000;
stroke-width: 0.3px;
fill: #000;
stroke-dasharray: 700;

animation: hello 3s linear;}
@keyframes hello {
0% {
stroke-dashoffset: 700;
fill:transparent;}
50% {
fill:transparent;}
100% {
stroke-dashoffset: 0;
fill:#000;
}
}

.bg-pink, .bg-orange, .bg-green, .bg-blue, .bg-murasaki, .bg-brown {background-repeat: repeat;}

.bg-pink {background-image: url(image/bg-pink.png);}
.bg-orange {background-image: url(image/bg-orange.png);}
.bg-green {background-image: url(image/bg-green.png);}
.bg-blue {background-image: url(image/bg-blue.png);}
.bg-murasaki {background-image: url(image/bg-murasaki.png);}
.bg-brown {background-image: url(image/bg-brown.png);}

.wrap {
margin: 0 auto;
width: 95%;
max-width: 1000px;
overflow: hidden;}

.radius-wrap {
background-color: #fff;
border-radius: 30px;
padding: 20px;
overflow: hidden;
border: 1px solid #f1f1f1;}

.pink-dotted-wrap,
.orange-dotted-wrap,
.green-dotted-wrap,
.blue-dotted-wrap,
.murasaki-dotted-wrap
 {
border-radius: 20px;
padding: 20px;
overflow: hidden;}

.pink-dotted-wrap {border: 2px dashed #ff9a9a;}
.orange-dotted-wrap {border: 2px dashed #fac267;}
.green-dotted-wrap {border: 2px dashed #b4da71;}
.blue-dotted-wrap {border: 2px dashed #90ccee;}
.murasaki-dotted-wrap {border: 2px dashed #e599f5;}
.orange-border {border-bottom: 1px solid #ffd291; display: block; margin-bottom: 15px; padding-bottom: 3px;}
.border-black {border-bottom: 1px dashed #000; display: block; margin-bottom: 5px; padding-bottom: 3px;}
.indent {padding-left: 1em;}
.indent2 {padding-left: 1em; text-indent: -1em;}
.font-size-small {font-size: 90%; line-height: 17px; margin-top: 3px;}
.font-size-small80 {font-size: 80%; line-height: 17px; margin-top: 3px;}
.box-mgn {margin-top: 30px;}
.p-mgn {margin-bottom: 1em;}
.arrow {display: block; width: 15px; margin: 20px 0 14px;}
.area-img {max-width: 300px; width: 90%; margin: 20px auto;}
.top-home {width: 120px; margin: 0 auto;}

.center {text-align: center;}
.bold700 {font-weight: 700;}
.block-ttl {margin: 0 auto 30px; width: 220px;}
.block-sub-ttl {width: 140px; margin-bottom: 10px;}
.block-sub-ttl2 {width:  100%; max-width: 330px; margin-bottom: 10px;}
.flow-sub-ttl {width: 270px; margin-bottom: 10px;}

.fix-tel {position: fixed; bottom: 0; background-color: #ffae00; width: 100%; padding: 8px 0; height: 52px;}
.fix-tel img {max-width: 300px; display: block; margin: 0 auto;}

table {
background-color: #fff;
border: 1px solid #e8ded6;
width: 100%;
margin: 0 auto;
border-collapse: collapse;
border-spacing: 0;}

th {
font-weight: 500;
border: 1px solid #e8ded6;
padding: 10px;
width: 35%;
background-color: #f6f6f6;}

td {
border: 1px solid #e8ded6;
padding: 10px;
width: 65%;}

.question {
	position: relative;
	margin: 0 0 10px;
	padding: 15px 50px 15px 15px;
	cursor: pointer;
	background-color: #f1ede2;
	border-radius: 10px;
}

.question-mgn {
	margin: 0 0 0;
}

.answer-mgn {
	margin: 10px 0 0;
}

.question:hover {
	background-color: #dfdace;
}

.question:after {
	content: "";
	position: absolute;
	right: 25px;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: all 0.2s ease-in-out;
	display: block;
	width: 10px;
	height: 10px;
	border-top: solid 2px #797263;
	border-right: solid 2px #797263;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

.answer {
	padding: 0 15px ;
	margin-bottom: 20px;
}

.answer:last-child {
	margin-bottom: 0;
}

/* under 1200 -------------------------------------------------------- */
@media (max-width : 1200px) {
.section-inner {max-width: 700px;}
.block-ttl {width: 160px;}
}

/* under 800 -------------------------------------------------------- */
@media (max-width : 800px) {
body, text {font-size: 14px;}
.section-inner {padding: 40px 0;}
.block-ttl {width: 160px; margin: 0 auto 20px;}
.center {text-align: left;}
.pc {display: none;}

.pink-dotted-wrap,
.orange-dotted-wrap,
.green-dotted-wrap,
.blue-dotted-wrap,
.murasaki-dotted-wrap
 {
padding: 14px;}

th, td {
text-align: left;
border: none;
display: block;
width: 100%;}

th {font-weight: 700;}
}

/* over 800 -------------------------------------------------------- */
@media (min-width : 801px) {
.spbr, .sp {display: none;}
}