@charset "utf-8";
/* CSS Document */

.col_corpo{
	color: #00608d;
}
.bg_dai{
	color: #fe8b72;
}
.bg_gr{
	background-color: #9de8d3;
}
.bg_mos{
	background-color: #d1e4e5;
}
.bgimg_douro{
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) ,url(../img/bg_syamei.jpg);
}

.col_dai{
	 color: #fe8b72;
}
.col_aq{
	color: #20b2aa;
}
.col_pi{
	color: #ff938b;
}
.kadomaru{
	border-radius: 20px;
}
.main-pages {
  margin-top: 0px !important;
}
/*-----------------------------------------------
	ヘッダー背景設定
-----------------------------------------------*/
#header {   
	background-image: url("../img/head_bg.png");
}
/*-----------------------------------------------
	他ページからのページ内リンクのズレをなくす設定
-----------------------------------------------*/
.anchor {   
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}
/*-----------------------------------------------
	切の良い箇所でテキスト文字を改行させる設定
-----------------------------------------------*/
.kai span {
   display: inline-block; 
}

/*-----------------------------------------------
	TABLE　セル回り込み　専用設定
-----------------------------------------------*/
.mawari td { text-align: left; }
 
@media only screen and (max-width:767px){   /* スマホ時にのみセルを回り込ませる */
    .mawari th,
    .mawari td{
    width: 100%;
    display: block;
    }
}


/*-----------------------------------------------
	背景にアミカケ設定
-----------------------------------------------*/
.sirowaku{
	background-color:rgba(255,255,255,0.7);
	padding: 20px;
	border-radius: 20px;
	margin: 10px;
}
.kiwaku{
	background-color:#fff8dc;
	padding: 20px;
	border-radius: 20px;
}
/*-----------------------------------------------
	先頭頭出し　インデント設定
-----------------------------------------------*/
.topindent{	
	padding-left:1.1em;
	text-indent:-0.6em;
}
/*-----------------------------------------------
	※印　インデント設定
-----------------------------------------------*/
.itiretsu{
	display: inline-block;
	vertical-align:middle;
}
/*--------------------------------------------------------------
# ブラウザ幅でcss内容を変更
--------------------------------------------------------------*/
 @media screen and (max-width:767px){   /*spのみ用のcssを記述*/
	 .sp_none {display:none;}
	 .tx_lc{text-align: center;}
	 .tx_rc{text-align: center;}
}

@media screen and (min-width:768px) {  /*pcのみ用のcssを記述*/
	.pc_none {display:none;}
	 .tx_lc{text-align: left;}
	 .tx_rc{text-align: right;}
}



/*--------------------------------------------------------------
# 見出し設定
--------------------------------------------------------------*/
.oomidashi h2 {
  position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;
	color: #00608d;
}

.oomidashi h2:before,
.oomidashi h2:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #00608d;
  border-bottom: solid 2px #00608d;
}

.oomidashi h2:before {
  left: 0;
}

.oomidashi h2:after {
  right: 0;
}

.cyoimidashi {
  position: relative;
  padding: 1rem 2rem;
  border-top: 4px solid #9de8d3;
  border-bottom: 4px solid #9de8d3;
	background-color: #fffaf0;
}

.cyoimidashi:before {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  content: '';
  border-top: 2px solid #9de8d3;
  border-bottom: 2px solid #9de8d3;
}

.komidashi{
	display: inline-block;
	border-bottom: #000 3px solid;
}
.komidashi:first-letter {
  font-size: 150%;
  color: #eb6100;
}

.syamei {
	display: inline-block;
  position: relative;
  padding: 0.5rem 1rem;
  text-align: center;
  border: 3px solid #666;
	color: #000;
	background-color: #fffaf0;
	border-radius: 0 6px 6px 6px;
}

.syamei:before {
  font-size: 14px;
  position: absolute;
  top: -30px;
  left: -3px;
  height: 30px;
  padding: 0.5em 1em;
  content: '会社名';
  color: #fff;
  background: #666;
	border-radius: 6px 6px 0 0;
}


.syoumidashi {
  padding: 0.5rem 2rem 0.5rem 1rem;
  border-left: 6px double #666;
}


.cyuudashi h1 {
  position: relative;/*相対位置*/
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  color: #7b6459;/*文字色*/
	display: inline-block;
	border-bottom: #e6eb94 3px solid;
}

.cyuudashi h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f578";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #ff938b; /*アイコン色*/
-moz-transform: rotate(-160deg);/*アイコンを160度回転*/
    -webkit-transform: rotate(-160deg);
    -o-transform: rotate(-160deg);
    -ms-transform: rotate(-160deg);
    transform: rotate(-160deg);
}
/*--------------------------------------------------------------
# リンクボタン　専用設定
--------------------------------------------------------------*/
.btn-flat-border {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #fe8b72;
  border: solid 2px #fe8b72;
  border-radius: 3px;
  transition: .4s;
	font-weight: bold;
	background-color: #ffffff;
}

