@charset "utf-8";

/* ****************************************************************************************************
   * 共用
**************************************************************************************************** */

/*#main > .section:nth-child(odd) {
  background: url(../../_images/index/bg-1.png);
}

/* ****************************************************************************************************
   * ビジュアル
**************************************************************************************************** */

#visual {
  position: relative;
  background: none;
}

#visual div.cycle-slideshow {
  height: 28.64%;
  overflow: hidden;
}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 画像
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#visual div.visual {
  width: 100%;
}

#visual div.visual-e {
  width: 100%;
}

#visual div.visual-1 {
  background: url(../../_images/index/visual-1-bg.jpg) center top no-repeat;
}

#visual div.visual-2 {
  background: url(../../_images/index/visual-2-bg.jpg) center top no-repeat;
}

#visual div.visual-e1 {
  background: url(https://idaseni.live/cms/wp-content/uploads/2024/12/173A9512_1.jpg) center top no-repeat;
}

#visual div.visual-e2 {
  background: url(https://idaseni.live/cms/wp-content/uploads/2024/12/173A9512_2.jpg) center top no-repeat;
}

#visual div.visual img {
  width: 100%;
  height: auto;
  max-width: 960px;
  display: block;
  margin: auto;
}

/* * ブレイクポイント ･････････････････ */

@media screen and (max-width:540px) {

#visual div.visual img.device-sp {
  display: block !important;
}

}

@media screen and (max-width:540px) {

#visual div.visual-e img.device-sp {
  display: block !important;
}

}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * ページャー
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#visual ul.pager,
#visual ul.pager li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#visual ul.pager {
  width: 100%;
  padding: 0 10px;
  line-height: 1;
  text-align: center;
  position: absolute;
  bottom: 3.70%;
  z-index: 200;
}

#visual ul.pager li {
  width: 18px;
  height: 18px;
  margin: 2px;
  cursor: pointer;
  vertical-align: top;
  display: inline-block;
  background: url(../../_images/index/visual-pager-normal.png) no-repeat;
}

#visual ul.pager li.active {
  background: url(../../_images/index/visual-pager-active.png) no-repeat;
}

/* ****************************************************************************************************
   * 当社の強み
**************************************************************************************************** */

#strong {
  overflow: hidden;
}

#strong div.body {
  letter-spacing: -5.5px;
}

#strong div.body > * {
  letter-spacing: normal;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * コンテンツ
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#strong div.content {
  width: 50%;
  padding: 0 6.25%;
  vertical-align: middle;
  display: inline-block;
}

/* * ブレイクポイント ･････････････････ */

@media screen and (max-width:540px) {

#strong div.content {
  width: 100%;
  padding: 20px;
}

}

/* * タイトル
/* ------------------------------------------------------------------------------------------------- */

#strong div.content .title {
  text-align: center;
}

/* * アニメーション ･････････････････ */

html.no-mobile.csstransitions
#strong div.content .title {
  opacity: 0.0;
  position: relative;
  right: -200px;
}

html.no-mobile.csstransitions
#strong.view-element div.content .title {
  opacity: 1.0;
  right: 0;
  transition:
    opacity 1.2s ease-out 0.5s,
    right   0.6s ease-out 0.5s;
}

/* * ブレイクポイント ･････････････････ */

@media screen and (max-width:540px) {

#strong div.content .title {
  padding: 17.54% 0;
  padding-left: 43.85%;
  background: url(../../_images/index/strong.jpg) left center no-repeat;
  background-size: contain;
}

}

/* * メッセージ
/* ------------------------------------------------------------------------------------------------- */

#strong div.content .message {
  text-align: center;
}

/* * アニメーション ･････････････････ */

html.no-mobile.csstransitions
#strong div.content .message {
  opacity: 0.0;
  position: relative;
  right: -200px;
}

html.no-mobile.csstransitions
#strong.view-element div.content .message {
  opacity: 1.0;
  right: 0;
  transition:
    opacity 1.0s ease-out 0.5s,
    right   1.0s ease-out 0.5s;
}

/* * ブレイクポイント ･････････････････ */

@media screen and (max-width:540px) {

#strong div.content .message br {
  display: none;
}

}

/* * 詳しく見る
/* ------------------------------------------------------------------------------------------------- */

#strong div.content .btn {
  text-align: center;
}

#strong div.content .btn img {
  width: 250px;
  height: auto;
}

/* * アニメーション ･････････････････ */

html.no-mobile.csstransitions
#strong div.content .btn {
  opacity: 0.0;
  position: relative;
  bottom: -200px;
}

html.no-mobile.csstransitions
#strong.view-element div.content .btn {
  opacity: 1.0;
  bottom: 0;
  transition:
    opacity 1.0s ease-out 0.5s,
    bottom  1.0s ease-out 0.5s;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 写真
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#strong div.photo {
  width: 50%;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
}

/* * アニメーション ･････････････････ */

html.no-mobile.csstransitions
#strong div.photo {
  opacity: 0.0;
}

html.no-mobile.csstransitions
#strong.view-element div.photo {
  opacity: 1.0;
  transition: opacity 1.5s ease-out 0s;
}

/* * ブレイクポイント ･････････････････ */

@media screen and (max-width:540px) {

#strong div.photo {
  display: none;
}

}

/* ****************************************************************************************************
   * 伊田繊維について
**************************************************************************************************** */

#company {
  padding-top: 30px;
  padding-bottom: 30px;
  overflow: hidden;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * タイトル
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* * アニメーション ･････････････････ */

