@charset "utf-8";  

/* ------------------------------------------- CSS Information 
 File Name:      default.css 
 Author:         S.Yoshizawa
 Style Info:     ブラウザスタイルのリセットと基本設定 
----------------------------------------------------------- */  
  
/* ----------------------- Browser Default Initialization */  
html { overflow-y: scroll; }

body { max-width: 100%; height: auto; }

ul, ol, h1, h2, h3, h4, h5, h6 { all: unset; display: block; } 
  
/* ----------------------- Basic Style */  
/* ------------ Font Style */  
body, a, table, td, th, div, pre, form, fieldset, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, textarea, p, blockquote, input {  
    font-family: "メイリオ",Meiryo,verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;  
}  
  
/* ------------ A Style */
/* 未訪問リンクの色をblueにする */
a:link { text-decoration: underline; color: blue; }

/* 訪問済みリンクの色を薄い青にする */
a:visited { text-decoration: underline; color: #6666FF; }

/* マウスカーソルを乗せたリンクの色をblueにする */
a:hover { text-decoration: underline; color: blue ; }

/* 選択リンクの色を濃い青にする */
a:active { text-decoration: underline; color: #333399; } 


/* ------------ A Style white */

/* 未訪問リンクの色をblueにする */
a.white:link { text-decoration: underline; color: white; }

/* 訪問済みリンクの色を薄い青にする */
a.white:visited { text-decoration: underline; color: #eeeeff; }

/* マウスカーソルを乗せたリンクの色をblueにする */
a.white:hover { text-decoration: underline; color: white; }

/* 選択リンクの色を濃い青にする */
a.white:active { text-decoration: underline; color: white; } 



/* 画面を非表示にする（メニュー開閉時などで使用） */
html.hidden {
	overflow: hidden;
	position: fixed;
	width: 100%;
}



/* ------------タイトル・ヘッダー部分の設定（PC・スマホ共通） */

/* 言語選択の設定 */
.language{
	position: absolute;
	text-align: right;
	margin: 2vw;
	padding: 4px;
	right: 0;
	z-index: 3;
	font-size: clamp(12px,2vw,14px);
	color: white;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}



/* ------------ヘッダー部分の設定（PC版・デフォルト） */

/* PC版ヘッダーの表示（スマホ版は非表示） */
.header {
	display: block;
	padding-bottom: 5px;
}
.header_smart {
	display: none;
}

/* ロゴ部分 */
.headerLogo {
	width: 100px;
	display: block;
	margin: 0 auto;
}

/* リンク・検索の段を配置 */
.headerContainer {
	display: flex;
	padding-top: 5px;
}

/* リンク部分の全体設定 */
.naviContainer {
	display: flex;
	width: 100%;
}
/* リンク部分の文字 */
.naviContainer a.navi { 
	position: relative;
	display: inline-grid;
	color: #0b0076;
	text-decoration: none;
	font-size: 0.9rem;
	margin: 2px 10px;
	padding: 3px 0;
	width: 100%;
	text-align: center;
}
/* マウスカーソルを文字に合わせると下線が出る */
.naviContainer a.navi::before {
	content: "";
	position: absolute;
	background-color: #0b0076;
	bottom: 0;
	width: 100%;
	height: 2px;
	transform-origin: right; 
	transform: scaleX(0);
	transition: transform 0.3s ease;
}
.naviContainer a.navi:hover::before {
	transform: scaleX(1);
	transform-origin: left; 
}

/* 検索欄 */
.search{
	display: flex;
}
/* 検索ボタン */
.searchBtn1 {
	background-color: #002169;
	color: white;
	cursor: pointer;
}



/* ------------ヘッダー部分の設定（スマホ版・横幅768px以下） */

/* デフォルトでメニューを非表示に設定 */
#menu_smart {
	display: none;
}

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

  /* スマホ版ヘッダーの表示（PC版は非表示） */
  .header {
	display: none;
  }
  .header_smart {
	display: block;
	background-color: #062462;
  }

  /* ロゴ部分 */
  .headerLogo_smart {
	width: 100px;
	display: block;
  }

  /* Menuボタン、Closeボタンの設定 */
  #menuBtn {
	cursor: pointer;
	display: inline-block;
	z-index: 5;
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 18px;
	background: none;
	border: none;
	color: white;
	transition: .3s;
	padding: 5px 10px;
  }
  #closeBtn {
	cursor: pointer;
	display: inline-block;
	z-index: 10;
	position: fixed;
	top: 20px;
	right: 20px;
	font-size: 18px;
	background: none;
	border: none;
	color: #002169;
	transition: .3s;
	padding: 5px 10px;
  }
  #menuBtn:hover, #closeBtn:hover {
	transform: scale(1.2);
	transition: all 0.3s ease;
  }

  /* スマホ版メニューの表示 */
  #menu_smart.show {
	display: block;
	z-index: 1000;
	position: fixed;
	inset: 0;
	background-color: white;
	overflow-y: auto;
	scrollbar-width: none;
	padding: 10px;
  }

  /* 検索欄の表示 */
  .search_smart{
	display: flex;
	flex-direction: row;
	cursor: pointer;
	width: 100%;
	height: 50px;
	padding-top: 10px;
  }
  #search1_smart { width: 80%; font-size:16px; }
  #search1_smart::placeholder { font-size: 0.8rem; }
  #searchBtn1_smart { width: 20%; }

  /* メニュー内の各種リンク部分 */
  #menu_smart li{
	padding: 10px 5px;
	display: flex;
  }
  #menu_smart a.navi{
	position: relative;
	color: #002169;
	font-size: 20px;
	text-decoration: none;
	font-family: "Playfair Display",serif ;
	padding: 5px;
  }
  /* マウスカーソルを文字に合わせると下線が出る */
  #menu_smart a.navi::before {
	content: "";
	position: absolute;
	background-color: #002169;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	transform-origin: right; 
	transform: scaleX(0);
	transition: transform 0.3s ease;
  }
  #menu_smart a.navi:hover::before {
	transform: scaleX(1);
	transform-origin: left; 
  }

}



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

