@charset "utf-8";

/*=========================================================================

【設計思想】
・FLOCSS
・compornentを意識する
・スタイルの打ち消しより追加

【命名規則】
・FLOCSS/BEM
・使用頻度高、使いまわせるclassは「c-」(compornent)
・使用頻度低、固有のclassは「p-」(project)
・見た目ではなく意味でつける
・日本語のローマ字読みは基本NG
・冗長＜わかりやすさ

=========================================================================*/


/*------------------------------------------------------------------------

Compornent 
・ジャンル・パターンに縛られずに使いまわせるもの
・汎用性の高いもの
・サイト内で4回以上出てくるスタイル

------------------------------------------------------------------------*/


/*---------------------------------------------------

header

---------------------------------------------------*/

.c-header-logo {
  clear: both;
  float: left;
  margin: 38px 0 30px 0;
}

.c-header-logo a {
  width: auto;
  display: inline-block;
}

.c-header-logo img {
  vertical-align: middle;
  width: 100%;
  height: auto;
}

.c-site-category {
  display: inline-block;
  font-size: 13px;
  font-size: 1.3rem;
  margin-left: 20px;
  vertical-align: bottom;
  line-height: 0.7;
  color: #555;
  /*    padding: 15px 0 12px 0;*/
  box-sizing: border-box;
}

.c-keyvisual {
  margin-bottom: 60px;
  position: relative;
}

.c-keyvisual__copy {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  display: block;
  height: 150px;
}

.c-keyvisual__copy-main {
  font-family: "Koburina Gothic W6 JIS2004";
  font-size: 36px;
  color: #fff;
  text-align: center;
}

.c-heading {
  padding: 60px;
  position: relative;
}

.c-heading--sky {
  background-image: url(/img/common/clouds.jpg);
  -webkit-animation: drop 120s linear infinite;
  -moz-animation: drop 120s linear infinite;
  animation: drop 120s linear infinite;
  box-shadow:inset 1px 0px 1px 1px rgba(0,0,0,.05);
}

@keyframes drop {
  0% {
    background-position: top 0px left 0px;
  }
  100% {
    background-position: top 0px left 1024px;
  }
}

@-moz-keyframes drop {
  0% {
    background-position: top 0px left 0px;
  }
  100% {
    background-position: top 0px left 1024px;
  }
}

@-webkit-keyframes drop {
  0% {
    background-position: top 0px left 0px;
  }
  100% {
    background-position: top 0px left 1024px;
  }
}

@media screen and (max-width: 767px) {
  .c-header-logo {
    float: left;
    width: 180px;
    height: 56px;
    margin: auto;
    box-sizing: border-box;
    padding: 20px 0 0 10px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
  }
  .c-header-logo img {
    width: 100%;
    height: auto;
    vertical-align: baseline;
  }
  .c-header-logo p {
    display: none;
  }
  .c-keyvisual__copy {
    width: 88%;
    height: 120px;
  }
  .c-keyvisual__copy-main {
    font-size: 2.4rem;
  }
  .c-heading {
    padding: 60px 6%;
  }
}

/*
@media screen and (max-width: 320px) {
  .c-header-logo {
    width: 130px;
    height: 56px;
    box-sizing: border-box;
    padding: 22px 0 0 5px;
  }
}
*/


/*---------------------------------------------------

    footer

---------------------------------------------------*/

.c-footer-officeinfo {
  width: 500px;
  margin-right: 40px;
}

.c-footer-officeinfo__text {
  margin-bottom: 20px;
}

.c-footer-block {
  width: 230px;
  margin-right: 40px;
}

.c-footer-block:last-child {
  margin: 0;
}

.c-pagetop {
  float: right;
  display: block;
  padding: 5px 15px;
  margin: -37px 20px 0 0;
  color: #555;
  text-decoration: none !important;
  font-size: 10px;
  font-size: 1.0rem;
  line-height: 2.0;
  border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0;
  -o-border-radius: 6px 6px 0 0;
  -ms-border-radius: 6px 6px 0 0;
  transition: opacity 0.3s ease;
  background: #F4F3F0;
  z-index: 10;
}

.c-pagetop:before {
  content: "\f3d8";
  font-family: "ionicons";
  vertical-align: middle;
  font-size: 20px;
  margin: 0 10px 0 0;
  line-height: 1;
}

.c-pagetop:hover {
  opacity: 0.7;
}

.c-copyright {
  display: block;
  height: 20px;
  padding-top: 10px;
  color: #fff;
  text-align: center;
  line-height: 1.0;
  background: #444;
  font-size: 10px;
  font-size: 1.0rem;
  clear: both;
}

@media screen and (max-width: 767px) {
  .c-footer-officeinfo {
    width: 100%;
    margin-right: 0;
    margin-bottom: 8%;
  }
  .c-footer-block {
    width: 100%;
    margin-right: 0;
    margin-bottom: 8%;
    clear: both;
  }
  .c-pagetop {
    display: none!important;
  }
}


/*-------------------------------------

List リスト専用コンポーネント ulにつけるclass

--------------------------------------*/


/*ulにつけるclass 共通*/

.c-list li {
  margin: 0 0 20px 0;
  line-height: 1.4;
  position: relative;
}

.c-list li:before {
  margin: 0 5px 0 0;
  color: #f29600;
  font-size: 11px;
  position: absolute;
  top: 3px;
  left: 0;
}

