@charset "utf-8";
/* ============================================================================
CSS information
 style info :  サイト全体の共通構造
/* ============================================================================



/* ============================================================================
目次
 00. 全体設計
 01. ヘッダー
 02. フッター
 03. フォーム
 04. 機能（アニメーション等）
 05. 共通パーツ（リスト定義、テーブルレイアウト、汎用ボタン、変数カラー、フォントサイズ）



/* ============================================================================

 00. 全体設計

=============================================================================== */

html{ font-size: 62.5%;
  scroll-behavior: smooth;
}
body{
    font-family:游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro";
    font-size:1.6rem;
    line-height: 2;
    font-feature-settings:"palt";/*自動カーニング*/
    letter-spacing:0em;
    color:#333;
    font-weight: 500;
}

:root {
  --common_B:#004094; /*キーカラー*/
  --common_R:#dc0011; /*キーカラー【レッド】*/
  --common_R50:#bf6d89; /*キーカラー【レッド】の半調落とし*/
  --common_A:#66cccc; /*採用情報*/
  --common_O:#ffd800; /*イベント*/
  --common_GR:#555555; /*反転*/

  --common_PP:#aa66cc; /*あまり*/
  --common_G:#66cc66; /*あまり*/
  --common_Y:#fff100; /*あまり）*/
}

h1, h2, h3, h4, h5, h6, p, dt, dd {
  margin-top: 0;
  margin-bottom: 0;
}


h1,
h2,
h3,
h4,
h5,
h6{
  font-weight: 400;
}
section h2,
section h3{
  position:relative;
}

/*整形済済みのフォントファミリーを削除*/
pre {font-family: inherit;}

section p.read{text-align: center;}


/*リンク*/
a{
  color:var(--common_B);
  text-decoration: none;
  transition: .5s;
}
a:hover, .active{ text-decoration: underline;}
a:active, a:focus,input:active, input:focus{ outline:0;}


/*セクション間の余白*/
section{ margin-top:0; overflow: hidden;}
section h2{ margin-bottom:50px;}

/*セクションの見出し装飾*/
section h2{ 
  font-size: 4em;
  line-height: 1;
}
section h2 span{ 
  font-size: 1.6rem;
  display: block;
}


/*PCレスポンシブまでは左右に余白*/
.inner{
  width: 90%;
  margin: 0 auto;
  padding: 100px 0;
}

.col3 li img{/*画像センタリング*/
  margin: 0 auto;
}

/* ---------------------------
SP */
@media only screen and (max-width: 768px){
  body{
    font-size: 1.4rem;
  }

  .inner{
    padding: 50px 0;
  }
  
  
  /*セクションの見出し装飾*/
  section h2{ 
    font-size: 2em;
    margin-bottom:25px;
  }
  section h2 span{ 
    font-size: 1.2rem;
    line-height: 2;
  }
}

/* ---------------------------
PC */
@media only screen and (min-width: 769px){
  /*セクション内の要素の最大幅*/
  .inner{ max-width: 1000px;
    padding: 100px 0;
  }

  /*2カラム*/
  .col2{
    display:flex;
    gap:2%;
  }
  .col2 li{ width: 100%;}

  /*3カラム*/
  .col3{
    display:flex;
    gap:7%;
  }
  .col3 li{ width: 30%;}
}



/* ============================================================================

 01. ヘッダー

=============================================================================== */
#header_logo{
  position: absolute;
  z-index: 2;
  padding-top: 10px;
  padding-left: 10px;
}

#header_nav{
  display: flex;
  flex-direction: row-reverse;
  position: fixed;
  z-index: 2;
  top: 0px;
  right: 65px;
  box-sizing: content-box;
  width: 200px;
  padding-top: 10px;
  padding-right: 0rem;
  padding-bottom: 22px;
  color: #fff;
  mix-blend-mode: difference;
  gap: 10px;
}
#header_nav #header_doc,
#header_nav #header_contact{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 3em;
  margin-top: 6px;
  transition: .5s;
}
#header_nav #header_doc a:after,
#header_nav #header_contact a:after{
  font-size: 70%;
  line-height: 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  color: #fff;
}
#header_nav #header_doc a:after {
  content: "資料請求";
}
#header_nav #header_contact a:after {
  content: "お問合せ";
}

