@charset "UTF-8";
/*!
style.css Modified: @@buildTime Editor: Toshiyuki Hara */
/*
#overview
style.scss
*/
/*
#colors
@theme-color1 #fff
@theme-color2 #000
@theme-color3 #e8829c
@theme-color4 #a7e3e4
@theme-color5 #333
@theme-color6 #f0ad4e
@theme-color7 #c9302c
*/
/*
#overview
_common.scss

*/
/* ==========================================================================
   RESET STYLE
   ========================================================================== */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section {
  display: block;
}

button,
[type="reset"],
[type="button"],
[type="submit"] {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  cursor: pointer;
}

/* ==========================================================================
   FONT SET
   ========================================================================== */
@font-face {
  font-family: 'Noto Sans Japanese';
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.otf) format("opentype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans Japanese';
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.otf) format("opentype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans Japanese';
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.otf) format("opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans Japanese';
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans Japanese';
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans Japanese';
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans Japanese';
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.otf) format("opentype");
  font-weight: 900;
  font-style: normal;
}

/* ==========================================================================
   HTML / BODY
   ========================================================================== */
html {
  height: 100%;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 6.25%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  height: 100%;
  font: 16rem/1.417 "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff;
}

/* ==========================================================================
   LIST
   ========================================================================== */
ul, ol {
  list-style: none;
}

/* ==========================================================================
   LINK
   ========================================================================== */
a {
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  vertical-align: baseline;
  background-color: transparent;
}

a:link, a:visited, a:hover, a:focus, a:active {
  color: #000;
}

a:hover, a:focus {
  text-decoration: underline;
}

/* ==========================================================================
   MEDIA
   ========================================================================== */
