/* for CRAYTOS with UIKit */
/*
 * UIKit 設定の上書き
 */
/* フォント Bell MT add
@font-face {
	font-family: 'Bell MT Font';
	src: url('../font/Bell MT.ttf') format('truetype');
}*/
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
} /* "Bell MT Font",  */


/*
 * COMMON
 */
/* Text: Size, Color */
@media (max-width: 469px){ /* under small:640px not UIKit 対象:375-414px*/
  .ct-tsize-2xsmall { font-size: 0.5rem; }
  .ct-tsize-xsmall { font-size: 0.75rem; }
  .ct-tsize-small { font-size: 0.95rem; }
  .ct-tsize-normal { font-size: 1.15rem; }
  .ct-tsize-large { font-size: 1.36rem; }
  .ct-tsize-xlarge { font-size: 1.5rem; }

  .ct-tsizeview-2xsmall { font-size:2.3vw; }
  .ct-tsizeview-xsmall { font-size: 2.9vw; }
  .ct-tsizeview-small { font-size: 3.8vw; }
  .ct-tsizeview-normal { font-size: 4.4vw ; }
  .ct-tsizeview-large { font-size: 5.2vw; }
  .ct-tsizeview-xlarge { font-size: 5.8vw; }
  .ct-tsizeview-2xlarge { font-size: 6.0vw; }
}
@media (min-width: 470px) and (max-width: 639px) { /* small:640px of UIKit */
  .ct-tsize-2xsmall { font-size: 0.6rem; }
  .ct-tsize-xsmall { font-size: 0.8rem; }
  .ct-tsize-small { font-size: 1.0rem; }
  .ct-tsize-normal { font-size: 1.2rem; }
  .ct-tsize-large { font-size: 1.5rem; }
  .ct-tsize-xlarge { font-size: 1.7rem; }

  .ct-tsizeview-2xsmall { font-size:1.7vw; }
  .ct-tsizeview-xsmall { font-size: 2.3vw; }
  .ct-tsizeview-small { font-size: 2.9vw; }
  .ct-tsizeview-normal { font-size: 3.5vw ;}
  .ct-tsizeview-large { font-size: 4.3vw; }
  .ct-tsizeview-xlarge { font-size: 5.2vw; }
  .ct-tsizeview-2xlarge { font-size: 5.5vw; }
}
@media (min-width: 640px) and (max-width: 959px) { /* medium:960 of UIKit */
  .ct-tsize-2xsmall { font-size: 0.7rem; }
  .ct-tsize-xsmall { font-size: 0.9rem; }
  .ct-tsize-small { font-size: 1.2rem; }
  .ct-tsize-normal { font-size: 1.4rem; }
  .ct-tsize-large { font-size: 1.8rem; }
  .ct-tsize-xlarge { font-size: 2.4rem; }

  .ct-tsizeview-2xsmall { font-size:1.5vw; }
  .ct-tsizeview-xsmall { font-size: 2.0vw; }
  .ct-tsizeview-small { font-size: 2.5vw; }
  .ct-tsizeview-normal { font-size: 3.0vw ;}
  .ct-tsizeview-large { font-size: 4.3vw; }
  .ct-tsizeview-xlarge { font-size: 5.1vw; }
  .ct-tsizeview-2xlarge { font-size: 5.4vw; }
}
@media (min-width: 960px) and (max-width: 1199px) { /* large 1200px of UIKit */
  .ct-tsize-2xsmall { font-size: 0.8rem; }
  .ct-tsize-xsmall { font-size: 1.05rem; }
  .ct-tsize-small { font-size: 1.3rem; }
  .ct-tsize-normal { font-size: 1.6rem; }
  .ct-tsize-large { font-size: 2.0rem; }
  .ct-tsize-xlarge { font-size: 2.625rem; }

  .ct-tsizeview-2xsmall { font-size:1.24vw; }
  .ct-tsizeview-xsmall { font-size: 1.6vw; }
  .ct-tsizeview-small { font-size: 2.04vw; }
  .ct-tsizeview-normal { font-size: 2.4vw ;}
  .ct-tsizeview-large { font-size: 3.16vw; }
  .ct-tsizeview-xlarge { font-size: 4.0vw; }
  .ct-tsizeview-2xlarge { font-size: 4.4vw; }
}
@media (min-width: 1200px) { /* xlarge:1600px of UIKit */
  .ct-tsize-2xsmall, .ct-tsizeview-2xsmall { font-size: 0.8rem; }
  .ct-tsize-xsmall, .ct-tsizeview-xsmall { font-size: 1.05rem; }
  .ct-tsize-small, .ct-tsizeview-small { font-size: 1.3rem; }
  .ct-tsize-normal, .ct-tsizeview-normal { font-size: 1.6rem; }
  .ct-tsize-large, .ct-tsizeview-large { font-size: 2.0rem; }
  .ct-tsize-xlarge, .ct-tsizeview-xlarge { font-size: 2.625rem; }
  .ct-tsizeview-2xlarge { font-size: 2.8rem; }
}

