@charset "UTF-8";

/* Font
========================================== */
/* Ubuntu */
@font-face {
  font-family: "Ubuntu";
  src: url("../font/Ubuntu-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;}
@font-face {
  font-family: "Ubuntu";
  src: url("../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("../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("../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("../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: #fff;
  background: #004C8E;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 100%;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;}
a {
  color: #fff;
  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
========================================== */
.title_01 {
  margin-bottom: 20px;
  color: #fff;}
.title_01::before {
  display: inline-block;
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: #D8692E;
  vertical-align:middle;
  margin-right: 10px;}
.pdt120 { 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;}}
@media screen and (max-width: 769px) {
  .title_01 { margin-bottom: 5px;}
  .pdt120 { padding-top: 20vw;}
  .box_flex { display: block;}
  .box_title { width: 100%;}
  .box_main { padding-top: 8vw;width: 100%;}}

/* Header
========================================== */
#header { background: #fff;}
#header p.hdlogo {
  padding: 50px 0 26px;
  text-align: center;
  color: #004C8E;}
#header p.hdlogo img {
  width: 240px;
  height: 120px;}
#nav .menu {
  position: absolute;
  top: 30px; right: 40px;
  display: flex;
  gap: 0 20px;
  justify-content: flex-end;}
#nav .menu a {
  font-size: 15px;
  transition: .3s;
  font-weight: 500;}
#nav .menu a.tw {
  background: #004C8E;
  color: #fff;
  border: 2px solid #004C8E;
  border-radius: 4px;
  padding: 6px 26px;}
#nav .menu a.jp {
  color: #004C8E;
  border: 2px solid #004C8E;
  border-radius: 4px;
  padding: 6px 26px;}
#header .photo {
  margin-top: -100px;
  position: relative;
  top: 100px;
  padding: 0 40px; }
#header .photo img { border-radius: 10px;}
@media screen and (max-width: 769px) {
  #nav .menu { flex-wrap: wrap;gap: 5px 10px;right: 20px; top: 30px; width: 160px;}
  #nav .menu a.tw ,#nav .menu a.jp { padding: 2px 26px;}
  #header p.hdlogo { height: 130px; width: 200px;padding-top:24px; font-size: 15px;}
  #header p.hdlogo img { width: 120px; height: 60px;}}

/* Footer
========================================== */
#ft_info { background: #F4F7FA;}
#ft_info .contents {
  padding-top: 80px;
  padding-bottom: 160px;
  text-align: center;
  color: #004C8E;
  border-top: 2px solid #D3DEE6;}
#ft_info .copy {
  padding-top:20px;
  letter-spacing: 0.2em;}
@media screen and (max-width: 769px) {
  #ft_info .contents { padding-bottom: 15vw;}}


/* About
========================================== */
#about { padding-top: 180px;}
#about .flex {
  display: flex;
  justify-content: space-between;
  gap: 30px 80px;}
#about .flex .title {}
#about .flex .text { width: 540px; flex: 1;}
@media screen and (max-width: 769px) {
  #about .flex { display: block;}
  #about h2 { margin-bottom: 30px;}
  #about .flex .text { width: 100%;}}

/* Service
========================================== */
#service .flex {
  margin-top: 60px;
  display: flex;
  gap: 60px 80px;
  flex-wrap: wrap;
  justify-content: space-between;}
#service .flex .item {
  position: relative;
  width: calc(50% - 40px);}
#service .namber {
  overflow: hidden;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -15px;
  left: 0;}
#service .namber span {
  color: #D8692E;
  display: block;
  position: relative;
  z-index: 2;}
#service .namber::before {
  position: absolute;
  z-index: 1;
  top: -60px;
  left: -60px;
  content: "";
  display: block;
  transform: rotate(45deg);
  width: 120px;
  height: 120px;
  background: #004C8E;}
#service img { border-radius: 6px;}
#service h3 { margin: 24px 0 18px;}
@media screen and (max-width: 1180px) {
  #service .flex { gap: 60px 40px;}
  #service .flex .item { width: calc(50% - 20px);}}
@media screen and (max-width: 769px) {
  #service .flex .item { width: 100%;}
  #service .namber { top: -5px;}
  #service .namber::before { top:-50px; left: -50px; width: 100px; height: 100px;}}

/* Partner
========================================== */
#partner .flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;}
#partner .flex .item {
  background: #fff;
  width: 180px;
  height: 100px;
  border-radius: 10px;}
#works h3 {
  background: #fff;
  color: #004C8E;
  text-align: center;
  padding: 10px 0;
  border-radius: 9999px;
  margin-bottom: 26px;}
#works .item {
  padding: 0 10px 28px;
  margin-bottom: 26px;
  border-bottom: 1px solid #EEEEEE;}
@media screen and (max-width: 1180px) {
  #partner .flex { justify-content: space-around;}
  #partner .flex .item { width: calc(50% - 10px);}}
@media screen and (max-width: 480px) {
  #partner .flex { gap:10px;}
  #partner .flex .item { width:100%;}}


/* About
========================================== */
#philosophy h3 { margin-bottom: 30px;}
#greeting img { border-radius: 6px;}
#greeting p { padding-top: 40px;}
#greeting p.title_01 { padding-top: 0;}
#greeting p.name { text-align: right;}
#companyinfo table {
  margin-bottom: 30px;
  width: 100%;
  border-spacing: 0;
  border-top: 1px solid #003C71;}
#companyinfo table th,#companyinfo table td {
  padding: 20px 10px;
  text-align: left;
  border-bottom: 1px solid #003C71;}
#companyinfo table th {
  color: #fff;
  font-weight: 500;}
#companyinfo h3 { margin: 60px 0 30px;}
#companyinfo h3::before {
  display: inline-block;
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: #D8692E;
  vertical-align:middle;
  margin-right: 10px;}
