@charset "utf-8";
/*
 * layout.css
 * プロジェクト共通のブロックスタイル（ヘッダー・フッター・グローバルナビなど）
 * レイアウト構成に使われる汎用的なコンポーネント
 *
 *すべてのページで使用
 */
 /* =========================================================
header
========================================================= */
#header {
  position: fixed;
  z-index: 100;
  top:0;
  width: 100%;
  height: 40px;
  background: #fff;
  box-shadow: 0px 0px 6px 0 rgba(0, 0, 0, 0.5);
}
.header_logo {
  float: left;
  padding: 8px 0 0 10px;
}
.header_links {
  float: right;
}
.header_tel,
.header_menu {
  float: left;
  border-left: 1px solid #dbdbdb;
}
.header_tel a{
  display: block;
  height: 40px;
  width: 70px;
  background: url(/assets/sptop_wt/img/sp/common/btn_tel-header.png) center center no-repeat;
  background-size: 50px 20px;
}
.header_menu {
  width: 45px;
  height: 40px;
  background: url(/assets/sptop_wt/img/sp/common/btn_menu.png) center center no-repeat;
  background-size: 25px 23px;
}

/* =========================================================
gNav
========================================================= */
/* nav ヘッダーのナビゲーション
-------------------------------------------------- */
#gNav{
	display: none;
	position: fixed;
	padding: 5px;
	width: 300px;
	height: auto;
	right:10px;
	top: 58px;
	z-index: 998;
	background: #61af14;
	border-radius: 5px;
	box-shadow: 0px 0px 6px 0 rgba(0, 0, 0, 0.5);
}
#gNav ul{
	z-index: 999;
	position: relative;
	padding: 2px;
	background: #fff;
	border-radius: 4px;
}
#gNav ul:after{
	position: absolute;
	top: -30px;
	right:0;
	display: block;
	content: '';
	width: 0px;
	height: 0px;
	border-top: 15px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 15px solid #61af14;
	border-left: 20px solid transparent;
}
#gNav ul li{
	height: 44px;
	border-bottom: 1px solid #dbdbdb;
}
#gNav ul li:last-child{
	border-bottom: none;
}
#gNav ul li a{
	padding: 0 0 0 50px;
	line-height: 44px;
}
#gNav ul .about{
	background: url(/assets/img/sp/common/mark_info.png) no-repeat 10px center ;
	background-size: 20px 20px;
	-webkit-background-size: 20px 20px;
	-moz-background-size: 20px 20px;
}
#gNav ul .beginner{
	background: url(/assets/img/sp/common/icon_puzzle.png) no-repeat 5px center ;
	background-size: 29px 17px;
	-webkit-background-size: 29px 17px;
	-moz-background-size: 29px 17px;
}
#gNav ul .corp{
	background: url(/assets/img/sp/common/mark_campany.png) no-repeat 10px center ;
	background-size: 20px 20px;
	-webkit-background-size: 20px 20px;
	-moz-background-size: 20px 20px;
}
#gNav ul .area{
	background: url(/assets/img/sp/common/mark_mappin_orange.png) no-repeat 10px center ;
	background-size: 16px 23px;
	-webkit-background-size: 16px 23px;
	-moz-background-size: 16px 23px;
}
#gNav ul .faq{
	background: url(/assets/img/sp/common/mark_faq.png) no-repeat 10px center ;
	background-size: 20px 20px;
	-webkit-background-size: 20px 20px;
	-moz-background-size: 20px 20px;
}
#gNav ul .article{
	background: url(/assets/img/sp/common/mark_article_orange.png) no-repeat 10px center ;
	background-size: 20px 19px;
	-webkit-background-size: 20px 19px;
	-moz-background-size: 20px 19px;
}
#gNav ul .search{
	background: url(/assets/img/sp/common/mark_search.png) no-repeat 10px center ;
	background-size: 20px 19px;
	-webkit-background-size: 20px 19px;
	-moz-background-size: 20px 19px;
}
#gNav ul .regist{
	background: #61af14 url(/assets/img/sp/common/mark_form.png) no-repeat 10px center ;
	background-size: 23px 23px;
	-webkit-background-size: 23px 23px;
	-moz-background-size: 23px 23px;
}
#gNav ul .regist a{
	color: #fff;
}
#gNav ul .close{
	background: #d1c8b5 url(/assets/img/sp/common/icon_close.png) no-repeat 10px center ;
	background-size: 20px 20px;
	-webkit-background-size: 20px 20px;
	-moz-background-size: 20px 20px;
	padding: 0 0 0 50px;
	line-height: 44px;
}
/* 幅が長かったらレイアウトをかえる */
.wide_width #gNav{
	width: 480px;
}
.wide_width #gNav ul li{
	width: 50%;
	float: left;
}
.wide_width #gNav ul li.regist{
	padding: 0;
	border: none;
	width: 100%;
	text-align: center;
}
.wide_width #gNav ul li.regist a{
	padding: 0;
}
.wide_width #gNav ul li.close{
	padding: 0;
	width: 100%;
	text-align: center;
	border-top: 1px solid #dbdbdb;
}