/* 全体の色・文字サイズ指定 */
.footer {
	font-size: 13px;
	background-color: #051d49;
	color: white;
	padding: 0 5%;
	position: relative;
}
/* フッターの下部に線を配置 */
.footer::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 2%;
	width: 100%;
	border-bottom: 1px solid;
}

/* サイトマップの会社ロゴ */
.sitemapLogo {
	width: 250px;
	display: flex;
	margin: 0 auto;"
}

/* 画面サイズが小さい場合は折り返して表示させる */
nav.sitemap {
	display: flex;
	flex-wrap: wrap;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 画面サイズに合わせて均等に項目を配置 */
.sitemap_items {
	flex: auto;
	padding: 10px;
}
/* 各項目の設定 */
.sitemap_category {
	font-size: 14px;
}
/* リンクを上から順に揃える */
.sitemap_link {
	vertical-align: top;
	list-style-type: square;
	margin-block: 1em;
	padding-inline-start: 40px;
}
/* サイトマップ内リンク */
a.sitemap {
	color: white;
}

/* コピーライト表示 */
.copyright{
	text-align: center;
	width: 100%;
	font-size: 12px;
	padding: 15px 0;
}



/* ------------サブページの全体設定 */

/* 画面サイズの設定 */
.subpagebody {
	width: 100%;
}

/* 写真・動画サイズの設定 */
.subpagebody img, .subpagebody video {
	display: block;
	max-width: 100%;
	height: auto;
}



/* ------------ページ汎用設定 */

/* ページタイトル */
.pageMain {
	background-color: #061e51;
	display: flex;
	margin: 5px 0;
	max-height: 180px;
}
/* ページタイトル（文字部分） */
.pageMainTitle {
	color: white;
	align-content: center;
	padding: 50px 5%;
	font-size: clamp(1.2rem, 5vw, 1.5rem);
	width: 200%;
}
/* ページタイトル（写真部分） */
.pageMainView {
	-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(to left, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
	overflow: hidden;
	object-fit: cover;
	aspect-ratio: 11 / 7;
	width: 150%;
}

/* ページ内記事用ナビの全体設定 */
.sectionNavi {
	background-color: #14357d;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	position: sticky;
	top: 0;
}
/* ページ内記事用ナビのボタン設定 */
.sectionBtn {
	border: none;
	font-size: 0.9rem;
	background: none;
	cursor: pointer;
	color: white;
	padding: 15px 30px;
	position: relative;
	display: inline-grid;
}
/* 上記ボタンにホバーすると下線が出る */
.sectionBtn::before {
	content: "";
	position: absolute;
	background-color: white;
	bottom: 10px;
	width: 100%;
	height: 2px;
	transform-origin: right; 
	transform: scaleX(0);
	transition: transform 0.3s ease;
}
.sectionBtn:hover::before {
	transform: scaleX(1);
	transform-origin: left; 
}

/* 記事を配置 */
.section {
	margin: 60px 0;
	padding: 10px 0;
}
/* 記事のタイトルを配置 */
.sectionTitle {
	padding-left: 2%;
	font-size: 1.3rem;
	border-bottom: 1px solid black;
	margin: 0 2%;
	color: #101660;
}
/* 記事の内容を配置 */
.sectionContent {
	margin: 2% 5%;
}

/* サブ記事のタイトル */
.sectionTitle_sub {
	font-size: 1.2rem;
	border-left: 8px solid #002169;
	padding: 0 10px;
	margin: 10px 0;
	color: #041f5b;
}
/* サブ記事の内容を配置 */
.sectionContent_sub {
	padding: 1% 5%;
}
/* サブ記事内のリスト設定 */
.sectionContent_sub li {
	 list-style: inside square;
}

/* 表（列部分）を配置 */
.overview_row {
	display: flex;
	border-bottom: 1px solid #b5b5b9;
	flex-wrap: wrap;
	word-break: keep-all;
	padding: 10px 5px;
}
/* 表（左側・項目部分）を配置 */
.overview_tit {
	font-weight: bold;
	color: #061e52;
	vertical-align: top;
	width: 30%;
	text-align: left;
	padding: 4px;
	text-wrap-mode: nowrap;
}
/* 表（右側・内容部分）を配置 */
.overview_data {
	text-align: left;
	vertical-align: top;
	flex: 1 1 60%;
	padding: 4px;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* ページ遷移ボタン（単体用・写真無し） */
.linkBtn {
	background-color: #061e51;
	height: 70px;
	align-content: center;
	text-align: center;
	margin: 20px 5px;
	text-wrap-mode: nowrap;
	overflow: hidden;
	transition: all 0.3s ease;
}
.linkBtn:hover {
	background-color: #8da3c9;
}

/* ページ遷移ボタン（複数用・写真無し） */
.linkBtn_flex {
	background-color: #061e51;
	height: 70px;
	text-align: center;
	margin: 20px 5px;
	text-wrap-mode: nowrap;
	overflow: hidden;
	flex: 1 1 auto;
	width: 300px;
	transition: all 0.3s ease;
}
.linkBtn_flex:hover {
	background-color: #8da3c9;
}

/* リンク文字（白）を配置 */
a.readMore_Light{
	color: white;
	text-decoration: none;
	display: block;
	align-content: center;
	width: 100%;
	height: 100%;
}

/* returnボタンの設定 */
a.return{
	color: black;
	text-decoration: none;
	background-color: white;
	font-size: 1rem;
	border: 1px solid black;
	transition: all 0.5s ease;
	margin: 0 10px;
	padding: 5px 30px;
}
a.return:hover{
	background-color: #122255;
	color: aliceblue;
	border: 1px solid white;
	cursor: pointer;
}



/* ------------トップページ */

/* ファーストビューを配置 */
.firstView {
	position: relative;
}
/* ファーストビュー部分にグラデーションを被せる */
.firstView::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(255,253,230,0.7) 0%, rgba(234,245,255,0.8) 100%);
	z-index: 1;
}
/* ファーストビュー部分に画像を配置 */
.firstViewImg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
}
/* ファーストビュー部分に文字・線を配置 */
.toptext {
	position: relative;
	z-index: 2;
	margin-left: 8%;
	padding: 250px 5% 100px 2%;
	color: #051d49;
	border-left: 1px solid #051d49;
}