#companyinfo { padding-bottom: 160px;}
#companyinfo a {text-decoration: underline;}
@media screen and (max-width: 769px) {
  #companyinfo table th,#companyinfo table td { display: block;}
  #companyinfo table th { padding-bottom: 0; border: none;}
  #companyinfo table td { padding-top: 0; }
  #companyinfo { padding-bottom: 20vw;}}


/* Contact
========================================== */
#contact {
  padding: 160px 0;
  color: #100F10;
  background: #F4F7FA;}
#contact h2 {
  margin-bottom: 40px;
  color: #004C8E;
  line-height: 1.2;
  text-align: center;}
#contact h2 span { display: block;}
#contact p.info {
  margin-bottom: 40px;}
#contact p.info span {
  color: #0F86D5;
  display: block;}
.contact-form__list { border-top: 1px solid #D3DEE6;}
.contact-form__row {
  display: flex;
  align-items: center;
  min-height: 81px;
  border-bottom: 1px solid #D3DEE6;}
.contact-form__row--message { align-items: flex-start;}
.contact-form__term {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  flex: 0 0 270px;
  gap: 20px;
  padding: 20px 20px 20px 0;}
.contact-form__term p {
    font-size: 18px;
    font-weight: 500;}
.contact-form__row--message .contact-form__term { padding-top: 28px;}
.contact-form__status {
  margin-right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 60px;
  font-size: 12px;
  width: 60px;
  height: 24px;
  border-radius: 999px;}
.contact-form__status--required {
  color: #fff;
  background: #004C8E;}
.contact-form__status--optional {
  color: #004C8E;
  background: #D3DEE6;}
.contact-form__data {
  flex: 0 1 470px;
  width: 470px;
  padding-block: 20px;}
/* Contact Form 7が追加するラッパー */
.contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: 1px solid #D3DEE6;
  border-radius: 2px;
  color: inherit;
  background: #fff;
  box-shadow: none;}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"] {
  height: 40px;
  padding: 8px 12px;}
.contact-form textarea {
  min-height: 200px;
  padding: 12px;
  resize: vertical;}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form a:focus-visible {
  outline: 2px solid #004C8E;
  outline-offset: 2px;}
/* 住所 */
.contact-form__postal {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;}
.contact-form__postal input[type="text"],
.contact-form__postal .wpcf7-form-control-wrap {
  flex: 0 1 120px;
  display: inline-block;
  width: 120px;}
.contact-form__address { width: 100%;}
/* チェックボックス */
.contact-form__choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;}
.contact-form__choices label, .contact-form__consent, .contact-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;}
.contact-form__choices label {
  font-size: 18px;
  font-weight: 500;}
.contact-form .wpcf7-list-item {
  display: block;
  margin: 0 0 12px;}
.contact-form input[type="checkbox"] {
  appearance: none;
  flex: 0 0 20px;
  background-color: #ffffff;
  border: 1px solid #D3DEE6;
  border-radius: 3px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #004C8E;
  box-sizing: border-box;
  position: relative;
  top: 2px;}
input[type="checkbox"]:checked {
  border-color: #004C8E;
  border: 8px solid #004C8E;}
/* 個人情報 */
.contact-form__privacy {
  margin-top: 40px;
  padding: 38px;
  border: 1px solid #D3DEE6;
  background: #fff;}
.contact-form__privacy-title {
  font-weight: bold;
  font-size: 18px;
  margin: 0 0 20px;
  padding-left: 18px;
  border-left: 2px solid #004C8E;}
.contact-form__privacy p:not(.contact-form__privacy-title) { margin: 0 0 20px;}
.contact-form__privacy a {
  display: inline-block;
  color: #004C8E;
  text-decoration: underline;
  text-underline-offset: 3px;}
.contact-form__consent {
  font-size: 18px;
  font-weight: 700;
  width: fit-content;}
/* 送信ボタン */
.contact-form__submit {
  margin: 60px 0 0;
  text-align: center;
  font-weight: 700;
  font-size: 18px;}
.contact-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 400px);
  min-height: 80px;
  padding: 16px 30px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #004C8E;
  cursor: pointer;}
.contact-form .wpcf7-spinner {
  display: block;
  margin: 12px auto 0;}
.contact-form .wpcf7-not-valid-tip, .contact-form .wpcf7-response-output { margin-top: 8px;}
@media (min-width: 1080px) {
  .contact-form input[type="submit"]:hover { opacity: .85;}}
@media (max-width: 769px) {
  #contact { padding: 20vw 0;}
  .contact-form { width: 100%;}
  .contact-form__row {
    display: block;
    min-height: 0;
    padding-block: 24px;}
  .contact-form__term, .contact-form__row--message .contact-form__term {
    gap: 12px;
    padding: 0 0 14px;}
  .contact-form__data {
    width: 100%;
    padding: 0;}
  .contact-form textarea { min-height: 180px;}
  .contact-form__postal {
    gap: 8px;
    margin-bottom: 12px;}
  .contact-form__postal input[type="text"], .contact-form__postal .wpcf7-form-control-wrap {
    flex: 1 1 0;
    min-width: 0;}
  .contact-form__privacy {
    margin-top: 30px;
    padding: 24px 20px;}
  .contact-form__submit {
    margin-top: 40px;}
  .contact-form input[type="submit"] { min-height: 64px;}}



/* Hover
========================================== */
@media screen and (min-width: 1080px) {
  #nav .menu a.tw:hover { color: #fff; background: #004C8E;}}