@charset "UTF-8";

/*****STANDART CSS******/
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var,
video {
  margin: 0;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /******SMOOTH SCROLL ANCHOR******/
}

.noto300 {font-family: 'Noto Sans JP', sans-serif; font-weight: 300;}
.noto500 {font-family: 'Noto Sans JP', sans-serif; font-weight: 500;}
.noto700 {font-family: 'Noto Sans JP', sans-serif; font-weight: 700;}
.noto800 {font-family: 'Noto Sans JP', sans-serif; font-weight: 800;}
.noto900 {font-family: 'Noto Sans JP', sans-serif; font-weight: 900;}

/*****STANDART CSS******/
/* ---------common--------- */
body { margin: 0; color: #333; font-feature-settings: "palt"; font-size: 16px; line-height: 28px;}

ul { list-style: none; margin: 0; padding: 0;}
a { -webkit-transition: .3s; transition: .3s; text-decoration: none; color: #000;}
img { width: 100%; vertical-align: bottom;}

/* パンくずリスト */
.bread { width: 100%; margin-top: 15px;}
.bread .inner { margin-bottom: 0 !important; padding-top: 0 !important;}
.bread ul { display: -webkit-box; display: -ms-flexbox; display: flex;}
.bread ul li {padding: 5px;}
.bread ul li a { -webkit-transition: .15s; transition: .15s;}
.bread ul li a:hover { opacity: 0.7;}
.bread ul li:after { content: '\003e'; margin-left: 10px; margin-right: 10px; color: #000;}
.bread ul li:last-child:after { content: "";}

/* flex */
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.center {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
}

/* header */
header {position: fixed;top: 0;z-index: 1001;width: 100%;background-color: #fff;padding: 10px 0;vertical-align: middle;height: 70px;}
header .inner {width: 100%;}
.header_row {align-items: center;}
header .header_left {display: flex; align-items: center;}
header .header_left p{font-size: 16px; margin-right: 4px;}
.logo {max-width: 200px;width: 100%;}
.logo h1 {display: contents;max-width: 260px;width: 100%;}
.logo h1 img {display: block;}
header .header_right {width: 108px; height: 50px; display: flex; align-items: center; justify-content: space-between;}
header .header_right .icon_mail {width: 50px; height: 50px;}
header .header_right .icon_mail a:hover {opacity: 0.7;}
header .header_right .icon_line {width: 50px; height: 50px;}
header .header_right .icon_line a:hover {opacity: 0.7;}

nav a { color: #333;}

.wrapper {width: 100%; background: #fff; overflow: hidden;}
.wrapper1 { max-width: 800px; width: 100%; margin: 0 auto; padding: 0;}
.wrapper2 { max-width: 800px; width: 100%; margin: 100px auto 50px; background: #f5f5f5; }
.wrapper3 {width: 100%;}
.mv_pc {width: 100%; display: block; }
.mv_pc p {max-width: 100%; width: 100%; padding: 0; margin: 0 auto;}
.mv_sp {display: none;}

/* inner */
.inner { max-width: 575px; width: 100%; padding: 0; margin: 50px auto;}
h2 { font-size: 24px; color: #000; text-align: left; line-height: 70px; text-indent: 30px; margin: 35px 0 30px; border-bottom: 1px solid #7f7f7f;}
h2 span { font-size: 15px; vertical-align: middle;}
h2.about {max-width: 420px; width: 100%; margin: 0 auto 50px;}
h2 span {}
.container { width: 100%;}
p.three_check {width: 100%;margin-bottom: 50px;}
h3.about {font-size: 26px; text-align: center; margin-bottom: 30px; color: #000;}
h3.about span.dots {
  -webkit-text-emphasis: filled;
  text-emphasis: filled;
}
div.about {text-align: center;}
h4.about {
  font-size: 20px;
  margin: 10px 0;
  text-align: center;
  background: #6fdbd8;
  padding: 15px 80px;
  display: inline-block;
}

.about_read {text-align: center; font-size: 15px; line-height: 26px; margin-bottom: 30px;}
.about1 { max-width: 738px; width: 100%; margin: 0 auto 50px; display: flex; align-items: center; justify-content: space-between;}
.about1 .about1_1 { max-width: 364px; width: 100%;}
.about1 .about1_1 img { width: 100%;}
.about1 .about1_2 { max-width: 364px; width: 100%;}
.about1 .about1_2 p { font-size: 12px; text-align: center;}
.about1 .about1_2 img { width: 100%;}

h3.merit {font-size: 18px; text-align: center; margin: 20px 0 25px; color: #29b8b7;}
.merit {max-width: 780px; width: 100%; margin: 0 auto 20px; text-align: center;}
.merit_table1 {width: 780px; height: 392px; background: url("../images/merit_table1.png") no-repeat 0 0; margin: 0 auto; position: relative; }
.merit_table2 {width: 780px; height: 392px;margin: 0 auto; background: url("../images/merit_table2.png") no-repeat 0 0; position: relative;}
.merit_table3 {width: 780px; height: 392px;margin: 0 auto; background: url("../images/merit_table3.png") no-repeat 0 0; position: relative;}
.merit_table4 {width: 780px; height: 392px;margin: 0 auto; background: url("../images/merit_table4.png") no-repeat 0 0; position: relative;}
.merit_upper { margin-left: 136px; width: 644px; height: 32px; display: flex; justify-content: space-between; margin-top: -25px;}
.merit_upper .left_title { width: 294px; height: 32px; font-size: 14px; line-height: 32px; text-align: center; color: #fff;}
.merit_upper .right_title { width: 350px; height: 32px; font-size: 14px; line-height: 32px; text-align: center; color: #fff;}
.merit_line1 { width: 780px; height: 166px; display: flex; }
.merit_left_title1 {width: 122px; height: 166px;}
.merit_left_title1 p {font-size: 12px; line-height: 16px; text-align: center; padding-top: 68px;}
.merit_left_title1 p.title2 {font-size: 12px; line-height: 16px; text-align: center; padding-top: 62px;}
.merit_left_title1 p.title3 {font-size: 12px; line-height: 16px; text-align: center; padding-top: 45px;}
.merit_line1-1 {width: 250px; margin-left:30px; }
.merit_line1-1 p {padding-top: 38px; font-size: 11px; line-height: 13px; text-align: left;}
.merit_line1-1 p.merit31 {padding-top: 30px; font-size: 11px; line-height: 13px; text-align: left;}
.merit_line1-1 p.merit41 {padding-top: 30px; font-size: 11px; line-height: 13px; text-align: left;}
.merit_line1-2 {width: 170px; margin-left:48px; }
.merit_line1-2 p {padding-top: 30px; font-size: 11px; line-height: 13px; text-align: left;}
.merit_line1-21 {width: 170px; margin-left:48px; }
.merit_line1-21 p {padding-top: 38px; font-size: 11px; line-height: 13px; text-align: left;}
.merit_line1-read1 {width: 640px; top:156px; left: 148px;position: absolute;font-size: 11px; line-height: 13px; text-align:center;}
.merit_line1-21 p.merit41 {padding-top: 30px; font-size: 11px; line-height: 13px; text-align: left;}
.merit_line1-read12 {width: 640px; top:162px; left: 148px;position: absolute;font-size: 11px; line-height: 13px; text-align:center;}
.merit_line1-read12 {width: 640px; top:162px; left: 148px;position: absolute;font-size: 11px; line-height: 13px; text-align:center;}
.merit_line1-read13 {width: 640px; top:156px; left: 148px;position: absolute;font-size: 11px; line-height: 13px; text-align:center;}
.merit_line1-read2 {width: 640px; top:336px; left: 148px;position: absolute;font-size: 11px; line-height: 13px; text-align:center;}
.merit_line1-read22 {width: 640px; top:342px; left: 148px;position: absolute;font-size: 11px; line-height: 13px; text-align:center;}
.merit_line2 { width: 780px; height: 166px; display: flex; }
.merit_left_title2 {width: 122px; height: 194px;}
.merit_line2-1 {width: 250px; margin-left:30px; }
.merit_line2-1 p {padding-top: 38px; font-size: 11px; line-height: 13px; text-align: left;}
.merit_line2-1 p.merit4 {padding-top: 30px; font-size: 11px; line-height: 13px; text-align: left;}
.merit_line2-12 {width: 250px; margin-left:30px; }
.merit_line2-12 p {padding-top: 32px; font-size: 11px; line-height: 13px; text-align: left;}
.merit_line2-2 {width: 170px; margin-left:48px; }
.merit_line2-2 p {padding-top: 30px; font-size: 11px; line-height: 13px; text-align: left;}
.merit_line2-2 p.merit32 {padding-top: 40px; font-size: 11px; line-height: 13px; text-align: left;}

h3.achievements_title {font-size: 26px; text-align: center; margin-bottom: 40px; color: #000;}

.achievements_inner {padding-bottom: 30px; }
.achievements {max-width: 720px; width: 100%; margin: 0 auto 30px; display: flex; justify-content: space-between; align-items: center; }
.achievements .assignment {max-width: 340px; width: 100%; }
.achievements .assignment .title1 {max-width: 100%; width: 100%; height: 34px; background: #000; margin-bottom: 20px; font-size: 20px; text-align: center; line-height: 34px; color: #fff;}
.achievements .assignment .title2 {max-width: 100%; width: 100%; height: 34px; background: #1bc6c4; margin-bottom: 20px; font-size: 20px; text-align: center; line-height: 34px; color: #fff;}
.achievements .assignment .read_box {max-width: 340px; width: 100%; background: #e7e6e6; font-size: 14px;}
.achievements .assignment .read_box p { text-align: center; padding: 18px 0;}
.achievements .arrow {width: 56px; height: 44px;}

.challenge {max-width: 720px; width: 100%; background: #e7e6e6; margin: 0 auto;}
.challenge .title {background: #000; text-align: center; color:#fff; font-size: 16px; padding:5px; width: 100%;}
.challenge .read {text-align: center; color:#333; font-size: 14px; line-height: 30px; padding:5px 10px; }

.faq1 {max-width: 760px; width: 100%;}
.faq_item {max-width: 760px; width: 100%; display: flex; align-items: center; justify-content: space-between; background: #fff; margin: -1px auto 0; border-top: 1px solid #777; border-bottom: 1px solid #777;}
/* .faq_item {max-width: 760px; width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; background: #fff; margin: 0 auto 10px; border-radius: 10px;} */
.faq_item:nth-child(3) {max-width: 760px; width: 100%; display: flex; align-items: center; justify-content: space-between; margin: -1px auto 0}
.faq_item_left {width: 220px; padding: 25px 0 25px 25px; font-size: 20px; line-height: 22px; text-align: left;}
.faq_item_right {width: 520px; padding: 15px 25px 15px 0; font-size: 13px; line-height: 16px; text-align: left;}
.faq_illust { max-width: 760px; width: 100%; margin: 30px auto;}
.faq_illust p.illust{ max-width: 320px; width: 100%; margin-left: auto;}

h3.faq2 {font-size: 18px; text-align: center; margin-bottom: 40px; color: #000;}
h3.faq2 span {font-size: 26px; color: #4ddad7;}
.faq2_contents {max-width: 580px; width: 100%; margin: 0 auto 30px; display: flex; justify-content: space-between; align-content: center;}
.faq2_contents_box {max-width: 256px; width: 100%; border: 1px solid #7f7f7f; box-sizing: border-box; background: #fff;}
.faq2_contents_box .title1 {width: 100%; border-bottom: 1px solid #7f7f7f; line-height: 32px; font-size: 15px; text-align: center; background: #6fdbd8; color: #000;}
.faq2_contents_box .title2 {width: 100%; border-bottom: 1px solid #7f7f7f; line-height: 32px; font-size: 15px; text-align: center; background: #f2f2f2; color: #000;}
.faq2_contents_box .number1 {width: 100%; line-height: 100px; font-size: 60px; text-align: center; color: #6fdbd8;}
.faq2_contents_box .number2 {width: 100%; line-height: 100px; font-size: 60px; text-align: center; color: #7f7f7f;}
.faq2_contents .arrow {max-width: 38px; width: 100%; margin: 50px auto 0;}

h4.faq {font-size: 20px; margin: 30px 0;text-align: center;}

.faq2_table {max-width: 720px; width: 100%; margin: 0 auto 65px; box-sizing: border-box; display: flex; flex-wrap: wrap;}
.faq2_table div {width: 20%; border: 1px solid #0f0f0f; box-sizing: border-box; font-size: 12px; text-align: center; line-height: 28px; margin: -1px -1px 0 0;}

.faq3_read {text-align: center; font-size: 15px; line-height: 26px; margin-bottom: 30px;}
.faq3_table {max-width: 720px; width: 100%; margin: 0 auto 65px; display: flex; flex-wrap: wrap;}
.faq3_table div {width: 50%; border: 1px solid #0f0f0f; box-sizing: border-box; font-size: 12px; text-align: center; line-height: 28px; margin: -1px -1px 0 0;}
.faq3_table div.header {width: 100%; border: 0; border-top: 1px solid #0f0f0f; border-bottom: 1px solid #0f0f0f; box-sizing: border-box; font-size: 15px; text-align: center; line-height: 20px; padding: 5px 0; background: #f2f2f2;}
.faq3_table div.body {width: 100%; font-size: 12px; text-align: left; line-height: 18px; padding: 15px 30px; color: #000; border: 0;}
.faq3_table div.body span {color: #ee1f9a;}

.cant_this { max-width: 720px; width: 100%; padding: 20px; margin: 0 auto 20px;}
/* .cant_this h3 { margin: 0 auto 20px; text-align: center; color: #000; font-size: 34px; background: #fff; z-index: 20;} */
/* .cant_this h3 { font-size: 34px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cant_this h3::before,
.cant_this h3::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #000;
  margin: 0 10px;
} */
.cant_this {
  border: 1px solid #555;
  padding: 20px;
  position: relative;
  margin-top: 20px;
}

.cant_this h3 {
  font-size: 34px;
  position: absolute;
  top: -17px;  /* h3の高さの半分 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  padding: 0 10px; white-space: nowrap; 
}
.cant_this div {width: 100%; padding: 40px 0 0 0; margin-top: -30px;}
.cant_this p {width: 100%; font-size: 15px; line-height: 30px;text-align: center;}
.cant_this p.this {background: #6fdbd8; margin: 10px auto 0; padding: 10px;}
.shop_wrapper {
	width: 100%; display: flex; justify-content: space-between; margin: 0 auto 30px;
}
.shop_wrapper .shop {
	width: 30%;
}
.shop_wrapper .shop .smart_thumb{
	width: 132px;
	margin: 0 auto;
}
.shop_wrapper .shop .shop_name{
	font-size: 18px; text-align: center; color: #7f7f7f; margin: 5px 0;
}
.shop_wrapper .shop .web_thumb{
	width: 230px;
	margin: 0 auto;
}

h2.contact {font-size: 50px; color: #28a745; text-align: center; margin: 40px 0; padding: 0;}

/* display */
.pc {display: block;}
.sp {display: none;}

@media (max-width: 768px) {
.pc {display: block;}
.sp {display: none;}
.inner { width: 95%; padding: 50px 0 0}
.wrapper1 { max-width: 90%; width: 100%; margin: 0 auto;}
.wrapper2 { max-width: 90%; width: 100%; margin: 60px auto 0; background: #f5f5f5; }
h2 { font-size: 24px; color: #000; text-align: left; line-height: 70px; text-indent: 10px; margin: 35px 0 30px; border-bottom: 1px solid #7f7f7f;}
.faq_item {
    max-width: 95%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    background: #fff;
    margin: 0 auto 10px;
    border-radius: 10px;
}
.faq_item:nth-child(3) {
  max-width: 95%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -1px auto 0;
}
}

@media (max-width: 599px) {
.pc {display: none;}
.sp {display: block;}
}
@media (max-width: 1080px) {
}
@media (max-width: 880px) {
}
@media (max-width: 768px) {
.inner { max-width: 80%; width: 100%; padding: 50px 0 0 0; margin: 0 auto;}
.achievements {
    max-width: 95%;
    width: 100%;
}
.achievements .assignment {
    max-width: 45%;
    width: 100%;
}
}
@media (max-width: 599px) {

/* header */
header {
  position: fixed;
  top: 0;
  z-index: 1001;
  width: 100%;
  background-color: #fff;
  vertical-align: middle;
  height: 60px;
}
.header_row {align-items: center;}
header .header_left {display: flex; align-items: center;}
header .header_left p{font-size: 10px; margin-right: 4px;}
.logo {max-width: 120px;width: 100%;}
.logo h1 {display: contents;}
.logo h1 img {display: block;}
header .header_right {width: 90px; height: 40px; display: flex; align-items: center; justify-content: space-between;}
header .header_right .icon_mail {width: 40px; height: 40px;}
header .header_right .icon_line {width: 40px; height: 40px;}

.mv_pc {display: none;}
.mv_sp {
    width: 100%;
    display: block;
}
/*.mv_sp {width: 100%; background: #fff; display: block;margin-top: 60px; padding-bottom: 30px;}*/
h2{ font-size: 24px; text-align: left;}
h2.section1{ font-size: 30px; color: #fe9202; text-align: center; line-height: 40px;}
h2 span { font-size: 14px; text-align: center;}
h2.about {
max-width: 95%; width: 100%; margin: 0 auto 30px;
}
h3.about {
    font-size: 20px;
    text-align: center;
    margin-bottom: 30px;
    color: #000;
}
.base1{padding: 30px 0 30px 0;}
.base2{padding: 20px 0 10px 0;}

.about1 {
    max-width: 95%;
    width: 100%;
    margin: 0 auto 20px;
    display: block;
}
.about1 .about1_1 {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
}
.about1 .about1_2 {
    max-width: 100%;
    width: 100%;
}
.about2 h4 {
    max-width: 95%;
    width: 100%;
    margin: 0 auto 20px;
    text-align: center;
    padding: 5px 0;
    background: #28a745;
    font-size: 18px;
    color: #fff;
    line-height: 26px;
}
.about3 {
    max-width: 95%;
    width: 100%;
    margin: 0 auto 30px;
    text-align: center;
}
p.sample a {font-size: 18px;  text-align: center; color: #28a745; text-decoration: underline;}
h3.merit {
    font-size: 14px;
    text-align: center;
    margin: 20px 0 25px;
    color: #29b8b7;
}
/* .cant_this {
    max-width: 95%;
    width: 100%;
    padding: 20px;
    margin: 0 auto 20px;
    border: 2px solid #000;
    box-sizing: border-box;
}
.cant_this h3 {
    font-size: 18px;
	padding: 0;
} */
.achievements {
    max-width: 90%;
    width: 100%;
    margin: 0 auto 30px;
    display: block;
}
.achievements .assignment {
    max-width: 100%;
    width: 100%;
}
.achievements .assignment .read_box {
    max-width: 100%;
    width: 100%;
	font-size: 14px;
}
.achievements .assignment .title1 {
    margin-bottom: 0;
}
.achievements .arrow {
    width: 56px;
    height: 56px;
	margin: 10px auto;
}
.challenge {max-width: 90%; width: 100%; background: #e7e6e6; margin: 0 auto;}

h2 {
    font-size: 24px;
    text-indent: 10px;
}
h2 span {
    font-size: 12px;
    text-align: center;
}
.faq_illust p.illust {
    max-width: 90%;
    width: 100%;
    margin: 0 auto;
}
.faq_item {
    max-width: 100%;
    width: 100%;
    display: block;
    background: #fff;
    margin: -1px auto 0;
    border-radius: 0;
}
.faq_item_left {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    line-height: 22px;
    text-align: left;
}
.faq_item_right {
    width: 100%;
    padding: 15px;
    font-size: 13px;
    line-height: 16px;
    text-align: left;
}
.faq2_contents {
    max-width: 100%;
    width: 100%;
    margin: 0 auto 30px;
    display: block;
}
.faq2_contents_box {
    max-width: 100%;
    width: 100%;
    border: 1px solid #7f7f7f;
    box-sizing: border-box;
    background: #fff;
}
.faq2_contents_box .title1 {
    width: 100%;
    border-bottom: 1px solid #7f7f7f;
    line-height: 32px;
    font-size: 15px;
    text-align: center;
    background: #6fdbd8;
    color: #000;
}
.faq2_contents .arrow {
    max-width: 38px;
    width: 100%;
    margin: 10px auto;
}
.faq2_table div {
    width: 50%;
}
.faq3_table {
    max-width: 100%;
    width: 100%;
    margin: 0 auto 65px;
     display: block; 
}
.faq3_table div {
    width: 100%;
}
.faq_item:nth-child(3) {
  max-width: 100%;
  width: 100%;
  display: block;
  margin: -1px auto 0;
}
.cant_this h3 {
  font-size: 20px;
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  padding: 0 10px;
  white-space: nowrap;
}
.shop_wrapper {
	width: 100%; display: block;
}
.shop_wrapper .shop {
	width: 100%;
}

.shop_wrapper .shop .shop_name{
	font-size: 18px; text-align: center; color: #7f7f7f; margin: 5px 0;
}
.shop_wrapper .shop .web_thumb{
	width: 230px;
	margin: 0 auto 50px;
}

h2.contact {
    font-size: 36px;
    margin: 30px 0;
}
.contact_mail span {display: none!important;}
.contact_line span {display: none!important;}
footer {
    width: 100%;
    padding: 10px 0 10px 0;
    background: #43d9d5;
}
h4.about {
  padding: 15px 30px;
}
}


.footer_nav {width: 720px; margin: 0 auto; padding: 40px 0 40px 0;}

.contact_mail span {display: inline-block;}
.contact_mail a {width: 320px; height: 100px; margin: 0 20px 0 20px; border-radius: 50px; border: 4px solid #43d9d5; box-sizing: border-box; font-size: 24px; color: #43d9d5; text-align: center; line-height: 94px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5); display: block;}
/*.footer_nav .contat_mail a {width: 320px; height: 100px; color: #0066cc; box-sizing: border-box; display: block;}*/
.contact_mail a:hover {width: 320px; height: 100px;background: #43d9d5; color: #fff; box-sizing: border-box; display: block; border-radius: 50px;}

.contact_line span {display: inline-block;}
.contact_line a {width: 320px; height: 100px; margin: 0 20px 0 20px; border-radius: 50px; border: 4px solid #00b900; box-sizing: border-box; font-size: 24px; color: #43d9d5; text-align: center; line-height: 92px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5); display: block;}
/*.footer_nav .contat_line a {width: 320px; height: 100px; color: #00b900; box-sizing: border-box; display: block;}*/
.contact_line a:hover {width: 320px; height: 100px; background: #00b900; color: #fff; box-sizing: border-box; display: block;}

/* footer */
footer { width: 100%; padding: 10px 0 10px 0;background:linear-gradient(to right, #16b550, #8dcf50); background:-webkit-linear-gradient(left, #16b550, #8dcf50); background: #43d9d5}
footer .copy { font-size: 14px; text-align: center; color:#fff;}
footer .copy a { font-size: 14px; text-align: center; color:#fff;}

#contact {padding-top: 80px;margin-top: -80px;}
.contact {padding: 0 0 20px 0;}
.contact .inner { max-width: 720px; width: 100%; padding: 0 15px 0 15px; margin: 0 auto;}

.contact span.optional,
.contact span.required {display: none !important;}

.contact form#mail_form {
  width: 100%;
  padding: 20px 0 20px 0;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin-bottom: 0;
  margin-top: 0;
}

@media (max-width: 768px) {
.contact form#mail_form {width: 100%;}
}

.contact form#mail_form dl {
  margin-bottom: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.contact form#mail_form dl dt {
  text-align: left;
  color: #43d9d5;
  line-height: 1.6;
  width: 25%;
  font-weight: bold;
}
.contact form#mail_form dl dt span{
  color: #000;display: inline-block;
}
.contact form#mail_form dl dd input {
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  border-radius: 0;
  border: 1px solid #CDD6DD;
}

.contact form#mail_form dl dd input::-webkit-input-placeholder {color: #CDD6DD;}
.contact form#mail_form dl dd input:-ms-input-placeholder {color: #CDD6DD;}
.contact form#mail_form dl dd input::-ms-input-placeholder {color: #CDD6DD;}
.contact form#mail_form dl dd input::placeholder {color: #CDD6DD;}

@media (max-width: 768px) {
.contact form#mail_form dl dd input {width: 100%;}
}
@media (max-width: 768px) {
  .contact form#mail_form dl {
    display: block;
    text-align: center;
    width: 100%;
  }
.contact form#mail_form dl dt {
  text-align: left;
  color: #43d9d5;
  line-height: 1.6;
  width: 100%;
  font-weight: bold;
}
.contact .inner { max-width: 100%; width: 100%; padding: 0 15px 0 15px; margin: 0 auto;}
.contact form#mail_form dl dd {padding: 0;width: 100%;}

}


.contact form#mail_form dl dd textarea {background-color: #fff;border-radius: 0;border: 1px solid #CDD6DD;}
.contact form#mail_form dl dd textarea::-webkit-input-placeholder {color: #CDD6DD;}
.contact form#mail_form dl dd textarea:-ms-input-placeholder {color: #CDD6DD;}
.contact form#mail_form dl dd textarea::-ms-input-placeholder {color: #CDD6DD;}
.contact form#mail_form dl dd textarea::placeholder {color: #CDD6DD;}

@media (max-width: 768px) {
.contact form#mail_form dl dd textarea {width: 100%;margin: 0 auto;}
}

.contact form#mail_form p#form_submit {border: none;}
.contact form#mail_form p#form_submit #form_submit_button {
  background-color: #43d9d5;
  border-radius: 40px;
  border: 1px solid #43d9d5;
  padding: 10px 100px;
  cursor: pointer;
  -webkit-transition: .3s;
  transition: .3s;
  font-weight: bold;
}
.contact form#mail_form p#form_submit #form_submit_button:hover {background-color: #fff;color: #43d9d5;}
.thanks {padding: 200px 0;text-align: center;background:#29b8b7; color: #fff;margin-bottom: 30px;}
.thanks h2 {font-size: 36px;color: #fff;margin-bottom: 10px; text-align: center;}

@media (max-width: 599px) {
  h3.achievements_title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 32px;
    color: #000;
    padding: 0 10px;
    line-height: 34px;
}
#contact {padding-top: 60px; margin-top: -60px;}

.contact form#mail_form dl dd {padding: 0;width: 100%;}
.contact form#mail_form dl dd input { width: 100%;}
.contact form#mail_form dl dd textarea {width: 100%;margin: 0 auto;}


.thanks h2 {font-size: 24px;}
}

.thanks p {margin-bottom: 20px;}

.thanks a {
  background-color: #fff;
  color: #29b8b7;
  padding: 5px 0;
  width: 200px;
  border-radius: 40px;
  display: block;
  margin: 0 auto;
  -webkit-transition: .3s;
  transition: .3s;
  border: 1px solid #29b8b7;
}
.thanks a:hover {
  background-color: #ff89c4;
  color: #fff;
  padding: 5px 0;
  width: 200px;
  border-radius: 40px;
  display: block;
  margin: 0 auto;
  -webkit-transition: .3s;
  transition: .3s;
  border: 1px solid #29b8b7;
}

@media (max-width: 720px) {

.footer_nav {width: 100%; margin: 0 auto; padding: 40px 0 40px 0;}

.contact_mail {width: 48%; height: 100px; margin: 0 1% 0 1%;}
.contact_mail span {display: inline-block;}
.contact_mail a {width: 100%; height: 100px; margin: 0; border-radius: 50px; border: 4px solid #0066cc; box-sizing: border-box; font-size: 24px; color: #0066cc; text-align: center; line-height: 96px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5); display: block;}
/*.footer_nav .contat_mail a {width: 320px; height: 100px; color: #0066cc; box-sizing: border-box; display: block;}*/
.contact_mail a:hover {width: 100%!important; height: 100px;background: #0066cc; color: #fff; box-sizing: border-box; display: block; border-radius: 50px;}

.contact_line {width: 48%; height: 100px; margin: 0 1% 0 1%;}
.contact_line span {display: inline-block;}
.contact_line a {width: 100%; height: 100px; margin: 0; border-radius: 50px; border: 4px solid #00b900; box-sizing: border-box; font-size: 24px; color: #00b900; text-align: center; line-height: 96px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5); display: block;}
/*.footer_nav .contat_line a {width: 320px; height: 100px; color: #00b900; box-sizing: border-box; display: block;}*/
.contact_line a:hover {width: 100%!important; height: 100px; background: #00b900; color: #fff; box-sizing: border-box; display: block;}

}
@media (max-width: 599px) {
.wrapper4 .inner {max-width: 100%; width:100%; padding: 30px 0 30px 0;}

p.price {max-width: 100%;width: 100%;margin: 0 auto 20px auto;}
.base3{padding: 20px 0 20px 0;}


/*footer { width: 100%; background: #0066cc; padding: 10px 0 80px 0;}*/

.footer_nav {width: 100%; margin: 0 auto; padding: 10px 0 10px 0; position: fixed; bottom:0;background: #fff;}

.contact_mail {width: 48%; height: 50px; margin: 0 1% 0 1%;}
.contact_mail span {display: inline-block;}
.contact_mail a {width: 100%; height: 50px; margin: 0; border-radius: 50px; border: 4px solid #0066cc; box-sizing: border-box; font-size: 13px; color: #0066cc; text-align: center; line-height: 42px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5); display: block;}
/*.footer_nav .contat_mail a {width: 320px; height: 100px; color: #0066cc; box-sizing: border-box; display: block;}*/
.contact_mail a:hover {width: 100%!important; height: 50px;background: #0066cc; color: #fff; box-sizing: border-box; display: block; border-radius: 50px;}

.contact_line {width: 48%; height: 50px; margin: 0 1% 0 1%;}
.contact_line span {display: inline-block;}
.contact_line a {width: 100%; height: 50px; margin: 0; border-radius: 50px; border: 4px solid #00b900; box-sizing: border-box; font-size: 13px; color: #00b900; text-align: center; line-height: 42px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5); display: block;}
/*.footer_nav .contat_line a {width: 320px; height: 100px; color: #00b900; box-sizing: border-box; display: block;}*/
.contact_line a:hover {width: 100%!important; height: 50px; background: #00b900; color: #fff; box-sizing: border-box; display: block;}

}
@media (max-width: 320px) {
header .header_left p{display: none;font-size: 7px; margin-right: 4px;}
}