@charset "UTF-8";
/*!
 *style css
*/

/*
primary #0080cc
薄青 #e8f4fa
文字色 #363636
*/

/* 基本設定 */
body {
  color:#535353;
  margin:0;
  padding:0;
  background-image: image-set(url(../images/common/top-sky.png) 1x, url(../images/common/top-sky@2x.png) 2x);
  background-image: -webkit-image-set(url(../images/common/top-sky.png) 1x, url(../images/common/top-sky@2x.png) 2x);
    background-repeat: repeat-x;
    background-position: center top;
  font-feature-settings : "palt";
	line-height:1.8rem;
	margin:0px;
	padding-top: 0px; /* ヘッダー分下げたい場合に必要 */
	font-family:Noto Sans JP lighter,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	overflow-wrap: break-word;/*可能な限り禁則処理が保持される*/
  word-wrap: break-word; /*英単語の折り返し*/
}
.font-serif {font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;}

#company, #concept, #contact, #privacy, #process, #project, #sitemap, #works {padding-top:77px;}
img {
  margin:0;
  padding:0;    
}
html {
  font-size: 1.0rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

.btn { border-radius: 0; }
.navbar-light .navbar-toggler {
    border-color: rgba(0,0,0,0);
}

/*! Brake Point =================================================================*/
@media only screen and (max-width: 768px) {
    img { max-width: 100%; }
}

.no-gutters5 {
  margin-right: -5px;
  margin-left: -5px;
}
.no-gutters5 > .col,
.no-gutters5 > [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}


/*! Head IMG =================================================================*/
.sitename{
    text-align: center;
    padding:75px 0px 0px;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

.brandcopy{
  position: absolute;
  right: 50px;
  top: 100px;
  z-index:100;
  color:white;
  font-size:3rem;
  font-weight:bold;
  text-align:right;
}
@media only screen and (max-width: 768px){
    .brandcopy {
        top: 85px;
        width:120px;
    }
}

#carouselExampleFade {padding-top:0px;}
.home-title {
    font-weight:normal;
    text-align:center;
    color:#255996;
}

hr {border-top: 1px solid #aaa;}

/*! ロゴ表示Splash =================================================================*/
/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  background:#333;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:500px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/*! Home =================================================================*/
.top-message {line-height:2.5rem;}
.top-message .home-title {font-weight:normal;}
.home-title {padding-top:5rem;}
.home-title-s {font-size:1.25rem;padding:0.5rem 0rem 3rem; font-weight:normal;}
.service-title {color:#255996;}

h2 {
  font-size: 30px;
  font-size: 3rem;
  position: relative;
  padding: 0rem;
  text-align: center;
}

h2:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 50px);
  width: 100px;
  height: 5px;
  content: '';
  border-radius: 0px;
  background: #9f6926;
}

.pagetitle {
color:#255996;
    font-size:1.25rem;
  font-weight: bold;
  padding: 0.5em 1em;
  border: 3px solid #4c9ac0;
  position: relative;
}
.pagetitle::before, .pagetitle::after {
  position: absolute;
  border: solid #4c9ac0;
  content: '';
}
.pagetitle::before {
  top: -10px;
  right: -16px;
  width: 10px;
  height: 100%;
  border-width: 2px 3px 4px 0px;
  transform: skewY(-45deg);
}
.pagetitle::after {
  top: -16px;
  left: 4px;
  width: 100%;
  height: 10px;
  border-width: 3px 2px 0px 4px;
  transform: skewX(-45deg);
}

.const-bg {
    width: 100%;
    margin: 0;
    padding: 10px 0 200px;
    position: relative;
    top: 50px;
}

.const-bg::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #e0f2fc;
    transform: skewY(-7deg);
    z-index: -1;
}





.home-imgbtn a:hover{
	opacity:0.5;
	transition:0.5s;
}
.home-message {
    margin:200px 0px;
    line-height:2.3rem;
}
.home-contact{
    line-height:2.3rem;
    margin-bottom:150px;
}
.home-contact{
    line-height:2rem;
}

/*! Parts =================================================================*/
.btn .conphon {
    font-weight:bold;
    font-size:1.4rem;
}
.linkmark {color:#ca0915;}
.sitemap_link a{color:black;}
dt {padding-top:2rem; font-size:1.4rem; font-weight:normal;}
.hisu {color:#ca0915; font-size:0.8rem; font-weight:normal;}
.concept-text {line-height:3rem;}
.works-cap{background-color:#eee; margin-bottom:1px; margin-top:1rem;}

.contentsbox {
    padding-top:3rem;
    margin-bottom:0px;
    padding-bottom:0px;
}

.text-small {
    font-size:0.7rem;
    line-height:1.2rem;
}

.works-title {
    font-size:0.85rem;
    margin-bottom:-0.3rem;
}


/*===モーダル表示のためのcss　*/

.hide-area{/*モーダル表示をする場所をあらかじめ隠す*/
	display: none;
}

.modaal-fullscreen .modaal-content-container{/*full画面の色設定*/
	background: #333;
	color: #fff;
	text-align: center;
}

.modaal-fullscreen .modaal-close{/*ボタンの色、位置*/
	background:none;
	right:20px;
}

/*クローズボタンの×の色変更*/
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*キャプション*/
.caption{
    display: block;
    padding: 10px 0;
}