@charset "utf-8";

/* 共通
------------------------------------------------------------*/
body {
	background-color: #ffffff;
	font-family: "Roboto" , 'Zen Kaku Gothic New', sans-serif;
	font-size: 16px;
	letter-spacing: 0.05em;
	color: #333;
	overflow-wrap:break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
	margin: 0;
}

/*-- タグリンク --*/
body a{text-decoration: none; color:#333;}
body a:link {text-decoration: none; color:#333;} /* 未訪問 */
body a:visited{text-decoration: none; color:#333}/* 訪問済み */
body a:hover{color:#a9a9a9;}/* マウスオーバー */
body a:active{text-decoration: none;}/* クリック中 */

/*-- 共通カラー設定 追記 --*/
:root {
  --color-gray: #333;
  --color-white: #FFF;
  --color-black: #000;
}

img{
	width: 100%;
	height: auto;
}

section{
	clear:both;
}

.br-mid{
	display: none;
}
.br-sp{
	display: none;
}
.sp-phone{
	display: none;
}

/*-- pc電話発信無効 --*/
@media(min-width: 599px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}

/*========= ヘッダーナビ ===============*/
.header-nav{
	position: absolute;
	z-index: 20;
	top: 0;
	right: 0;
	left: auto;
	width: 100%;
	margin-right: 0;
	height: 145px;
}
.header-nav-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end; /* right → flex-end に */
	margin: 0 auto;
}

.header-nav-container-item {
  position: relative;
  display: inline-flex;       /* 文字に合わせて幅が縮む */
  align-items: center;        /* 縦方向中央揃え */
  font-size: clamp(14px, 2vw, 18px);
	color: #333;
	font-weight: bold;
	padding: 0px 20px 0;       /* ← ここで左右余白を固定 */
	opacity: 1;
	transition: 1s;
	box-sizing: border-box;     /* padding込みで幅を計算 */
}

/* 縦線（右側のみ） */
.header-nav-container-item::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5px;
  height: 30%;
  background: #333;
  right: 0;
}

/* 最後の項目は右線を消す */
.header-nav-container-item:last-child::after {
  display: none;
}

/* 最初の項目だけ左線を追加 */
.header-nav-container-item:first-child::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5px;
  height: 30%;
  background: #333;
  left: -1px;
}

/* hover */
.header-nav-container-item a:hover {
  opacity: 0.3;
}

/* リンク */
.header-nav-container-item a{text-decoration: none; color:#333 ;}
.header-nav-container-item a:link {text-decoration: none; color:#333;}
.header-nav-container-item a:visited{text-decoration: none; color:#333;}
.header-nav-container-item a:active{text-decoration: none;}

/*========= contact ===============*/
.header-nav-container-contact{
	font-family: "Roboto", sans-serif;
	font-weight:  bold;
	font-style: normal;
	font-size: 20px;
	background: #333;
	color: #fff;
	padding: 10px 25px;
	opacity: 1;
	transition: 1.0s;
	border-radius: 30px;
	margin: 45px 40px 45px 20px;
}
.header-nav-container-contact:hover{
		opacity: 0.3;
}
.header-nav-container-contact a{text-decoration: none; color:#333;}
.header-nav-container-contact a:link {text-decoration: none; color:#fff;} /* 未訪問 */
.header-nav-container-contact a:visited{text-decoration: none; color:#fff}/* 訪問済み */
.header-nav-container-contact a:hover{color:#a9a9a9;}/* マウスオーバー */
.header-nav-container-contact a:active{text-decoration: none;}/* クリック中 */


/*========= sp 三本線 ===============*/
.openbtn{
  display: none;
}
#g-nav{
	display: none;
}
/*========= TOPマーク ===============*/
.top-mark{
	display: block;
  }

.top-mark{
	position:fixed;
	z-index: 888;/*ボタンを最前面に*/
	bottom:40px;
	right: 40px;
	width: 50px;
	height:50px;
	opacity: 0.8;
  }

/*--------------------------------------------------------
  メインビジュアル
--------------------------------------------------------*/

/*pcブロック*/
.main-pc{
	display: block;
}

/*親*/
.swiper-slide {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #fff;
  overflow: hidden;
}


/*1*/
.slide1{
	position: absolute;
	top: 290px;
	right:0%;
	width: 64%;
	height: 800px;
	overflow: hidden;
}

.slide1 img {
	object-fit: cover;
	width: 100%;
  }

/* テキスト全体の配置 */
.top-text{
	position: absolute;
	top: 170px;
	left: 4%;
	z-index: 100;
}

/* 英語見出し */
.top-headline{
	font-family: "Roboto", sans-serif;
	font-weight: bold;
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 70px;
	letter-spacing: -0.01em;
	color: #fff;
}

/* 日本語見出し1 */
.top-headline-jp{
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 21px;
	letter-spacing: 0.1em;
	color: #fff;
	background-color: #333;
	padding: 12px 30px;
	margin-top: 40px;
	width: 480px;
}

/* 日本語見出し2 */
.top-headline-jp2{
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 21px;
	letter-spacing: 0.1em;
	color: #fff;
	background-color: #333;
	padding: 12px 30px;
	width: 390px;
	margin-top: 10px;
}

/* 本文（説明） */
.top-headline-body{
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 18px;
	letter-spacing: 0.05em;
	line-height: 2em;
	margin-top: 27%;
	margin-left: 10px;
	color: #fff;
}


/*背景グラデーション*/
.main-back{
	position: absolute;
	top:0%;
	left:0%;
	width: 90%;
	height: 100vh;
	z-index: 0;
	background: linear-gradient(to right, #09adad 0%, #95c6c6 65%, #ffffff 100%);
}
.main-back-sp{
	display: none;
}

/*ロゴ*/
.top-logo{
		position: absolute;
		z-index: 20;
		top: 30px;
		left: 4%;
		width: 400px;
}

.top-logo img{
	opacity: 1;
	transition: 1.0s ;
}
.top-logo img:hover{
	opacity: 0.5;
}
.top-content{
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #fff;
}

.sub-content{
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: clamp(11px, 2vw, 16px);
}

.top-logomark{
	width: 340px;
	margin-top: 14px;
}

/*--------------------------------------------------------
事業内容
--------------------------------------------------------*/

/*********************
タイトル(事業内容共通）
**********************/
#top-business{
	margin-top: 180px;
}
.business-back{
	width: 1000px;
}
.business-back-sp{
	display: none;
}

.business-title{
	margin-top: -220px;
	margin-bottom: 160px;
	margin-left: 200px;
}
.business-title-eg{
	font-size: 21px;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: "Roboto", sans-serif;
}
.business-title-eg::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  background-color: #333; /* 任意の色に変更可 */
}
.business-title-jp{
	font-size: 38px;
	font-weight: 700;
	letter-spacing: 0.1em;
}
.business-title-body{
	font-size: 18px;
	font-weight: 500;
	margin-top: 20px;
	line-height: 2em;
}

/*********************
ネジ・小物･周辺部品の販売
**********************/
.business-1 ,
.business-3{
	width: 100%;
	height: 500px;
	position: relative;
	margin-bottom: 100px;
}
.business-1-background,
.business-3-background{
	position: absolute;
	right: 0;
	width: 80%;
	height: 500px;
	background-color: #f5f5f5;
	z-index: -100;
}
.business-1-inner {
  max-width: 1200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  padding-top: 60px;
}
.business-1-image img {
  width: 600px;
  height: auto;
  object-fit: cover;
}
.business-1-image-sp{
	display: none;
}

.business-1-text {
  flex: 1;
  min-width: 280px;
  max-width: 540px;
  margin-top: 40px;
}
.business-1-text h3 {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
  color: #00a6a6;
  font-size: 28px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: solid 1px #555;
}
.business-1-text p {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 24px;
}
.btn-business-1 {
  display: inline-block;
  background-color: #00a6a6;
  color: #fff;
  margin-top: 15px;
  text-align: center;
  width: 100%;
  padding: 12px 100px;
  text-decoration: none;
  border-radius: 30px;
  font-size: 20px;
  font-weight: bold;
  transition: background-color 1s ease;
}
.btn-business-1 a {color:#fff;}
.btn-business-1 a:link {color:#fff;}
.btn-business-1 a:visited {color:#fff;}
.btn-business-1 a:active {color:#fff;}

.btn-business-1:hover {
  background-color: #006666;
  color: #fff;
  transition: 1.0s ease;
}

/*********************
各種機械・ツール類の販売
**********************/
.business-2 {
	width: 100%;
	height: 980px;
	position: relative;
	margin-bottom: 100px;
}

.business-2-background{
	position: absolute;
	left: 0;
	width: 80%;
	height: 980px;
	background-color: #f5f5f5;
	z-index: -100;
}
.business-2-inner {
  max-width: 1200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  padding-top: 60px;
}
.business-2-image img {
  width: 600px;
  height: auto;
  object-fit: cover;
}
.business-2-text {
  flex: 1;
  max-width: 540px;
  margin-top: 40px;
}
.business-2-text h3 {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
  color: #00a6a6;
  font-size: 28px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: solid 1px #555;
}
.business-2-text p {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 24px;
}
.btn-business-2 {
  display: inline-block;
  background-color: #00a6a6;
  color: #fff;
  margin-top: 15px;
  text-align: center;
  width: 100%;
  padding: 12px 100px;
  text-decoration: none;
  border-radius: 30px;
  font-size: 20px;
  font-weight: bold;
  transition: background-color 1s ease;
}
.btn-business-2 a {color:#fff;}
.btn-business-2 a:link {color:#fff;}
.btn-business-2 a:visited {color:#fff;}
.btn-business-2 a:active {color:#fff;}

.btn-business-2:hover {
  background-color: #006666;
  color: #fff;
  transition: 1.0s ease;
}
/*********************
機械工具取り扱いメーカー 一覧 完全版
**********************/

/* -----------------------------
  共通：btn-list全体
----------------------------- */
.btn-list {
  position: relative;
  max-width: 1200px;
  margin: 60px auto;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden; /* 背景画像はみ出さないように */
}

/* 内白枠 */
.btn-list::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1.5px solid #fff;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 1;
}

/* 背景画像 */
.btn-list-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* -----------------------------
  内部コンテンツ
----------------------------- */
.btn-list-inner {
  position: relative;
  z-index: 1;
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  padding: 45px;
}

/* アイコン */
.btn-list-icon {
  width: 80px;
  padding-top: 8px;
}

/* 見出しテキスト */
.btn-list-text {
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 28px;
  padding: 20px;
}

/* -----------------------------
  説明文＋ボタン部分
----------------------------- */
.btn-list-description {
  display: flex;
  flex-direction: column;   /* 縦並び */
  align-items: center;      /* ボタンを横方向中央に配置 */
  gap: 30px;
  width: fit-content;       /* 説明文幅に合わせる */
  margin: 20px auto 0;      /* 上余白だけ */
}

/* 説明テキスト */
.btn-list-text2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: -0.02em;
  color: #fff;             /* 文字色白 */
  text-align: left;
  margin: 0;
}

/* -----------------------------
  ボタン
----------------------------- */
a.btn-business-3 {
  display: inline-block;
  background-color: #00a6a6;
  color: #fff !important;       /* グローバルリンク色より優先 */
  text-align: center;
  padding: 12px 100px;
  text-decoration: none;
  border-radius: 30px;
  font-size: 20px;
  font-weight: bold;
  transition: background-color 0.3s ease;
	width: 80%;
}

a.btn-business-3:hover {
  background-color: #006666;
  color: #fff !important;      /* ホバー時も文字白 */
	transition: 1.0s ease;
}

/* -----------------------------
  トップページ専用
  bodyにclass="top"がある場合
----------------------------- */
.top .btn-list {
  /* 例：トップページでは横並びにしたい場合 */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 60px 20px;
}

.top .btn-list-inner {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.top .btn-list-description {
  flex-direction: column;   /* テキスト＋ボタンは縦並び維持 */
  align-items: flex-start;
  width: auto;
  margin: 0;
}

/*--------------------------------------------------------
タイポ スライド
--------------------------------------------------------*/
.infinite-slider {
	overflow: hidden;
	width: 100%;
  }
  
  .slide-track {
	display: flex;
	width: calc(100% * 2); /* ループのために2セット分 */
	animation: scroll 20s linear infinite;
  }
  
  .slide-track img {
	width: 66.66%; /* ←1.5枚くらいが見えるようにする */
	flex-shrink: 0;
	display: block;
  }
  @keyframes scroll {
	0% {
	  transform: translateX(0%);
	}
	100% {
	  transform: translateX(-50%);
	}
  }

/*--------------------------------------------------------
強み
--------------------------------------------------------*/


/*--------------------------------------------------------
  背景固定
--------------------------------------------------------*/
/*-- 親 --*/
.fix-block{
	position: relative;
	height: 1100px;
 }
 /*-- 画像 --*/
 .inner{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	clip-path: inset(0);
 }
 .bg{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow-x: hidden;
	background-image: url("../images/feature-background.jpg");
	background-size: cover;
	background-position: center;
	z-index: -1;
 }


/*--------------------------------------------------------
強み コンテンツ
--------------------------------------------------------*/
#top-feature{
	margin-top: 100px;
	height: 1100px;
}
/*タイトル*/
.feature-container{
	width: 1200px;	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	margin: -960px auto 60px;
}
.feature-title{
	position: relative;
}
.feature-title-eg{
	top: 70px;
	right: 90px;
	font-size: 21px;
	font-weight: bold;
	display: flex;
align-items: center;
gap: 12px;
}
.feature-title-eg::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  background-color: #333; /* 任意の色に変更可 */
}
.feature-title-jp{
	font-size: 38px;
	font-weight: 700;
	letter-spacing: 0.1em;
}
.feature-inner{
	position: absolute;
	z-index: 100;
	width: 1200px;
	left: 50%;
	transform: translate(-50%);

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
}
.feature-text{
	width: 55%;
}
.feature-graph{
	width: 43%;
	height: 690px;
	background-color: #fff;
	opacity: 0.8;
}
.feature-1{
	background-color: #fff;
	opacity: 0.8;
	margin-bottom: 20px;
	padding: 40px;
}
.feature-1-title{
	font-size: 28px;
	padding-bottom: 10px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
}
.feature-1 p{
	font-size: 18px;
	line-height: 1.6em;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
}
.feature-graph img{
	width: 94%;
	padding-left: 50px;
	padding-top: 130px;
	margin: 0 auto;
}
.feature-1-blue{
	color: #0698e7;
}
.feature-1-green{
	color: #09adad;
}
.feature-1-purple{
	color: #8d7ade;
}
/*--------------------------------------------------------
会社案内
--------------------------------------------------------*/
#top-company{
	width: 100%;
	background-color: #09adad;
}
/*********************
タイトル
**********************/
.company-container{
	width: 1200px;
	margin: 0 auto 40px;
	padding-top: 120px;
}
.company-title{
	text-align: right;
}
.company-title-eg{
	font-size: 21px;
	font-weight: bold;
	color: #fff;
	display: flex;
 	 align-items: center;
	 justify-content: flex-end;
  	gap: 12px;
}
.company-title-eg::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  background-color: #fff; /* 任意の色に変更可 */
}
.company-title-jp{
	font-size: 38px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #fff;
}
/*********************
フレックスボックス
**********************/
.company-inner{
	width: 1000px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
	
  padding-bottom: 100px;
}
.company-item{
	width: 460px;
	margin: 20px;
	position: relative;
  	display: inline-block;
}

.company-item :hover {
	opacity: 0.7;
	transition: 1.0s ;
}

.company-item img {
  display: block;
  width: 100%; /* 必要に応じて調整 */
  height: auto;
}

.company-item-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 28px;
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
}

/*--------------------------------------------------------
アクセス
--------------------------------------------------------*/
#top-access{
	width: 100%;
	background-color: #fff;
	padding: 0;
 	margin: 0;
}
.company-map{
  display: block;
  width: 100%;
  height: 450px; /* 必要に応じて調整 */
  border: none;
}
.company-map iframe {
  display: block;
  width: 100%;
  height: 500px; /* 必要に応じて調整 */
  border: none;
}
.company-address{
  width: 780px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  margin: 100px auto 40px;
}
.company-name{
	width: 280px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	font-size: 38px;
}
.address-detail p{
	width: 480px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0.1em;
}
.address-phone{
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 32px;
  margin-top: 20px;
}
.subway{
	width: 1000px;
	margin: 40px auto;
	font-size: 18px;
	border: solid 1px #555;
	padding: 20px;
	text-align: center;
}
/*--------------------------------------------------------
イメージ画像
--------------------------------------------------------*/
.image-container{
	width: 1000px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
}
.image-item{
	width: 48%;
	margin-top: 60px;
	justify-content: space-between;
}

/*--------------------------------------------------------
お問い合わせ
--------------------------------------------------------*/
#top-contact{
	margin-top: 100px;
	width: 100%;
	background-color: #4d4d4d;
	padding-bottom: 30px; 
}
/*タイトル*/
.contact-title{
	position: relative;
	margin: 100px auto 40px;
}
.contact-title-container{
	width: 260px;
	margin: 0 auto;
	padding-top: 20px;
}
.contact-title-eg{
	top: 70px;
	right: 90px;
	font-size: 21px;
	font-weight: bold;
	display: flex;
 	align-items: center;
  	gap: 12px;
	color: #fff;
}
.contact-title-eg::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  background-color: #fff; /* 任意の色に変更可 */
}
.contact-title-jp{
	font-size: 38px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #fff;
}
/*ボタン*/
.btn-contact {
  display: inline-block;
  background-color: #00a6a6;
  color: #fff;
  margin: 15px auto 60px;
  text-align: center;
  width: 500px;
  padding: 12px 100px;
  text-decoration: none;
  border-radius: 30px;
  font-size: 20px;
  font-weight: bold;
  transition: background-color 1s ease;
  display: block; /* センター揃えのため */
}
.btn-contact a {color:#fff;}
.btn-contact a:link {color:#fff;}
.btn-contact a:visited {color:#fff;}
.btn-contact a:active {color:#fff;}

.btn-contact:hover {
  background-color: #006666;
  color: #fff;
  transition: 1.0s ease;
}

/*--------------------------------------------------------
フッター
--------------------------------------------------------*/

/*ナビ*/
.footer-section{
	width: 100%;
	background-color: #f5f5f5;
}
.footer-container{
	width: 1100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
	padding-bottom: 40px;
}

.footer_nav{
	padding-top: 40px;
}
.footer_nav a{
   text-decoration: none;
   color: #333;
		transition: 1.0s;
}
.footer_nav nav{
   margin: 0 0 0 auto;
}
.footer_nav ul{
   list-style: none;
   margin: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   justify-content: left;
}
.footer_nav li{
   margin: 0 0 0 30px;
   font-size: 18px;
	line-height: 2.5em;
	font-weight: bold;
}
/*スペック*/
.footer-address{
	width: 1200px;
	margin: 60px auto 30px;
}
.footer-company-info{
	width:720px;
	margin: 30px auto;
	text-align: center;
}
.footer-logo{
	width: 280px;
	margin: 20px auto ;
}
.footer-logo img{
	opacity: 1;
	transition: 0.5s ;
}
.footer-logo img:hover{
	opacity: 0.5;
}
.footer-company-info p{
	font-size: 20px;
	margin-bottom: 10px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	font-style: normal;
}
.footer-company-phone{
  font-size: 26px;
	margin-bottom: 26px;
	margin-top: 30px;
}

/*-- クレジット --*/
.footer_cr{
	font-size: 16px;
  font-family: "Roboto", sans-serif;

	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	text-align: center;
	width: 100%;
	color: #333;
	margin-top: 80px;
	padding-bottom: 60px;
}


/*--------------------------------------------------------
  ふわっと
--------------------------------------------------------*/
/* アニメーション */
.sa {
  opacity: 0;
  transition: all 1s ease;
}

.sa.show {
  opacity: 1;
  transform: none;
}

.sa--up {
  transform: translate(0, 100px);
}

.sa--lr {
  transform: translate(-100px, 0);
}

.sa--rl {
  transform: translate(100px, 0);
}