@charset "UTF-8";

/*---------------------------
/* コンテンツ初期設定
---------------------------*/
.main {
  overflow: auto;
	background-attachment: fixed;
}

/* 背景設定 */
.main.-index-bg {
	background-repeat:
	 no-repeat,
	 no-repeat,
	 no-repeat,
	 no-repeat,
	 no-repeat,
	 no-repeat;
	background-position:
	 90% 500px,
	 0% 800px,
	 100% 1100px,
	 5% 1400px,
	 90% 1700px,
	 0% 2000px;
}

.main.-index-bg.-color-green {
	background-image:
	 url(../images/company_profile/index_bg01.png),
	 url(../images/company_profile/index_bg02.png),
	 url(../images/company_profile/index_bg02.png),
	 url(../images/company_profile/index_bg01.png),
	 url(../images/company_profile/index_bg01.png),
	 url(../images/company_profile/index_bg02.png);
}

.main.-index-bg.-color-pink {
	background-image:
	 url(../images/business/index_bg01.png),
	 url(../images/business/index_bg02.png),
	 url(../images/business/index_bg02.png),
	 url(../images/business/index_bg01.png),
	 url(../images/business/index_bg01.png),
	 url(../images/business/index_bg02.png);
}

.main.-index-bg.-color-red {
	background-image:
	 url(../images/product/index_bg01.png),
	 url(../images/product/index_bg02.png),
	 url(../images/product/index_bg02.png),
	 url(../images/product/index_bg01.png),
	 url(../images/product/index_bg01.png),
	 url(../images/product/index_bg02.png);
}

.main.-index-bg.-color-orange {
	background-image:
	 url(../images/ir/index_bg01.png),
	 url(../images/ir/index_bg02.png),
	 url(../images/ir/index_bg02.png),
	 url(../images/ir/index_bg01.png),
	 url(../images/ir/index_bg01.png),
	 url(../images/ir/index_bg02.png);
}

.main.-index-bg.-color-blue {
	background-image:
	 url(../images/recruit/index_bg01.png),
	 url(../images/recruit/index_bg02.png),
	 url(../images/recruit/index_bg02.png),
	 url(../images/recruit/index_bg01.png),
	 url(../images/recruit/index_bg01.png),
	 url(../images/recruit/index_bg02.png);
}

/* パンくずリスト */
.breadcrumb {
  margin: 0 auto;
  padding: 8px 0;
}

.breadcrumb ol {
  display: flex;
  justify-content: flex-start;
  color: var(--color-white);
}

.breadcrumb ol li {
  display: none;
  font-size: var(--f12-size);
}

.breadcrumb ol li::after {
  display: inline-block;
  content: "\003E";
  padding: 0 16px;
}

.breadcrumb ol li a {
  color: var(--color-white);
}

.breadcrumb ol li:last-of-type:after {
  display: none;
}

/* 扉ページ背景（index） */
.headline__continer.-front-page {
  background: url(../images/common/bg_main_front_page.png) no-repeat center top;
}

/* セカンドページ背景（共通） */
.headline__continer.-second-page,
.headline__continer.-single-page {
  position: relative;
}

.headline__continer.-second-page .headline__group,
.headline__continer.-single-page .headline__group {
  margin-top: 0;
  padding: 24px 0;
}

.headline__continer.-second-page .headline__group .headline-title,
.headline__continer.-single-page .headline__group .headline-title {
  width: 100%;
  color: var(--color-white);
}

/* セカンドページ背景（画像あり） */
.headline__continer.-second-page .headline__group .headline-title {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 10%;
  transform: translate(-50%,-10%);
}

.headline__continer.-second-page .headline__group .headline-visual {
  position: relative;
  margin: 0 auto;
  padding: 0 16px;
}

.headline__continer.-second-page .headline__group .headline-visual img {
  width: 100%;
}

/* セカンドページ背景（画像アイコン） */
.headline__continer.-second-page .headline__group .headline-visual.icon::before {
  position: absolute;
  content: "";
  height: 0;
  top: -16px;
  right: 8px;
  background-position: right top;
  background-repeat: no-repeat;
  background-size: contain;
}

.headline__continer.-second-page .headline__group .headline-visual.icon.-prod-img01::before {
  width: 15%;
  padding-top: calc(106 / 145 * 15%);
  background-image: url(../images/product/cate_onigiri.png);
}

/* セカンドページ背景（テキストのみ） */
.headline__continer.-single-page .headline__group .headline-title {  
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%,-45%);
}