/* 各ページへの案内（全体） */
.topContents {
	background-color: #061e51;
	display: flex;
	height: 100px;
	align-items: center;
	text-align: center;
	overflow: hidden;
	transition: all 0.3s ease;
}
.topContents:hover {
	background-color: #8da3c9;
}
/* 各ページへの案内（画像部分） */
.topContents img{
	width: 60%;
	height: 100%;
	object-fit: cover;
	opacity: 85%;
	aspect-ratio: 7 / 5;
}



/* ------------本日の学び */

/* 「本日の学び」の枠を配置 */
.dailyStudy {
	background-color: #f7f6f0;
	border-radius: 10px;
	margin: 60px 8%;
	padding: 5%;
}
/* 「本日の学び」の文章 */
.studyText {
	margin: 2%;
	text-align: center;
}



/* ------------会社情報ページ */

/* 「ご挨拶」の内容 */
.section_greeting{
	margin: 0 5%;
	display: flex;
	flex-wrap: wrap-reverse;
	justify-content: center;
	align-items: center;
}
/* 「ご挨拶」の文字部分 */
.greet_text {
	flex: 1 1 60%;
        margin: 20px 0;
}
/* 「ご挨拶」の導入部分 */
.greeting_intro {
	font-size: 1.2rem;
	color: #0b3080;
	margin: 10px 0;
}
/* 「ご挨拶」の写真部分 */
.greet_img {
	font-size: 0.7rem;
	margin: 20px 60px;
	max-width: 180px;
}