.btn-flat-border:hover {
  background: #f08080;
  color: white;
}

/*--------------------------------------------------------------
# フッタ設定
--------------------------------------------------------------*/
.foot_txt a{
	color: #00608d;
}

.foot_txt a:hover{
	color: #ff938b;
}

.foot_txt ul{
	padding-left: 0;
}
.foot_txt ul li{
	list-style: none;
	margin-bottom: 10px;
}

.s_toi{
	background-image: url("../img/toi_bg.gif");
	color: #333;
	padding: 10px;
	
}

/*--------------------------------------------------------------
# TOP スライド枠　専用設定
--------------------------------------------------------------*/
#topslide {
  width: 100%;
  position: relative;
}


/*--------------------------------------------------------------
# TOP スライドショーswiper 　専用設定
--------------------------------------------------------------*/

 @-webkit-keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}

@keyframes zoomUp { /* 1.15倍させる指定 */
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}

.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img { /* 12秒かけて拡大させる */
    -webkit-animation: zoomUp 12s linear 0s;
    animation: zoomUp 12s linear 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.slide-img {
    background-size: cover; 
    background-position: center center; /* 背景画像は中央を軸に表示させる */
}
.swiper-slide .slide-text {
      position: absolute;
      z-index: 10;
      color: #fff;
      width: 100%;
      top: 40%; /* 背景画像TOPからの設置位置指定 */
      text-align: center;
      font-weight: bold;
	-moz-text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
-webkit-text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
-ms-text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
	font-size: 2rem !important;
}	

/*767px以下（スマホ用）でCSS切替*/
    @media screen and (max-width: 767px) {
        .slide-img {
        height: 300px; /* 250pxの高さで表示させる */
			}
	/*	.slide-text {
         font-size: 2rem;
			}	*/		 /* 背景画像の上に載る文字の大きさ */
		.topmarkhen{
			width:80px;
		}
}
 /* 768px以上（PC用）でCSS切替*/
    @media screen and (min-width: 768px) {
        .slide-img {
         height: 600px; /* 600pxの高さで表示させる */
			}
		/*.slide-text {
         font-size: 4rem; 
			}*/				/* 背景画像の上に載る文字の大きさ */
		.topmarkhen{
			max-width: 100%;
		}
}

/*--------------------------------------------------------------
# 新着　見出し
--------------------------------------------------------------*/

#news_detail h4 {
  position: relative;
  background: #eff4ff;
  padding: 2px 5px 2px 20px;
  font-size: 20px;
  color: #474747;
  border-radius: 0 10px 10px 0;
	margin-left: 30px;
}

#news_detail h4:before {
  font-family: "Font Awesome 5 Free";
  content: "\f578";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #81a1e4;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
  border-bottom: solid 2px #4967b4;
}

/*--------------------------------------------------------------
# ビフォーアフター
--------------------------------------------------------------*/
.zengo {
    display:  inline-block;     /* インラインブロック要素にする */
    width: 43%;               /* 幅指定 */
    vertical-align:  middle;    /* 要素を上下中央揃えにする */
}
.zengo_arrow{	
    display:  inline-block;     /* インラインブロック要素にする */
    width: 14%;               /* 幅指定 */
	padding: 0 10px;
    vertical-align:  middle;    /* 要素を上下中央揃えにする */
}

/*--------------------------------------------------------------
# テープ枠
--------------------------------------------------------------*/
.kakomi-tape4 {
 position:relative;
 padding: 50px 20px 20px;
 margin: 2.5em auto;
 width: 90%;
 color: #555555; /* 文字色 */
 background-color: #e0ebaf; /*BOX背景色*/ 
 box-shadow: 0 2px 5px #999;
	font-size: 18px;
}
.title-tape4 {
 position: absolute;
 top: -15px;
 left: 30px;
 padding: 4px 20px;
 color: #555555; /*タイトル色*/
 font-weight: bold;
 background-color: rgba(255,255,255,.1);
 border-left: 2px dotted rgba(0,0,0,.1);
 border-right: 2px dotted rgba(0,0,0,.1);
 box-shadow: 0 0 5px rgba(0,0,0,0.2); 
 transform: rotate(-3deg);
	font-size: 24px;
	
}

/*--------------------------------------------------------------
# マグロ解体　見出し
--------------------------------------------------------------*/

.kaitai h4  {
	padding: 6px;
	color: #dc143c;
	border-top: 2px solid;
	border-bottom:  2px solid;
    transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
}

