@charset "UTF-8";
/*===============================
色設定
================================*/
.gray1 {
  color: rgb(245, 245, 245);
}

.bg_gray1 {
  background-color: rgb(245, 245, 245);
}

.bd_gray1 {
  border-color: rgb(245, 245, 245);
}

.nav_pc.gray1 {
  border-bottom: 10px solid rgb(245, 245, 245);
}

.nav_sp.gray1 {
  border-bottom: 10px solid rgb(245, 245, 245);
}

.gray2 {
  color: rgb(220, 220, 220);
}

.bg_gray2 {
  background-color: rgb(220, 220, 220);
}

.bd_gray2 {
  border-color: rgb(220, 220, 220);
}

.nav_pc.gray2 {
  border-bottom: 10px solid rgb(220, 220, 220);
}

.nav_sp.gray2 {
  border-bottom: 10px solid rgb(220, 220, 220);
}

.gray3 {
  color: rgb(100, 100, 100);
}

.bg_gray3 {
  background-color: rgb(100, 100, 100);
}

.bd_gray3 {
  border-color: rgb(100, 100, 100);
}

.nav_pc.gray3 {
  border-bottom: 10px solid rgb(100, 100, 100);
}

.nav_sp.gray3 {
  border-bottom: 10px solid rgb(100, 100, 100);
}

.gray4 {
  color: rgb(50, 50, 50);
}

.bg_gray4 {
  background-color: rgb(50, 50, 50);
}

.bd_gray4 {
  border-color: rgb(50, 50, 50);
}

.nav_pc.gray4 {
  border-bottom: 10px solid rgb(50, 50, 50);
}

.nav_sp.gray4 {
  border-bottom: 10px solid rgb(50, 50, 50);
}

.blue1 {
  color: rgb(209, 222, 235);
}

.bg_blue1 {
  background-color: rgb(209, 222, 235);
}

.bd_blue1 {
  border-color: rgb(209, 222, 235);
}

.nav_pc.blue1 {
  border-bottom: 10px solid rgb(209, 222, 235);
}

.nav_sp.blue1 {
  border-bottom: 10px solid rgb(209, 222, 235);
}

.blue2 {
  color: rgb(147, 195, 231);
}

.bg_blue2 {
  background-color: rgb(147, 195, 231);
}

.bd_blue2 {
  border-color: rgb(147, 195, 231);
}

.nav_pc.blue2 {
  border-bottom: 10px solid rgb(147, 195, 231);
}

.nav_sp.blue2 {
  border-bottom: 10px solid rgb(147, 195, 231);
}

.blue3 {
  color: rgb(84, 163, 213);
}

.bg_blue3 {
  background-color: rgb(84, 163, 213);
}

.bd_blue3 {
  border-color: rgb(84, 163, 213);
}

.nav_pc.blue3 {
  border-bottom: 10px solid rgb(84, 163, 213);
}

.nav_sp.blue3 {
  border-bottom: 10px solid rgb(84, 163, 213);
}

.blue4 {
  color: rgb(0, 140, 201);
}

.bg_blue4 {
  background-color: rgb(0, 140, 201);
}

.bd_blue4 {
  border-color: rgb(0, 140, 201);
}

.nav_pc.blue4 {
  border-bottom: 10px solid rgb(0, 140, 201);
}

.nav_sp.blue4 {
  border-bottom: 10px solid rgb(0, 140, 201);
}

.blue4a {
  color: rgba(0, 140, 201, 0.7);
}

.bg_blue4a {
  background-color: rgba(0, 140, 201, 0.7);
}

.bd_blue4a {
  border-color: rgba(0, 140, 201, 0.7);
}

.nav_pc.blue4a {
  border-bottom: 10px solid rgba(0, 140, 201, 0.7);
}

.nav_sp.blue4a {
  border-bottom: 10px solid rgba(0, 140, 201, 0.7);
}

.blue5 {
  color: rgb(18, 120, 187);
}

.bg_blue5 {
  background-color: rgb(18, 120, 187);
}

.bd_blue5 {
  border-color: rgb(18, 120, 187);
}

.nav_pc.blue5 {
  border-bottom: 10px solid rgb(18, 120, 187);
}

.nav_sp.blue5 {
  border-bottom: 10px solid rgb(18, 120, 187);
}

.pink1 {
  color: rgb(240, 210, 220);
}

.bg_pink1 {
  background-color: rgb(240, 210, 220);
}

.bd_pink1 {
  border-color: rgb(240, 210, 220);
}

.nav_pc.pink1 {
  border-bottom: 10px solid rgb(240, 210, 220);
}