/* =========================================================
container
========================================================= */
#container {
  padding-top :90px;
}

/* =========================================================
footer
========================================================= */
footer {
	position: relative;
	margin: 60px 0 0;
	background: #fff;
	border-top: solid 4px #6e5c4a;
}

#pagetop{
	position: absolute;
	height: 34px;
	top: -34px;
	right: 10px;
	background: #6e5c4a;
	border-radius: 4px;
	font-size: 12px;
}

#pagetop a{
	position: relative;
	padding: 0 10px 0 30px;
	color: #fff;
	line-height: 34px;
}

#pagetop a::after {
	position: absolute;
	top: 50%;
	left: 10px;
	display: block;
	content: '';
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

footer ul {
	border-bottom: solid 1px #ccc;
}

footer ul li {
	float: left;
	line-height: 40px;
}

#footer_link01 li {
	width: 50%;
	text-align: center;
}

#footer_link01 li a {
	display: block;
	position: relative;
	padding: 0;
}

#footer_link01 li a::after {
	position: absolute;
	top: 50%;
	left: 20px;
	display: block;
	content: '';
	width: 0px;
	height: 0px;
	margin-top: -6px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid #61af14;
	border-right: 10px solid transparent;
}

#footer_link02 li a {
	display: block;
	padding: 0 18px 0 10px;
	font-size: 10px;
	background: url(/assets/img/sp/common/icon_pc.png) no-repeat 100% 50% ;
	background-size: 15px 15px;
	-webkit-background-size: 15px 15px;
	-moz-background-size: 15px 15px;
}

address {
	font-size: 12px;
	color: #666;
	text-align: center;
	line-height: 30px;
}
#footer {
	position: relative;
	margin: 60px 0 0;
	background: #fff;
	border-top: solid 4px #e7e7e7;
}
.footer_address {
	font-size: 12px;
	color: #666;
	text-align: center;
	line-height: 30px;
}


/* =========================================================
new design
========================================================= */

/* header_new
-------------------------------------------------- */
/* layout.css打ち消し */
#header {
  z-index: 98;
}
#header.header {
  height: 75px;
  background: none;
  box-shadow: none;
}