.c-list li:last-child {
  margin-bottom: 0;
}


/*font-sizeが小さいとき*/

.c-list--small li {
  margin-bottom: 10px;
  line-height: 1.2;
}


/*list-style ●*/

.c-list--circle li {
  padding-left: 15px;
}

.c-list--circle li:before {
  content: '\f111';
  font-family: 'FontAwesome';
}


/*list-style checkbox*/

.c-list--checkbox li {
  padding-left: 25px;
}

.c-list--checkbox li:before {
  content: '\f373';
  font-family: 'ionicons';
  font-size: 2.0rem;
  line-height: 1;
}


/*list-style >*/

.c-list--arrow li {
  padding-left: 15px;
}

.c-list--arrow li:before {
  content: '\f125';
  font-family: 'ionicons';
}


/*リスト横並び*/

.c-list--float li {
  float: left;
  margin: 0 20px 10px 0;
}


/*リスト漢数字ナンバー*/

.c-list--cjk {
  list-style-type: cjk-ideographic;
  list-style-position: inside;
}

/*リスト-サイトマップ*/

.c-list--sitemap a:hover{
   color: #2FBBFF;
}

.c-list--sitemap li{
  margin-bottom: 10px;
  padding-left: 15px;
}

.c-list--sitemap li:before{
  content: '●';
  font-size: 5px;
  color:#0088CC;
}

.c-list--sitemap li ul li{
  padding-left: 20px;
  font-size: 1.3rem;
  margin-bottom: 5px;
}

.c-list--sitemap li ul li:first-child{
  margin-top: 5px;
}

.c-list--sitemap li ul li:before{
  font-size: 2px;
}

@media screen and (max-width: 767px) {
  .c-list--sp-panel {
    display: flex;
    flex-wrap: wrap;
  }
  .c-list--sp-panel > li {
    width: 47.5%;
    margin: 0 5% 0 0;
    box-sizing: border-box;
    padding: 2% 2% 2% 3%;
  }
  .c-list--sp-panel > li:nth-child(2n) {
    margin-right: 0;
  }
  .c-list--sp-panel > li:before {
    padding-top: 5%;
  }
}


/*-------------------------------------

Text Link テキストリンク

--------------------------------------*/

.c-link {
  margin: 0;
  line-height: 1.2;
  vertical-align: middle;
}

.c-link:before {
  content: '\f125';
  font-family: 'ionicons';
  text-decoration: none;
  color: #f29600;
  font-size: 11px;
  margin-right: 5px;
}

a.c-link:hover {
  color: #2FBBFF;
}

.c-link--inner {
  text-decoration: none;
}

.c-link--inner:before {
  content: "\f3d0";
  font-family: "ionicons";
  border-bottom: 1px dotted #333;
  text-decoration: none;
  margin-right: 10px;
  color: #333;
}

.c-link--anchor {
  border-bottom: 1px dotted #0088cc;
}

.c-link--anchor:hover {
  border-bottom: 0;
  color: #2FBBFF;
}


/*※印の注釈*/

.c-annotation {
  padding: 0 0 0 15px;
  position: relative;
  font-size: 13px;
  line-height: 1.4;
  color: #999;
}

.c-annotation:before {
  content: "※";
  position: absolute;
  left: 0;
}

.c-annotation--1 {
  padding: 0 0 0 25px;
}

.c-annotation--1:before {
  content: "※1";
}

.c-annotation--2 {
  padding: 0 0 0 25px;
}

.c-annotation--2:before {
  content: "※2";
}

.c-annotation--3 {
  padding: 0 0 0 25px;
}

.c-annotation--3:before {
  content: "※3";
}

.c-annotation--4 {
  padding: 0 0 0 25px;
}

.c-annotation--4:before {
  content: "※4";
}


/*---------------------------------------------------
    
contact お問合わせ表示・ボタン
    
---------------------------------------------------*/

.c-contact-tel {
/*  width: 250px;*/
  height: 40px;
  padding: 0;
  cursor: default;
  font-size: 26px;
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 0.7;
  text-decoration: none;
  font-family: "UD Shin Go Conde90 B";
  display: block;
}

.l-header .c-contact-tel {
  position: absolute;
  top: 40px;
  right: 230px;
}

.c-contact-tel p.tel-number {
  display: inline-block;
}

.c-contact-tel span {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  font-size: 1.0rem;
  color: #333;
  letter-spacing: 0;
  line-height: 1.3;
  font-family: Meiryo, メイリオ, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}

.c-contact-form {
  color: #f29600;
  background: #fff;
  display: block;
/*  width: 172px;*/
  padding: 8px 20px 10px 20px;
  text-decoration: none;
  font-size: 16px;
  font-size: 1.6rem;
  text-align: center;
  border: 3px solid #f29600;
  font-family: "Koburina Gothic W6 JIS2004";
}

.l-header .c-contact-form {
  position: absolute;
  top: 30px;
  right: 0;
  color: #f29600;
  box-sizing: border-box;
  text-align: center;
}

.c-contact-tel i,
.c-contact-form i {
  display: inline-block;
  text-align: center;
  font-size: 32px;
  margin: 0 5px 0 0;
  color: #f29600;
  line-height: 0.5;
  vertical-align: middle;
}

