@media screen and (max-width: 768px) {

/*==============================================================================
	basic style
============================================================================= */
html { font-size: 3.125vw;}
.inner { margin: 0 1rem; width: auto; }
.sp-only { display: block; }
.pc-only { display: none; }
	.br-pc { display: none; }
	.br-sp { display: inline; }
img { width: 100%; }
.deco:before { left: -1.5rem; width: .12rem; }
.deco:after { top: 0; right: -1.4rem; width: .12rem; }

/*==============================================================================
  header style
============================================================================= */
header .logo { width: 7.1rem; margin: .7rem 0 .3rem; }
header .btn { width: 15rem; margin: .5rem 0; }
header h1 { position: relative; top: 0; left: -1rem; width: 32rem; height: 3.4rem; line-height: 3.4rem; color: #fff; font-size: 1.5rem; font-weight: bold; text-align: center; background: #0e6386; }

/*==============================================================================
  hero style
============================================================================= */
.hero .bg { min-width: auto; background: none; padding: 0; border-bottom: #fff solid .15rem; }
.hero .inner { margin: 0; }
.hero h2 { width: 32rem; margin: 0; }
.hero .lead { width: 32rem; margin-left: 0; }
.hero .list { position: absolute; width: 14rem; top: 12.1rem; left: 2rem;}
.hero .item { width: 100%; height: 6.3rem; margin: 0 0 .5rem; }
.hero .item dt { line-height: 1.2; margin: 1.2rem 0 0 .3rem; color: #f3ff31; font-size: 1.5rem; }
.hero .item dd { color: #fff; font-size: 1.6rem;text-align: center; }
.hero .caution { position: absolute; left: 1rem; bottom: 1.8rem; color: #fff; font-size: .9rem; }

/*==============================================================================
  cta style
============================================================================= */
.cta .bg-orange { min-width: auto; padding: 1.5rem 0;  background: url(../images/cta_bg01_sp.png) no-repeat 50% 0 #fd5502; background-size: cover; }
.cta h2 { margin: 0 0 1rem; font-size: 1.7rem; text-align: center; }
.cta .result { position: relative; width: auto; left: 0; top: 0;}
.cta .bg-gray { padding: 1.9rem 0; background: #f3f1f1; }
.cta .tel-block { width: 100%; padding: 0 0 2rem; border-right: none; border-bottom: #333 solid .12rem; }
.cta .tel-block dt { margin: 0 0 1rem; font-size: 1.5rem; }
.cta .tel-block dd { line-height: 1.2; color: #fd5502; font-family: arial; font-size: 59px; font-weight: bold; text-align: center; }
.cta .mail-block { width: 100%; }
.cta .mail-block dt { margin: 1rem 0 1rem; font-size: 1.5rem; text-align: center; }
.cta .mail-block dd { width: auto; margin: 0 auto; }

.cta .icon-01,.cta .icon-02 { position: relative; }
.cta .icon-01:after { position: absolute; top: 0px; left: -1.5rem; width: .95rem; height: 1.4rem; background: url(../images/cta_icon01.png)no-repeat; background-size: cover; content: ""; }
.cta .icon-02:after { position: absolute; top: .1rem; left: -2.6rem; width: 1.8rem; height: 1.35rem; background: url(../images/cta_icon02.png)no-repeat; background-size: cover; content: ""; }
.cta .caution { padding: .9rem 0; font-size: .9rem; }

/*==============================================================================
  feature style
============================================================================= */
.feature .bg { background: #55c3f1; padding: 1.75rem 0 1.15rem; }
.feature .bg-white { padding: 1rem 0 0; }
.feature .balloon { width: 28.1rem; margin: 0 auto 1rem; }
.feature h2 { margin: 0 0 .8rem; font-size: 1.8rem; }
.feature h2 .large-font { font-size: 2.3rem; }

/*==============================================================================
  merit style
============================================================================= */
.merit .bg { min-width: auto; background: url(../images/merit_bg01_sp.jpg) no-repeat 50% 0, linear-gradient(#f6f9fa, #fff); background-size: 32rem auto; padding: 3.1rem 0 1.9rem; }
.merit .balloon { width: 26rem; margin: 0 auto 1.4rem; }
.merit h2 { margin: 0 0 1.3rem; font-size: 1.9rem; }
.merit h2 .sup { top: -1.3rem;font-size: .9rem; }
.merit .list { height: 29rem; height: 22.25rem; background: url(../images/merit_bg02_sp.png)no-repeat; background-size: cover; }
.merit .item { width: 29rem; height: 6.9rem; margin: 0 auto 1rem; line-height: 1.3; padding: 1.25rem 0 0 8.6rem; font-size: 1.7rem; text-align: left; }

/*==============================================================================
  result style
============================================================================= */
.result .bg { padding: 1.8rem 0 0; min-width: auto; background: linear-gradient(#f8f8f8,#fff 3%,#f8f8f8 10%); }
.result h2 { width: auto; line-height: 1.5; margin: 0 auto; text-align: center; font-size: 2.15rem; font-weight: bold; }
.result h2 .deco:before { left: -1.5rem; width: .12rem; }
.result h2 .deco:after { top: 0; right: -1.4rem; width: .12rem; }
.result h2 .large-font { display: inline-block; width: 14rem; margin-left: -15rem; line-height: 1.2; font-size: 3.1rem; text-align: left; }
.result h2 .blue { color: #55c3f1; }
.result h3 { position: absolute; top: 2.5rem; left: 0rem; width: 100%; height: auto; line-height: 1.1;; color: #fff; font-size: 2.15rem; }
.result h3 .num {font-size: 4.4rem; }
.result .photo { position: absolute; top: 7.2rem; right: -1rem; width: 17rem; }
.result .pic { width: 32rem; margin: 0 0 0 -1rem; }
.result .caution { position: absolute; left: 2rem; bottom: 2.2rem; font-size: .9rem; }

/*==============================================================================
  voice style
============================================================================= */
.voice .bg { min-width: auto; padding: 3.5rem 0 3rem; background: url(../images/voice_bg01_sp.jpg) no-repeat 50% 0; background-size: 32rem 39.5rem; }
.voice h2 { margin: 0 0 1.4rem; font-size: 1.75rem; }
.voice h2 .sup {  top: -1.2rem; font-size: .9rem; }
.voice h2 .bracket { padding: 0 1.8rem; font-size:1.9rem; }
.voice h2 .bracket:before { position: absolute; top: -.5rem; left: 0; width: 1rem; height: 2.8rem; border-top: .1rem solid #333;  border-left: .1rem solid #333; }
.voice h2 .bracket:after { position: absolute; top: 0rem; right: 0; width: 1rem; height: 2.8rem; border-bottom: .1rem solid #333;  border-right: .1rem solid #333; }
.voice h3 { height: 3rem; line-height: 3rem; margin: 0 0 1.3rem; background: url(../images/voice_bg02_sp.png)no-repeat; background-size: cover; font-size: 1.7rem; }
.voice .slider-item { width: 30rem!important; padding: 1.6rem .9rem; border: #55c3f1 solid .15rem; }
.voice .slider-item .photo { position: absolute; top: -1rem; left: 0; width: 12.25rem; }
.voice .slider-item .txt-block { width: 100%; margin: 0 0 1.3rem; }
.voice .slider-item .txt-block h4 { width: 14.5rem; min-height: 7rem; line-height: 1.3; margin: 1rem 0 1.1rem auto; font-size: 1.3rem; }
.voice .slider-item .txt-block .txt { width: 100%; font-size: 1.2rem;  }
.voice .slider-item .before,.voice .slider-item .after { position: relative; width: 100%; }
.voice .slider-item .before { margin: 0 0 3.5rem; }
.voice .slider-item .before:after { top: inherit; bottom: -2.1rem; left: 50%; margin-left: -4.5rem; border-width: 1.3rem 4.5rem 0 4.5rem; border-color: #ff8c00 transparent transparent transparent; }
.voice .slider-item dt { height: 3rem; line-height: 3rem; margin: 0 0 1.2rem; font-size: 1.5rem; }
.voice .slider-item dd { line-height: 1.4; padding: 0 0 .7rem 4rem; font-size: 1.3rem; }
.voice .slider-item dd:after { position: absolute; top: 0; left: 1.8rem; width: .6rem; height: 1.2rem; border-width: .2rem; }

#voice-pager { width: 100%; margin: 0 auto .5rem; }
#voice-pager .pager { display: block; width: 7.2rem; height: 4.5rem; padding: .7rem 0 0; border-radius: .25rem; border-bottom: #2a2c2d solid .15rem; font-size: 1rem;}
#voice-pager .pager.active { border-bottom: #1a6a93 solid .15rem; }

.voice .bx-prev,.voice .bx-next { display: none; }
/*.voice .bx-next { position: absolute; top: 50%; right: -1rem; margin-top: -1rem; width: 2rem; z-index: 10000;}*/
	
/*==============================================================================
  select style
============================================================================= */
.select .bg { padding: 0 0 2.75rem; }
.select h2 { margin: 0 0 .3rem; font-size: 2.2rem; text-align: center; }
.select h2 .sup { top: -1.2rem; font-size: .9rem; }
.select .list { width: 32rem; margin: 0 0 0 -1rem;; }
.select .item { position: relative; width: 32rem; margin: 0; }
.select .item h3 { position: absolute; top: 40px; left: 0; width: 100%; font-size: 2rem; }
.select .item-01 h3 { top: 2rem; }
.select .item-02 h3,.select .item-03 h3 { top: .5rem; }

/*==============================================================================
  diffrence style
============================================================================= */
.difference .ttl-block { margin: 2rem 0 0; padding: 1.5rem 0; }
.difference .balloon { position: absolute;  top: -2rem; left: -.5rem; width: 8rem; }
.difference .ttl-block h2 { margin: 0 0 0 8.8rem; font-size: 2rem; }
.difference .ttl-block h2 .large-font { font-size: 2.85rem; }
.difference .main-block { margin: 1rem 0 2.2rem; box-shadow: #54c2f0 0 0 .9rem; }
.difference .main-block h3 { padding: 1rem 0; font-size: 2rem; }
.difference .main-block .txt { padding: 1.3rem 0 1.5rem; font-size: 2.25rem; }
.difference .main-block .txt .num { font-size: 3.2rem; }

/*==============================================================================
  missmach style
============================================================================= */
.missmach .bg { position: relative; padding: 2.1rem 0 2rem; }
.missmach h2 { line-height: 1.3; margin: 0 0 .6rem; font-size: 2.5rem;}
.missmach h2 .deco { margin: 0 0 .6rem;}
.missmach h2 .deco .deco:before { left: -1.5rem; width: .12rem; }
.missmach h2 .deco .deco:after { top: 0; right: -1.4rem; width: .12rem; }.missmach .item { width:30rem; margin: 0 auto; border: #6d6e6f solid .1rem; border-top: none; }
.missmach .item:first-child {  border-top: #6d6e6f solid .1rem; }
.missmach .item .photo { display: table-cell; width: 5.7rem; height: 5.95rem; }
.missmach .item .txt { display: table-cell; width: 24rem; height: 5.95rem; line-height: 1.4; padding: 0 0 0 1.3rem; font-size: 1.5rem;}

/*==============================================================================
  reason style
============================================================================= */
.reason .bg { min-width: auto; padding: 4.3rem 0 .1rem; background: url(../images/reason_bg01_sp.jpg)no-repeat; background-size: cover; }
.reason .ttl-block .bg-blue { width: 27.4rem; height: 3.6rem; line-height: 3.6rem; margin: 0 auto 1.4rem; font-size: 1.7rem; }
.reason .ttl-block .bg-blue .deco:before,.reason .ttl-block .bg-blue .deco:after { background: #fff; top: .65rem; height: 60%; }
.reason .ttl-block h2 { margin: 0 0 1.4rem; font-size: 1.8rem; text-align: center; }
.reason .ttl-block .blue { color: #54c2f0; font-size:2.6rem; }

.reason .item { width: auto; margin: 0 auto 2rem; }
.reason .item .bg-white { padding: 1.3rem 1.6rem 1.7rem; }
.reason .item .lead { line-height: 1.35; margin: 0 0 22px; color: #0e6386; font-size: 28px; font-weight: bold; text-align: center; }
.reason .item-01 .pic { width: 27rem; margin: 0 auto 1rem; }
.reason .item-01 .txt { padding: 0; line-height: 1.7; font-size: 1.2rem; }

.reason .item-02 .lead { margin: 0 0 1rem; font-size: 1.4rem; text-align: left; }
.reason .item-02 .pic { position: relative; top: inherit; left: inherit; width: 26.7rem; margin: 0 auto 2.1rem; }
.reason .item-02 .txt { width: 100%; line-height: 1.7; margin: 0; font-size: 1.2rem; }
.reason .item-02 .txt + .txt { margin-top: 20px;}

.reason .item-03 .bg-white { 1.3rem 1.6rem 1.7rem; }
.reason .item-03 .lead { margin: 0 0 .6rem; font-size: 1.6rem; }
.reason .item-03 h4 { margin: 0 0 1.6rem; font-size: 1.3rem; text-align: center; }
.reason .item-03 h4 .small-font { font-size: 1.3rem;; }
.reason .item-03 .pic { position: relative; bottom: auto; width: 9.6rem; margin-left: 1.5rem; padding: .9rem 0 0;  }
.reason .item-03 .txt-block { width: 100%; height: auto; padding: 1.2rem 1.5rem 1.5rem; }
.reason .item-03 .txt-block h5 { display: block; position: absolute; top: 3.1rem; left: 12.6rem; font-size: 1.8rem; }
.reason .item-03 .txt { margin: 0; font-size: 1rem; }
.reason .item-03 .btm-txt { margin-top: 1.3rem; font-size: 1.2rem; }
.reason  .item-03 .adviser-item-02 .pic{ float: left; }
.reason  .item-03 .adviser-item-02 .txt-block { float: right; }
	
/*==============================================================================
  support style
============================================================================= */
.support .bg { padding: 1.8rem 0 1.5rem; }
.support .ttl-block { width: 30rem; margin: 0 auto 1.6rem; }
.support .ttl-block h2 { margin: 0 0 2.8rem; padding: 0 0 1rem; border-bottom: #8d8d8d solid .7rem; font-size: 2.1rem; }
.support .ttl-block h2 .blue { font-size: 2.5rem; }
.support .ttl-block h2:before { bottom: -.45rem; left: .2rem; width: 29.55rem; height: .5rem; }
.support .ttl-block h2:after { position: absolute; bottom: -1.2rem;  border-width: .65rem .4rem 0 .4rem; }
.support .ttl-block .lead { font-size: 1.8rem;}
.support .ttl-block .lead .sup { top: -1.2rem; font-size: .9rem; }
.support .step-item { padding: 0 0 1.4rem; }
.support .step-item dt { height: 4.4rem; line-height: 4.4rem; border: #55c3f1 solid .1rem; border-radius: .25rem; box-shadow: #0988c9 0px .15rem 0px; }
.support .step-item dt:before { top: -.1rem; right: -.1rem; width: 6.85rem; height: 4.4rem; border-radius: .25rem; }
.support .step-item dt:after { right: 3rem; border-width: .7rem .35rem 0 .35rem; }
.support .step-item .active:after { border-width: 0 .35rem .7rem .35rem; }

.support .step-item .left-txt { padding: 0 1rem 0 1.6rem; font-size: 1.1rem; }
.support .step-item .left-txt .num { font-size: 1.5rem; }
.support .step-item .right-txt { font-size: 1.5rem; }
.support .step-item dd { padding: 1.7rem 0 0; }
.support .step-item dd .txt { line-height: 1.7; margin: 0 0 1.3rem; font-size: 1.2rem; }
.support .step-item dd .btm-txt { margin: 1.8rem 0 0; font-size: 1.6rem; }

.support .step-item-03 .pic { width: 20rem; margin: 0 auto; }
.support .step-item-03 .pic + .pic { margin-top:1.2rem; }
.support .step-item-04 .circle-list { position: relative; top: inherit; right: inherit; width: 17.2rem; margin: 0 auto; }
.support .step-item-04 .pic { width: 25rem; margin: 0 auto 1.4rem; }
.support .step-item-06 .circle-list { padding: 0 1.5rem; }
.support .step-item .circle-item { width: 8.5rem; height: 8.5rem; padding: 2.7rem 0 0; font-size: 1.35rem; }
.support .step-item-06 .circle-item-04 { margin-left: 4.5rem; }
.support .step-item-06 .circle-item-05 { margin-right: 4rem; }
.support .step-item-07 .btm-txt { line-height: 1.5; position: relative; top: 0; right: inherit; width: auto; font-size: 1.6rem; letter-spacing: .08rem; }
.support .step-item-07 .btm-txt .num { font-size: 3.1rem; }
.support .step-item-07 .btm-txt .large-font { font-size: 1.6rem; }
.support .step-item-07 .btm-txt .percent { font-size: 2.3rem; }
	
/*==============================================================================
  faq style
============================================================================= */
.faq .bg { padding: 2.5rem 0 0; }
.faq h2 { margin: 0 0 2rem; font-size: 2.3rem; }
.faq .item { width: 30rem; padding: 0 0 1.4rem; }
.faq dt { height: 5.3rem; padding: .6rem 0; border-radius: .25rem; }
.faq dt:after { right: 2rem; border-width: .5rem.25rem 0 .25rem; }
.faq .active:after { border-width: 0 .25rem .5rem .25rem; }

.faq dt .left-icon { width: 3.5rem; border-right: #000 solid .1rem; font-size: 2rem; }
.faq dt .right-txt { width: 26.5rem; padding: .3rem 1rem; font-size: 1.1rem; }
.faq dd { padding: .8rem 0 0; }
.faq dd .left-icon { display: table-cell; width: 3.5rem; color: #0e6386; font-size: 2rem; }
.faq dd .right-txt { display: table-cell; width: 26.5rem; padding: .5rem 1rem; font-size: 1.1rem; }
.faq dd .detail-txt { margin: .4rem 1rem 0; font-size: 1rem;  }

/*==============================================================================
  company
============================================================================= */
.company .bg { padding: 52px 0 70px;  background: #ddf1f8; }
.company h2 { margin: 0 0 48px; font-size: 46px; text-align: center; letter-spacing: .1rem; }
.company table .left-txt { width: 170px; line-height: 1.4; padding: 27px 17px; background: #4dbdeb; border-bottom: #1182b1 solid 1px; border-right: #1182b1 solid 1px; color: #fff; font-size: 18px; font-weight: bold; text-align: right; vertical-align: middle; box-sizing: border-box; }
.company table .right-txt { width: 810px; line-height: 1.7; padding: 27px 17px; border-bottom: #1182b1 solid 1px; background: #fff; vertical-align: middle; box-sizing: border-box; }

/*==============================================================================
  company
============================================================================= */
.company .bg { padding: 2.5rem 0 3rem; }
.company h2 { margin: 0 0 2.2rem; font-size: 2.3rem; }
.company .pic  { position: absolute; top: 14.6rem; right: -1rem; width: 13rem; }
.company table .left-txt { width: 6rem; line-height: 1.4; padding: 1.1rem .8rem; border-bottom: #1182b1 solid .1rem; border-right: #1182b1 solid .1rem;font-size: 1rem; }
.company table .right-txt { width: 24rem; padding: .8rem; border-bottom: #1182b1 solid .1rem; font-size: 1rem; }
.company table .border-none { border-bottom: none; }

/*==============================================================================
  footer style
============================================================================= */
footer .bg { padding: 1.3rem 0; background: #000; }
footer p { color:  #fff; font-size: .8rem text-align: center; }

}