@CHARSET "UTF-8";
/* ===================================================================
フォントの指定
=================================================================== */
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }

/* ゴシック体 */
html body{
  font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 明朝体
html body{
  font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}*/
/* ================================================================ */

html body{ color: #555; background: #fff; }
html body #container{ line-height: 1; }
html body #container article,
html body #container section,
html body #container footer{ line-height: 1.5; }
img{ display: block; }
header a,
nav a,
footer a{ color: #000; text-decoration: none; }

a:not(.button):hover{ color: red ! important; text-decoration: underline; }

/* フォントサイズ設定 */
@media screen and (max-width: 480px){
  html{ font-size: 13px !important; }
}
@media screen and (min-width: 481px) and (max-width: 640px){
  html{ font-size: 14px !important; }
}
@media screen and (min-width: 641px){
  html{ font-size: 16px !important; }
}

/* ===================================================================
ベース
=================================================================== */
#container.area_flex{
  min-height: 100vh;
  -webkit-box-direction:normal;
  -moz-box-direction:normal;
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;
}

#container .size ,#main .sub_size{
  margin-left: auto;
  margin-right: auto;
}
#main .sub_size { max-width: 800px;}


#container{}


/* header */
#container header{ background-color: #fff; padding: 2em .5rem; opacity: 0.85;}
  header #header_text{
    font-size: .9em;
    background: #90ee90;
    padding: .25rem .5rem;
  }


/* nav */
#container nav.area_pc{
  align-items: center;
  -webkit-align-items: center;
}
  nav ul#main_menu li{ margin-left: 1em;}
  nav ul#main_menu li:first-child { margin-right: auto;}

/* wrapper */
#container > #wrapper{}
  #wrapper > #main.flex-item,
  #wrapper > #sidebar.flex-item{
    -webkit-align-self:stretch;
    -moz-align-self:stretch;
    -ms-align-self:stretch;
    align-self:stretch;
  }

/* footer */
#footer_contact { background: #9db1d0; color: #fff;}
#footer_contact ul { padding-bottom: 3rem;}
#footer_contact ul li {
  border: 5px solid #fff;
  width: 48%;
  padding: 1.5rem 0;
}
#footer_contact .f_tel {
  font-weight: bold;
  font-size: 1.4rem;
  margin-top: 1.2rem;
}

#container > footer{
  background: #eee;
}

  footer div.footer-flex {
    padding-top: 4rem;
    padding-bottom: 1rem;
  }

footer ul.product_sub { padding-left: 1em;}
    

/* copyright */
#bsc-copyright{ font-size: .7rem;}

/* ===================================================================
pc nav固定
=================================================================== */
.nav_is-fixed{
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* ===================================================================
見出し
=================================================================== */
h1{ font-size: 1.5rem;}
#sp_menu h1 { margin-left: .5em;}

#wrapper *+h2,
#wrapper *+h3,
#wrapper *+h4,
#wrapper *+h5{
  margin-top: 2rem;
}
#wrapper h2,
#wrapper h3,
#wrapper h4,
#wrapper h5{
  margin-bottom: 1rem;
}

h2{
  background-color: #9db1d0;
  font-size: 1.8rem;
  color: #fff;
  padding: 2rem 0;
  margin-top: 6rem;
  text-align: center;
}
h3{
  font-size: 1.5rem;
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 4rem !important;
}
h4{ font-size: 1.3rem; }
h5{ font-size: 1.2rem; }

#product h3 { padding-top: 2em;}

/* ===================================================================
section
=================================================================== */
#wrapper *+section{ margin-top: 2rem; }


/* ===================================================================
テキスト
=================================================================== */
p{ text-indent: 1em; }
p+p{ margin-top: 1.5em; }

.font-red { color: #f00;}


/* ===================================================================
汎用
=================================================================== */
/* ページトップに戻る */
#totop {
  z-index:2147483647;
  display: none;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}

#totop a {
  display: block;
  width: 3rem;
  height: 3rem;
  background: #333;
  text-align: center;
  color: #fff;
  text-decoration: none;
  line-height: 3rem;

  border-radius: 25px;            /* CSS3草案 */  
  -webkit-border-radius: 25px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 25px;       /* Firefox用 */
  text-decoration: none ! important;
}

