/*
Theme Name: UnionOne Theme
Author: YOUPLANNING
Version: 1.0
Description: 株式会社ユニオンワンの公式テーマ
*/

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&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;tab-size:2;scrollbar-gutter:stable}:where(html:has(dialog:modal[open])){overflow:clip}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}: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(a){color:inherit;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,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;font-weight:500}:where(h1,h2,h3){line-height:calc(1em + 0.5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(dialog){border:none;background:none;inset:unset;max-width:unset;max-height:unset}:where(dialog:not([open])){display:none!important}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}
table { border-collapse:collapse;}

/* --------------------
   COMMON
-------------------- */
a { transition: .25s all;}
:where(html) { color-scheme: #fff;}
html {
  scroll-behavior: smooth;
  font-size: 100%;
  overflow-x: hidden;}
body {
  background: #fff;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.05em;
  color: #1D4494;
  font-size: 100%;
  -webkit-font-smoothing: antialiased;}
a {
  color: #1D4494;
  text-decoration: none;}
img { max-width: 100%;}

@media screen and (max-width: 480px){
  body { letter-spacing: normal;}}

@media screen and (max-width: 1280px){
  body.active,html.active { overflow-y: hidden;}}

/* text */
p { font-size: 1rem; line-height: 1.8;}

.txs-10 { font-size: 0.625rem; }
.txs-12 { font-size: 0.75rem; }
.txs-14 { font-size: 0.875rem; }
.txs-16 { font-size: 1rem; }
.txs-18 { font-size: 1.125rem; }
.txs-20 { font-size: 1.25rem; }
.txs-22 { font-size: 1.375rem; }
.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-64 { font-size: 4rem; }
.txs-80 { font-size: 5rem; }
.txs-100 { font-size: 6.25rem; }
.txs-120 { font-size: 7.5rem; }
.txs-296 { font-size: 18.5rem;}

.en { font-family: "Lato", sans-serif;}

.l-1 { line-height: 1;}
.l-12 { line-height: 1.2;}
.l-16 { line-height: 1.6;}
.l-18 { line-height: 1.8;}

.w-r { font-weight: 400;}
.w-m { font-weight: 500;}
.w-b { font-weight: 700;}
.w-l { font-weight: 900;}

.center { text-align: center;}
.right { text-align: right;}
.left { text-align: left;}

.clor0 { color: #fff;}
.clor1 { color: #1D4494;}
.clor2 { color: #DCE2EB;}
.clor3 { color: #1B2431;}

@media screen and (max-width: 768px){
  .txs-10 { font-size: 0.625rem; }
  .txs-12 { font-size: 0.75rem; }
  .txs-14 { font-size: 0.875rem; }
  .txs-16 { font-size: 1rem; }
  .txs-18 { font-size: 1.125rem; }
  .txs-20 { font-size: 1.2rem;}
  .txs-22 { font-size: 1.25rem;}
  .txs-24 { font-size: 1.375rem;}
  .txs-28 { font-size: 1.75rem; }
  .txs-32 { font-size: 1.75rem;}
  .txs-36 { font-size: 2rem;}
  .txs-42 { font-size: 2.25rem; }
  .txs-64 { font-size: 2.5rem; }
  .txs-80 { font-size: 3rem; }
  .txs-100 { font-size: 3.5rem; }
  .txs-120 { font-size: 3.5rem; }
  .txs-296 { font-size: 10rem;}}

/* --------------------
   ALL
-------------------- */
.wrap {
  margin: 0 auto;
  max-width: 1280px;
  width: 100%;}
.contents {
  padding: 0 100px;
  position: relative;
  margin: 0 auto;
  width: 100%;}
.pc { display: block;}
.pd { display: none;}
.sp { display: none;}

@media screen and (max-width: 1280px){
  body { width: 100%; overflow: hidden;}}
@media screen and (max-width: 768px){
	.wrap { padding: 0 4vw;}
	.contents { padding: 0 4vw;}
  .pc { display: none;}
  .pd { display: block;}
  .sp { display: none;}}
@media screen and (max-width: 480px){
  .pc { display: none;}
  .pd { display: block;}
  .sp { display: block;}}

/* --------------------
   HEADER
-------------------- */
#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  padding: 30px 30px 30px 40px; 
  justify-content: space-between;
  display: flex;}
#header h1 {
  letter-spacing: normal;}
#header h1 span {
  display: block;
  font-size: 24px;
  letter-spacing: 0.05em;}
#hdnav .sns {
  display: flex;
  gap:10px;}
@media screen and (min-width: 1281px){
  #header { z-index: 5;}
  #hdnav { display: flex;}
  #hdnav ul {
    display: flex;
    margin-right: 30px;}
  #hdnav ul li { border-right: 1px solid #FFFFFF;}
  #hdnav ul li a {
    display: flex;
    height: 40px;
    align-items: center;
    text-align: center;
    padding: 0 30px;}
  #header .hamburger { display:none;}}
@media screen and (max-width: 1280px){
  #hdnav {
    position: fixed;
    top: 0;
    right: -100vw;
    height: 100vh;
    padding: 100px 60px;
    z-index: 98;
    transition: 0.5s all;
    border-left: 1px solid #DCE2EB;
    background: #fff;}
  #hdnav.active {right: 0;}
  #hdnav a {
    display: block;
    font-weight: bold;
    padding: 5px 0;}
  #hdnav br { display: none;}
  #hdnav .sns { margin-top: 10px;}
  #header .hamburger { display:block;}
  #header .hamburger {
    display: block;
    position: fixed;
    z-index: 99;
    right: 0;
    top: 0;
    width: 100px;
    height: 100px;
    cursor: pointer;
    text-align: center;}
  #header .hamburger p {
    position: absolute;
    width: 100px;
    bottom: 16px;
    text-align: center;}
  #header .hamburger span {
    display: block;
    position: absolute;
    width: 40px;
    height: 2px;
    left: 30px;
    background: #1D4494;
    transition: 0.3s ease-in-out;}
  #header .hamburger span:nth-child(1) { top: 35px; }
  #header .hamburger span:nth-child(2) { top: 47px; }
  #header .hamburger span:nth-child(3) { top: 59px; }
  #header .hamburger.active span:nth-child(1) {
    top: 37px;
    left: 30px;
    transform: rotate(-45deg);}
  #header .hamburger.active span:nth-child(2) { opacity: 0;}
  #header .hamburger.active span:nth-child(3) {
    top: 37px;
    transform: rotate(45deg);}}