/* 「経営理念」の内容を配置 */
.section_plilosophy {
	background-color: #f1f1f1;
	padding: 1% 5%;
}
/* 「経営理念」の各項目を配置 */
.philosophy {
	padding: 15px 0;
}
/* 「経営理念」の各項目タイトル */
.philosophy_title {
	font-size: 1.2rem;
	color: #0b3080;
	padding: 5px 0;
}
/* 「敬天愛人」の部分 */
.motto {
	font-size: 2.3rem;
	color: #0b3080;
}
/* 『南洲翁遺訓』の引用文 */
.bookQuote {
	font-size: 0.9rem;
	color: #798082;
}


/* アクセスマップ */
.AccessMap {
	 width: 100%;
	 height: 300px;
	 border: 0;
	 dispaly: block;
}


/* ------------事業内容ページ */

/* 「事業内容」ページの画像 */
.businessImg {
	 height: 100px !important;
	 overflow: hidden;
	 object-fit: cover;
	 width: 100%;
}



/* ------------研究開発ページ（トップ） */

/* 「研究開発」ページ内の記事を配置 */
.section_development {
	 margin: 2%;
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: center;
	 align-items: center;
}

/* 「研究開発」ページの画像 */
.developImg {
	 margin: 3%;
	 max-height: 200px;
	 width: 250px;
	 object-fit: cover;
}

/* 「研究開発」ページの文章 */
.developIntro {
	 flex: 1 1 60%;
	 margin: 3%;
	 align-content: center;
}



/* ------------研究開発ページ（各システム詳細） */

/* 「研究開発」詳細ページの画像 */
.ProductImg {
	 width: 550px;
	 padding: 25px 0 50px 0;
	 justify-self: center;
}

/* 「研究開発」詳細ページの見出し（全体） */
.developTitle {
	 display: flex;
	 padding: 10px 0;
}
/* 「研究開発」詳細ページの見出し（文字部分） */
.developTitle_navy {
	 font-size: 1.2rem;
	 border-bottom: 1px solid #101660;
	 padding: 0 2%;
	 color: #101660;
}
/* 「研究開発」詳細ページの見出し（線部分） */
.developTitle_gray {
	 flex-grow: 1;
	 border-bottom: 1px solid lightgray;
}

/* 「機能」内の見出し */
.functionTitle {
	 color: #101660;
	 font-size: 1.2rem;
	 list-style: inside decimal !important;
}
/* 「機能」の内容 */
.functionText {
	 padding: 0px 0px 30px 25px;
	 color: black;
	 font-size: 1rem;
}

/* ces2024の画像 */
.cesImg {
	 margin: 0 auto;
	 padding: 20px 0;
}