.c-contact-tel i:before,
.c-contact-form i:before {
  line-height: 0.5;
  /*    margin-right: 10px;*/
}

.c-contact-form:hover {
  opacity: 1;
  background: #f29600;
  color: #fff!important;
}

.c-contact-form,
.c-contact-form i {
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
  letter-spacing: 0;
}

.c-contact-form:hover i {
  transform: rotateY(180deg);
  color: #fff;
}

.c-contact-form i {
  /*    margin: 0 5px 0 0;*/
  font-size: 25px;
}

.c-contact-form span {
  line-height: 1;
  font-size: 16px;
  vertical-align: middle;
}

a.c-contact-tel,
a.c-contact-tel:visited {
  color: #333;
}

@media screen and (max-width: 767px) {
  .c-header-logo {
    float: left;
    width: 180px;
    height: 56px;
    margin: auto;
    box-sizing: border-box;
    padding: 20px 0 0 5%;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
  }
  .c-header-logo img {
    width: 100%;
    height: auto;
    vertical-align: baseline;
  }
  .c-header-logo p {
    display: none;
  }
  .l-header .c-contact-tel {
    width: 56px;
    height: 56px;
    padding: 0;
    font-size: 24px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 0.7;
    text-decoration: none;
    font-family: "Koburina Gothic W6 JIS2004";
    display: block;
    padding: 3px;
    box-sizing: border-box;
    background: #f29600;
  }
  .l-header .c-contact-form {
    color: #f29600;
    background: #F4F3F0;
    display: block;
    width: 56px;
    height: 56px;
    padding: 3px;
    text-decoration: none;
    font-size: 16px;
    font-size: 1.6rem;
    text-align: center;
    border: none;
    font-family: "Koburina Gothic W6 JIS2004";
  }
  .l-header .c-contact-form {
    position: absolute;
    top: 0;
    right: 56px;
  }
  .l-header .c-contact-tel {
    position: absolute;
    top: 0;
    right: 112px;
    color: #f29600;
    box-sizing: border-box;
    text-align: center;
  }
  .l-header .c-contact-tel i,
  .l-header .c-contact-form i {
    display: block;
    text-align: center;
    font-size: 20px;
    margin: 0 0 3px 0;
    color: #f29600;
    vertical-align: middle;
  }
  .l-header .c-contact-tel i {
    font-size: 22px;
    margin-bottom: 1px;
    color: #fff;
  }
  .l-header .c-contact-tel i:before,
  .l-header .c-contact-form i:before {
    line-height: 1;
    margin-right: 0;
  }
  .l-header .c-contact-form p.u-sp-db,
  .l-header .c-contact-tel p.u-sp-db {
    font-size: 11px;
    line-height: 1.1;
    color: #333;
    text-align: center;
    color: #666;
    letter-spacing: 0;
  }
  .l-header .c-contact-tel p.u-sp-db {
    color: #fff;
  }
  .l-header .c-contact-tel span,
  .l-header .c-contact-form span,
  .l-header .c-contact-tel p.tel-number {
    display: none;
  }
  /*上書き*/
  .l-header .c-contact-form:hover {
    opacity: 1;
    background: #fff;
    color: #f29600;
  }
  /*上書き*/
  .l-header .c-contact-form:hover i {
    color: #f29600;
  }
}


@media screen and (max-width: 320px) {
.c-header-logo {
    width: 125px;
  }
}

/*-------------------------------------

Crumb パンくず

--------------------------------------*/

.c-crumb {
  line-height: 1;
  padding: 15px 0;
  width: 100%;
  margin: auto;
  background: #F4F3F0;
}

.c-crumb__list {
  width: 1040px;
  margin: auto;
  overflow: hidden;
}

.c-crumb__list li {
  float: left;
  margin-bottom: 0;
  font-size: 11px;
  font-size: 1.1rem;
  color: #999;
}

.c-crumb li:before {
  content: "\f3d1";
  font-family: "ionicons";
  margin: 0 10px;
}

.c-crumb li:first-child:before {
  content: none;
  margin-left: 0;
}

.c-crumb li a {
  color: #666;
}

.c-crumb li a:link {
  text-decoration: none;
}

.c-crumb li a:visited {}

.c-crumb li a:hover {
  color: #F76344;
  text-decoration: underline;
}

.c-crumb li a:active {}

/*c-heading内のパンくず用modifier*/

.c-crumb--oversky{
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
}

@media screen and (max-width: 767px) {
  .c-crumb {
    line-height: 1;
    width: 100%;
    margin: auto;
  }
  .c-crumb__list {
    width: 88%;
    margin: auto;
  }
}


/*-------------------------------------

Title タイトル装飾 

--------------------------------------*/

.c-title {
  border: none;
  font-weight: normal;
  font-size: 30px;
  font-size: 3.0rem;
  font-family: "Koburina Gothic W6 JIS2004";
  margin: 0 0 30px 0;
  padding: 0;
  text-align: center;
  line-height: 1.2;
}

.c-title:after {
  content: "";
  display: inline-block;
  width: 60px;
  height: 1px;
  margin: auto;
  background: #f29600;
}

.c-title--icon:before {
  content: "\f24e";
  font-family: 'FontAwesome';
  font-size: 20px;
  display: inline-block;
  color: #f29600;
  text-align: center;
  background: none;
  position: static;
  margin-bottom: 20px;
  width: 25px;
  height: 23px;
}