.headerMenuButtonClose:after,
.headerMenuButtonClose:before {
  content: "";
  position: fixed;
  top: 46px;
  right: 45px;
  width: 1.5px;
  height: 25px;
  background: #232323;
}
@media screen and (min-width: 1025px) {
  .headerSp {
    display: none;
  }
}
.headerLogoImage {
  position: absolute;
  top: 36px;
  left: 16px;
  width: 175px;
  z-index: 98;
}
@media screen and (max-width: 375px) {
  .headerLogoImage {
    width: 155px;
  }
}
.headerList {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 17px;
}
.headerTel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 106px;
  height: 58px;
  margin-right: 5px;
  border-radius: 29px;
  background: #0abab5;
}
.headerTel a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  left: 3px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1rem;
}
.headerTelImage {
  width: 31px;
  margin-right: 4px;
}
.headerTelText {
  width: 50px;
}
.headerMenuButton {
  width: 58px;
  height: 58px;
  padding: 0 18px;
  border-radius: 50%;
  background: #0abab5;
  line-height: 4em;
}
.headerMenuButtonTrigger {
  position: relative;
  width: 21px;
  height: 16px;
  cursor: pointer;
  display: inline-block;
  transition: all 0.5s;
  box-sizing: border-box;
}
.headerMenuButtonTrigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  border-radius: 4px;
  display: inline-block;
  transition: all 0.5s;
  box-sizing: border-box;
}
.headerMenuButtonTrigger span:first-of-type {
  top: 0;
}
.headerMenuButtonTrigger span:nth-of-type(2) {
  top: 7px;
}
.headerMenuButtonTrigger span:nth-of-type(3) {
  bottom: 0;
}
.headerMenuButtonClose {
  display: block;
  position: relative;
}
.headerMenuButtonClose:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.headerMenuButtonClose:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.headerMenuContents {
  position: fixed;
  right: 0;
  width: 90%;
  height: 100%;
  padding: 80px 26px 35px 35px;
  background: #fff;
  box-shadow: -4px 0px 6px rgba(0, 0, 0, 0.03);
  font-weight: 700;
  font-family: "游ゴシック体",YuGothic,"游ゴシック","Yu Gothic",sans-serif;
  transform: translateX(100%);
  transition: transform 0.3s;
  overflow-y: scroll;
  z-index: 99;
}
.headerMenuContents.active {
  transform: translateX(0);
}
.headerMenuContentsItem {
  margin-bottom: 30px;
  font-size: 18px;
}
.headerMenuContentsItem a {
  display: flex;
  align-items: center;
  color: #232323;
  font-size: 18px;
}
.headerMenuContentsItemCta {
  position: relative;
  margin-bottom: 22px;
  padding: 16px 0px 16px 60px;
  border-radius: 7px;
  background: #b0eae9;
  font-size: 16.5px;
}
.headerMenuContentsItemCta a {
  font-size: 16.5px;
}
@media screen and (max-width: 375px) {
  .headerMenuContentsItemCta a {
    font-size: 15px;
  }
}
.headerMenuContentsIcon {
  width: 40px;
  margin-right: 15px;
}
.headerMenuContentsIconCta {
  position: absolute;
  left: -24px;
  top: -5px;
  width: 85px;
  height: auto;
  transform: rotate(-28deg);
}
.headerMenuContentsTitle {
  width: 210px;
}
.headerMenuContentsImage {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
.headerMenuContentsPickup {
  background: #cff5f1;
  margin: 16px 0 24px;
  padding: 1px 0;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.12rem;
}
.headerPcContainer {
  position: fixed;
  top: 0;
  width: 100%;
  height: 90px;
  background: #fff;
  font-family: "游ゴシック体",YuGothic,"游ゴシック","Yu Gothic",sans-serif;
  z-index: 99;
}
@media screen and (max-width: 1024px) {
  .headerPcContainer {
    display: none;
  }
}
.headerPcLogo {
  position: relative;
  bottom: 5px;
}
.headerPcList {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
}
.headerPcItem {
  color: #232323;
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  line-height: 1.5rem;
}
.headerPcItemLink {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #232323;
  text-decoration: none;
}
.headerPcItemLink:hover {
  color: #232323;
  text-decoration: none;
}
.headerPcItem img {
  width: inherit;
  margin-right: 10px;
}
.headerPcItemTel {
  padding: 3px 18px 8px;
  border-radius: 11px;
  background: #0abab5;
  color: #fff;
  font-size: 24px;
}
.headerPcItemTel a {
  color: #fff;
}
.headerPcItemTel:hover {
  opacity: initial;
}
.headerPcItemTel img {
  width: 38px;
}
.headerPcItemTelWeak {
  font-size: 13px;
}

/* footer
-------------------------------------------------- */
#footer_wrap{
    width: 100%;
    text-align: center;
    background: url(/assets/img/common/footer_wrap_bg.gif) 0 0 repeat-x #d1c8b5;
    _zoom: 1;
    overflow: hidden;
}

#footer_wrap .inner{
    width: 960px;
    margin: 0 auto;
    background: url(/assets/img/common/footer_inner_bg.gif) right bottom no-repeat;
}

@media screen and (max-width:960px) {
    #footer_wrap .inner {
        width: 100%;
    }
}

#footer_wrap .fb-like-box{
        width: 960px;
    height: 200px;
    background: #e6e6e6;
}

@media screen and (max-width:960px) {
    #footer_wrap .fb-like-box {
        width: 100%;
    }
}

#footer{
    width: 960px;
    margin: 0 auto;
    padding: 30px 0 0 0;
    text-align: left;
    background: url(/assets/img/common/footer_bg.gif) right top no-repeat;
}

#footer{
    width: 960px;
    margin: 0 auto;
    padding: 30px 0 0 0;
    text-align: left;
    background: url(/assets/img/common/footer_bg.gif) right top no-repeat;
}