html.no-mobile.csstransitions
#company .title-1 {
  opacity: 0.0;
}

html.no-mobile.csstransitions
#company.view-element .title-1 {
  opacity: 1.0;
  transition: opacity 1.0s ease-out 0s;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * メッセージ
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#company .message {
  text-align: center;
}

/* * アニメーション ･････････････････ */

html.no-mobile.csstransitions
#company .message {
  opacity: 0.0;
}

html.no-mobile.csstransitions
#company.view-element .message {
  opacity: 1.0;
  transition: opacity 1.0s ease-out 0.5s;
}

/* * ブレイクポイント ･････････････････ */

@media screen and (max-width:540px) {

#company .message br {
  display: none;
}

}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * コンテンツ
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#company div.contents {
  letter-spacing: 24px;
  text-align: center;
}

#company div.contents > * {
  letter-spacing: normal;
}

#company div.contents div.content {
  width: 300px;
  margin: 5px 0;
  overflow: hidden;
  vertical-align: top;
  display: inline-block;
  position: relative;
}

/* * アニメーション ･････････････････ */

html.no-mobile.csstransitions
#company.view-element div.contents {
  overflow: hidden;
}

html.no-mobile.csstransitions
#company div.contents div.content {
  opacity: 0.0;
  position: relative;
  bottom: -200px;
}

html.no-mobile.csstransitions
#company.view-element div.contents div.content {
  opacity: 1.0;
  bottom: 0;
  transition:
    opacity 1.0s ease-out 0.5s,
    bottom  1.0s ease-out 0.5s;
}

html.no-mobile.csstransitions
#company.view-element div.contents div.content-1 {
  transition-duration: 0.5s;
}

html.no-mobile.csstransitions
#company.view-element div.contents div.content-2 {
  transition-duration: 0.75s;
}

html.no-mobile.csstransitions
#company.view-element div.contents div.content-3 {
  transition-duration: 1.0s;
}

/* * 写真
/* ------------------------------------------------------------------------------------------------- */

#company div.contents div.content a:hover div.photo img {
  opacity: 1.0;
}

/* * キャプション
/* ------------------------------------------------------------------------------------------------- */

#company div.contents div.content div.caption {
  width: 100%;
  font-size: 16px;
  padding: 10px;
  position: absolute;
  bottom: 0;
}

#company div.contents div.content div.caption a {
  text-decoration: none;
}

/* 通常表示 */

#company div.contents div.content div.caption-1 {
  color: #fff;
  background: rgba(21,38,63,0.80);
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	transition: 0;
}

body.msie8 #company div.contents div.content div.caption-1 {
  background: rgb(21,38,63);
}

#company div.contents div.content:hover div.caption-1 {
  opacity: 0.0;
  transition: opacity 0.6s ease-out 0s;
}

/* ホバー表示 */

#company div.contents div.content div.caption-2 {
  color: #243d5a;
  font-weight: bold;
  background: rgba(255,255,255,0.80);
	position: absolute;
	bottom: -100%;
	left: 0;
	z-index: 2;
  transition: bottom 1.0s ease-out 0s;
}

body.msie8 #company div.contents div.content div.caption-2 {
  background: rgb(255,255,255);
}

#company div.contents div.content:hover div.caption-2 {
  bottom: 0;
  transition: bottom 0.4s ease-out 0s;
}

#company div.contents div.content div.caption-2 .title {
  text-align: center;
}

#company div.contents div.content div.caption-2 .btn {
  margin: 2px auto 0;
  padding-right: 14px;
  display: table;
  font-size: 12px;
  background: url(../../_images/index/company-btn.png) right 6px no-repeat;
  background-size: 6px auto;
}

body.msie8 #company div.contents div.content div.caption-2 .btn {
  padding-right: 18px;
  background-position: right top;
}

/* * ブレイクポイント ･････････････････ */

@media screen and (max-width:540px) {

#company div.contents div.content {
  width: 100%;
}

}

/* ****************************************************************************************************
   * お知らせ
**************************************************************************************************** */

#information {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* * アニメーション ･････････････････ */

html.no-mobile.csstransitions
#information {
  opacity: 0.0;
}

html.no-mobile.csstransitions
#information.view-element {
  opacity: 1.0;
  transition: opacity 0.5s ease-out 0.5s;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 一覧
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#information div.list dl.item,
#information div.list dl.item dt,
#information div.list dl.item dd {
  margin: 0;
  padding: 0;
}

#information div.list dl.item {
  padding: 10px 20px;
  line-height: 1.5;
  letter-spacing: -5.5px;
}

#information div.list dl.item:nth-child(odd) {
  background: #f5f5f5;
}

#information div.list dl.item > * {
  letter-spacing: normal;
}

#information div.list dl.item dt {
  margin: 5px 2.08% 5px 0;
  vertical-align: top;
  display: inline-block;
}

#information div.list dl.item dd {
  vertical-align: top;
  display: inline-block;
}

#information div.list dl.item dd.icon {
  width: 110px;
  margin: 5px 2.08% 5px 0;
  text-align: center;
}

#information div.list dl.item dd.content {
  width: 632px;
}

#information div.list dl.item dd.content a {
  height: 100%;
  padding: 5px 0;
  display: block;
}

#information div.list .btn {
  margin-top: 20px;
  text-align: center;
}

#information div.list .btn img {
  width: 250px;
  height: auto;
}