.nav_sp.pink1 {
  border-bottom: 10px solid rgb(240, 210, 220);
}

.pink2 {
  color: rgb(230, 140, 160);
}

.bg_pink2 {
  background-color: rgb(230, 140, 160);
}

.bd_pink2 {
  border-color: rgb(230, 140, 160);
}

.nav_pc.pink2 {
  border-bottom: 10px solid rgb(230, 140, 160);
}

.nav_sp.pink2 {
  border-bottom: 10px solid rgb(230, 140, 160);
}

.pink2a {
  color: rgba(230, 140, 160, 0.7);
}

.bg_pink2a {
  background-color: rgba(230, 140, 160, 0.7);
}

.bd_pink2a {
  border-color: rgba(230, 140, 160, 0.7);
}

.nav_pc.pink2a {
  border-bottom: 10px solid rgba(230, 140, 160, 0.7);
}

.nav_sp.pink2a {
  border-bottom: 10px solid rgba(230, 140, 160, 0.7);
}

.yellow1 {
  color: rgb(235, 225, 135);
}

.bg_yellow1 {
  background-color: rgb(235, 225, 135);
}

.bd_yellow1 {
  border-color: rgb(235, 225, 135);
}

.nav_pc.yellow1 {
  border-bottom: 10px solid rgb(235, 225, 135);
}

.nav_sp.yellow1 {
  border-bottom: 10px solid rgb(235, 225, 135);
}

.yellow2 {
  color: rgb(220, 170, 0);
}

.bg_yellow2 {
  background-color: rgb(220, 170, 0);
}

.bd_yellow2 {
  border-color: rgb(220, 170, 0);
}

.nav_pc.yellow2 {
  border-bottom: 10px solid rgb(220, 170, 0);
}

.nav_sp.yellow2 {
  border-bottom: 10px solid rgb(220, 170, 0);
}

.yellow2a {
  color: rgba(220, 170, 0, 0.7);
}

.bg_yellow2a {
  background-color: rgba(220, 170, 0, 0.7);
}

.bd_yellow2a {
  border-color: rgba(220, 170, 0, 0.7);
}

.nav_pc.yellow2a {
  border-bottom: 10px solid rgba(220, 170, 0, 0.7);
}

.nav_sp.yellow2a {
  border-bottom: 10px solid rgba(220, 170, 0, 0.7);
}

.bg_art1 {
  background-color: mediumseagreen;
}

.bga_art1 {
  background-color: rgba(60, 179, 113, 0.8);
}

.bg_art2 {
  background-color: royalblue;
}

.bga_art2 {
  background-color: rgba(65, 105, 225, 0.8);
}

.bg_hit1 {
  background-color: orange;
}

.bga_hit1 {
  background-color: rgba(255, 165, 0, 0.8);
}

.bg_hit2 {
  background-color: mediumorchid;
}

.bga_hit2 {
  background-color: rgba(186, 85, 211, 0.8);
}

.bg_life1 {
  background-color: cadetblue;
}

.bga_life1 {
  background-color: rgba(95, 158, 160, 0.8);
}

.bg_life2 {
  background-color: yellowgreen;
}

.bga_life2 {
  background-color: rgba(154, 205, 50, 0.8);
}

.bg_para1 {
  background-color: crimson;
}

.bga_para1 {
  background-color: rgba(220, 20, 60, 0.8);
}

.bg_para2 {
  background-color: deepskyblue;
}

.bga_para2 {
  background-color: rgba(0, 191, 255, 0.8);
}

.bg_work1 {
  background-color: goldenrod;
}

.bga_work1 {
  background-color: rgba(218, 165, 32, 0.8);
}

.bg_work2 {
  background-color: tomato;
}

.bga_work2 {
  background-color: rgba(255, 99, 71, 0.8);
}

.bg_work3 {
  background-color: mediumturquoise;
}

.bga_work3 {
  background-color: rgba(72, 209, 204, 0.8);
}

.bg_work4 {
  background-color: firebrick;
}

.bga_work4 {
  background-color: rgba(178, 34, 34, 0.8);
}

.bg_work5 {
  background-color: peru;
}

.bga_work5 {
  background-color: rgba(205, 133, 63, 0.8);
}

.bg_para3 {
  background-color: dodgerblue;
}

.bga_para3 {
  background-color: rgba(30, 144, 255, 0.8);
}

.bg_life3 {
  background-color: mediumseagreen;
}

.bga_life3 {
  background-color: rgba(60, 179, 113, 0.8);
}

.bg_hit3 {
  background-color: saddlebrown;
}

.bga_hit3 {
  background-color: rgba(139, 69, 19, 0.8);
}