@media screen and (max-width:960px) {
    #footer {
        width: 100%;
    }
}

#footer_box{
    margin: 25px 10px;
    color: #806f54;
    _zoom: 1;
    overflow: hidden;
}

#footer_box a{
    color: #806f54;
}

#footer_box a:hover{
    color: #fff;
}

.footer_link{
    width: 480px;
    float: left;
}

.footer_link_column {
    float: left;
    width:185px;
    margin: 0 55px 0 0;
}

.footer_link_column ul {
    margin: 0 0 30px;
}

.footer_link_column .link_head{
    margin: 0 0 7px 0;
    font-weight: bold;
    border-bottom: 1px dashed #806f54;
}

@media screen and (max-width: 500px) {
    .footer_link_column {
        font-size: 12px;
    }
}

.footer_sns {
    float: right;
    width: 425px;
}


#footer address{
    padding: 15px;
    text-align: center;
    color: #806f54;
    border-top: 1px solid #806f54;
}

/* footer_new
-------------------------------------------------- */

footer {
  position: initial;
  margin: 80px 0 0 0;
  border-top: initial;
  background: #fff;
  font-weight: 700;
  font-family: "游ゴシック体",YuGothic,"游ゴシック","Yu Gothic",sans-serif;
}
#pagetop {
  display: block;
  position: relative;
  top: initial;
  right: initial;
  height: initial;
  padding-top: 90px;
  border-radius: initial;
  background: none;
  color: initial;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
}
.FooterTopLink {
  position: initial;
  padding: initial;
  color: initial;
  line-height: initial;
}
.FooterTopButton {
  display: block;
  position: absolute;
  left: 49%;
  top: 66px;
  width: 12px;
  height: 12px;
  border-top: 0.2em solid #232323;
  border-right: 0.2em solid #232323;
  font-size: 12px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
@media screen and (min-width: 600px) {
  .FooterTopButton {
    left: 49.5%;
  }
}
.FooterList {
  margin-top: 64px;
  border-bottom: none;
  text-align: center;
}
.FooterItem {
  float: none;
  position: relative;
  display: inline-block;
  font-size: 15px;
  line-height: 2.5rem;
}
.FooterItem:not(:nth-child(3)):not(:nth-child(5)) {
  margin-right: 18px;
}
.FooterItem:not(:nth-child(3)):not(:nth-child(6)):after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 15px;
  position: absolute;
  top: 12px;
  right: -11px;
  background-color: #232323;
}
.FooterItem a {
  color: #232323;
  text-decoration: none;
}
.FooterItem a:hover {
  color: #232323;
  text-decoration: none;
}
@media screen and (min-width: 600px) {
  .FooterItem:nth-child(3) {
    margin-right: 18px;
  }
  .FooterItem:nth-child(3):after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 15px;
    position: absolute;
    top: 12px;
    right: -11px;
    background-color: #232323;
  }
}
.FooterAddress {
  margin-top: 30px;
  padding-bottom: 124px;
  color: initial;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  line-height: 30px;
}
@media screen and (min-width: 600px) {
  .FooterAddress {
    padding-bottom: 145px;
  }
}