.ct-tcolor-corp-blue { color: #2792c3; } /* Corporate color blue rgb(39,146,195) */
.ct-tcolor-corp-lgreen { color: #b8d200; } /*    light green rgb(184,210,0) */
.ct-tcolor-corp-mgreen { color: #316745; } /*    mid green rgb(49,103,69) */
.ct-tcolor-corp-dgreen { color: #005243; } /*    deep green rgb(0,82,67) */
.ct-tcolor-corp-ground { color: #965036; } /*    ground rgb(150,80,54) */
.ct-tcolor-normal { color: rgb(81,81,81); } /* 515151 */
.ct-tcolor-craytos { color: rgb(48, 89, 108); } /* 30596C */
.ct-tcolor-mission { color: rgb(113, 232, 118); } /*71E876 */
.ct-tcolor-rd { color: rgb(220, 142, 86); } /* DC8E56 */
.ct-tcolor-product { color: rgb(0, 205, 218); } /* 00CDDA */
.ct-tcolor-dark { color: black; }
.ct-tcolor-dwhite { color: lightgrey; }
.ct-tcolor-white { color: white; }

/* Box, Line, Button : Color for Line, Fill */
.ct-box { border: 0.5px solid #858585; box-sizing: border-box; background: #FFFFFF;}
.ct-box-fill { background: #6B6B6B; }
.ct-box-footer { background: #30596C;}
.ct-line-headtop { border: 8px solid #2792C3; box-sizing: border-box; }
.ct-line-headbottom { border: 3px solid #2792C3; }
.ct-line-title { border: 1px solid #136745; }
.ct-btn-next-active { background: #005243; border-radius: 5px; }
.ct-btn-next-negative { background: #858585; border-radius: 5px; }

/* ヘッダー , フッター */
.ct-logo-bottom { margin-bottom: -20px; }
.ct-brandcopy-bottom { margin-bottom: 6px; }
.ct-head-menu-active { color: #005243; border-bottom: 3px solid rgba(0,82,67,0.8); padding-bottom: 2px;}
.ct-foot-menu-active { color: #2792c3; font-size: 0.875rem !important; } /* font-size: same uk-button */
.ct-siteheader {
  border-top: 8px solid #2792C3;
  border-bottom: 3px solid #2792C3;
  background: white !important;
}
.ct-sitefooter {
  background: #30596C;
  color: white;
}

/* パンクズ uikIT OverRide */
.uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before {
  content: ">" !important;
  margin: 0 10px !important;
}


/* スマホ表示 Dropdown Menu */
@media (max-width: 500px) {
  .ct-dropdown-sphone { left: -200px; }
  .uk-dropdown { min-width: 140px !important; }
}

/* 半角文字を全角文字中に表示する際の整形 */
.ct-halfwidth { font-size: 1.2em; letter-spacing: 0.4em;}

/* 文章だけを書くエリア設定 */
.ct-area-text { margin: 3em 10%;  line-height: 1.8em; letter-spacing: 0.2em; }
.ct-area-404 { margin: 1em 10% 6em;  line-height: 1.8em; letter-spacing: 0.2em; }
@media (max-width: 959px) {
 .ct-area-text { margin: 2em auto;  line-height: 1.2em; letter-spacing: 0.1em; }
 .ct-area-404 { margin: 1em auto 5em;  line-height: 1.2em; letter-spacing: 0.1em; }
}


/* ページ下方スクロールで表示する goto Top */
.pagetop {  position: fixed; bottom: 30px; right: 20px;}
  .pagetop a {
    display: block;
    width: 50px;
    height: 50px;
    background-color: rgba(49,103,69,0.6);
    border-radius: 50px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    line-height: 42px;
  }


 /*
  * TOP
  */
/* カルーセル */
@media (max-width: 469px){ /* under small:640px not UIKit */
  .ct-text-sliderwhite { font-size: 18px; color: white; } /* 30596c */
  .ct-container-sm-paddingzero { padding-left: 0px !important; padding-right: 0px !important; }
}
@media (min-width: 470px) and (max-width: 639px) { /* small:640px of UIKit */
  .ct-text-sliderwhite { font-size: 24px; color: white; } /* 30596c */
  .ct-container-sm-paddingzero { padding-left: 0px !important; padding-right: 0px !important; }
}
@media (min-width: 640px)  { /* medium:960 of UIKit */
  .ct-text-sliderwhite { font-size: 30px; color: white; } /* 30596c */
  .ct-container-sm-paddingzero { padding-left: 0px !important; padding-right: 0px !important; }
}
@media (min-width: 960px) { /* medium:960 of UIKit */
  .ct-text-sliderwhite { font-size: 36px; color: white; } /* 30596c */
}

/* BOX: MISSION, R&D, PRODUCT */
.ct-box-margin-bottom { margin-bottom: -1.4em; }
.ct-box-margin-aboveline { padding-top: 14px; }

/* BOX/TITLE: TOP's PRODUCTS, NEWS */
.ct-subttl { border-bottom: 3px solid #2792C3; padding: 0 1.4em 0.3em; letter-spacing: 0.32em; }
.ct-card-header { height: 36px; padding: 5px 0px; text-align: center;
   border-top: 0.5px solid #858585; border-left: 0.5px solid #858585; border-right: 0.5px solid #858585;}
.ct-card-body { box-sizing: border-box; background: #FFFFFF; height: 180px; 
  border-left: 0.5px solid #858585; border-right: 0.5px solid #858585;}
.ct-card-footer { height: 36px; padding: 5px 0px; background-color: #858585; text-align: center; }
.ct-card-img { margin: 20px; }
@media (max-width: 434px)  {  .ct-card-img { margin: 20px 0 0 0; } }
@media (max-width: 360px)  {  .ct-card-header h3 { font-size: small; } .ct-card-body { font-size: small; } }
@media (max-width: 379px)  {  .ct-news-title { white-space: nowrap !important; } .ct-news-body { padding-top: 6em !important; }}
@media (min-width: 380px) and (max-width: 499px)  {  .ct-news-title { white-space: nowrap !important; } .ct-news-body { padding-top: 5em !important; }}
@media (min-width: 500px) and (max-width: 959px)  {  .ct-news-title { white-space: nowrap !important; } .ct-news-body { padding-top: 3em !important; }}
.ct-news-title { margin-bottom: 4px;}
@media (min-width: 1200px)  {
  .ct-news-section { margin-left: 10px; margin-right: 40px; }
}
.ct-news-date { border-bottom: #858585 0.5px dashed;}

/*
 * 企業理念 研究・開発 お知らせ
 */
.ct-page-head-width { min-width:46em; }
@media (max-width: 639px) {
  .ct-page-head-width { min-width:100%; }
}
.ct-page-title { letter-spacing: 0.32em; margin-bottom: 0.3em !important; margin: auto 19%; }
.ct-page-titlebelow { border-top: 1px solid #005243; padding-top: 0.2em ; letter-spacing: 0.6em; margin: auto 15%; }
/* .ct-page-lead { margin-top: 3em ; margin-bottom: 3em ; line-height: 2em; letter-spacing: 0.4em; } */
.ct-page-lead { line-height: 1.6em; letter-spacing: 0.3em; }
.ct-page-body { color: black; background-color: rgba(255, 255, 255, 0.8); padding: 1em 2em; margin-left:4em; margin-right:4em; }
.ct-page-bodybelow { color: black; margin-top: 4em; }
.ct-page-bodybelow a { vertical-align: baseline; color: #2792c3;}
@media (max-width: 740px) {
  .ct-page-body { padding-left: 1em; padding-right: 1em; margin-left: 1em; margin-right: 1em; }
}

/*
 * 会社案内
 */
 /* 2列表 */
.ct-table2col-title { min-height: 4em; display: grid; align-items: center; justify-content: center; text-align: center; background: rgba(81,81,81,0.1); margin: 2px 0;}
.ct-table2col-content { display: flex; align-items: center; border-bottom: 1px solid rgba(81,81,81,0.2); padding-left: 2em; }
.ct-table2col-content-nlines { padding-top: 1em; } /* 事業内容: 3行以上content */
@media (max-width: 469px){ /* under small:640px not UIKit 対象:375-414px*/
  .nameimg-ms { width: 138px; height: 70px; background-image: url("../img/MaSho12-2.gif"); background-repeat: no-repeat; background-position: 23px 18px; }
  .nameimg-mt { width: 138px; height: 70px; background-image: url("../img/MaTa12-2.gif");  background-repeat: no-repeat; background-position: 23px 18px; }
}
@media (min-width: 470px) and (max-width: 639px) {
  .nameimg-ms { width: 211px; height: 70px; background-image: url("../img/MaSho12.gif"); background-repeat: no-repeat; background-position: 25px 28px; }
  .nameimg-mt { width: 211px; height: 70px; background-image: url("../img/MaTa12.gif");  background-repeat: no-repeat; background-position: 25px 28px; }
}
@media (min-width: 640px) and (max-width: 959px) {
  .nameimg-ms { width: 236px; height: 70px; background-image: url("../img/MaSho14.gif"); background-repeat: no-repeat; background-position: 29px 28px; }
  .nameimg-mt { width: 236px; height: 70px; background-image: url("../img/MaTa14.gif");  background-repeat: no-repeat; background-position: 29px 28px; }
}
@media (min-width: 960px) {
  .nameimg-ms { width: 269px; height: 70px; background-image: url("../img/MaSho16.gif"); background-repeat: no-repeat; background-position: 33px 28px; }
  .nameimg-mt { width: 269px; height: 70px; background-image: url("../img/MaTa16.gif");  background-repeat: no-repeat; background-position: 33px 28px; }
}

/*
 * プライバシーポリシー
 */
 /* 1列表 */
.ct-tablerow-content { margin-left: 1em; }
.ct-tablerow-contentlist { margin-left: 2em; }

/*
 * 製品・購入
 */
.ct-prod-box { margin: auto 2em; }
.ct-page-bottom-spacer { margin-bottom: 6em;}
@media (max-width: 740px) {
  .ct-prod-box { margin: auto 2em; }
  .ct-page-bottom-spacer { margin-bottom: 3em;}
}
.ct-link {
  vertical-align: baseline !important;
  font-size: 1.2rem !important;
}

/*
 * 問い合わせ
 */
 .form-btn {
	background: #53b5aa;
	border: 1px solid #999;
	border-style: none none solid none;
	cursor: pointer;
	display: block;
	color: #fff;
	padding: 16px 32px;

	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-ms-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;
}
@media (max-width: 639px) {
  .form-btn {  padding: 8px 16px;  }
}
.form-btn:hover {
	color: #fff;
	background: #429188;
}