.c-title__category {
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.c-heading > .c-title {
  margin-bottom: 0;
}

.c-heading--sky > .c-title {
  font-size: 3.4rem;
}

.c-title-section {
  font-family: "Koburina Gothic W6 JIS2004";
  font-size: 26px;
  font-size: 2.6rem;
  color: #f29600;
  margin: 0 0 20px 0;
  line-height: 1.2;
}

.c-title-section--number {
  color:#585549;
/*  font-size: 2.0rem;*/
  position: relative;
  padding-left: 40px;
}

.c-title-section--number span {
  color: #f29600;
  border-bottom: 1px solid #f29600;
  position: absolute;
  left: 0;
}

.c-title-segment {
  font-weight: bold;
  font-size: 22px;
  font-size: 2.2rem;
  margin: 0 0 15px 0;
  line-height: 1.2;
  font-family: "Koburina Gothic W6 JIS2004";
}

.c-title-segment--number {
  color:#585549;
/*  font-size: 2.0rem;*/
  position: relative;
  padding-left: 40px;
}

.c-title-segment--number span {
  color: #f29600;
  border-bottom: 1px solid #f29600;
  position: absolute;
  left: 0;
}

.c-title-segment02 {
  font-weight: bold;
  font-size: 18px;
  font-size: 1.8rem;
  margin: 0 0 10px 0;
  line-height: 1.2;
  font-family: "Koburina Gothic W6 JIS2004";
}

@media screen and (max-width: 767px) {
  .c-title{
    font-size: 2.6rem;
  }
  .c-title-section{
    font-size: 2.2rem;
  }
  .c-title-segment{
    font-size: 2.0rem;
  }
  .c-title-icon {
    font-size: 2.4rem;
    margin: 0 0 6% 0;
  }
  .c-title-section {
    font-size: 2.0rem;
    margin: 0 0 4% 0;
  }
  .c-title-section--number {
    font-size: 1.8rem;
  }
  
  .c-heading--sky > .c-title {
  font-size: 3.0rem;
}
}


/*-------------------------------------

Button ボタンのパーツ

--------------------------------------*/


/*ボタン共通*/

.c-btn {
  box-sizing: border-box;
  border: 3px solid transparent;
  font-weight: bold;
  text-decoration: none;
  margin: 0 auto;
  display: inline-block;
  min-width: 48.07%;
  text-align: center;
  padding: 10px 25px;
  position: relative;
  -webkit-transition: all .20s ease;
  -moz-transition: all .20s ease;
  -ms-transition: all .20s ease;
  -o-transition: all .20s ease;
  transition: all .20s ease;
  color: #f29600;
}

.c-btn:before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transition: all .20s ease;
  -moz-transition: all .20s ease;
  -ms-transition: all .20s ease;
  -o-transition: all .20s ease;
  transition: all .20s ease;
  display: inline-block;
  margin-right: 15px;
  vertical-align: middle;
}

.c-btn:hover {
  color: #fff;
  background: #f29600;
  border-color:#f29600;
}

.c-btn:hover:before {
  border-color: #fff;
  margin-right: 10px;
  margin-left: 5px;
}

.c-btn:hover:after {
  box-shadow: 0 0 0 #f29600;
}


/*ページ中のメインボタン*/

.c-btn--default {
  background-color: #f29600;
  color: #fff;
  box-shadow: 0 3px 3px -3px rgba(0,0,0,1);
}

.c-btn--default:hover {
  color: #f29600;
  background: #fff;
  box-shadow: none;
}

.c-btn--default:hover:before {
  border-color: #f29600;
  margin-right: 10px;
  margin-left: 5px;
}

/*色反転*/

.c-btn--reverse{
  background-color: #fff;
  color: #f29600;
  box-shadow: 0 3px 3px -3px rgba(0,0,0,1);
  border-color: #f29600;
}

.c-btn--reverse:hover {
  color: #fff;
  background: #f29600;
  box-shadow: none;
}

.c-btn--reverse:hover:before {
  border-color: #fff;
  margin-right: 10px;
  margin-left: 5px;
}


/*重要ボタン*/

.c-btn--important {
  background-color: #F36332;
  border-color: #F36332;
  color: #fff;
  box-shadow: 0 3px 3px -3px rgba(0,0,0,1);
}

.c-btn--important:hover {
  color: #F36332;
  background: #fff;
  border-color: #F36332;
  box-shadow: none;
}

.c-btn--important:hover:before {
  border-color: #F36332;
  margin-right: 10px;
  margin-left: 5px;
}


/*小さいボタン*/

.c-btn--small {
  padding: 5px 7px;
  border: 1px solid #f29600;
  font-size: 1.3rem;
  min-width: 25%;
  box-sizing: border-box;
}

.c-btn--small:before {
  margin-right: 7px;
}

.c-btn--small:hover:before {
  margin-right: 5px;
  margin-left: 2px;
}


/*センタリングさせたいとき*/

.c-btn--center {
  display: table;
  margin: auto;
}


/*右寄せさせたいとき*/

.c-btn--right {
  display: table;
  margin: auto 0 auto auto;
}


/*width100%にさせたいとき*/

.c-btn--w100 {
  width: 100%;
}


/*c-panel内部に置くとき*/

.c-btn--inner-panel {
  display: block;
  margin: 0 20px 20px 20px;
  box-sizing: border-box;
  background: #fff;
  vertical-align: bottom;
}