/* 固定CTA
-------------------------------------------------- */
.Cta {
  padding: 24px;
  background: linear-gradient(#cff5f1 0%, #d2f8f4 100%);
}
.CtaFixed {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 9px 20px;
  background: rgba(176, 234, 233, 0.45);
  box-sizing: border-box;
  font-family: "游ゴシック体",YuGothic,"游ゴシック","Yu Gothic",sans-serif;
  z-index: 98;
}
@media screen and (min-width: 600px) {
  .CtaFixed {
    display: none;
  }
}
@media screen and (max-width: 599px) {
  .CtaFixedPc {
    display: none;
  }
}
@media screen and (min-width: 600px) {
  .CtaFixedPc {
    display: block;
    padding: 0 0 10px;
  }
}
.CtaFixedPc .CtaContents {
  position: relative;
  left: 40px;
  max-width: 100%;
}
.CtaFixedButton {
  background: #0abab5;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 17px;
  margin: 4px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}
@media screen and (max-width: 375px) {
  .CtaFixedButton {
    font-size: 19px;
  }
}
.CtaFixedButtonPc {
  display: inline-block;
  position: relative;
  margin: initial;
  padding: 13px 20px;
  background-color: #fff;
  color: #232323;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0.02rem;
  line-height: 1.5rem;
  text-decoration: none;
  box-shadow: none;
}
.CtaFixedButtonPc:hover {
  color: #232323;
  text-decoration: none;
}
.CtaFixedButtonWeak {
  font-size: 14px;
}
.CtaFixedButtonImage {
  position: absolute;
  right: 12px;
  top: 5px;
  width: 85px;
  height: auto;
}
@media screen and (min-width: 600px) {
  .CtaFixedButtonImage {
    left: -84px;
    top: -6px;
    width: 110px;
    transform: rotate(-25deg);
  }
}
@media screen and (min-width: 600px) {
  .CtaSmall {
    border-radius: 12px;
  }
  .CtaSmall .SupportMoneyImage {
    display: block;
    width: 410px;
    margin: 5px auto 25px;
  }
  .CtaSmall .CtaHeading {
    font-size: 21px;
  }
}
.CtaBox {
  padding: 32px 16px 16px;
  text-align: center;
  border-radius: 12px;
  background: #fff;
  max-width: 612px;
  margin: auto;
}
@media screen and (min-width: 600px) {
  .CtaBox {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 830px;
  }
}
.CtaHeading {
  position: relative;
  display: inline-block;
  font-size: 17px;
  letter-spacing: 0.12em;
  line-height: 1.4;
}
@media screen and (min-width: 600px) {
  .CtaHeading {
    margin-right: 20px;
    font-size: 24px;
    line-height: 1.6;
  }
}
.CtaHeading-Sub {
  display: inline-block;
  position: relative;
}
.CtaHeading-Sub:before {
  content: url(/assets/img/lp_wa/lp001/cta-image.svg);
  position: absolute;
  left: -23px;
  top: -23px;
  width: 35px;
  height: 18px;
}
.CtaHeading-Underline {
  border-bottom: 3px solid #e8d295;
  font-size: 1.47em;
}
.CtaHeading-Weak {
  font-size: 0.69em;
}
@media screen and (min-width: 600px) {
  .CtaWrap {
    padding: 19px 25px;
    border-radius: 17px;
    background: #f5faf9;
  }
}
.CtaContents {
  display: flex;
  justify-content: center;
  margin: 7px auto -5px;
  max-width: 350px;
}
@media screen and (min-width: 600px) {
  .CtaContents {
    max-width: 100%;
  }
}
.CtaList {
  margin: 5px;
}
.CtaLink {
  background: #0abab5;
  display: inline-block;
  padding: 16px 9px;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  text-decoration: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: all 0.3s;
}
.CtaLink:hover {
  color: #fff;
  text-decoration: none;
}
@media screen and (min-width: 600px) {
  .CtaLink {
    text-align: center;
  }
}
.CtaLink:hover {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transform: scale(0.95);
  background: #078a86;
}
.CtaLink-Strong {
  font-size: 1.18em;
  display: inline-block;
  line-height: 1;
}
.CtaLink-Number {
  font-size: 1.86em;
}
@media screen and (min-width: 600px) {
  .CtaLink-Number {
    font-size: 2em;
  }
}
.CtaTel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 87%;
  margin: 10px auto 0;
  padding: 2px 0 6px;
  border: 1px solid #0abab5;
  border-radius: 11px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  color: #0abab5;
  transition: all 0.3s;
}
@media screen and (min-width: 600px) {
  .CtaTel {
    width: 96%;
    border: none;
    background: #fff;
    box-shadow: none;
  }
}
.CtaTel:hover {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transform: scale(0.95);
}
@media screen and (min-width: 600px) {
  .CtaTel:hover {
    box-shadow: none;
    transform: initial;
  }
}
.CtaTelImage {
  width: 33px;
  height: auto;
  margin: 3px 8px 0 0;
}
@media screen and (min-width: 600px) {
  .CtaTelImage {
    width: 37px;
  }
}
.CtaTelText {
  font-weight: 700;
  font-size: 19px;
  line-height: 1.1;
}
@media screen and (min-width: 600px) {
  .CtaTelText {
    font-size: 24px;
  }
}
.CtaTelTextWeak {
  font-size: 11px;
}
@media screen and (min-width: 600px) {
  .CtaTelTextSp {
    display: none;
  }
}
.CtaTelTextPc {
  display: none;
}
@media screen and (min-width: 600px) {
  .CtaTelTextPc {
    display: inline;
  }
}
@media screen and (min-width: 600px) {
  .CtaSp {
    display: none;
  }
}