/* 扉ページキャラクター */
.headline__wrapper.-character {
  background-position: calc(50% + 110px) bottom;
  background-repeat: no-repeat;
  background-size: 6em;
}

.headline__wrapper.-character.-company {
  background-image: url(../images/company_profile/index_character.png);
}

.headline__wrapper.-character.-business {
  background-image: url(../images/business/index_character.png);
}

.headline__wrapper.-character.-product {
  background-image: url(../images/product/index_character.png);
}

.headline__wrapper.-character.-recruit {
  background-image: url(../images/recruit/index_character.png);
}

/* ページタイトル */
.headline__group {
  margin-top: 50px;
}

.headline-title {
  text-align: center;
}

.headline-subtitle {
  padding-bottom: 20px;
  font-size: var(--f14-size);
  font-weight: bold;
  text-align: center;
  color: var(--color-gray);
}

.intro-catch {
  margin: 40px 0 20px 0;
  font-size: var(--f28-size);
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
  color: var(--color-red);
}

.intro-caption {
  font-size: var(--f18-size);
  font-weight: bold;
  text-align: center;
}

/* 375px〜（スマホ＆タブレット用）
---------------------------*/
@media (min-width: 375px) {
  /* タイトルキャラクター */
  .headline__wrapper.-character {
    background-position: calc(50% + 120px) bottom;
    background-repeat: no-repeat;
    background-size: 6.5em;
  }

  .headline__wrapper.-character.-recruit {
    background-position: calc(50% + 140px) bottom;
  }
}

/* 768px〜（スマホ＆タブレット用）
---------------------------*/
@media (min-width: 768px) {
  /* タイトルキャラクター */
  .headline__wrapper.-character {
    background-size: 7em;
  }

  .headline__wrapper.-character.-recruit {
    background-position: calc(50% + 160px) bottom;
  }

  /* セカンドページ背景（画像あり） */
  .headline__continer.-second-page .headline__group .headline-visual {
    margin: 0 auto;
  }

  .headline__continer.-second-page .headline__group .headline-title {
    bottom: 12%;
    transform: translate(-50%,-12%);
  }
}

/* 〜959px（スマホ＆タブレット用）
---------------------------*/
@media (max-width: 959px) {
  /* 背景設定 */
  .main.-index-bg.-color-green,
  .main.-index-bg.-color-pink,
  .main.-index-bg.-color-red,
  .main.-index-bg.-color-orange,
  .main.-index-bg.-color-blue {
    background: none;
  }

  /* セカンドページ背景（共通） */
  .headline__continer.-second-page .headline__wrapper,
  .headline__continer.-single-page .headline__wrapper {
    background-color: var(--color-red);
  }

  .headline__continer.-second-page::after,
  .headline__continer.-single-page::after {
    display: block;
    content: "";
    width: 100%;
    height: 0;
    padding-top: calc(271 / 2030 * 100%);
    background-image: url(../images/common/bg_main_single_page.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

/* 960px〜（タブレット＆PC用）
---------------------------*/
@media (min-width: 960px) {
  /* パンくずリスト */
  .breadcrumb {
    display: block;
    max-width: 960px;
    padding: 20px 0;
  }

  .breadcrumb ol li {
    display: block;
  }
  
  /* 幅設定 */
  .headline__wrapper.-character,
  .content__box {
    max-width: 960px;
    margin: 0 auto;
  }

  /* タイトルキャラクター */
  .headline__wrapper.-character {
    background-position: calc(50% + 150px) bottom;
    background-repeat: no-repeat;
    background-size: 143px;
  }
  
  /* セカンドページ背景（画像あり） */
  .headline__continer.-second-page{
    position: relative;
    max-width: 2030px;
    height: 525px;
    margin: 0 auto;
    background-image: url(../images/common/bg_main_second_page.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .headline__continer.-second-page .headline__group .headline-title {
    bottom: 10%;
    transform: translate(-50%,-10%);
  }

  .headline__continer.-second-page .headline__group .headline-visual {
    max-width: 960px;
    padding: 0;
  }

  .headline__continer.-second-page .headline__group .headline-visual.icon.-prod-img01::before {
    top: -20px;
  }

  /* セカンドページ背景（テキストのみ） */
  .headline__continer.-single-page {
    position: relative;
    max-width: 1260px;
    height: 168px;
    margin: 0 auto;
    background-image: url(../images/common/bg_main_single_page.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
  }
}