/*次のページへ*/

.c-next-page {
  box-sizing: border-box;
  border: 3px solid #4B99CF;
  font-weight: bold;
  text-decoration: none;
  margin: 0 auto;
  display: inline-block;
  min-width: 48.07%;
  text-align: center;
  padding: 10px 25px;
  position: relative;
  -webkit-transition: all .20s ease;
  -moz-transition: all .20s ease;
  -ms-transition: all .20s ease;
  -o-transition: all .20s ease;
  transition: all .20s ease;
}

.c-next-page:before {
  content: "NEXT";
  font-size: 1.3rem;
  margin-right: 10px;
  vertical-align: middle;
  font-weight: normal;
  color: #333;
  -webkit-transition: all .20s ease;
  -moz-transition: all .20s ease;
  -ms-transition: all .20s ease;
  -o-transition: all .20s ease;
  transition: all .20s ease;
}

.c-next-page:hover {
  background: #4B99CF;
  color: #fff;
}

.c-next-page:hover:before {
  color: #fff;
}

.c-next-page--case:before {
  content: "次の事例";
}

@media screen and (max-width: 767px) {
  .c-btn {
    min-width: 100%;
  }
  .c-keyvisual__copy .c-btn {
    min-width: auto;
    display: inline-block;
  }
  .c-btn--inner-panel {
    min-width: auto;
    display: block;
    margin: 0 20px 20px 20px;
    box-sizing: border-box;
    background: #fff;
  }
  .c-next-page:before {
    display: block;
    margin-right: 0;
  }
}


/*-------------------------------------

Menu メニュー関係

--------------------------------------*/


/*-----------------ページ内リンクメニュー*/

.c-inner-menu {
  padding: 40px 0;
  margin: 0 auto;
}

.c-inner-menu__title {
  font-weight: bold;
  margin: 0 auto 10px auto;
  text-align: center;
  display: block;
}

.c-inner-menu__title:before {
  content: "| ";
}

.c-inner-menu__title:after {
  content: " |";
}

.c-inner-menu__list {
  width: 100%;
  display: flex;
  margin: auto;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  /* Safari */
  justify-content: center;
  transition: .3s all ease;
}

.c-inner-menu__item {
  margin-right: 40px;
}

.c-inner-menu__item:last-child {
  margin-right: 0;
}

input[type="checkbox"].on-off {
  display: none;
}

/*-----------------サブメニュー*/

.c-submenu{
  padding: 30px;
  box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px; 
}

.c-submenu__title{
  font-family: "Koburina Gothic W6 JIS2004";
  margin-bottom: 15px;
  line-height: 1.4;
  font-size: 2rem;
}

.c-submenu__list{
  overflow: hidden;
}

.c-submenu__list > li{
  width: 23.5%;
  float: left;
  margin-right: 2%;
  font-size: 1.4rem;
}

.c-submenu__list > li:nth-child(4n){
  margin-right: 0;
}

.c-submenu__list > li:nth-child(n+5){
  margin-top: 10px;
}

.c-submenu__list > li > a{
  color: #333;
  display: block;
  width: 100%;
  height: 100%;
}

.c-submenu__list > li > a:hover,
.c-submenu__list > li > a.is-active{
  color: #f29600;
  font-weight: bold;
}

/*背景色追加*/

.c-submenu--main{
  background: beige;
}

.c-submenu--sub{
  border:1px solid #F4F3F0;
}

@media screen and (max-width: 767px) {
  input[type="checkbox"].on-off + ul {
    height: 0;
    overflow: hidden;
  }
  input[type="checkbox"].on-off:checked + ul {
    height: auto;
  }
  .c-inner-menu {
    padding: 10px;
    background: #F4F3F0;
    margin: 80px auto 40px auto;
    box-sizing: border-box;
    font-size: 13px;
  }
  .c-inner-menu__title {
    font-weight: bold;
    margin: 0 auto 0 auto;
    text-align: center;
    display: block;
  }
  .c-inner-menu__list {
    width: 100%;
    display: flex;
    text-align: left;
    flex-flow: column;
    padding: 0 30px;
  }
  .c-inner-menu__item {
    margin-bottom: 10px;
  }
  .c-inner-menu__item:first-child {
    margin-top: 20px;
  }
  .c-inner-menu__title:before {
    content: "\f359";
    font-family: "ionicons";
    font-size: 20px;
    margin-right: 10px;
    vertical-align: middle;
  }
  .c-inner-menu__title:after {
    content: "を見る";
  }
  
  .c-submenu{
    display: block;
  }
  
  .c-submenu__title{
    flex-basis: 100%;
    max-width: 100%;
    display: block;
    border-right: none;
    border-bottom:1px solid #333;
    padding-bottom: 6%;
    font-size: 1.7rem;
  }
  
  .c-submenu__list{
    flex-basis: 100%;
    max-width: 100%;
    display: block;
  }
  
  .c-submenu__list > li{
    float: none;
    width: 100%;
    border-bottom: 1px dotted #ccc;
    margin:0;
    padding: 6% 0;
    line-height: 1.2;
  }

.c-submenu__list > li:nth-child(n+5){
  margin-top: 0;
}
}


/*-------------------------------------

Contents コンテンツのコンポーネント 

--------------------------------------*/