#totop a:hover{
  -webkit-filter: opacity(0.7);
  -moz-filter: opacity(0.7);
  -o-filter: opacity(0.7);
  -ms-filter: opacity(0.7);
  filter: opacity(0.7);
}

/* link-icon */
.link-icon,
.link-icon:before
{
  display: inline-block;
  text-decoration: none;
  line-height: 1;
  text-align: left;
}

  .link-icon{
    position: relative;
    padding: .8rem .8rem .8rem 2.5rem;
  }
  .link-icon:before{
    position: absolute;
    content: '';
    width: 1.2rem;
    height: 1.2rem;
    margin: auto 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: .8rem;
    background-repeat:no-repeat;
    background-position: center center;
    -moz-background-size: auto 100%;
    background-size: auto 100%;
  }
  .link-icon.tel{ border: #eee 2px solid; background: #eee; }
  .link-icon.tel:before{ background-image: url("./images/iconmonstr-radio_check.png") !important; }
  .link-icon.mail{ border: #98ca97 2px solid; background: #98ca97; color: #fff; }
  .link-icon.mail:before{ background-image: url("./images/iconmonstr-radio_check.png") !important; }
  .link-icon.mail:hover{ background: #fff; color: #000; }

.bold { font-weight: bold;}

/* ===================================================================
list
=================================================================== */


/* ===================================================================
area
==================================================================== */
/* swiper */
.swiper-wrapper,
.swiper-slide
{ line-height: 0 !important; }

/* lightbox */
.area_lightbox{
  margin: 1rem auto !important;
  text-align: center;
  /* flexbox */
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
  /* justify-content:均等配置 */
  -webkit-box-pack:justify;
  -moz-box-pack:justify;
  -webkit-flex-pack:justify;
  -moz-flex-pack:justify;
  -ms-flex-pack:justify;
  -webkit-justify-content:space-between;
  -moz-justify-content:space-between;
  justify-content:space-between;
}
  .area_lightbox .lightbox-item{
    line-height: 0;
    -webkit-box-flex:1;
    -moz-box-flex:1;
    -webkit-flex-grow:1;
    -moz-flex-grow:1;
    flex-grow:1;
    text-align: center;
  }
  .area_lightbox .lightbox-item img{
    display: block;
    width: 99%;
    margin: auto;
  }
  .area_lightbox .lightbox-item.is-empty{
    height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }


/* .button */
ul.area_button{
  margin: 0 !important;
  text-align: center;
}
  ul.area_button > li{ display: inline-block !important; }
  ul.area_button > li{ margin: 1rem; }

.button{ /* 単体でも一応使える(左寄せになる) */
  margin: 1rem auto;
  padding: .75rem 1rem;
  display: inline-block;
  background: #5978a6;
  text-decoration: none;
  border: 2px solid #5978a6;
  /* 文字と文字の間隔をあける */
  line-height: 1;
  letter-spacing: .2em;
  min-width: 10em;
  color: #fff;
}
.button.back{
  background: #fff;
  color: #000;
}
.button:hover{
  background: #fff;
  color: #5978a6;
  cursor: pointer;
}

#front_product ul li {
  width: 160px;
  text-align: center;
  background-repeat: no-repeat;
  margin: .5rem;
}
#front_product ul li.bgimg_blue { background-image: url(../img/bg_blue.png);}
#front_product ul li.bgimg_green { background-image: url(../img/bg_green.png);}
#front_product ul li.bgimg_orange { background-image: url(../img/bg_orange.png);}
#front_product ul li.bgimg_pink { background-image: url(../img/bg_pink.png);}
#front_product ul li.bgimg_purple { background-image: url(../img/bg_purple.png);}
#front_product ul li a > div{ margin: 2em 0 1em;}
#front_product ul li a > div:nth-of-type(3) {margin-bottom: 2.1em; padding: 0 .4rem;}
#front_product ul li a { color: #555; text-decoration: none;}

#front_case { background: #ededed;}
#front_case ul li { width: 32%; margin-bottom: 3rem;}
#front_case ul li div.bg_white {
  background-color: #fff;
  border-top: 8px solid #9db1d0;
  padding: 1rem .5rem;
  margin-top: 1rem;
  text-align: center;
}
#front_case ul li div.bg_white p { text-indent: 0;}


/* 会社概要 */
#wrapper #main #overview dl dt {
  float: left;
  clear: both;
  padding-bottom: .2em;
  margin-bottom: .6em;
}
#wrapper #main #overview dl dd {
  padding-left: 7rem;
  padding-bottom: .2em;
  margin-bottom: .6em;
  border-bottom: 1px dashed #bbb;
}

