@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{ background: #fff; margin: 0; color: #1d223e;}
html body #container{ line-height: 1.5; }
img{ display: block; }

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


/* ===================================================================
ベース
=================================================================== */
article { margin: 1rem auto 0;}

#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 {
  margin-left: auto;
  margin-right: auto;
}


#container{}
#container a { color: #1d223e;}


/* header */
header{ font-size: 18px !important; margin-top: .3rem;}
header .reserve_btn { margin-top: 1rem;}
#container nav.area_pc{
  background: #293a67;
  
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;

  -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;

}
  nav #main_menu{
    
    text-align: center;
  }
  nav #main_menu > .flex-item{
    color: #fff;
    font-weight: bold;
    padding: 1.2rem .7rem;
  }
  nav #main_menu .variable, nav #main_menu .flex-item { text-decoration: none; color: #fff;}
  nav #main_menu .flex-item:hover{ text-decoration: underline; color: #fff!important;}


/* footer */
footer {
  text-align: center;
  background-color: #293a67;
  color: #fff;
  padding-top: 2rem;
  margin-top: 2rem;
}
footer a { color: #fff !important;}
footer #address ul { margin-top: 1.2rem;}


/* copyright */
#bsc-copyright{
  font-size: .7em;
  text-align: left;
}
#copyright {
  font-size: .8em;
  text-align: center;
  margin-top: 2rem;
}

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

/* ===================================================================
見出し
=================================================================== */
h1{
  color: #fff;
  font-size: 1.7rem;
  padding-left: .7rem;
}
h1 span { display: block; text-align: center;}

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

body:not(#front-page) h2{
  background-image: url(../img/h2_bk.jpg);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  font-size: 2rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
  text-align: center;
  margin-bottom: 2rem;
}

h3{
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
h4{ font-size: 1.1rem;}
h5{ }

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

/* ===================================================================
テキスト
=================================================================== */
.fc_red { color: #f36a6a;}
.yellow { color: #ffd500;}
.green { color: #10ad1a;}
.bold { font-weight: bold;}


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

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

  border-radius: 50%;            /* CSS3草案 */  
  -webkit-border-radius: 50%;    /* Safari,Google Chrome用 */
  -moz-border-radius: 50%;       /* 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);
}

.conversion {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
}
.conversion img { width: 100%;}


/* ===================================================================
area
=================================================================== */
/* front-page */

#front-page .bk_bl { background-color: #293a67; color: #fff;}
#front-page .bk_bl .txt_area {
  margin: 1.5rem 2rem;
  padding: 1.2rem 3rem;
  text-align: center;
  border: 2.5px solid #fff;
}
#front-page .bk_bl .txt_area .ttl {
  display: inline-block;
  padding: 0.4rem 1rem;
  margin-bottom: 2rem;
  font-weight: bold;
  font-size: 1.2rem;
  border: 3px solid #fff;
}

#front-page #news .news_list { margin-top: 1.5rem;}
#front-page #business .busi_list {
  margin-top: 1.5rem;
  text-align: center;
}
#front-page #business .busi_list ul li { width: 25%;}

#front-page #onlineshop {
  background-color: #cbcbcb;
}
#front-page #onlineshop a div {
  display: inline-block;
  padding: 5rem;
  border: 3px solid #293a67;
  background-color: #adadad;
}
#front-page #onlineshop a div p {
  display: inline-block;
  padding: 1rem 1.8rem;
  color: #fff;
  border: 3px solid #fff;
  font-size: 1.3rem;
}
#front-page #onlineshop a { text-decoration: none;}
#front-page #onlineshop > p {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 1.5rem;
}


/* business */
#business #busi_list table { width: 100%;}
#business #busi_list table tr > * {
  border: 1px solid #333;
  padding: .7rem .3rem;
}
#business #busi_list table tr th {
  vertical-align: middle;
  background-color: #b1bee0;
}


/* business_pat */
#business_pat table { width: 100%;}
#business_pat table tr > * {
  border: 1px solid #333;
  padding: .7rem .3rem;
}
#business_pat table tr th { vertical-align: middle; width: 25%;}
#business_pat .pic_area > div { padding: 0 .5rem;}

/* business_silk */
#business_silk table { width: 100%;}
#business_silk table tr > * {
  border: 1px solid #333;
  padding: .7rem .3rem;
}
#business_silk table tr th { vertical-align: middle; width: 25%;}