/*-------------------コンテンツのテキスト*/

.c-content {
  margin-bottom: 40px;
}

.c-content > p {
  margin-bottom: 20px;
}

.c-content img {
  max-width: 100%;
}


/*-------------------グレーバックのボックス-補足・リストなどに-*/

.c-note {
  background: #F4F3F0;
  padding: 30px;
  width: 100%;
  box-sizing: border-box;
}

.c-note--relation {
  padding: 20px;
  font-size: 1.3rem;
}

.c-note--relation:before {
  content: "関連リンク";
  margin-right: 10px;
}


/*-------------------3カラム横並びパネル*/

.c-panel {
  display: flex;
  flex-wrap: wrap;
}

.c-panel__item {
  flex-basis: 320px;
  max-width: 320px;
  margin-right: 40px;
  background: #F4F3F0;
  color: #333;
  text-decoration: none;
  position: relative;
  box-sizing: border-box;
  flex-grow: 1;
}

.c-panel__item a {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #F4F3F0;
  transition: .3s all ease;
  text-decoration: none;
  box-sizing: border-box;
}

.c-panel__item a:hover {
  border-color: #f29600;
}

.c-panel__item a:hover > .c-panel__img > img {
  transform: scale(1.05);
}

.c-panel__item:nth-child(3n) {
  margin-right: 0;
}

.c-panel__item:nth-child(n+4) {
  margin-top: 40px;
}

.c-panel__item--4 {
  flex-basis: 230px;
  max-width: 230px;
}

.c-panel__item--4:nth-child(3n) {
  margin-right: 40px;
}

.c-panel__item--4:nth-child(n+4) {
  margin-top: 0;
}

.c-panel__item--4:nth-child(4n) {
  margin-right: 0;
}

.c-panel__item--4:nth-child(n+5) {
  margin-top: 40px;
}

.c-panel__item--2 {
  flex-basis: 500px;
  max-width: 500px;
  flex-grow: 1;
}

.c-panel__item--2:nth-child(odd) {
  margin-right: 40px;
}

.c-panel__item--2:nth-child(2n) {
  margin-right: 0;
}

.c-panel__item--2:nth-child(n+3) {
  margin-top: 40px;
}

.c-panel__item--bg-none {
  background: transparent;
}

.c-panel__title {
  font-family: "Koburina Gothic W6 JIS2004";
  margin-bottom: 10px;
  line-height: 1.2;
  padding: 0 20px;
  color: #333;
}

.c-panel__img {
  margin-bottom: 20px;
  width: 100%;
  overflow: hidden;
}

.c-panel__img > img {
  width: 100%;
  height: auto;
  transition: .3s all ease;
}

.c-panel__img--auto {
  width: auto;
  margin: 0 auto 20px auto;
  display: block;
}

.c-panel__img--circle {
  width: 120px;
  height: 120px;
  border-radius: 100%;
  margin: 20px auto;
  position: relative;
  z-index: 10;
}

.c-panel__img--circle:hover {
  border-radius: 100%;
}

.c-panel__img--circle > img {
  width: 200%;
  margin-left: -50%;
}

.c-panel__item--4 > .c-panel__img {
  width: 100%;
}

.c-panel__text {
  font-size: 1.3rem;
  line-height: 1.4;
  padding: 0 20px 20px 20px;
  color: #333;
}

.c-panel__subtitle {
  font-size: 1.1rem;
  font-weight: bold;
  padding: 0 20px 0 20px;
  color: #333;
}


/*-------------------トップお知らせ・関連情報*/

.c-information {
  display: table;
}

.c-information__title {
  width: 200px;
  border-right: 1px solid #999;
  font-size:1.8rem;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  font-family: "Koburina Gothic W6 JIS2004";
}

.c-information__body {
  width: 80%;
  padding-left: 20px;
  display: table-cell;
}

/*
.c-information__body > p {
  font-size: 13px;
}

.c-information__body > p > time {
  margin-right: 10px;
}
*/

.c-information__body > dl > dt{
  font-size: 11px;
  font-weight: bold;
  line-height:1;
}
.c-information__body > dl > dd{
  font-size: 13px;
  margin-bottom: 15px;
}

.c-information__body > dl > dd > a:hover{
  color: #2FBBFF;
}

.c-information__body > dl > dd:last-child{
  margin-bottom: 0;
}

.c-information__link {
  display: block;
  font-size: 13px;
}

/*--------------------お知らせ・メディア情報*/

.p-header-date{
  font-size: 13px;
  margin-top: 15px;
}


/*-------------------横並びバナー用コンポーネント*/

.c-banner-block {
  display: flex;
  flex-wrap: wrap;
}

.c-banner-block__item {
  width: 230px;
  margin-right: 40px;
}

.c-banner-block__item:last-child {
  margin-right: 0;
}


/*-------------------コンテンツ中の問い合わせブロック*/

