@charset "UTF-8";

/*
Theme Name: ONKA KEITO
Theme URI: https://enjia.co.jp/
Author: ONKA KEITO Co., Ltd.
Description: 恩嘉系統株式会社のコーポレートサイト用オリジナルテーマ
Version: 1.0.0
Text Domain: onka-keito
*/

/* Font
========================================== */
/* Ubuntu */
@font-face {
  font-family: "Ubuntu";
  src: url("asset/font/Ubuntu-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;}
@font-face {
  font-family: "Ubuntu";
  src: url("asset/font/Ubuntu-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;}
.en { font-family: "Ubuntu";}

/* Zen Kaku Gothic New */
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("asset/font/ZenKakuGothicNew-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("asset/font/ZenKakuGothicNew-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("asset/font/ZenKakuGothicNew-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;}

/* Reset
========================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.8}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto;margin: auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;font-weight: 500;}:where(h1,h2,h3){line-height:calc(1em + 1rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}


/* Base
========================================== */
/* main */
html {
  scroll-behavior: smooth;
  font-size: 100%;
  overflow-x: hidden;}
body {
  margin: 0; padding: 0;
  color: #100F10;
  background: #F4F7FA;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 100%;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;}
a {
  color: #004C8E;
  display: block;
  text-decoration: none;}


/* Utility
========================================== */
/* Font Weight */
.txw-r { font-weight: 400;}
.txw-m { font-weight: 500;}
.txw-b { font-weight: 700;}

/* Line Height */
.lh-1 { line-height: 1; }
.lh-12 { line-height: 1.2; }
.lh-14 { line-height: 1.4; }
.lh-15 { line-height: 1.5; }
.lh-16 { line-height: 1.6; }
.lh-18 { line-height: 1.8; }
.lh-2 { line-height: 2; }
.lh-25 { line-height: 2.5; }

/* Text Align */
.txa-c { text-align: center;}
.txa-l { text-align: left;}
.txa-r { text-align: right;}

/* Font Size */
.txs-12 { font-size: 0.75rem; }
.txs-14 { font-size: 0.875rem; }
.txs-15 { font-size: 0.9375rem; }
.txs-16 { font-size: 1rem; }
.txs-18 { font-size: 1.125rem; }
.txs-20 { font-size: 1.25rem; }
.txs-24 { font-size: 1.5rem; }
.txs-28 { font-size: 1.75rem; }
.txs-32 { font-size: 2rem; }
.txs-36 { font-size: 2.25rem; }
.txs-42 { font-size: 2.625rem; }
.txs-48 { font-size: 3rem;}
p { font-size: 1rem; font-weight: 400;}

.vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
	line-height: 1;}

/* Display */
.d-pc, .d-pd, .d-pd-sp, .d-sp, .d-pc-inline, .d-sp-inline { display: none; }


/* Layout
========================================== */
.wrap {
	width: 100%;
	margin: 0 auto;}
.contents {
	width: 100%;
  max-width: 1080px;
	margin: 0 auto;}
.w780 {
	margin: 0 auto;
	width: 100%;
	max-width: 780px;}


/* Media Query
========================================== */

/* PC */
@media screen and (max-width: 1180px) {
  .wrap { padding: 0 4vw;}
  .contents { padding: 0 4vw;}}

@media screen and (min-width: 769px) {
  .d-pc { display: block;}
  .d-pc-inline { display: inline-block;}}

/* Tablet */
@media screen and (max-width: 1180px) {
  .txs-18 { font-size: 1.1rem; }
  .txs-20 { font-size: 1.125rem; }
  .txs-24 { font-size: 1.375rem; }
  .txs-28 { font-size: 1.625rem; }
  .txs-32 { font-size: 1.7rem; }
  .txs-36 { font-size: 1.8rem; }
  .txs-42 { font-size: 2rem; }
  .txs-48 { font-size: 2.5rem; }}

@media screen and (max-width: 768px) {
  .d-pd-sp { display: block;}
  .d-pd { display: block;}}

/* SP */
@media screen and (max-width: 480px) {
  .txs-18 { font-size: 1.1rem; }
  .txs-20 { font-size: 1.12rem; }
  .txs-24 { font-size: 1.2rem; }
  .txs-28 { font-size: 1.3rem; }
  .txs-32 { font-size: 1.4rem; }
  .txs-36 { font-size: 1.5rem; }
  .txs-42 { font-size: 1.6rem; }
  .txs-48 { font-size: 1.8rem; }
  .d-pd { display: none;}
  .d-sp { display: block;}
  .d-sp-inline { display: inline-block;}}


/* Parts
========================================== */
.more {
  margin-top: 60px;
  text-align: center;}
.more a {
  transition: 0.5s;
  margin: 0 auto;
  height: 100px;
  border-radius: 50px;
  line-height: 100px;
  width: 100%;
  max-width: 480px;
  background: linear-gradient(90deg, #E69700,#E34600);
  color: #fff;
  font-size: 24px;
  box-shadow: 0 0 10px 0 #00348622;
  font-weight: 700;}
.morelink {
  margin-top: 30px;
  text-align: right;}
.morelink a {
  display: inline-block;
  font-weight: 500;
  text-decoration: underline;}
.morelink a span {
  transition: 0.5s;
  margin-left: 15px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  border: 1px solid #004C8E;}
.title_01 {
  margin-bottom: 20px;
  color: #004C8E;}
.title_01::before {
  display: inline-block;
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: #D8692E;
  vertical-align:middle;
  margin-right: 10px;}
#title {
  padding-top: 160px;
  background: #fff;}
#title .contents {
  position: relative;
  align-items:center;
  gap:0 40px;
  justify-content: space-between;
  display: flex;}
#title h1 {
  padding: 0 0 40px 60px;
  color: #004C8E;}
#title h1::before {
  content: "";
  display: block;
  width: 2px;
  height: 220px;
  background: #004C8E;
  position: absolute;
  top: 0;
  left: 0;}
#title span.en {
  display: block;
  line-height: 1.2;
  font-size: 72px;}
#title .pagenav {
  max-width: 580px;
  justify-content: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;}
#title .pagenav a {
  font-size: 15px;
  position: relative;
  box-shadow: 0 0 10px 0 #00348622;
  height: 40px;
  transition: .5s;
  border-radius: 20px;
  line-height: 40px;
  padding: 0 30px 0 20px;
  min-width: 140px;}
#title .pagenav a::after {
  position: absolute;
  top: 17px;
  right: 14px;
  content: "";
  display: block;
  background: #E2E9F5;
  height: calc(tan(60deg) * 8px / 2);
  width: 8px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);}
.pdt120 { padding-top: 120px;}
.pdt140 { padding-top: 120px;}
.box_flex { display: flex;}
.box_title { width: 300px; padding-right: 40px;}
.box_main { width: 780px; padding-top: 50px;}
@media screen and (max-width: 1180px) {
  .box_title { width: 240px; padding-right: 30px;}
  .box_main { flex: 1;}
  #title h1::before { height: 110%;}}
@media screen and (max-width: 769px) {
  .title_01 { margin-bottom: 5px;}
  #title .contents { display: block;}
  #title .pagenav { padding-bottom: 30px; padding-left: 4vw;}
  #title .pagenav a {
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    min-width: auto;}
  #title .pagenav a::after { top: 13px;}  
  #title h1 { padding: 0 0 20px 4vw;}
  #title span.en { font-size: 40px;}
  .pdt120, .pdt140 { padding-top: 20vw;}
  .box_flex { display: block;}
  .box_title { width: 100%;}
  .box_main { padding-top: 8vw;width: 100%;}
  .more { margin-top: 40px;}
  .more a { height: 80px; line-height: 80px;font-size: 18px;}}
@media screen and (max-width: 480px) {
  .more a { height: 60px; line-height: 60px;}}

/* Header
========================================== */
#header {
  background: #fff;
	padding-right: 140px;
	padding-left: 320px;
  width: 100%;
  height: 100px;
  display: flex;
	justify-content: flex-end;
  align-items: center;}
#header p.hdlogo {
  padding-top: 40px;
  width: 320px;
  height: 220px;
  background: #fff;
  border-radius: 0 0 10px 0;
	position: absolute;
  text-align: center;
  color: #004C8E;
  z-index: 3;
  top: 0; left: 0;}