.bg_work6 {
  background-color: midnightblue;
}

.bga_work6 {
  background-color: rgba(25, 25, 112, 0.8);
}

.bg_life4 {
  background-color: teal;
}

.bga_life4 {
  background-color: rgba(0, 128, 128, 0.8);
}

.bg_hit4 {
  background-color: plum;
}

.bga_hit4 {
  background-color: rgba(221, 160, 221, 0.8);
}

.bg_work7 {
  background-color: indigo;
}

.bga_work7 {
  background-color: rgba(75, 0, 130, 0.8);
}

.bg_para4 {
  background-color: navy;
}

.bga_para4 {
  background-color: rgba(0, 0, 128, 0.8);
}

.bg_life5 {
  background-color: #0c5b97;
}

.bga_life5 {
  background-color: rgba(12, 91, 151, 0.8);
}

.bg_para5 {
  background-color: darkkhaki;
}

.bga_para5 {
  background-color: rgba(189, 183, 107, 0.8);
}

.bg_work8 {
  background-color: seagreen;
}

.bga_work8 {
  background-color: rgba(46, 139, 87, 0.8);
}

.bg_life6 {
  background-color: #333333;
}

.bga_life6 {
  background-color: rgba(51, 51, 51, 0.8);
}

.bg_life7 {
  background-color: forestgreen;
}

.bga_life7 {
  background-color: rgba(34, 139, 34, 0.8);
}

.bg_work9 {
  background-color: goldenrod;
}

.bga_work9 {
  background-color: rgba(218, 165, 32, 0.8);
}

.bg_work10 {
  background-color: darkturquoise;
}

.bga_work10 {
  background-color: rgba(0, 206, 209, 0.8);
}

.bg_life8 {
  background-color: steelblue;
}

.bga_life8 {
  background-color: rgba(70, 130, 180, 0.8);
}

/*===============================
メディアクエリ
================================*/
/*===============================
入力省略
================================*/
/* ============
 共通
 ========================= */
/* フォント */
.gothic {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.2;
}

.mincho {
  font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  transform: rotate(0.03deg);
  font-weight: bold;
}

#nav-skiplink {
  position: absolute;
  top: -10000px;
  left: -10000px;
}

/* ============
 共通
========================= */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background-color: rgb(245, 245, 245);
  color: rgb(50, 50, 50);
  margin: 0px;
}

section {
  padding: 25px 0;
}

img {
  width: 100%;
}

* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  color: rgb(18, 120, 187);
}
a:hover {
  opacity: 0.7;
}

.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex > * {
  align-items: center;
}

.dn {
  display: none;
}

.small-note {
  font-size: 50%;
  vertical-align: super; /* 少し上にずらす */
  position: relative; 
  top: -0.1em; /* 必要に応じて調整 */
  letter-spacing: -1.2em;
}

@media screen and (min-width: 800px) {
  .dn_pc {
    display: none;
  }
}
@media screen and (max-width: 800px) {
  .dn_ms {
    display: none;
  }
}
@media screen and (max-width: 560px) {
  .dn_sp {
    display: none;
  }
  .dn_ms {
    display: block;
  }
}
.mg_t_20 {
  margin-top: 20px;
}

.tomoiki_icon_logo {
  width: 40px;
  background-color: #fff;
  padding: 4px;
  border-radius: 8px;
  margin: 10px;
}

.button_arrow {
  position: relative;
  padding-right: 1em;
}
.button_arrow::after {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: "";
  width: 1em;
  height: 1em;
  background: url("../img/tomoiki_button_next.png") center/contain no-repeat;
}

.button_arrow_rev {
  position: relative;
  padding-right: 1em;
}
.button_arrow_rev::after {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: "";
  width: 1em;
  height: 1em;
  background: url("../img/tomoiki_button_next_rev.png") center/contain no-repeat;
}

.icon_logo_10 {
  position: relative;
  padding-left: calc(1 * 1.25em);
}
.icon_logo_10::before {
  position: absolute;
  top: 0;
  bottom: calc(1 * 0.1em);
  left: 0;
  margin: auto;
  display: block;
  content: "";
  width: 1em;
  height: 1em;
  background: url("../img/tomoiki_icon_logo.png") center/80% no-repeat;
  background-color: #fff;
  border-radius: calc(1 * 0.2em);
}

.icon_logo_15 {
  position: relative;
  padding-left: calc(1.5 * 1.25em);
}
.icon_logo_15::before {
  position: absolute;
  top: 0;
  bottom: calc(1.5 * 0.1em);
  left: 0;
  margin: auto;
  display: block;
  content: "";
  width: 1.5em;
  height: 1.5em;
  background: url("../img/tomoiki_icon_logo.png") center/80% no-repeat;
  background-color: #fff;
  border-radius: calc(1.5 * 0.2em);
}