.c-inquiry {
  box-sizing: border-box;
  border: 1px solid #f29600;
  background: linear-gradient(white, #f29600);
  background: url(/img/common/inquiry-bg.png) right bottom no-repeat;
  overflow: hidden;
  padding: 40px;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}

.c-inquiry__item {
  margin: 0 40px 20px 0;
}

.c-inquiry__title {
  font-weight: bold;
  margin-bottom: 5px;
}

.c-inquiry__form-btn {
  background: #f29600;
  color: #fff;
/*  width: 250px;*/
}

.c-inquiry__form-btn > i {
  color: #fff;
}

.c-inquiry-tel {
  font-size: 2.4rem;
  width: auto;
  height: auto;
}

.c-inquiry-tel > span {
  font-size: 12px;
}

.c-inquiry-tel > i {
  line-height: 1;
}

.c-inquiry--small {
  background: linear-gradient(#FDFAEC, white);
}

@media screen and (max-width: 767px) {
  .c-panel {
    display: flex;
    flex-wrap: wrap;
  }
  .c-panel__item {
    flex-basis: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 6.82%;
  }
  .c-panel__item:last-child {
    margin-bottom: 0;
  }
  .c-panel__item--4:nth-child(3n) {
    margin-right: 0;
  }
  .c-panel__item--4 > .c-panel__img {
    width: 100%;
    height: auto;
  }
  .c-panel__item--4 > .c-panel__img > img {
    height: 100%;
  }
  .c-panel__item--2:nth-child(odd) {
    margin-right: 0;
  }
  .c-panel__item--2:nth-child(n+2) {
    margin-top: 40px;
  }
  .c-information {
    display: block;
  }
  .c-information__title {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #999;
    display: flex;
    margin-bottom: 5%;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1;
    padding-bottom: 3%;
  }
  .c-information__body {
    width: 100%;
    padding-left: 0;
    display: block;
  }
  .c-information__link {
    flex: 1;
    text-align: right;
  }
  .c-banner-block__item {
    width: 47.5%;
    margin-right: 5%;
  }
  .c-banner-block__item:nth-child(2n) {
    margin-right: 0;
  }
  .c-banner-block__item:nth-child(n+3) {
    margin-top: 5%;
  }
  .c-banner-block__item img {
    width: 100%;
  }
  .c-inquiry {
    background: linear-gradient(#FDFAEC, white);
    flex-flow: column;
  }
  .c-inquiry__item {
    margin: 0 auto 40px auto;
    text-align: center;
    width: 100%;
  }
  .c-inquiry__form-btn {
    width: 100%;
    margin: auto;
    display: block;
    box-sizing: border-box;
  }
}


/*------------------------------------------------------------------------

Project 
・ページ内で固有のスタイル
・サイト内で3回以下出てくるスタイル

------------------------------------------------------------------------*/

.p-formheader--title{
  font-size: 3.2rem;
}

.p-tel-flow{
  display: flex;
  align-items: center;
}

.p-tel-flow__item{
  background: #fff;
  padding: 20px;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,.1);
  flex-basis: 47.5%;
  max-width: 47.5%;
  text-align: center;
  line-height: 1.4;
    font-size: 13px;
}

.p-form-step{
  display: flex;
  align-items: center;
}

.p-form-step__item{
  padding: 10px;
  flex-basis: 47.5%;
  max-width: 47.5%;
  text-align: center;
  background: #F4F3F0;
}

.p-cal-title{
  font-weight: bold;
/*  background: #fff;*/
  padding: 10px 0;
  text-align: center;
  margin-bottom: 20px;
}

.p-cal-title span{
  padding:  0 10px;
  background: #fff;
  font-weight: bold;
}

.p-cal-title:after{
  content: "";
  width: 100%;
  border-top:1px #666 dotted;
  display: block;
  height: 1px;
  margin-top: -15px;
}

.p-form-item{
  border-bottom: 1px #666 dotted;
  display: flex;
  padding: 20px 0;
}

.p-form-item:first-child{
  border-top: 1px #666 dotted;
}

.p-form-item__title{
  width: 25%;
  font-weight: bold;
  margin-right: 3%;
  line-height: 1.4;
}

.p-form-item__input{
  width: 72%;
}

.p-form-item__input input[type='text'],
.p-form-item__input select,
.p-form-item__input textarea{
  padding: 6px;
  font-size: 15px;
  box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
      border: 1px solid #aaa;
  border-radius: .2em;
  box-sizing: border-box;
}

.p-form-item__title:after{
  content: "任意";
  display: block;
  color: #fff;
  background-color:#0085B2;
  border-radius: 1rem;
  font-size: 11px;
  padding: 3px 6px;
  line-height: 1;
  width: 22px;
  letter-spacing: 0;
}

.p-form-item__title--required:after{
  content: "必須";
  background-color:#F40C00;
}

.p-form-item__title--nomark:after{
  content: none;
}

.p-send-btn{
  display: block;
  margin: 0 auto 20px auto;
  box-shadow: 0 4px #CB5303;
  background: linear-gradient(#FFCC00,#f29600);
  border:none;
  border-radius: .3em;
  color: #fff;
  font-size:20px;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,0,.2);
  cursor:pointer;
/*  transition: all ease .2s;*/
  position: relative;
  padding: 15px 150px;
}

.p-send-btn:hover{
  top: 2px;
  box-shadow: 0 2px #CB5303;
}

.p-send-btn:active{
  top: 4px;
  box-shadow: 0;
  border:none;
}

.p-send-btn span{
  display: block;
  font-size: 13px;
  letter-spacing: 1px;
}

.p-list-50p{
  overflow: hidden;
}

.p-list-50p > li{
  width: 47.5%;
  margin-right: 5%; 
  float: left;
}

.p-list-50p > li:nth-child(even){
  margin-right: 0;
}

.p-list-50p > li input{
  margin:0 7px 0 0;
}

.p-form-item__input .error{
 color:#F40C00 ;
  font-size: 13px;
  font-weight: bold;
/*  display: none;*/
}

#TodohukenError.error,
#AnonymityError.error,
#CreditorError.error,
#CreditorCmpError.error{
  display: none;
}





/*-------------------------------------------------------------------------

既存のスタイル

---------------------------------------------------------------------------*/


/* ------------------------------
	予約カレンダー (reserve calendar)
------------------------------ */
table.tableReserve  
{
  width: 100%;
  text-align: center;
} 

table.tableReserve tr  
{
	height: 32px;
/*
	width: 200px;
*/
} 

table.tableReserve td  
{
	border: 1px #ABACB2 solid;
	font-weight: bold;
} 

table.tableReserve th
{
	border: 1px #ABACB2 solid;
	width: 50px;
} 

/* 列ヘッダと行ヘッダの重なり */ 
.headerRowColum 
{
	background-color: #4294D0; 
/*	width:40px;*/
}

/* 列ヘッダ */ 
.headerRow {
	background-color: #4294D0; 
	color: #ffffff;
	font-weight: bold;
/*	font-size:108%;*/
/*	padding-left:0em; */
/*	width:60px;*/
      padding: 7px 10px;
  text-align: center;
}
/* 行ヘッダ */ 
.headerColum {
	background-color: #4294D0;
	color: #ffffff;
	font-weight: bold;
/*	font-size:108%;*/
  padding: 7px 5px;
	width:32px;
  text-align: center;
}

/*○表示のスタイル */
.select 
{
	padding-right: 1em;
	background-color: #ffffff;
	color: #4294D0;
	cursor: pointer;
/*	height: 28px;*/
	text-decoration:underline;
}

/* ×表示のスタイル  */
.NoSelect {
/*	padding-right: 1em;*/
	background-color: #DDDDDD;
	color: #B7B7B7;
/*	height: 28px;*/
  padding: 7px 10px;
}

/* 休業日のスタイル */ 
.holiday {
	padding-right: 1em;
	background-color: #ffe4e1;
} 

/* エラー表示 */
.errorReserve{
	color:#F40C00 ;
  font-size: 13px;
    text-align: center;
    margin: 40px auto auto;
	display:none;/*エラー表示を隠す場合はnoneに*/
  background: #FFE4E1;
  padding: 20px;
  border-radius: .5em;
  width: 780px;
  position: relative;
   box-shadow: 1px 1px 1px 1px rgba(0,0,0,.1); 
  box-sizing: border-box;
}

.errorReserve:before{
  content: "▲";
  position: absolute;
  top: -30px;
  color: #FFE4E1;
  left: 50%;
  font-size: 30px;
  
}

.errorReserve > span{
  font-weight: bold;
}

/* モーダルウィンド */
ul.question_btn li{
	display:inline;
	margin:0 10px 0 0;
}

/* ボタンスタイル*/
.btncheck {
    width: 204px;
    height: 53px;
}

.btncheck263 {
/*
    width: 263px;
    height: 53px;
*/
}

div.consult_time{
/*	margin:0 115px 20px 115px;*/
	padding:10px;
	background:#eee;
	text-align:center;
   margin: 40px auto auto;
  color: #F40C00;
  border-radius: .5em;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,.1); 
  color: #0085B2;
  font-weight: bold;
  position: relative;
  width: 780px;
}