#header p.hdlogo img {
  width: 240px;
  height: 120px;}
#nav { font-size: 15px;}
#nav .menu {
  display: flex;
  gap: 0 30px;
  align-items: center;
  justify-content: flex-end;}
#nav .menu a {
  color: #100F10;
  transition: .3s;
  font-weight: 500;}
#nav .menu a.tw {
  color: #004C8E;
  border: 2px solid #004C8E;
  border-radius: 4px;
  padding: 6px 26px;}
#header .menu-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: #004C8E;
  width: 100px;
  height: 100px;
  z-index: 1001;}
#header .menu-btn button {
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;}
#header .menu-btn span {
  position: absolute;
  left: 50%;
  width: 30px;
  height: 2px;
  background: #fff;
  transition: .35s;
  transform: translateX(-50%);}
#header .menu-btn span:nth-child(1) { top: 42px;}
#header .menu-btn span:nth-child(2) { top: 49px;}
#header .menu-btn span:nth-child(3) { top: 56px;}
#header .menu-btn.open span:nth-child(1) { top: 50px; transform: translateX(-50%) rotate(45deg);}
#header .menu-btn.open span:nth-child(2) { display: none;}
#header .menu-btn.open span:nth-child(3) { top: 50px; transform: translateX(-50%) rotate(-45deg);}
#gNav {
  position: fixed;
  top: 0;
  right: -400px;
  opacity: 0;
  width: 100%;
  max-width: 320px;
  height: 100%;
  background: #004C8E;
  transition: .5s;
  z-index: 1000;}