#wrapper #main #mokuteki ol li { margin-left: 1.5em;}


/* 料金プラン */
#wrapper #main table.month { margin-bottom: 1em;}
#wrapper #main table.month th {
  background-color: #d5e2f6;
  border: 1px solid #555;
  padding: 0.5em 2em 0.5em 0.5em;
  text-align: right;
  font-weight: normal;
  width: 50%;
}
#wrapper #main table.month td {
  border: 1px solid #555;
  padding: 0.5em;
  text-align: right;
  font-weight: bold;
}


/* 料金プラン */
#wrapper #main ul.pp_contact { margin-top: 1rem;}

/* ===================================================================
media screen
=================================================================== */
/* スマホ */
@media screen and (max-width: 640px){
  footer .footer-flex { text-align: center;}
  footer .footer_nav { display: none;}
}

/* タブレット1 */
@media screen and (min-width: 641px){
  footer div.footer-flex {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    /* 折り返し */
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    /* 均等配置 */
    -webkit-box-pack:justify;
    -moz-box-pack:justify;
    -webkit-flex-pack:justify;
    -moz-flex-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    justify-content:space-between;
  }
}

/* タブレット2以下 */
@media screen and (max-width: 800px){
  /* 「#footer_info」「#wrapperの中の#mainと#sidebar」を縦並びに変更 */
  #fotter_info.disp-flex,
  #wrapper.disp-flex{
    -webkit-box-direction:normal;
    -moz-box-direction:normal;
    -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
    -webkit-flex-direction:column;
    -moz-flex-direction:column;
    flex-direction:column;
  }


  /* #fotter_info */
  #fotter_info #footer_info_left #fotter_address .flex-item+.flex-item{ margin-left: 1rem; }
  #fotter_info #footer_info_right li{ font-size: .9rem; }
  #fotter_info #footer_info_left+#footer_info_right{
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  #footer_contact ul li {
    width: 100%;
    margin: .5rem auto;
  }

  
}


/* タブレット2以上 */
@media screen and (min-width: 801px){

  /* #footer_info */
  #footer_info_left > #fotter_title .table{ width: 19rem; }
    #fotter_title #fotter_address{
      -webkit-box-direction:normal;
      -moz-box-direction:normal;
      -webkit-box-orient:vertical;
      -moz-box-orient:vertical;
      -webkit-flex-direction:column;
      -moz-flex-direction:column;
      flex-direction:column;
    }

  footer #fotter_nav{ border-bottom: 1px #000 solid; }

  footer #fotter_info{ margin: 2rem 0; }
    /* footer_infoの左右コンテンツ間の棒線 */
    #fotter_info > #footer_info_left{
      padding-right: 1rem;
    }
    #fotter_info > #footer_info_right{
      padding-left: 1.5rem;
      border-left: 1px #000 solid;
    }
}

/* ipad */
@media screen and (min-width: 801px) and (max-width: 1024px){

}

/* ipad以下 */
@media screen and (max-width: 1024px){
  .size, .sub_size { width: 100%; padding-left: .8rem; padding-right: .8rem;}

  footer #fotter_nav .flex-item{ width: 30%; }
}

/* PC */
@media screen and (min-width: 1025px){
  .size{ width: 1000px; }
  
  #wrapper > #main{ margin-top: 2rem; margin-bottom: 4rem; }

  footer #fotter_nav{ border-bottom: 1px #000 solid; }
    #fotter_nav .flex-item{ width: 25%; }

  #bsc-copyright{ margin: .25rem .25rem 0; }
}