img, embed, object, audio, video, iframe {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

/* ==========================================================================
   TABLE
   ========================================================================== */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ==========================================================================
   HORIZONTAL RULE
   ========================================================================== */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/* ==========================================================================
   ゴシック体
   ========================================================================== */
/*
#styleguide
ゴシック体

テキストをゴシック体にする場合はこのclassを使う
```
<p class="ff-gothic">窓も扉のかっこう棒手がゴーシュで叫ぶ音楽ました。</p>
```
*/
.ff-mincho {
  font-family: true;
}

/* ==========================================================================
   明朝体
   ========================================================================== */
/*
#styleguide
明朝体

テキストを明朝体にする場合はこのclassを使う
```
<p class="ff-mincho">窓も扉のかっこう棒手がゴーシュで叫ぶ音楽ました。</p>
```
*/
.ff-mincho {
  font-family: "Sawarabi Mincho", YuMincho, Hiragino Mincho ProN, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* ==========================================================================
   ARIALフォント
   ========================================================================== */
/*
#styleguide
ARIAL

テキストをARIALフォントにする場合はこのclassを使う
```
<p class="ff-arial">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
```
*/
.ff-arial {
  font-family: Arial, Helvetica, Helvetica Neue, sans-serif;
}

/* ==========================================================================
   ARIAL BLACKフォント
   ========================================================================== */
/*
#styleguide
ARIAL BLACK

テキストをARIALフォントにする場合はこのclassを使う
```
<p class="ff-arialBlack">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
```
*/
.ff-arialBlack {
  font-family: Arial Black, sans-serif;
}

/*
#styleguide
アイコンフォント

テキストを明朝体にする場合はこのclassを使う
```
<p class="ico ico--left ico--attention">attention</p>
<p class="ico ico--left ico--angle-up">angle-up</p>
<p class="ico ico--left ico--angle-right">angle-right</p>
<p class="ico ico--left ico--angle-bottom">angle-bottom</p>
<p class="ico ico--left ico--angle-left">angle-left</p>
<p class="ico ico--left ico--home">home</p>
<p class="ico ico--left ico--help">help</p>
<p class="ico ico--left ico--download">download</p>
<p class="ico ico--left ico--free">free</p>
<p class="ico ico--left ico--heart">heart</p>
<p class="ico ico--left ico--mail">mail</p>
<p class="ico ico--left ico--pagetop">pagetop</p>
<p class="ico ico--left ico--tel">tel</p>
```
*/
/* ==========================================================================
   ICON FONT
   Font Awesome http://fontello.com/
   ========================================================================== */
@font-face {
  font-family: 'fontello';
  src: url("../font/fontello-appservice/fontello.woff") format("woff"), url("../font/fontello-appservice/fontello.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.ico:hover, .ico:focus {
  text-decoration: none;
}

.ico::before, .ico::after {
  display: inline-block;
  font-family: 'fontello';
  font-style: normal;
  font-size: 1em;
  vertical-align: baseline;
  speak: none;
}

.ico.ico--left::before {
  margin-right: 0.5em;
}

.ico.ico--right::after {
  margin-left: 0.5em;
}

.ico.ico--theme1::before, .ico.ico--theme1::after {
  color: #fff !important;
}

.ico.ico--theme2::before, .ico.ico--theme2::after {
  color: #000 !important;
}

.ico.ico--theme3::before, .ico.ico--theme3::after {
  color: #e8829c !important;
}

.ico.ico--theme4::before, .ico.ico--theme4::after {
  color: #a7e3e4 !important;
}

.ico.ico--theme5::before, .ico.ico--theme5::after {
  color: #333 !important;
}

.ico.ico--theme6::before, .ico.ico--theme6::after {
  color: #f0ad4e !important;
}

.ico.ico--theme7::before, .ico.ico--theme7::after {
  color: #c9302c !important;
}

.ico.ico--left.ico--angle-up::before, .ico.ico--right.ico--angle-up::after {
  content: '\e801';
}

.ico.ico--left.ico--angle-right::before, .ico.ico--right.ico--angle-right::after {
  content: '\e802';
}

.ico.ico--left.ico--angle-bottom::before, .ico.ico--right.ico--angle-bottom::after {
  content: '\e803';
}

.ico.ico--left.ico--angle-left::before, .ico.ico--right.ico--angle-left::after {
  content: '\e804';
}

.ico.ico--left.ico--home::before, .ico.ico--right.ico--home::after {
  content: '\e805';
}

.ico.ico--left.ico--twitter::before, .ico.ico--right.ico--twitter::after {
  content: '\e806';
}

.ico.ico--left.ico--facebook::before, .ico.ico--right.ico--facebook::after {
  content: '\e807';
}

.ico.ico--left.ico--mail::before, .ico.ico--right.ico--mail::after {
  content: '\e808';
}

.ico.ico--left.ico--attention::before, .ico.ico--right.ico--attention::after {
  content: '\e809';
}

.ico.ico--left.ico--location::before, .ico.ico--right.ico--location::after {
  content: '\e80a';
}

.ico.ico--left.ico--up-dir::before, .ico.ico--right.ico--up-dir::after {
  content: '\e80d';
}

.ico.ico--left.ico--right-dir::before, .ico.ico--right.ico--right-dir::after {
  content: '\e80b';
}

.ico.ico--left.ico--down-dir::before, .ico.ico--right.ico--down-dir::after {
  content: '\e800';
}

.ico.ico--left.ico--left-dir::before, .ico.ico--right.ico--left-dir::after {
  content: '\e80b';
}

/*
#styleguide
マージン

margin-topとmargin-bottomに5pxずつ50pxまで
```
<div class="mt0">テキスト</div>
<div class="mt5">テキスト</div>
<div class="mt10">テキスト</div>
<div class="mt50">テキスト</div>
```
*/
/* ==========================================================================
   IMPORTANT MARGIN
   ========================================================================== */
.mt0 {
  margin-top: 0px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

.mt5 {
  margin-top: 5px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mb25 {
  margin-bottom: 25px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mt35 {
  margin-top: 35px !important;
}

.mb35 {
  margin-bottom: 35px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mt45 {
  margin-top: 45px !important;
}

.mb45 {
  margin-bottom: 45px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mt55 {
  margin-top: 55px !important;
}

.mb55 {
  margin-bottom: 55px !important;
}

.mt60 {
  margin-top: 60px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

.mt65 {
  margin-top: 65px !important;
}

.mb65 {
  margin-bottom: 65px !important;
}

.mt70 {
  margin-top: 70px !important;
}

.mb70 {
  margin-bottom: 70px !important;
}

/*
#styleguide
フォントサイズ

font-sizeを2pxずつ50pxまで
```
<div class="fz12">テキスト</div>
<div class="fz18">テキスト</div>
<div class="fz24">テキスト</div>
<div class="fz30">テキスト</div>
<div class="fz36">テキスト</div>
<div class="fz42">テキスト</div>
```
*/
/* ==========================================================================
   IMPORTANT FONT SIZE
   ========================================================================== */
.fz12 {
  font-size: 12rem !important;
}

.fz14 {
  font-size: 14rem !important;
}

.fz16 {
  font-size: 16rem !important;
}

.fz18 {
  font-size: 18rem !important;
}

.fz20 {
  font-size: 20rem !important;
}

.fz22 {
  font-size: 22rem !important;
}

.fz24 {
  font-size: 24rem !important;
}

.fz26 {
  font-size: 26rem !important;
}

.fz28 {
  font-size: 28rem !important;
}

.fz30 {
  font-size: 30rem !important;
}

.fz32 {
  font-size: 32rem !important;
}

.fz34 {
  font-size: 34rem !important;
}

.fz36 {
  font-size: 36rem !important;
}

.fz38 {
  font-size: 38rem !important;
}

.fz40 {
  font-size: 40rem !important;
}

.fz42 {
  font-size: 42rem !important;
}

.fz44 {
  font-size: 44rem !important;
}

.fz46 {
  font-size: 46rem !important;
}

.fz48 {
  font-size: 48rem !important;
}

.fz50 {
  font-size: 50rem !important;
}

/* ==========================================================================
   IMPORTANT CLASS
   ========================================================================== */
.x-small {
  font-size: 80% !important;
}

.small {
  font-size: 91% !important;
}

.large {
  font-size: 120% !important;
}

.bold {
  font-weight: bold !important;
}

.normal {
  font-weight: normal !important;
}

.center {
  text-align: center !important;
}

.left {
  text-align: left !important;
}

.right {
  text-align: right !important;
}

.att {
  color: #ff0000 !important;
}

.borderNone {
  border: 0 !important;
}

.block {
  display: block !important;
}

.none {
  display: none !important;
}

.show {
  visibility: visible !important;
}

.hide {
  visibility: hidden !important;
}

.indent {
  padding-left: 1em !important;
  text-indent: -1em !important;
}

.disabled {
  cursor: default !important;
  pointer-events: none !important;
  opacity: .3 !important;
}

/* ==========================================================================
   viewportによって改行
   ========================================================================== */
/*
#styleguide
viewportによって改行

font-sizeを2pxずつ50pxまで
```
<p>321px（小さなスマートフォン）以下で<br class="br-xs">改行します</p>
<p>544px（大きなスマートフォン）以下で<br class="br-sm">改行します</p>
<p>768px（タブレット）以下で<br class="br-md">改行します</p>
<p>1000px（PC）以下で<br class="br-lg">改行します</p>
<p>1200px（大きな画面のPC）以下で<br class="br-xl">改行します</p>
```
*/
.br-sm {
  display: none;
}

@media only screen and (min-width: 544px) {
  .br-sm {
    display: block;
  }
}

.br-md {
  display: none;
}

@media only screen and (min-width: 768px) {
  .br-md {
    display: block;
  }
}

.br-lg {
  display: none;
}

@media only screen and (min-width: 1000px) {
  .br-lg {
    display: block;
  }
}

.br-xl {
  display: none;
}

@media only screen and (min-width: 1200px) {
  .br-xl {
    display: block;
  }
}

.brsp {
  display: block;
}

@media only screen and (min-width: 768px) {
  .brsp {
    display: none;
  }
}

/* ==========================================================================
   センターボックス
   ========================================================================== */
.cb, .greeting__inr {
  max-width: 1000px;
  min-width: 320px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  box-sizing: border-box;
}

.cb__inr {
  padding: 0 40px;
}

/*
#styleguide
テーマカラーによるclass

フォントカラーと背景色、ボーダーの色がテーマカラーごとclassに設定される
テーマカラーはstyle.scssに記述
!important付きなので使いどころに注意

```
<p class="color-theme1 bgColor-theme10 boColor-theme1" style="border-width:3px;border-style:solid;">テキストテキストテキストテキストテキストテキスト</p>
<p class="color-theme2 bgColor-theme9 boColor-theme2" style="border-width:3px;border-style:solid;">テキストテキストテキストテキストテキストテキスト</p>
<p class="color-theme3 bgColor-theme8 boColor-theme3" style="border-width:3px;border-style:solid;">テキストテキストテキストテキストテキストテキスト</p>
<p class="color-theme4 bgColor-theme7 boColor-theme4" style="border-width:3px;border-style:solid;">テキストテキストテキストテキストテキストテキスト</p>
<p class="color-theme5 bgColor-theme6 boColor-theme5" style="border-width:3px;border-style:solid;">テキストテキストテキストテキストテキストテキスト</p>
<p class="color-theme6 bgColor-theme5 boColor-theme6" style="border-width:3px;border-style:solid;">テキストテキストテキストテキストテキストテキスト</p>
<p class="color-theme7 bgColor-theme4 boColor-theme7" style="border-width:3px;border-style:solid;">テキストテキストテキストテキストテキストテキスト</p>
<p class="color-theme8 bgColor-theme3 boColor-theme8" style="border-width:3px;border-style:solid;">テキストテキストテキストテキストテキストテキスト</p>
<p class="color-theme9 bgColor-theme2 boColor-theme9" style="border-width:3px;border-style:solid;">テキストテキストテキストテキストテキストテキスト</p>
<p class="color-theme10 bgColor-theme1 boColor-theme10" style="border-width:3px;border-style:solid;">テキストテキストテキストテキストテキストテキスト</p>
```
*/
.color-theme1 {
  color: #fff !important;
}

.bgColor-theme1 {
  background-color: #fff !important;
}

.boColor-theme1 {
  border-color: #fff !important;
}

.color-theme2 {
  color: #000 !important;
}

.bgColor-theme2 {
  background-color: #000 !important;
}

.boColor-theme2 {
  border-color: #000 !important;
}

.color-theme3 {
  color: #e8829c !important;
}

.bgColor-theme3 {
  background-color: #e8829c !important;
}

.boColor-theme3 {
  border-color: #e8829c !important;
}

.color-theme4 {
  color: #a7e3e4 !important;
}

.bgColor-theme4 {
  background-color: #a7e3e4 !important;
}

.boColor-theme4 {
  border-color: #a7e3e4 !important;
}

.color-theme5 {
  color: #333 !important;
}

.bgColor-theme5 {
  background-color: #333 !important;
}

.boColor-theme5 {
  border-color: #333 !important;
}

.color-theme6 {
  color: #f0ad4e !important;
}

.bgColor-theme6 {
  background-color: #f0ad4e !important;
}

.boColor-theme6 {
  border-color: #f0ad4e !important;
}

.color-theme7 {
  color: #c9302c !important;
}

.bgColor-theme7 {
  background-color: #c9302c !important;
}

.boColor-theme7 {
  border-color: #c9302c !important;
}

/*
#overview
_parts.scss

*/
/* ==========================================================================
   共通 > メニュー ボタン
    <div id="hamburgerMenu" class="hamburgerMenu">
        <div class="hamburgerMenu__line"></div>
    </div>
    <!-- /.hamburgerMenu -->
   ========================================================================== */
.hamburgerMenu {
  width: 58px;
  height: 58px;
  position: absolute;
  top: 1px;
  right: 0;
  z-index: 10;
  display: block;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  border: 0;
  background: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hamburgerMenu::before, .hamburgerMenu::after {
  content: '';
  display: block;
}

.hamburgerMenu::before, .hamburgerMenu::after, .hamburgerMenu__line {
  width: 22px;
  height: 3px;
  position: absolute;
  left: 18px;
  background-color: #e8829c;
  transition: all 0.5s linear;
  border-radius: 1.5px;
}

.hamburgerMenu::before {
  top: 19.5px;
}

.hamburgerMenu__line {
  top: 27.5px;
}

.hamburgerMenu::after {
  top: 35.5px;
}

.hamburgerMenu.hamburgerMenu--active::before {
  -ms-transform: translate3d(0, 8px, 0) rotateZ(405deg);
  transform: translate3d(0, 8px, 0) rotateZ(405deg);
}

.hamburgerMenu.hamburgerMenu--active .hamburgerMenu__line {
  opacity: 0;
}

.hamburgerMenu.hamburgerMenu--active::after {
  -ms-transform: translate3d(0, -8px, 0) rotateZ(-405deg);
  transform: translate3d(0, -8px, 0) rotateZ(-405deg);
}

@media only screen and (min-width: 1000px) {
  .hamburgerMenu {
    display: none;
  }
}

/* ==========================================================================
   共通 > ページトップボタン
   <div id="btnPageTop" class="btnPageTop">
       <a href="#top" class="js-anchor">ページの先頭へ</a>
   </div>
   <!-- .btnPageTop -->
   ========================================================================== */
.btnPageTop {
  position: fixed;
  right: -50px;
  bottom: 28px;
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  transition: all 0.5s ease-in-out;
  z-index: 10;
}

.btnPageTop a {
  width: 50px;
  height: 50px;
  position: relative;
  display: block;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  outline: 0;
  transition: opacity 0.2s ease-in-out;
}

.btnPageTop a:hover, .btnPageTop a:focus {
  opacity: 1;
}

.btnPageTop a::before {
  content: '\e801';
  width: 50px;
  height: 50px;
  line-height: 45px;
  font-family: 'fontello';
  font-size: 40rem;
  color: #fff;
  text-indent: 0;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #999;
  border-radius: 25px;
}

.btnPageTop.btnPageTop--active {
  right: 30px;
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

/*
#styleguide
ボタン

テキストテキストテキストテキスト
```
<a href="" class="btn btn--appInfo">ボタン</a>
<a href="" class="btn btn--block btn--contact ico ico--left ico--mail">お問い合わせ・お申し込み</a>
<a href="" class="btn btn--block btn--companyInfo">ボタン</a>
<a href="" class="btn btn--block btn--back ico ico--left ico--left-dir">戻る</a>
<input type="button" value="ボタン" class="btn btn--appInfo">
<input type="submit" value="ボタン" class="btn btn--success">
<input type="reset" value="ボタン" class="btn btn--info">
<button class="btn btn--warning btn--ico ico ico--left ico--angle-up">ボタン</button>
<a href="" class="btn btn--danger ico ico--left ico--attention">ボタン</a>
<a href="" class="btn btn--block btn--ico ico ico--left ico--angle-up">ボタン</a>
<button class="btn" disabled>ボタン</button>
```
*/
/* ==========================================================================
   共通 > ボタン
    <input type="button" value="button" class="btn btn--primary">
    <input type="submit" value="submit" class="btn btn--secondary">
    <input type="reset" value="reset" class="btn btn--info">
    <button class="btn btn--warning">ボタンダグ</button>
    <span class="btn btn--danger">span</span>
    <a href="" class="btn btn--success btn--block">リンク</a>
   ========================================================================== */
.btn {
  min-width: 8em;
  margin: 0;
  padding: 0.475em 0;
  position: relative;
  display: inline-block;
  /*
	@if $parts-btn-font-family == $ff-base {
		line-height: 1.5;
		font-weight: bold;
		font-size: $parts-btn-font-size;
	} @else {
		font: bold 16rem/1.5 $parts-btn-font-family;
	}
*/
  font: bold 16rem/1.5 "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #fff;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  line-height: 1;
  border-radius: 2.125em;
  border: 2px solid transparent;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all 0.2s ease-in-out;
}

.btn:link, .btn:visited, .btn:hover, .btn:focus, .btn:active {
  color: #fff;
}

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .btn {
    font-family: Meiryo, sans-serif;
  }
}

.btn:hover, .btn:focus {
  color: white;
  text-decoration: none;
}

.btn.btn--block {
  width: 100%;
  display: block;
}

.btn.btn--ico {
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.btn.btn--ico::before, .btn.btn--ico::after {
  position: absolute;
  left: 1em;
}

.btn.btn--disabled, .btn[disabled] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: .3;
}

.btn.btn--appInfo {
  color: #e8829c;
  border-color: #e8829c;
  font-size: 18rem;
  padding-top: 0.777em;
  padding-bottom: 0.777em;
}

.btn.btn--appInfo:hover, .btn.btn--appInfo:focus {
  color: #f8d8e0;
  border-color: #f8d8e0;
}

.btn.btn--contact {
  color: #fff;
  background-color: #e8829c;
  border-color: #e8829c;
  font-size: 18rem;
  border-radius: 0;
  padding-top: 0.88em;
  padding-bottom: 0.88em;
}

.btn.btn--contact:hover, .btn.btn--contact:focus {
  color: white;
  background-color: #f8d8e0;
  border-color: #f8d8e0;
}

.btn.btn--companyInfo {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
  border-color: #fff;
  font-size: 18rem;
  border-radius: 0;
  padding-top: 0.775em;
  padding-bottom: 0.775em;
}

.btn.btn--companyInfo:hover, .btn.btn--companyInfo:focus {
  color: white;
  background-color: rgba(51, 51, 51, 0.2);
  border-color: white;
}

.btn.btn--back {
  color: #fff;
  background-color: #a7a7a7;
  border-color: #a7a7a7;
  font-size: 18rem;
  border-radius: 0;
  padding-top: 0.775em;
  padding-bottom: 0.775em;
}

.btn.btn--back:hover, .btn.btn--back:focus {
  color: white;
  background-color: #dadada;
  border-color: #dadada;
}

.btn.btn--warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}

.btn.btn--warning:hover, .btn.btn--warning:focus {
  color: white;
  background-color: #f8d9ac;
  border-color: #f8d9ac;
}

.btn.btn--danger {
  color: #fff;
  background-color: #c9302c;
  border-color: #c9302c;
}

.btn.btn--danger:hover, .btn.btn--danger:focus {
  color: white;
  background-color: #e27c79;
  border-color: #e27c79;
}

/*
#styleguide
矢印

テキストテキストテキストテキスト
```
<div class="arrow arrow--primary"></div>
```
*/
/* ==========================================================================
   arrow
   参考: 【cssarrowplease】http://www.cssarrowplease.com/
   ========================================================================== */
.arrow {
  position: relative;
}

.arrow::after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-style: solid;
}

.arrow.arrow--care::after {
  margin-left: -20px;
  top: 100%;
  left: 50%;
  border-top-width: 20px;
  border-right-width: 20px;
  border-bottom-width: 20px;
  border-left-width: 20px;
  border-top-color: #6abbc5;
}

.arrow.arrow--game::after {
  margin-left: -20px;
  top: 100%;
  left: 50%;
  border-top-width: 20px;
  border-right-width: 20px;
  border-bottom-width: 20px;
  border-left-width: 20px;
  border-top-color: #f2ad4a;
}

/* ==========================================================================
   ページ全体
   ========================================================================== */
.page {
  padding-top: 60px;
  overflow: hidden;
}

/* ==========================================================================
 *  
 *  _header.scss
 *
 *  Last Modified: 2018/08/12
 *  Last Editor: Toshiyuki Hara
 *
   ========================================================================== */
/* ==========================================================================
   ヘッダー
   ========================================================================== */
.header {
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #fff;
}

.header__inr {
  position: relative;
}

.header__logo {
  width: 140px;
  position: absolute;
  top: 11px;
  left: 15px;
  z-index: 2;
}

.header__contact {
  padding: 25px 20px;
  border-bottom: 1px solid #ccc;
  z-index: 1;
}

.header__contact a {
  height: 44px;
  display: block;
  line-height: 44px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: #deb740;
  border-radius: 22px;
}

@media only screen and (min-width: 1000px) {
  .header__logo {
    top: 10px;
    left: 13px;
    transition: all 0.2s ease-in-out;
  }
  .header__contact {
    width: 160px;
    height: 60px;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
  }
  .header__contact a {
    height: 60px;
    line-height: 60px;
    border-radius: 0;
  }
  .header__contact a:hover, .header__contact a:focus {
    background-color: #f0adbe;
  }
}

/* ==========================================================================
 *  
 *  _contents.scss
 * 
 *  Last Modified: 2018/08/12
 *  Last Editor: Toshiyuki Hara
 *
   ========================================================================== */
/* ==========================================================================
   コンテンツ
   ========================================================================== */
.contents {
  position: relative;
  overflow: hidden;
}

.contents--appInfo {
  background-color: #efedeb;
}

.contents--appInfo .contents__head {
  background: url(../img/appservice/bg_greeting.png) center top/cover no-repeat;
}

.contents--appInfo .contents__headInr {
  min-height: 60px;
  padding: 0.5em 10px;
  display: block;
}

.contents--appInfo .contents__title {
  margin-right: 25px;
  color: #fff;
  font-size: 22rem;
}

.contents--appInfo .contents__app {
  color: #fff;
  font-size: 16rem;
}

.contents--appInfo .contents__body {
  padding: 30px 5px;
}

.contents--appInfo .contents__foot {
  padding: 20px 20px;
}

@media only screen and (min-width: 768px) {
  .contents--appInfo .contents__headInr {
    padding: 0.5em 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
  }
  .contents--appInfo .contents__body {
    padding: 30px 0 0;
  }
  .contents--appInfo .contents__foot {
    padding: 40px 0;
  }
}

/* ==========================================================================
   hero
   ========================================================================== */
.hero img {
  max-width: none;
  width: 100%;
}

/* ==========================================================================
   greeting
   ========================================================================== */
.greeting {
  overflow: hidden;
  background: url(../img/appservice/bg_greeting.png) center center/cover no-repeat;
}

.greeting__inr {
  padding: 25px 20px 25px;
  text-align: center;
}

.greeting__inr p {
  color: #fff;
  margin: .5em 0;
}

.greeting__text01 {
  line-height: 1.471;
  font-weight: bold;
  font-size: 16rem;
}

.greeting__text02 {
  font-size: 14rem;
}

@media only screen and (min-width: 768px) {
  .greeting__inr {
    padding: 50px 20px 50px;
  }
  .greeting__text01 {
    font-size: 34rem;
  }
  .greeting__text02 {
    font-size: 18rem;
  }
}

/* ==========================================================================
   box
   ========================================================================== */
.box {
  overflow: hidden;
}

.box__inr {
  padding: 35px 0;
}

.box__title {
  padding: 0 5px 5px;
  display: inline-block;
  font-weight: bold;
  line-height: 1;
  font-size: 18rem;
  color: #000;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 63%, #a7e3e4 63%, #a7e3e4 100%);
}

.box__body {
  padding-top: 32px;
}

.box__categoyTitle {
  line-height: 34px;
  font-size: 16rem;
  color: #fff;
  text-align: center;
}

.box__categoyTitle--care {
  background-color: #6abbc5;
}

.box__categoyTitle--game {
  background-color: #f2ad4a;
}

.box--contact {
  background-color: #fff;
}

.box--contact .box__inr {
  padding: 35px 20px;
}

.box--contact .box__body {
  text-align: center;
}

.box--contact .box__body p {
  font-weight: bold;
  color: #555;
}

.box--companyInfo {
  background: url(../img/appservice/bg_companyInfo.jpg) 0 0/cover no-repeat;
}

.box--companyInfo .box__inr {
  padding: 35px 20px;
}

.box--companyInfo .box__title {
  color: #fff;
}

.box--companyInfo .box__body {
  text-align: center;
}

.box--companyInfo .box__body p {
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .box__inr {
    padding: 70px 0;
  }
  .box__title {
    font-size: 30rem;
  }
  .box__body {
    padding-top: 64px;
  }
  .box__categoyTitle {
    padding: 15px 0;
    line-height: 1;
    font-size: 24rem;
  }
  .box--contact .box__body p {
    font-size: 20rem;
  }
  .box--companyInfo .box__body p {
    font-size: 20rem;
  }
  .box--companyInfo .box__body p span {
    font-size: 22rem;
  }
}

/* ==========================================================================
   contactBtn
   ========================================================================== */
.contactBtn {
  width: 100%;
  margin-top: 15px;
}

@media only screen and (min-width: 768px) {
  .contactBtn {
    width: 700px;
    margin: 30px auto 0;
  }
  .contactBtn .btn.btn--contact {
    font-size: 34rem;
  }
}

/* ==========================================================================
   companyInfoBtn
   ========================================================================== */
.companyInfoBtn {
  width: 100%;
  margin-top: 15px;
}

@media only screen and (min-width: 768px) {
  .companyInfoBtn {
    width: 340px;
    margin: 30px auto 0;
  }
  .companyInfoBtn .btn.btn--companyInfo {
    font-size: 22rem;
  }
}

/* ==========================================================================
   backBtn
   ========================================================================== */
.backBtn {
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 768px) {
  .backBtn {
    width: 160px;
  }
}

/* ==========================================================================
 *  
 *  _footer.scss
 * 
 *  Last Modified: 2018/08/12
 *  Last Editor: Toshiyuki Hara
 *
   ========================================================================== */
/* ==========================================================================
   フッター
   ========================================================================== */
.footer {
  padding: 1.286em 0;
  color: #fff;
  text-align: center;
  font-size: 12rem;
  background-color: #333;
}

.footer__copyright {
  font: 12rem/1 "Helvetica Neue";
}

@media only screen and (min-width: 768px) {
  .footer {
    padding: 2.85em 0;
    font-size: 14rem;
  }
  .footer__copyright {
    font-size: 14rem;
  }
}

/* ==========================================================================
 *  
 *  globalNav.scss
 *  
 *  (C) Cosa-L Co.,Ltd.All Rights Reserved.
 *  
 *  http://www.cosa-l.co.jp/
 *
 *  Last Modified: 2018/08/12
 *  Last Editor: Toshiyuki Hara
 *
   ========================================================================== */
/* ==========================================================================
   globalNav
   ========================================================================== */
.globalNav {
  line-height: 1;
  padding-bottom: 40px;
  border-bottom: 1px solid #ccc;
}

.globalNav__item {
  display: block;
}

.globalNav a {
  padding: 22px 0;
  display: block;
  text-align: center;
  color: #e8829c;
}

.globalNav a:hover, .globalNav a:focus {
  text-decoration: none;
}

@media only screen and (min-width: 1000px) {
  .globalNav {
    width: 100%;
    padding-bottom: 0;
    position: absolute;
    top: 7px;
    left: 0;
    font-size: 0;
    text-align: center;
    border: 0;
    transition: top 0.2s ease-in-out;
  }
  .globalNav__item {
    display: inline-block;
    font-size: 16rem;
  }
  .globalNav__item.globalNav__item--current a span::before {
    border-color: #e8829c;
  }
  .globalNav__item a {
    padding: 14px 20px 0;
    color: #000;
  }
  .globalNav__item a:hover span::before, .globalNav__item a:focus span::before {
    border-color: #e8829c;
  }
  .globalNav__item span {
    padding-bottom: 14px;
    position: relative;
    display: inline-block;
  }
  .globalNav__item span::before {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    border: 2px solid #e8829c;
    border-radius: 2px;
    transition: border-color 0.2s ease-in-out;
    border-color: transparent;
  }
}

/* ==========================================================================
   slideMenu
   ========================================================================== */
.slideMenu {
  width: 100%;
  height: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.58);
  z-index: 2;
  transition: height 0.2s ease-in-out;
}

.slideMenu__inr {
  padding-top: 30px;
  background-color: #fff;
}

.slideMenu--active {
  height: 100vh;
  overflow: auto;
}

@media only screen and (min-width: 1000px) {
  .slideMenu {
    width: auto;
    height: 60px;
    padding: 0;
    position: relative;
    background-color: inherit;
    z-index: 1;
  }
}

/* ==========================================================================
 *  
 *  _appItem.scss
 * 
 *  Last Modified: 2018/08/16
 *  Last Editor: Toshiyuki Hara
 *
   ========================================================================== */
/* ==========================================================================
   appItem
   ========================================================================== */
.appItem {
  overflow: hidden;
}

.appItem__inr {
  padding: 25px 20px;
  display: block;
}

.appItem__img {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}

.appItem__detail {
  width: 100%;
  padding-right: 0;
}

.appItem__head {
  margin-bottom: 20px;
}

.appItem__title {
  font-weight: bold;
  line-height: 1.538;
  font-size: 18rem;
}

.appItem__subTitle {
  font-weight: bold;
  font-size: 16rem;
}

.appItem:nth-child(2n) {
  background-color: #efedeb;
}

@media only screen and (min-width: 768px) {
  .appItem__inr {
    padding: 50px 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .appItem__img {
    width: 410px;
    margin-bottom: 0;
  }
  .appItem__detail {
    width: 590px;
    padding-right: 15px;
  }
  .appItem__title {
    font-size: 26rem;
  }
  .appItem__subTitle {
    font-size: 20rem;
  }
}

/* ==========================================================================
   dlList
   ========================================================================== */
.dlList {
  margin-top: 20px;
  font-size: 0;
}

.dlList--entry {
  margin-top: 0;
  padding: 20px 0;
  text-align: center;
  background-color: #eee;
}

.dlList__item {
  margin: 0 5px;
  display: inline-block;
}

.dlList__item:first-child {
  margin-left: 0;
}

.dlList__item:last-child {
  margin-right: 0;
}

/* ==========================================================================
   appItemBtn
   ========================================================================== */
.appItemBtn {
  width: 100%;
  margin-top: 20px;
}

@media only screen and (min-width: 768px) {
  .appItemBtn {
    width: 250px;
    margin-top: 40px;
  }
}

/* ==========================================================================
 *  
 *  _entry.scss
 * 
 *  Last Modified: 2018/08/16
 *  Last Editor: Toshiyuki Hara
 *
   ========================================================================== */
/* ==========================================================================
   コンテンツ
   ========================================================================== */
.entry {
  padding: 10px;
  background-color: #fff;
}

.entry__head {
  min-height: 140px;
  padding: 0.5em 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  background-color: #e8829c;
}

.entry__title {
  font-size: 22rem;
  color: #fff;
}

.entry__subTitle {
  font-weight: bold;
  font-size: 18rem;
  color: #fff;
}

.entry__body {
  padding: 15px 20px;
}

@media only screen and (min-width: 768px) {
  .entry__title {
    font-size: 28rem;
  }
  .entry__subTitle {
    font-size: 22rem;
  }
  .entry__body {
    padding: 30px 40px;
  }
}

.post {
  /**
 * Unreset CSS
 *
 * Copyright (C) 2016 Kite (ixkaito@gmail.com)
 * License MIT
 * Version 1.0.0
 *
 * Unreset CSS restores browsers' default element styles which are reset by
 * Eric Meyer's Reset CSS, YUI 3 Reset CSS, HTML5 Reset Stylesheet of HTML5
 * Doctor, or Tim Murtaugh's HTML5 Reset.
 */
  /* ==========================================================================
	   WordPress が出力するクラス
	   ========================================================================== */
}

.post p {
  margin: 1em 0;
}

.post blockquote,
.post figure {
  margin: 1em 40px;
}

.post q {
  quotes: "“" "”" "‘" "’";
}

.post q:before {
  content: open-quote;
}

.post q:after {
  content: close-quote;
}

.post hr {
  border: 1px inset;
  box-sizing: border-box;
  margin: 0.5em autl;
}

.post h1 {
  font-size: 2em;
  font-weight: bold;
  margin: 0.67em 0;
}

.post h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0.83em 0;
}

.post h3 {
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0;
}

.post h4 {
  font-size: 1.00em;
  font-weight: bold;
  margin: 1.33em 0;
}

.post h5 {
  font-size: 0.83em;
  font-weight: bold;
  margin: 1.67em 0;
}

.post h6 {
  font-size: 0.67em;
  font-weight: bold;
  margin: 2.33em 0;
}

.post table {
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

.post thead,
.post tbody,
.post tfoot,
.post tr {
  border-color: inherit;
  vertical-align: middle;
}

.post td, .post th {
  padding: 1px;
  vertical-align: inherit;
}

.post th {
  font-weight: bold;
}

.post caption {
  text-align: center;
}

.post ul, .post menu {
  list-style-type: disc;
  margin: 1em 0;
  padding: 0 0 0 40px;
}

.post ol {
  list-style-type: decimal;
  margin: 1em 0;
  padding: 0 0 0 40px;
}

.post ul ul, .post ol ul {
  list-style-type: circle;
}

.post ul ul ul, .post ul ol ul, .post ol ul ul, .post ol ol ul {
  list-style-type: square;
}

.post dd {
  margin: 0 0 0 40px;
}

.post dl {
  margin: 1em 0;
}

.post ul ul, .post ul ol, .post ul menu, .post ul dl, .post ol ul, .post ol ol, .post ol menu, .post ol dl, .post menu ul, .post menu ol, .post menu menu, .post menu dl, .post dl ul, .post dl ol, .post dl menu, .post dl dl {
  margin: 0;
}

.post legend {
  padding: 0 2px;
}

.post fieldset {
  border-style: groove;
  border-width: 2px;
  border: 2px groove ThreeDFace;
  margin: 0 2px;
  padding: 0 2px 3px;
  -webkit-padding-before: 0.35em;
  -webkit-padding-start: 0.75em;
  -webkit-padding-end: 0.75em;
  -webkit-padding-after: 0.625em;
}

.post ins {
  background-color: transparent;
  font-weight: inherit;
  text-decoration: underline;
}

.post b, .post strong {
  font-weight: bold;
}

.post i, .post cite, .post em, .post var, .post address, .post dfn {
  font-style: italic;
  font-weight: inherit;
}

.post abbr[title], .post dfn[title] {
  border-bottom: 0;
  cursor: default;
  font-weight: inherit;
}

.post tt, .post code, .post kbd, .post samp {
  font-family: monospace;
  font-weight: inherit;
}

.post pre {
  font-family: monospace;
  margin: 1em 0;
  white-space: pre;
}

.post mark {
  background-color: yellow;
  color: black;
  font-style: normal;
  font-weight: inherit;
}

.post big {
  font-size: larger;
  font-weight: inherit;
}

.post small {
  font-size: smaller;
  font-weight: inherit;
}

.post sub, .post sup {
  font-weight: inherit;
  line-height: inherit;
  position: static;
}

.post sub {
  font-size: smaller;
  bottom: 0;
  vertical-align: sub;
}

.post sup {
  font-size: smaller;
  top: 0;
  vertical-align: super;
}

.post ruby > rt {
  font-size: 50%;
}

.post iframe {
  border: 2px inset;
}

.post .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.post .alignleft {
  float: left;
  margin-right: 1em;
}

.post .alignright {
  float: right;
  margin-left: 1em;
}

/*# sourceMappingURL=maps/style-appservice.css.map */