/* ページ下のリンク部分（全体） */
.pageLink_sub {
	 background-color: #2a3969;
	 padding: 15px;
	 margin: 20px 5px;
	 color: white;
 	 overflow: hidden;
}
.pageLink_sub li {
	 padding: 5px;
	 list-style: inside square;
 	 white-space: nowrap;
}
/* ページ下のリンク部分（文字） */
.pageLink_sub a.Link {
	 position: relative;
	 color: #eeeeff;
 	 text-decoration: none;
 	 display: inline-flex;
 	 text-wrap-mode: wrap;
 	 margin-right: 20px;
}
/* リンクにカーソルを合わせると下線が出る */
.pageLink_sub a.Link::before {
	 content: "";
	 position: absolute;
	 background-color: #eeeeff;
	 bottom: 0;
	 width: 100%;
	 height: 2px;
	 transform-origin: right;
	 transform: scaleX(0);
	 transition: transform 0.3s ease;
}
.pageLink_sub a.Link:hover::before {
	 transform: scaleX(1);
	 transform-origin: left;
}



/* ------------その他開発実績 */

/* 記事の内容を配置 */
.section_other {
	margin: 0 5%;
}

/* システムの見出し */
.other_title {
	font-size: 1.2rem;
	color: #101660;
	padding: 10px;
}

/* 紹介文と下線を配置 */
.other_data {
	padding: 10px 5% 30px 5%;
	border-bottom: 1px solid #9fa5af;
}



/* ------------「新卒採用」「中途採用」ページ */

/* 「応募書類」のサブ項目 */
.category_title {
	font-size: 1.1rem;
	border-left: 6px solid #002169;
	color: #011031;
	padding: 0 10px;
	margin: 5px 0;
}



/* ------------社員インタビューページ */

/* 「さらに表示」ボタン */
.ViewMoreBtn {
	background-color: #092666;
	align-content: center;
	text-align: center;
	padding: 10px;
	width: 100%;
	border: 1px solid #092666;
	margin-bottom: 20px;
	color: white;
	font-size: 0.9rem;
	transition: all 0.3s ease;
}
.ViewMoreBtn:hover {
	background-color: #909dbb;
	border: 1px solid white;
}

/* 各インタビューの見出し（全体） */
.interview_intro {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-bottom: 20px;
}

/* 写真のサイズ設定 */
.interview_img {
	width: 115px;
	object-fit: cover;
}

/* 各インタビューの見出し（文字部分全体） */
.interview_topic {
	align-content: center;
	padding: 20px;
	flex: 1 1 200px;
}

/* 各インタビューのタイトルを配置 */
.interviewTitle {
	font-size: 1.3rem;
	border-bottom: 1px solid black;
	color: #002371;
}

/* インタビュー回答者の名前を配置 */
.interview_name {
	font-size: 0.9rem;
	padding: 10px 0;
	color: #41474f;
}

/* インタビュー詳細の表示・非表示設定（デフォルトは非表示） */
.interview {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}
.interview.open {
	max-height: 8000px;
}



/* ------------お問い合わせフォーム */

/* お問い合わせフォーム（全体） */
.contactForm {
	padding: 40px 7%;
	background-color: #eceef3;
	margin: 0;
	border-radius: 20px 20px 0 0;
}

/* 入力フォーム（行） */
.form_row {
	display: flex;
	border-bottom: 1px solid #b5b5b9;
	flex-wrap: wrap;
	word-break: keep-all;
	padding: 10px 5px;
}

/* 入力フォームの項目（左側） */
.form_tit {
	font-weight: bold;
	color: #061e52;
	vertical-align: top;
	width: 300px;
	text-align: left;
	padding: 4px;
	word-break: break-word;
	overflow-wrap: break-word;
	flex: 1 1 auto;
}

/* 入力フォームの内容（右側）  */
.form_data {
	text-align: left;
	vertical-align: top;
	flex: 1 1 60%;
	padding: 4px;
	margin: 0;
	overflow-wrap: break-word;
	word-break: keep-all;
}

/* フォーム入力部分の枠  */
.inputField{
	font-size: 1rem;
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
	resize: vertical;
}

/* フォーム送信ボタン */
.form_sendBtn {
	width: 200px;
	max-width: 100%;
	text-align: center;
	color: white;
	background-color: #214177;
	border: none;
	padding: 10px;
	transition: all 0.3s ease;
}
.form_sendBtn:hover {
	background-color: #a0b2cf;

}

/* 入力エラー文 */
.error_message {
	color: red;
	font-size: 1rem;
	margin-top: 5px;
	display: block;
	word-break: break-word;
	overflow-wrap: break-word;
}

</style>