#header_nav #header_doc:hover,
#header_nav #header_contact:hover{
opacity: .5;
}

/* ---------------------------
SP */
@media only screen and (max-width: 768px){
  #tmh_logo_header{
  width: 150px;
  }
  #header_nav #header_doc, #header_nav #header_contact {
    margin-top: 0px;
  }
}
/* ---------------------------
PC */
@media only screen and (min-width: 769px){
  header{
    display: flex;
    flex-direction: column;
    line-height: 1;
  }
}


/* ============================================================================

 02. フッター

=============================================================================== */
#footer{
  padding: 80px 20px 80px  20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#footer .logo_fotter{
  width: 100%;
  max-width: none;
  margin-bottom: 15px;
}
/*ロゴ下の住所とTEL*/
#footer li.footer_link_left ul {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: .7em;
}
/*プライバシーポリシーと本体サイトリンク*/
#footer ul.footer_link{
  margin: 40px auto;
  text-align: left;
}

#footer ul.footer_link_sub{
  margin-top: 0;
}
#footer a{
  color: #fff;
}
small {
  color: #fff;
  font-size: 100%;
  letter-spacing: .05em;
  margin-top: 70px;
}

/* ---------------------------
SP */
@media only screen and (max-width: 768px){
  #footer ul.footer_link {
    margin-left: 2.5em;
  }
  small {
    font-size: 1rem;
  }
  
}

/* ---------------------------
PC */
@media only screen and (min-width: 769px){
  #footer .logo_fotter{
    width: 530px;
  }
  #footer .footer_link_wrap {
    display: flex;
    gap: 50px;
    max-width: 100%;
  }
  #footer .facility_list{
    max-width: 100%;
  }
  #footer ul.footer_link{
    max-width: 580px;
    margin:0 auto;
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .footer_link li:not(:last-child)::after {
    content: "/";
    color: #ddd;
    margin: 0 1em; /* スラッシュとテキストの間の余白 */
  }
}



/* ============================================================================

 03. フォーム

=============================================================================== */
/*お問い合わせフォーム*/
.mailform_table i{
  color:#ff0000;
  font-style:normal;
}					
.mailform_table{
  text-align:left;
  margin:0 auto;
  margin-top: 3rem;
  margin-bottom:3rem;
  border-collapse: separate;
  border-spacing: 1em 0;
}
.mailform_table th{
  white-space: nowrap;
  font-weight: normal;
}
.mailform_table td:last-child{
  width: 70%;
}
.mailform_table span.cap{display: inline-block;}
.mailform_table span.required,
.mailform_table span.any{
  display: inline-block;
  line-height: 1;
  font-size: 1.2rem;
  color:#fff;
  background: var(--common_B);
  white-space: nowrap;
  border-radius: 20px;
  padding: .5em 1em;
  margin-bottom: 6px;
}
.mailform_table span.any{background: #999;}
.mailform_table input::placeholder,
.mailform_table textarea::placeholder{ color:#ccc;}
.mailform_table input:focus::placeholder,
.mailform_table textarea:focus::placeholder {color: transparent;}

.mailform_table .zipcode,
.mailform_table .year,
.mailform_table .num{width:10em;}
select,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="file"],
textarea{ background:#fff; border:none; padding:1.5rem; margin:1rem 0; border-radius:0; width:100%;}

input[type="checkbox"]{ margin-bottom:0; padding-bottom:0;}



.mailform_table select {
  -webkit-appearance: none;
  appearance: none; /* デフォルトのスタイルを無効 */
}
.mailform_table select::-ms-expand {
  display: none; /* デフォルトのスタイルを無効(IE用) */
}
/* セレクトボックスの矢印デザイン変更 */
.select_kinds{
  position: relative;
  display:block;
}
.select_kinds::before {
  border-bottom: 6px solid var(--common_B);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  content: "";
  position: absolute;
  right: 1em;
  top: 0.8em;
  width: 0;
  z-index:1;
}
.select_kinds::after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--common_B);
  content: "";
  position: absolute;
  right: 1em;
  top: 1.8em;
  width: 0;
}