.icon_logo_20 {
  position: relative;
  padding-left: calc(2 * 1.25em);
}
.icon_logo_20::before {
  position: absolute;
  top: 0;
  bottom: calc(2 * 0.1em);
  left: 0;
  margin: auto;
  display: block;
  content: "";
  width: 2em;
  height: 2em;
  background: url("../img/tomoiki_icon_logo.png") center/80% no-repeat;
  background-color: #fff;
  border-radius: calc(2 * 0.2em);
}

.radius_frame {
  border: 2px solid rgb(220, 220, 220);
  border-radius: 15px;
  padding: 15px;
  background-color: #fff;
}

.ttup {
  text-transform: uppercase;
}

div {
  position: relative;
}
div .icon_new {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
div .icon_new {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  top: -20px;
  left: -20px;
  right: auto;
  bottom: auto;
  margin: 0;
  flex-direction: column;q
  justify-content: center;
  align-items: center;
}
div .icon_new p, div .icon_new h2 {
  color: #fff;
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
}

.bar_new {
  border-radius: 4px;
  margin-right: 5px;
  padding: 1px 5px 0px;
  color: #fff;
  font-size: 0.8em;
  font-weight: bold;
  vertical-align: top;
}

/***追従するトップへ戻るボタン***/
#page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  font-size: 1.9em;
  line-height: 1;
  background: rgb(0, 140, 201);
  color: #fff;
  padding: 10px 12px 0 12px;
  opacity: 0.8;
}

html {
  scroll-behavior: smooth;
}

/***トップへ戻るボタンここまで***/
.other_site {
  max-width: 600px;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 30px;
}
.other_site p {
  font-size: 0.9em;
  line-height: 1.5;
  margin-bottom: 0.5em;
}
.other_site a {
  display: block;
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  width: 100%;
  padding: 10px;
  text-align: center;
  background-color: rgb(84, 163, 213);
}
.other_site a span {
  font-size: 0.8em;
}

/*===============================
ヘッダー（ナビゲーション）
================================*/
nav {
  background-color: #fff;
}
nav li {
  height: 70px;
  padding: 0 10px;
}
nav li:nth-of-type(2) a {
  color: rgb(18, 120, 187);
}
nav li:nth-of-type(2) a span {
  font-size: 0.75em;
}
nav li:nth-of-type(2) div {
  display: inline-block;
  vertical-align: middle;
}
nav li a {
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  line-height: 1.2;
}
nav img {
  height: 100%;
  width: auto;
}

.tomoiki_banner_ki a {
  display: block;
  height: 50px;
}

.sns_icons {
  justify-content: space-around;
}
.sns_icons div {
  height: 30px;
}

.nav_pc ul {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
.nav_pc li {
  width: calc((100% - 130px) / 5);
}
.nav_pc li:nth-of-type(1) {
  width: 130px;
}

@media screen and (max-width: 800px) {
  .nav_pc .icon_logo_20 {
    padding-left: 0;
  }
  .nav_pc .icon_logo_20::before {
    content: none;
  }
}
.nav_sp .tomoiki_banner_ki {
  height: 70px;
  align-items: center;
}
.nav_sp li {
  width: 100%;
}
.nav_sp li:nth-of-type(1) {
  background-color: #fff;
  padding-right: 70px;
}

.nav_sp {
  display: none;
}

@media screen and (max-width: 560px) {
  .nav_pc {
    display: none;
  }
  .nav_sp {
    display: block;
  }
}
/*===============================
フッター
================================*/
footer {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  background-color: rgb(209, 222, 235);
}
footer figure {
  max-width: 400px;
  width: 90%;
  margin: 0 auto;
  padding: 30px 0;
}
footer ul {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  align-items: center;
  text-align: center;
  line-height: 1.2;
}
footer ul li {
  width: 20%;
  margin-bottom: 20px;
}
footer .sns_icons {
  width: 200px;
  margin: 0 auto 20px;
}
footer .sns_icons img {
  height: 100%;
  width: auto;
}
footer .credit {
  font-size: 0.8em;
  text-align: center;
}
footer .footer_bar {
  background-color:#0063b4;
  font-size: 0.7em;
  text-align: center;
  color: #fff;
  padding: 10px;
  margin-top: 20px;
}

@media screen and (max-width: 560px) {
  footer > ul {
    flex-direction: column;
  }
  footer > ul li {
    width: 100%;
  }
}