@charset "UTF-8"





.body {margin: 0;
      font-family: "游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
      background-color: #ffffff;}





/* サイト名 */
.site h1 a {font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
           color: #303030; text-decoration: none;}

.site h2 a {font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
           color: #303030; text-decoration: none; background-color: #ffff7f;}

.site h1 {margin: 0; font-size: 32px;}

.site h2 {margin: 0; font-size: 16px;}




/******************** index ********************/
/* ヘッダー画像 */
.topimg1 {max-width: 100%;
         height: auto;
         vertical-align: bottom;}

/* キャッチコピー */
.catch {margin: 0;
       padding: 15px;
       background-color: rgba(255,255,255,0.7);
       font-size: 20px;}

/* ヘッダーにキャッチコピーを重ねる */
.top     {position: relative;}

.catch   {position: absolute;
         bottom: 8%;
         left: 3%;}

/* 概要 */
.gaiyou a {display: block;
          margin-top: 5px;
          text-align: center;
          text-decoration: none;
          background-color: #ffffff;
          border: solid 1px #eeeeee;}

.gaiyou h2 {display: block;
           font-size: 32px;
           font-weight: 500;
           color: #404040;}

.gaiyou h3 {display: block;
           font-size: 22px;
           font-weight: 400;
           color: #ffffff;
           margin-bottom: 0;}

.gaiyou-1 h3 {background-color: #8ec6ff;}

.gaiyou-2 h3 {background-color: #8e8eff;}

.gaiyou-3 h3 {background-color: #8ec6ff;}

.gaiyou-4 h3 {background-color: #8e8eff;}

.gaiyou a:hover {background-color: #f5f5f5;}

/* お知らせ */
.news {padding: 20px;
      margin-bottom: 5px;
      border: solid 4px #dddddd;}

.news h2 {margin-top: 0;
         margin-bottom: 5px;
         font-size: 18px;
         color: #666666;}

.news ul {margin: 0;
         padding: 0;
         list-style: none;}

.news li a {display: block;
           padding: 5px;
           border-bottom: dotted 2px #dddddd;
           color: #000000;
           font-size: 14px;
           text-decoration: none;}

.news li a:hover {background-color: #eeeeee;}

.news time {color: #888888;
           font-weight: bold;}

.news a:after {content: "";
              display: block;
              clear: both;}

.news time {float: left;
           width: 60px;}

.news .text {float: none;
            width: auto;
            margin-left: 60px;}

/* 横4つ */
.four a {display: block;
        margin-top: 3px;
        text-align: center;
        text-decoration: none;
        background-color: #ccffe5;
        border: solid 1px #f5f5f5;}

.four a:hover {background-color: #f5f5f5;}

.four h2 {display: block;
         font-size: 28px;
         font-weight: 500;
         color: #404040;}

.four h3 {display: block;
         font-size: 18px;
         font-weight: 400;
         color: #404040;
         margin-bottom: 0;}



/******************** new ********************/
/* サポート */
.support {margin: 10px;
          margin-bottom: 50px;
          background-color: #f0ffff;
          border-radius: 8px;
          box-shadow: 0px 0px 5px silver;
          padding: 0.5em 0.5em 0.5em 2em;} 

/* check */
.check h3 {margin-top: 20px;
          margin-bottom: 20px;
          border-bottom: solid 1px #dddddd;
          color: #202020;}

.check h3 i {margin-right: 7px;
            color: #888888;}

.check h4 {margin-top: 20px;
          margin-bottom: 20px;
          color: #202020;
          font-size: 28px;
          font-weight: normal;
          text-align: center;}


/* checkカラー */
.pain h4 i {color: #1e90ff;
           font-size: 46px;}

.tired h4 i {color: #32cd32;
            font-size: 46px;}

.change h4 i {color: #ff6347;
               font-size: 46px;}

.blue {margin-bottom: 30px;
      background-color: #1e90ff;
      border-radius: 8px;
      box-shadow: 0px 0px 5px silver;
      padding: 0.5em 0.5em 0.5em 2em;}

.blue li {line-height: 1.5;
         padding: 0.5em 0;
         font-size: 20px;
         color: #ffffff;}

.green {margin-bottom: 30px;
       background-color: #32cd32;
       border-radius: 8px;
       box-shadow: 0px 0px 5px silver;
       padding: 0.5em 0.5em 0.5em 2em;}

.green li {line-height: 1.5;
          padding: 0.5em 0;
          font-size: 20px;
          color: #ffffff;}

.orange {margin-bottom: 30px;
        background-color: #ff6347;
        border-radius: 8px;
        box-shadow: 0px 0px 5px silver;
        padding: 0.5em 0.5em 0.5em 2em;}

.orange li {line-height: 1.5;
           padding: 0.5em 0;
           font-size: 20px;
           color: #ffffff;}



/******************** guide ********************/
/* 料金 */
.career table {font-size: 14px;}


/******************** guide ********************/
/* 料金 */
.fee table {font-size: 16px;
            border-collapse: collapse;
            text-align: center;}

.fee th {padding: 0.3em 0.7em;
         border: 1px solid #dddddd;}

.fee td {padding: 0.3em 0.7em;
         border: 1px solid #dddddd;}

.fee tr {height: 50px;}

.fee th {color: #ffffff;
         background-color: #8ec6ff;}



/******************** コンテンツ ********************/
/* コンテンツページ 記事 */
.kiji h1 {margin-top: 0;
         margin-bottom: 20px;
         padding-left: 20px;
         color: #404040;
         background-color: #eeeeee;
         font-size: 24px;
         font-weight: normal;}

.kiji h2 {margin-top: 30px;
         margin-bottom: 10px;
         padding-left: 20px;
         border-left: solid 20px #8ec6ff;
         color: #202020;
         font-size: 30px;
         font-weight: normal;}

.kiji h3 {margin-top: 20px;
         margin-bottom: 20px;
         margin-left: 10px;
         padding-left: 10px;
         border-bottom: solid 1px #dddddd;
         color: #202020;
         font-size: 28px;
         font-weight: normal;}

.kiji p {max-width: 640px;
        margin-top: 0;
        margin-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;}

.kiji lead {max-width: 100%;
           font-size: 20px;}

/* パンくずリスト */
.bread {margin-bottom: 20px;}

.bread ol {margin: 0;
          padding: 0;
          list-style: none;}

.bread li a {display: inline-block;
            padding: 5px;
            color: #202020;
            font-size: 14px;
            text-decoration: none;}

.bread li a:hover {background-color: #eeeeee;}

.bread ol:after {content: "";
                display: block;
                clear: both;}

.bread li {float: left;
          width: auto;}

.bread li:after {content: '\003e';
                margin-left: 10px;
                margin-right: 10px;
                color: #888888;}

/* サイドメニュー */
.sidemenu {border: solid 4px #dddddd}

.sidemenu h1 {margin: 0;
             padding: 10px;
             font-size: 16px;
             font-weight: normal;}

.sidemenu h1 i {margin-right: 5px;
               color: #87cefa;
               font-size: larger;}

.sidemenu h2 {margin: 0;
             padding: 10px;
             font-size: 16px;
             font-weight: normal;}

.sidemenu h2 i {margin-right: 5px;
               color: #87cefa;
               font-size: larger;}

.sidemenu ul {margin: 0;
             padding: 0;
             list-style: none;}

.sidemenu li a {display: block;
               padding: 10px;
               border-top: solid 1px #dddddd;
               color: #202020;
               font-size: 14px;
               text-decoration: none;}

.sidemenu li a:hover {background-color: #eeeeee;}

/* コンテンツ画像 */
.subimg {padding-top: 0;
         padding-left: 20px;}

/* アドレス */
.address-1 {margin: 0;
           color: #666666;
           font-size: 13px;}

.address-2 {margin: 0;
           color: #666666;
           font-size: 13px;}

/* footer-siteをバーの形にする */
.footer-site {padding-top: 15px;
             padding-bottom: 5px;
             background-color: #eeeeee;}

/* コピーライト */
.copyright p {margin: 0;
             color: #666666;
             font-size: 8px;
             text-align: center;}

/* headerの下に罫線を挿入（コンテンツページのみ） */
.contents .header {margin-bottom: 10px;
                  border-bottom: solid 2px #dddddd;}

/* footer-copyをバーの形にする */
.footer-copy {padding-top: 5px;
             padding-bottom: 15px;
             background-color: #eeeeee;}

/* ボックスの左右 photo以外 */
.header, .pickup, .info, .footer-nav, .footer-site, .footer-copy, .box7
             {padding-left: 15px;
             padding-right: 15px;}

/* ボックスの上下 headerとpickupとinfoとbox7 */
.header {padding-top: 10px;
        padding-bottom: 10px;}

.photo {padding-top: 0;
        padding-bottom: 0;}

.pickup {padding-top: 0px;}

.info {padding-top: 10px;
      padding-bottom: 10px;}

.box7 {padding-top: 25px;
      padding-bottom: 25px;}

/* infoとfooterの背景 */
.info {background-color: #ffffff;}

.footer {background-color: #eeeeee;}





/* ########## 767px以下 #########*/
@media (max-width: 767px) {



/* サイト名 位置中央寄せ */
.site h1 {text-align: center;}

.site h2 {text-align: center;}



/* ナビゲーション 位置中央寄せ */
.menu1 {text-align: center;}

.menu2 {text-align: center;}





/* トグルボタン */

#menu1btn {padding: 6px 12px;
          border: solid 1px #aaaaaa;
          border-radius: 5px;
          background-color: #ffffff;
          position: absolute;
          top: 20px;
          right: 15px;
          cursor: pointer;}

#menu1btn:hover {background-color: #eeeeee;}

#menu1btn:focus {outline: none;}

#menu2btn {padding: 6px 12px;
          border: solid 1px #aaaaaa;
          border-radius: 5px;
          background-color: #eeeeee;
          position: absolute;
          right: 15px;
          cursor: pointer;}

#menu2btn:hover {background-color: #ffffff;}

#menu2btn:focus {outline: none;}

#menu1btn i {color: #888888;
            font-size: 18px;}

#menu2btn i {color: #303030;
            font-size: 18px;}

#menu1btn span {display: inline-block;
               text-indent: -9999px;}

#menu2btn span {display: inline-block;
               text-indent: -9999px;}



/* ナビゲーション上（縦並び） */
#menu1 {display: none;}

.menu1 ul {margin: 0;
          padding: 0;
          list-style: none;}

.menu1 li a {display: block;
            padding: 5px;
            color: #202020;
            font-size: 16px;
            text-decoration: none}

.menu1 li a:hover {background-color: #eeeeee;}



/* ナビゲーション下（縦並び） */
#menu2 {display: none;}


.menu2 ul {margin: 0;
          padding: 0;
          list-style: none;}

.menu2 li a {display: block;
            padding: 5px;
            color: #202020;
            font-size: 14px;
            text-decoration: none;}

.menu2 li a:hover {background-color: #ffffff;}



/* サイト名フォント */
.site h1 {margin: 0; font-size: 28px;}

.site h2 {margin: 0; font-size: 14px;}

/* キャッチコピー */
.catch {padding: 5px 10px;
       font-size: 16px;}

/* 概要フォント */
.gaiyou h2 {font-size: 26px;}

.gaiyou h3 {font-size: 20px;}

/* gaiyouを横に並べる設定 */
.pickup {display: flex;}

.pickup {flex-wrap: wrap;}

.pickup .gaiyou {width: calc(50% - 9px);
                margin: 3px;}



/* fourを横に並べる設定 */
.info-sub {display: flex;}

.info-sub {flex-wrap: wrap;}

.info-sub .four {width: calc(50% - 9px);
                margin: 3px;}



/* 記事 */
.kiji h1 {font-size: 26px;}

.kiji h2 {font-size: 26px;}

.kiji h3 {font-size: 24px;}

.kiji .lead {font-size: 16px;}





}





/* ########## 768px以上 #########*/
@media (min-width: 768px) {



/* トグルボタン */
#menu1btn {display: none;}

#menu2btn {display: none;}


/* ナビゲーション上 */
#menu1 {display: block !important;}

.menu1 ul {margin: 10;
          padding: 0;
          list-style: none;}

.menu1 li a {display: block;
            padding: 13px 13px;
            color: #202020;
            font-size: 16px;
            text-decoration: none}

.menu1 li a:hover {background-color: #eeeeee;}

.menu1 ul:after {content: "";
                display: block;
                clear: both;}

.menu1 li {float: left;
          width: auto;}



/* ナビゲーション下 */
#menu2 {display: block !important;}

.menu2 ul {margin: 0;
          padding: 0;
          list-style: none;}

.menu2 li a {display: block;
            padding: 10px 15px;
            color: #202020;
            font-size: 14px;
            text-decoration: none;}

.menu2 li a:hover {background-color: #ffffff;}

.menu2 ul:after {content: "";
                display: block;
                clear: both;}

.menu2 li {float: left;
          width: auto;}



/* header-siteとheader-navを横に並べる設定 */
.header:after {content: "";
              display: block;
              clear: both;}

.header-site {float: left;
             width: auto;}

.header-nav {float: right;
            width: auto;}





/* pickupを横に並べる設定 */
.pickup {display: flex;}

.pickup .gaiyou {width: calc(25% - 10px);
                 margin: 5px;}





/* info-mainとinfo-subを横に並べる設定 */
.info:after {content: "";
            display: block;
            clear: both;}

.info-main  {float: left;
            width: 60%;}

.info-sub   {float: left;
            width: 40%;}




/* fourを横に並べる設定 */
.info-sub {display: flex;}

.info-sub {flex-wrap: wrap;}

.info-sub .four {width: calc(50% - 10px);
                margin: 3px;}





/* pain-1とpain-2を横に並べる設定 */
.pain:after {content: "";
            display: block;
            clear: both;}

.pain-1 {float: left;
        width: 50%;}

.pain-2  {float: left;
         width: 50%;}




/* check-2を横に並べる設定 */
.check-2 {display: flex;}

.tired, .change {width: calc(50% - 10px);
                margin: 20px;}

/* twoを横に並べる設定 */
.two {display: flex;}

.two-1, .two-2 {width: calc(50% - 10px);
                margin: 20px;}



/* box7-1とbox7-2を横に並べる設定 */
.box7:after {content: "";
            display: block;
            clear: both;}

.box7-1 {float: right;
        width: 80%;
        padding-left: 50px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;}

.box7-2 {float: left;
         width: 20%;}





/* first-1とfirst-2を横に並べる設定 */
.first:after {content: "";
            display: block;
            clear: both;}

.first-1  {float: left;
            width: 60%;}

.first-2   {float: left;
            width: 40%;}



/* first-1とfirst-2を横に並べる設定 */
.reception:after {content: "";
            display: block;
            clear: both;}

.reception-1  {float: left;
            width: 60%;}

.reception-2   {float: left;
            width: 40%;}






/* address-1とaddress-2 を横に並べる設定 */
.footer-site:after {content: "";
                   display: block;
                   clear: both;}

.address-1  {float: left;
            width: 50%;}

.address-2  {float: left;
            width: 50%;}




}





/* ########## 1025px以上 #########*/
@media (min-width: 1025px) {



/* 全体の横幅を固定 */
.header-inner, .photo, .pickup, .info, .footer-nav, .footer-site, .footer-copy, .box7
             {width: 1140px;
             margin-left: auto;
             margin-right: auto;}

/* headerの下に罫線を挿入 */
.header {margin-bottom: 10px;
        border-bottom: solid 2px #dddddd;}




}