/*ラジオボタンの色*/
input[type=radio] {
    /*display: none;*/
}
.radio01 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 0px;
    position: relative;
    width: auto;
}
.mailform_table .radio01::before,
.mailform_table .radio01::after {
  display: none;
}
.mailform_table .radio01 .wpcf7-list-item {
  margin: 0!important;
}
.mailform_table .radio01 .wpcf7-list-item-label {
  box-sizing: border-box;
  cursor: pointer;
  padding: 0px 26px;
  width: auto;
}
.radio01 .wpcf7-list-item-label::before {
  background: #fff;
  border: 1px solid var(--common_B);
  border-radius: 50%;
  content: '';
  display: block;
  height: 16px;
  left: 5px;
  margin-top: -11px;
  position: absolute;
  top: 50%;
  width: 16px;
}
.mailform_table .radio01 .wpcf7-list-item-label::after {
  background: var(--common_B);
  border-radius: 50%;
  content: '';
  display: block;
  height: 10px;
  left: 9px;
  margin-top: -7px;
  opacity: 0;
  position: absolute;
  top: 50%;
  width: 10px;
}
.mailform_table .radio01 input[type=radio]:checked + .wpcf7-list-item-label::after {
  opacity: 1;
}

.mailform_table th{line-height: 1.2;}
.mailform_table span.cap{font-size: 1.2rem;}

/*生年月日*/
.mailform_table label {
  position: relative;
  display: inline-block;
  border: none;
}
.mailform_table input[type="date"] {
  position: relative;
  padding: 1.5rem;
  border: 0;
  background: #fff;
}


/*エラーメッセージ*/
.screen-reader-response p,
.wpcf7-not-valid-tip,
.wpcf7-response-output {
  color: #fff;
  background: #ff0000;
  font-weight: bold;
  padding: 0 0.5em;
  margin: 1em;
}
.wpcf7-not-valid-tip {
  padding: 0.5em;
}
.screen-reader-response ul {
  display: none;
}


@media only screen and (max-width: 768px) {
  .mailform_table{ border-spacing: 1em 1em;}
  .mailform_table th,
  .mailform_table td{
    display: inline-block;
  }
  .mailform_table td:last-child{
    width: 100%;
  }
  .mailform_table span.required,
  .mailform_table span.any{
    margin-right: 1em;
  }
  .radio01 {
    padding-top:10px;
    display: block;
  }
  .radio01::before {
    margin-top: -5px;
  }
.radio01::after {
    margin-top: -1px;
  }
}

/* ============================================================================

 04. 機能

=============================================================================== */

/*========================================
汎用版アコーディオン
========================================*/
.accordion_GP .toggle {
  display: none;
}
.accordion_GP .option {
  position: relative;
  margin-bottom: 2em;
  font-size: 1.5em;
}
.accordion_GP .title {
  line-height: 1.5;
  background: #fff;
  color: var(--common_B);
  border-radius: 5px;
  padding: 1em 2.5em 1em 1em;
}
.accordion_GP .title,
.accordion_GP .content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
	transition: all 0.3s;
}
.accordion_GP .title,
.accordion_GP .content p {
  display: flex;
  text-align: left;
  align-items: center;
}

.accordion_GP .title::after,
.accordion_GP .title::before {
  content: "";
  position: absolute;
  right: 2em;
  top:0;
  bottom:0;
  margin: auto;
  width: 1px;
  height: 0.75em;
  background: var(--common_B);
  transition: transform 0.5s;
}
.accordion_GP .title::after {
  transform: rotate(90deg);
}
.accordion_GP .title:hover {
  cursor: pointer;
}

.accordion_GP .content {/*本文*/
  height: 0;
  overflow: hidden;
	padding:0 20px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}
.accordion_GP .toggle:checked + .title + .content {/*開閉時*/
  height: auto;
	padding:20px; 
	transition: all .3s;
}
.accordion_GP .toggle:checked + .title::before {
  transform: rotate(90deg) !important;
}
@media only screen and (max-width: 768px){
  .accordion_GP .option {
    font-size: 1em;
  }
  .accordion_GP .content p {
    align-items: flex-start;
  }
}


/*========================================
 アニメーション類
========================================*/
/* スクロールで表示されるアニメーション */
section,
aside,
.fade_ohter {
    opacity : 0;
    transition : all 1500ms;
}
section.scrollin,
aside.scrollin {
    opacity : 1;
}
section .inner,
aside .inner,
.fade_ohter {
    scale: 1;
    transition : all 1500ms;
}
section.scrollin .inner,
aside.scrollin .inner,
.fade_ohter.scrollin{
    opacity : 1;
    scale: 1;
    translate: 0 0px;
}