/*--------------------------------------------------------------
# TOP プロフィールセクション
--------------------------------------------------------------*/
#profile {
	padding: 60px 0 40px 0;
	box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
	background-image: url("../img/profileimg.jpg");
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;  /* 少し明るめに */
	background-repeat: no-repeat;
	background-position: center bottom; /* 画像を常に左右の中央、下ぞろえで配置 */
	background-size: cover;  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-attachment: fixed;  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
}

/*--------------------------------------------------------------
# 経営理念　箇条書き設定
--------------------------------------------------------------*/
.list_w ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.list_w ul li {
	padding-left: 35px;
	line-height: 2.5em;
	background: left top no-repeat;
	background-size: 26px auto;
	background-position: 0 0px; 
}
.list_w ul li:nth-child(1) {
	background-image: url(../img/1.png);
}
.list_w ul li:nth-child(2) {
	background-image: url(../img/2.png);
}
.list_w ul li:nth-child(3) {
	background-image: url(../img/3.png);
}
.list_w ul li:nth-child(4) {
	background-image: url(../img/4.png);
}


/*--------------------------------------------------------------
# 理念　背景画像をiphoneproまでしか表示させない
--------------------------------------------------------------*/

@media screen and (min-width:992px) {  /*pcのみ用のcssを記述*/
	.bg_rinen{
	background-image: url("../img/rinen1.jpg");
	background-size:auto 100%;/*この場合は高さが自動設定*/
	background-repeat: no-repeat;
	background-position: right;
}
}



/*--------------------------------------------------------------
# 事業内容テーブル設定
--------------------------------------------------------------*/
.t_item th, .t_item td{
	padding: 6px;
	border-bottom: #aaa 1px dashed;
}
.t_item th{
	text-align: left;
	color: #00608d;
	background-color: #efefef;
}
.t_item tr{
	border-top: #aaa 1px dashed;
}
/*--------------------------------------------------------------
#  mapセクション
--------------------------------------------------------------*/

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/*--------------------------------------------------------------
#  商品案内セクション
--------------------------------------------------------------*/
/* s_item Section
--------------------------------*/

#s_item {
/*  padding: 60px 0;*/
/*  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);*/
}

#s_item #s_item-flters {
  padding: 0;
  margin: 5px 0 35px 0;
  list-style: none;
  text-align: center;
}

#s_item #s_item-flters li {
  cursor: pointer;
  margin: 15px 15px 15px 0;
  display: inline-block;
  padding: 6px 20px;
  font-size: 12px;
  line-height: 20px;
  color: #007bff;
  border-radius: 50px;
  text-transform: uppercase;
  background: #ecf5ff;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

#s_item #s_item-flters li:hover,
#s_item #s_item-flters li.filter-active {
  background: #007bff;
  color: #fff;
}

#s_item #s_item-flters li:last-child {
  margin-right: 0;
}

#s_item .s_item-item {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}

#s_item .s_item-item .s_item-wrap {
  overflow: hidden;
  position: relative;
  border-radius: 6px;
  margin: 0;
}

#s_item .s_item-item .s_item-wrap:hover img {
  opacity: 0.4;
  transition: 0.3s;
}

#s_item .s_item-item .s_item-wrap .s_item-info {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  opacity: 0;
  transition: 0.2s linear;
}

#s_item .s_item-item .s_item-wrap .s_item-info h4 {
  font-size: 22px;
  line-height: 1px;
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 0;
}

#s_item .s_item-item .s_item-wrap .s_item-info h4 a {
  color: #fff;
}

#s_item .s_item-item .s_item-wrap .s_item-info h4 a:hover {
  color: #007bff;
}

#s_item .s_item-item .s_item-wrap .s_item-info p {
  padding: 0;
  margin: 0;
  color: #e2effe;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
}

#s_item .s_item-item .s_item-wrap .s_item-info .link-preview,
#s_item .s_item-item .s_item-wrap .s_item-info .link-details {
  display: inline-block;
  line-height: 1;
  text-align: center;
  width: 36px;
  height: 36px;
  background: #007bff;
  border-radius: 50%;
  margin: 10px 4px 0 4px;
}

#s_item .s_item-item .s_item-wrap .s_item-info .link-preview i,
#s_item .s_item-item .s_item-wrap .s_item-info .link-details i {
  padding-top: 6px;
  font-size: 22px;
  color: #fff;
}

#s_item .s_item-item .s_item-wrap .s_item-info .link-preview:hover,
#s_item .s_item-item .s_item-wrap .s_item-info .link-details:hover {
  background: #3395ff;
}

#s_item .s_item-item .s_item-wrap .s_item-info .link-preview:hover i,
#s_item .s_item-item .s_item-wrap .s_item-info .link-details:hover i {
  color: #fff;
}

#s_item .s_item-item .s_item-wrap:hover {
  background: #003166;
}

#s_item .s_item-item .s_item-wrap:hover .s_item-info {
  opacity: 1;
}