/* business_tji */
#business_tji .txt_area {
  background-color: #e7eeff;
  border: 1px solid #333;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  text-align: center;
}
#business_tji table tr > * {
  border: 1px solid #333;
  padding: .7rem .3rem;
  vertical-align: middle;
}
#business_tji table tr th {
  background-color: #b1bee0;
}


/* 3Dprinter */
.tbl3d { width: 100%;}
.tbl3d tr > * {
  border: 1px solid #333;
  padding: .7rem .3rem;
}
#create > section {
  border-top: 1.5px solid #333;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
}
#create .create_pic {
  width: 35%;
  padding: 0 1rem;
}
#create .create_txt {
  width: 65%;
  padding: 0 1rem;
}
#create .create_txt p + p { margin-top: 1rem;}

#faq { margin-top: 2rem; margin-bottom: 2rem;}
#faq dl.area_faq > *{
  position: relative;
  padding: .5rem 0;
  padding-left: 2rem;
}
#faq dl.area_faq > *:before{
  display: inline-block;
  width: 1.5rem;
  position: absolute;
  left: 0;
  text-align: center;
  border-radius: 50%;            /* CSS3草案 */  
  -webkit-border-radius: 50%;    /* Safari,Google Chrome用 */
  -moz-border-radius: 50%;       /* Firefox用 */
  margin-right: .5rem;
}
#faq dl.area_faq > dt:before{
  content: 'Q';
  color: #fff;
  background: #293a67;
}
#faq dl.area_faq > dd:before{
  content: 'A';
  background: #dfdfdf;
}
#faq dl.area_faq > dt{ padding-top: 1rem; }
#faq dl.area_faq > dd{ padding-bottom: 1rem;}
#faq dl.area_faq > dd+dt{ border-top: dashed #bbb 2px;}
#faq dl.area_faq > dd p + p:before {
  display: block;
  content: "↓";
}


#overview table { width: 100%;}
#overview table tr > * {
  border: 1px solid #333;
  padding: .7rem .3rem;
}
#overview table tr th {
  vertical-align: middle;
  background-color: #b1bee0;
}



/* ===================================================================
media screen
=================================================================== */
/* スマホ */
@media screen and (max-width: 640px){
  body:not(#front-page) h2 { margin-top: 2rem;}
  h1 {margin-left: -3rem !important;}
  #front-page .main-img_area { margin-top: 3rem;}
  #front-page .bk_bl.disp-flex { display: inherit;}
  #front-page .bk_bl { padding-bottom: .5rem}
  #front-page #business .busi_list ul li { width: 100%;}
  #front-page #business .busi_list ul li + li { margin-top: 1.8rem;}

  #business #busi_list table tr,
  #business #busi_list table th,
  #business #busi_list table td,
  #company #overview table tr,
  #company #overview table th,
  #company #overview table td,
  #business_tji table.disp-sp tr,
  #business_tji table.disp-sp th,
  #business_tji table.disp-sp td {
    display: block;
  }
  #company #overview table th { text-align: left;}

  #create .create_pic,#create .create_txt { width: 100% !important;}
  #create .create_txt { margin-top: 1rem;}

  #housin ol.marker li { margin-left: 1rem;}

  #business_tji table.disp-pc { display: none;}
  #td-printer .pic_area > div { width: 100% !important; padding: .5rem 0;}
}

/* タブレット1 */
@media screen and (min-width: 641px){
  #wrapper section:not(#notice) { padding-top: 3rem; padding-bottom: 3rem; } 
  .conversion ,.sp_main-img { display: none !important;}

  #front-page .bk_bl > div { width: 50%;}
  #front-page #onlineshop a:before { content: '◀'; padding-right: 1rem;}
  #front-page #onlineshop a:after { content: '▶'; padding-left: 1rem;}
  #front-page #onlineshop a:before ,
  #front-page #onlineshop a:after {
    color: #293a67;
    font-size: 3.5rem;
  }

  #business_tji table.disp-sp { display: none;}

}

/* タブレット2以下 */
@media screen and (max-width: 800px){
  
  
}


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

}

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

}

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

/* PC */
@media screen and (min-width: 1025px){
  .size { width: 1000px;}
}