/*スクロールなしでフェードイン
（主に汎用ページのファーストビューで使用）*/
.fadeIn-simple {
 animation-fill-mode:both;
 animation-duration:2s;
 animation-name: fadeIn-simple;
 visibility: visible !important;
}
@keyframes fadeIn-simple {
  0% {
    transform : translate(0, 0);
    filter: brightness(1.5) contrast(150%) blur(10px);
    opacity: 0;
  }
  99.9%, to {
    transform : translate(0, 0);
    filter: brightness(1) contrast(100%) blur(0);
    opacity: 1;
  }
}



#wrapper p {
  padding: 40px 0;
  text-align: center;
}


/*写真など出現アニメ*/
.img-anime {
  overflow: hidden;
  position: relative;
  transition: 1s;
  background: transparent;
  opacity: 0;
}
.img-anime.scrollin {
  opacity: 1;
  animation: mask-size 1s cubic-bezier(0.8, 0, 0.1, 1);
}
.img-anime::after {
  background: #fff;
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: translate(0, 100%);
}
.img-anime.scrollin::after {
  animation: mask-bg 1s cubic-bezier(0.8, 0, 0.1, 1);
}
@keyframes mask-bg {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -100%);
  }
}
@keyframes mask-size {
  0% {
    transform: scale(.8);
    opacity: 0; /* 初期状態で非表示 */
  }
  100% {
    transform: scale(1);
    opacity: 1; /* アニメーション完了時に表示 */
  }
}
@keyframes pop {
  0% {
    transform: scale(0);
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    transform: translateY(0px);
    opacity: 1;
  }
}

/*文字など出現アニメ*/
.txt-anime {
  overflow: hidden;
  position: relative;
  transition: 1s;
  background: transparent;
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, -20); 
}
.txt-anime.scrollin {
  opacity: 1;
  transition-delay: 1s;
  transform: matrix(1, 0, 0, 1, 0, 0);

  /* matrix(a, b, c, d, e, f):
  a: x軸のスケーリング (1 = 100%のサイズ)
  b: x軸の傾き (0 = 傾きなし)
  c: y軸の傾き (0 = 傾きなし)
  d: y軸のスケーリング (1 = 100%のサイズ)
  e: x軸の移動 (0 = 移動なし)
  f: y軸の移動 (100 = 100px下に移動)
*/
}
/*文字など出現アニメ　左から*/
.txt-anime-left {
  overflow: hidden;
  position: relative;
  transition: 1s;
  background: transparent;
  opacity: 0;
  transform: matrix(1, 0, 0, 1, -50, 0); 
}
.txt-anime-left.scrollin {
  opacity: 1;
  transition-delay: 0;
  transform: matrix(1, 0, 0, 1, 0, 0);
}
/*文字など出現アニメ　ズームダウン*/
h2,
.txt-anime-zoom {
  overflow: hidden;
  position: relative;
  transition: 1s;
  background: transparent;
  opacity: 0;
  transform: matrix(1.1, 0, 0, 1.1, 0, 0); 
}
h2.scrollin,
.txt-anime-zoom.scrollin {
  opacity: 1;
  transition-delay: 0;
  transform: matrix(1, 0, 0, 1, 0, 0);
}




/* ============================================================================

 05. 共通パーツ

=============================================================================== */