@media screen and (max-width: 768px){
  #header {padding: 30px 30px 30px 8vw;}
  #hdnav { padding: 60px 100px 0 60px;}}

/* --------------------
   FOOTER
-------------------- */
#footer {
  position: relative;
  padding: 160px 0 50px;
  color: #fff;
  background: #1D4494;
  border-radius: 100px 100px 0 0;}
#footer .wrap_flex {
  padding: 120px 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;}
#footer .wrap_flex a { color: #fff;}
#footer h1 span { display: block;}
#footer .ftnav .list {
  display: flex;
  gap:15px;}
#footer .ftnav .item { width: 100%;}
#footer .ftnav .item a {
  display: block;
  line-height: 100px;
  background: #FFFFFF;}
#footer .ftnav .item:nth-child(2) a { background: #DCE2EB;}
#footer .ftnav .item:nth-child(3) a {
  color: #fff;
  background: #1B2431;}
#footer .ftnav img {
  position: relative;
  top: -3px;
  margin-right: 10px;
  vertical-align: middle;
  display: inline;}
#footer .copy {
  border-top: 1px solid #fff;
  margin-top: 60px;
  padding-top: 50px;
  letter-spacing: 0.2em;}
#toplink {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 120px;
  height: 120px;
  z-index: 2;}
#toplink a {
  padding-top: 45px;
  display: block;
  text-align: center;
  height: 120px;
  background: #fff;
  letter-spacing: 0.2em;}

@media screen and (max-width: 1080px){
  #footer .wrap_flex {
    text-align: center;
    display: block;
    padding: 10vw 0;}
  #footer .ftnav .list { flex-wrap: wrap;}}
@media screen and (max-width: 768px){
  #footer {
    border-radius: 10vw 10vw 0 0;
    padding: 20vw 0 170px;}
  #footer .copy p { font-size: 11px; letter-spacing: 0.1em;}}

.grecaptcha-badge { visibility: hidden;}

/* --------------------
   hover
-------------------- */
@media screen and (min-width: 768px){
  #header a:hover { color:#48ACCE;}
  #hdnav .sns a:hover { opacity: 0.6;}}