div.consult_time:before{
  content: "▲";
  position: absolute;
  top: -40px;
  color: #eee;
  left: 50%;
  font-size: 40px;
  
}

div.consult_time span.day_time_inquiry span{
	font-size:20px;
	font-weight:bold;
/*	color: #FF0000;*/
}

div.consult_time span.day_time{
	font-size:136%;
	font-weight:bold;
}

div.consult_time span.phonenumber{
/*	color:#FF0000;*/
	font-weight:bold;
  font-size:20px;
  margin-right: 10px;
}

/*ボタンスタイル2015.01.27追記*/

.btnGo{
	width: 260px;
	height: 58px;
}

.btnBack{
	width: 130px;
	height: 58px;
}

/* ------------------------------------------------------------
	メインコンテンツ　コンテンツ内お問合せ枠
------------------------------------------------------------ */
.consult_inquiry_box{
	margin:0 auto;
	width:90%;
	padding:30px 0 0;
	background:url(../img/bg_consultation.jpg) top left no-repeat;
	border-top:1px solid #ccc;
}

.consult_inquiry_box .consult_tel{
	float:left;
	margin-right:40px;
	line-height:26px;
}


.consult_inquiry_box .consult_form{

}


.goup {
	display:none;

}

ul.list_nomark li{
	margin-bottom:10px;
	}

.border_red_pd15{
	width:380px;
	margin:0 0 40px 0;
	padding:15px;
	border:#FF0000 2px solid;
}

/* ------------------------------------------------------------
	サーバーエラー表示
------------------------------------------------------------ */

.errarea {
    text-align: center;
}

.SeverError {
    color: #ff0000;
    font-size: 15px;
    padding: 15px;
  background: #FFE4E1;
  font-weight: bold;
      width: 780px;
    margin: 20px auto;
    box-shadow: 1px 1px 3px 0 rgba(0,0,0,.2);
}