/*--------------------------------
リスト定義
---------------------------------*/
ol.disc li{
  list-style: disc;
}
ol.num li{
  list-style: decimal;
}
/*--------------------------------
table
---------------------------------*/
.listTABLE{
	width: 100%;
  border:#fff solid 5px;
  border-collapse:  collapse;
}
.listTABLE th,
.listTABLE td{
	border-right:#fff solid 1px;
}
.listTABLE th{
  font-weight: 400;
	border-top:#fff solid 1px;
	background:#ffffff10;
	padding:20px 30px;
	white-space:nowrap;
	vertical-align:middle;
	text-align:left;
}
.listTABLE td{
	border-top:#fff solid 1px;
	margin:0px;
	padding:20px 30px;
}
.listTABLE-line th,
.listTABLE-line td{border-left:#ccc solid 1px;}

@media only screen and (max-width: 768px) {
  .listTABLE th{ white-space:normal;}
  .listTABLE th,
  .listTABLE td{
    display:block;
    padding:20px;
  }
  .listTABLE td{
    display:block;
    padding-bottom:50px;
  }
  /*レスポンシブさせないテーブル*/
  .listTABLE.no_responsive th,
  .listTABLE.no_responsive td{
    display: table-cell;
  }
  /*横スクロールさせるテーブル*/
  .table_wrap{
    overflow-x: scroll;
  }
  .table_wrap .listTABLE{
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
  }
}


/*--------------------------------
汎用ボタン
---------------------------------*/

/*スクロール追従ボタン*/
.side_btn{
  display: flex;
  position: fixed;
  bottom: 0;
}
.side_btn li{
  width: 33.3%;
  transition: .5s;
}
.side_btn li a{
  display: block;
  background: var(--common_R);
  padding: 1em;
  color: #fff;
  font-size: 1.2rem;
}
.side_btn li a:hover{
  background: var(--common_GR);
  text-decoration: none;
}
/* ---------------------------
SP */
@media only screen and (max-width: 768px),
only screen and (max-height: 480px){
  .side_btn {
    width: 100%;
    border-top: #fff 1px solid;
  }
  .side_btn li+li{
    border-left: #fff 1px solid;
  }
  .side_btn li a{
    font-size: 1rem;
    text-align: center;
  }
}
/* ---------------------------
PC */
@media only screen and (min-width: 769px) and (min-height: 481px){
  .side_btn{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    gap: 10px;
    right: 0;
    bottom:5%;
  }
    .side_btn li a{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-right: -5px;
    padding-left: 8px;
  }
  .side_btn li:hover{
    margin-right: 4px;
  }
}



.btn_normal{
  font-family: var(--font-gothic);
  display: inline-block;
  color: #fff;
  background: var(--common_R);
  cursor: pointer;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
  transition: 0.5s;
  border-radius: 100px;
  text-decoration: none;
  line-height: 1;
  text-align: center;
  width: auto!important;
}
.btn_normal a{
  display: inline-block;
  padding: 20px 40px;/*はんなりだと少し下寄りになるのでcalc関数で少し下に余白を作る*/
}
/*下層ページのボタンは少し小さく*/
.lower .btn_normal{
  padding: 10px 20px calc(10px + 0.15em) 20px;
  border: none;
}
/*下層ページの各ボタン色セット*/
#co_concept .btn{background-color: var(--common_B);}
#co_features .btn{background-color: var(--common_PP);}
#co_service .btn{background-color: var(--common_G);}
#co_about .btn{background-color: var(--common_R);}
#co_recruit .btn{background-color: var(--common_A);}
#co_recruit_new .btn{background-color: var(--common_A);}

.btn_normal a{
  color: #fff;
}
.btn_normal a:hover{
  text-decoration: none;
}
.btn_normal:hover{
  background-color: var(--common_GR)!important;
  box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.6);
  text-decoration: none;
} 
.arrow{
  background-image: url(../common_images/btn_arrow.svg);
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: right 1em center;
}
.arrow:hover{
  background-image: url(../common_images/btn_arrow.svg);
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: right .5em center;
}
@media only screen and (max-width: 768px){
  .sp_only{display: block;}
  .pc_only{display: none;}
}
@media only screen and (min-width: 769px){
  .sp_only{display: none;}
  .pc_only{display: block;}
}

/*フォントサイズ*/
.font_080{font-size: .8em;}
.font_075{font-size: .75em;}
.cap{/*キャプション向け*/
  display: inline-block;
  font-size: .75em;
  line-height: 1.5;
  margin-top: .2em;
}

/*区切り線*/
hr{
  border-top: #eee 3px solid;
  margin: 50px auto;
}

/*マージンセット*/
.margin_UD1em{margin-top:20px; margin-bottom:20px;}
.margin_UD2em{margin-top:40px; margin-bottom:40px;}
.margin_U1em{margin-top:20px; }
.margin_U2em{margin-top:40px; }

/*画像 角丸*/
.Round20{border-radius: 20px;}
.Round30{border-radius: 30px;}

/*本文に差し込むバナー画像向け 余白とホバー*/
a.bn{
  display: block;
  margin: 1em 0;
  transition: .5s;
}
.bn:hover{
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
  opacity: .7;
}