#gNav.open { right: 0;opacity: 1;}
#gNav a {
  color: #fff;
  font-weight: 500;
  display: block;
  margin: 10px 40px 5px;
  text-decoration: none;
  transition: .3s;}
#gNav .menulink {
  padding-top: 120px;
  padding-bottom: 100px;
  height: 100%;
  overflow-y: scroll;}
#gNav a.tw {
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 4px;
  padding: 6px 26px;}

@media screen and (max-width: 1280px) {
  #nav { display: none;}}
@media screen and (max-width: 769px) {
  #gNav { min-width: 50vw; width: auto;}
  #header { padding: 0;}
  #header p.hdlogo { height: 130px; width: 200px;padding-top:24px; font-size: 15px;}
  #header p.hdlogo img { width: 120px; height: 60px;}
  #header { height: 80px;}
  #header .menu-btn { height: 80px; width: 80px;}
  #header .menu-btn span:nth-child(1) { top: 32px;}
  #header .menu-btn span:nth-child(2) { top: 39px;}
  #header .menu-btn span:nth-child(3) { top: 46px;}
  #header .menu-btn.open span:nth-child(1),
  #header .menu-btn.open span:nth-child(3){ top: 40px; }}

/* Footer
========================================== */
#ft_contact {
  background: #fff;
  border-radius: 100px 100px 0 0;
  padding: 120px 0 100px;}
#ft_contact .flex {
  align-items: flex-end;
  justify-content: space-between;
  display: flex;}
#ft_contact .flex p span { color: #0F86D5;}
#ft_contact .flex a {
  transition: .5s;
  width: 100%;
  max-width: 340px;
  color: #100F10;
  text-align: center;
  height: 90px;
  line-height: 90px;
  border: 2px solid #DBE6F0;}
#ft_contact .flex a img {
  margin-right: 15px;
  vertical-align: middle;
  display: inline-block;}
#ft_info {
  margin-bottom: 20px;
  padding: 80px 0 70px;
  border-top: 2px solid #DBE6F0;
  background: #fff;}
#ft_info .flex {
  justify-content: space-between;
  display: flex;}
#ft_info h1 { color: #004C8E;}
#ft_info .menulink {
  width: 300px;
  display: flex;
  flex-wrap: wrap;}
#ft_info .menulink a {
  font-weight: 500;
  transition: .5s;
  min-width: 110px;
  color: #100F10;}
#ft_info .menulink a::before {
  content: "・";
  color: #004C8E;}
#ft_info .copy {
  padding-top: 40px;
  letter-spacing: 0.2em;
  text-align: right;}
@media screen and (max-width: 1180px) {
  #ft_contact { padding: 10vw 0;}
  #ft_contact h3 { margin-bottom: 30px;}
  #ft_contact .flex { display: block;}
  #ft_contact .flex a { margin-top: 30px; max-width: 100%;}
  #ft_info { padding: 5vw 0;}}
@media screen and (max-width: 769px) {
  #ft_contact { border-radius: 10vw 10vw 0 0;padding: 15vw 0;}
  #ft_info .flex { display: block;}
  #ft_info .menulink { margin: 30px auto 0; width: auto;}
  #ft_info .copy { text-align: left;}
  #ft_info { padding: 8vw 0;}}
@media screen and (max-width: 480px) {
  #ft_info { padding: 15vw 0;}
  #ft_info .menulink { justify-content: flex-start;font-size: 14px; margin: 20px auto 0;}}

/* Hover
========================================== */
@media screen and (min-width: 1080px) {
  .more a:hover { box-shadow: 0 0 10px 0 #003486ee;}
  .morelink a:hover span { background: #004C8E; color: #fff;}
  #title .pagenav a:hover { background: #E2E9F5;}
  #nav .menu a:hover { color: #0F86D5;}
  #gNav a:hover { color: #0F86D5;}
  #nav .menu a.tw:hover { color: #fff; background: #004C8E;}
  #ft_contact .flex a:hover { background: #DBE6F0;}
  #ft_info .menulink a:hover { color: #0F86D5;}}