@charset "UTF-8";
/* Property */
:root {
  --key-color: #0f3154; 
  --accent-color: #89b4b0; 
  --sub-color: #6787a7; 
  --text-color-main: #faf8e1;
  --side-padding: 5%;
  --block-margin-vertical: 18px;
  --sol-icon-size: 42px;
  --logo-width: 75vw;
  --logo-height: calc(var(--logo-width) * 0.2);
}
/* base */
html, body, div, ul { margin: 0; padding: 0; }
ul { list-style: none; }
svg { vertical-align: bottom; }
*, *::before, *::after { box-sizing: border-box; }
html { font: 62.5%/1.6 "Rajdhani", sans-serif; color: var(--text-color-main); background: var(--key-color); }
body { font-size: 1.8rem; font-weight: 600; }
a:link, a:hover, a:visited, a:focus, a:active { color: inherit; text-decoration: none; }
h1, p, ul { margin: var(--block-margin-vertical) 0; text-transform: uppercase; }
/*.space-transform { display: none; }
.br-transform { display: inline; }*/
small { font-size: inherit; }
i { font-style: normal; text-transform: lowercase; }
del { text-decoration: none; }
/* cont */
#wrapper { display: flex; flex-direction: column-reverse; height: 100vh; height: 100svh; }
article {
  flex: 1 0 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  background: #0f3154;
  padding: 18px var(--side-padding);
}
h1 { text-indent: -100vw; height: var(--logo-height); margin-bottom: min(1vw, 60px); position: relative; }
.svg-logo {
  width: var(--logo-width);
  height: var(--logo-height);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.ready .svg-logo { opacity: 1; transition: .2s; }
.svg-logo > * { fill: var(--text-color-main); stroke: var(--text-color-main); stroke-width: 0.85px; }
header p { font-size: max(1vw, 1.3rem); color: var(--sub-color); margin-top: 0; }
main { overflow-wrap: anywhere; }
main p { color: var(--accent-color); height: 3.2em; max-width: 28em; overflow: hidden; }
.sol { display: flex; }
.sol li {
  flex: 0 0 var(--sol-icon-size);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 6px;
  height: var(--sol-icon-size);
}
.sol object, .sol img { width: 100%; height: 100%; }
footer .copyright {
  color: rgba(103,135,167,.4);
  font-size: 1.4rem;
  line-height: 1;
  margin: 0;
  position: absolute;
  bottom: 18px;
  right: 12px;
}
.t-caret { opacity: 0; }
.t-caret.disp { opacity: 1; }
/* anim */
header p, main, footer { max-height: 0; overflow: hidden; }
header p, main p, .sol li, footer p { visibility: hidden; opacity: 0; }
.sol li { transform: scale(0.5) translateY(150%);  }
/* --- */
aside {
  flex: 0 1 0%;
  background: url(/assets/img/pattern_img.png) center center / 320px auto;
  padding: 18px var(--side-padding);
  text-align: right;
  position: relative;
  overflow: hidden;
}
aside p { display: inline-block; margin: 0; }
.svg-logo-mark {
  width: 48px;
  height: 36px;
  filter: drop-shadow(0px 0px 16px rgba(0,0,0,.3));
  visibility: hidden;
  opacity: 0;
  cursor: pointer;
}
#logo-mark .top { fill: var(--text-color-main); }
#logo-mark .btm { fill: #b7d2cf; }
#sol-label { display: none; }

/* trans-1 */
.trans-1 article { flex-basis: 60%; transition: all 1s ease-in-out; }
.trans-1 aside { flex-basis: 40%; transition: all 1s ease-in-out; }
.trans-1 header p, .trans-1 main, .trans-1 footer { max-height: 240px; overflow: visible; transition: all .5s ease-in .5s; }
.trans-1 .svg-logo { --logo-width: 180px; top: 0; left: 0; transform: translate(0, 0); transition: all 1s ease-in-out; }
.trans-1 h1 { --logo-height: calc(var(--logo-width) * .2); --logo-width: 180px; transition: all 1s ease-in-out; }
.trans-1 header p { height: 1.2em; }
/* trans-2 */
.trans-2 header p, .trans-2 main p, .trans-2 footer p { visibility: visible; opacity: 1; transition: all 1s ease; }
.trans-2 .svg-logo-mark { visibility: visible; opacity: 1; transition: all 1s ease .8s; }
/* trans-3 */
.trans-3 .sol li {
  visibility: visible; opacity: 1; transform: translateY(0);
  transition: visibility .2s ease-out .1s, opacity .2s ease-out .1s, transform .3s ease-out; }
.trans-3 .sol li:nth-child(2) { transition-delay: .1s; }
.trans-3 .sol li:nth-child(3) { transition-delay: .2s; }
.trans-3 .sol li:nth-child(4) { transition-delay: .3s; }
.waiting { pointer-events: none; }
.svg-logo-mark.anim { animation: shake 1s linear; pointer-events: none; }
@keyframes shake {
  0% { transform: translate(2px,3px); }
  5% { transform: translate(6px,-3px); }
  10% { transform: translate(-2px,1px); }
  20% { transform: translate(0px,-4px); }
  25% { transform: translate(1px,-4px); }
  30% { transform: translate(-2px,-2px); }
  30% { transform: translate(0px,0px); }
  40% { transform: translate(2px,2px); }
  55% { transform: translate(5px,-4px); }
  68% { transform: translate(3px,-2px); }
  80% { transform: translate(-3px,1px); }
  85% { transform: translate(1px,-4px); }
  90% { transform: translate(-5px,2px); }
  100% { transform: translate(0px,0px); }
}
/* Modal */
#modal {
  display: none;
  background: rgba(15,49,84,.96);
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 10;
}
#mail_form {
  background-color: var(--accent-color);
  width: min(90vw,600px);
  padding: min(5vw,36px);
  border-radius: 12px;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
}
#mail_form dl { margin: .4em 0; }
#mail_form dl dt { visibility: hidden; height: 0; }
#mail_form dl dd { margin: 0; padding: 0; }
#mail_form input,
#mail_form textarea {
	-webkit-appearance: none;
	font-size: 16px;
  font-family: Verdana, Geneva, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", meiryo, sans-serif;
	background: var(--text-color-main);
  width: 100%;
	padding: 10px;
	border-radius: 4px;
	border: 1px solid #7faca8;
}
#mail_form input::placeholder,
#mail_form textarea::placeholder { color: var(--key-color); opacity: .3; }
#mail_form textarea { display: block; height: 180px; resize: none; }
#mail_form input[type="text"]:focus,
#mail_form input[type="email"]:focus,
#mail_form textarea:focus { outline: none; box-shadow: 0px 0px 1px 2px rgba(15,49,84,.3); background: #fffef5; }
#form_submit { margin: .4em 0; }
#mail_form input[type="button"] {
  font-size: inherit;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
	color: var(--text-color-main);
	background: var(--key-color);
	padding: .5em 0;
  transition: .3s;
}
#mail_form input[type="button"]:hover { cursor: pointer; background: #061e36; transition: .3s; }
/* req ------- */
#mail_form dl dd span.error_blank,
#mail_form dl dd span.error_format,
#mail_form dl dd span.error_match { display: block; font-size: 14px; font-weight: 600; color: #c74040; margin-top: 3px; }
/* animation while sending ------- */
span.loading {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-top: 5px solid rgba(255,255,255,.2);
	border-right: 5px solid rgba(255,255,255,.2);
	border-bottom: 5px solid rgba(255,255,255,.2);
	border-left: 5px solid #ffffff;
	margin-top: -30px;
	margin-left: -30px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateZ(0);
	animation: load-circle 1.0s linear infinite;
}
@keyframes load-circle {
	0% { transform: rotate( 0deg ); }
	100% { transform: rotate( 360deg ); }
}
.grecaptcha-badge { visibility: hidden; }
.recaptcha_policy {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--sub-color);
  font-weight: 400;
  width: 100%;
  padding: 0 calc(var(--side-padding) + 2%);
  position: absolute;
  bottom: 72px;
  z-index: 1;
}
.recaptcha_policy span:first-child { flex: 0 0 auto; width: 36px; margin-right: 1em; }
.recaptcha_policy span:first-child img { width: 100%; vertical-align: bottom; }
.recaptcha_policy span:last-child { flex: 1 1 100%; max-width: 510px; }
.recaptcha_policy a { text-decoration: underline; }
/* Send Comp Message ------- */
#modal .comp-msg {
  display: none;
  visibility: hidden;
  width: 100%;
  height: 100%;
  transition: .3s;
}
#modal .comp-msg.disp { display: block; visibility: visible; transition: .3s; }
#modal .comp-msg #type {
  font-size: 13vw;
  padding-bottom: 96px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
#modal .comp-msg .desc {
  color: var(--accent-color);
  text-align: center;
  width: 100%;
  padding: 0 var(side-padding);
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
}
#ie-alert-block, #no-script { display: none; }

/* iPhone、iPad Only*/
@supports (-webkit-touch-callout: none) {
/*  #wrapper { height: calc(100vh - 69px); min-height: -webkit-fill-available; }*/
  #mail_form, #modal .comp-msg #type { top: 40%; }
  .recaptcha_policy, #modal .comp-msg .desc { bottom: 96px; }
}
/* 640 & Up (Include Landscape) */
@media screen and (min-width: 40em) {/* 640 */
  :root {
    --block-margin-vertical: 3vh;
    --side-padding: 8%;
    --sol-icon-size: min(max(4vw, 42px), 60px);
  }
  #wrapper { flex-direction: row-reverse; align-items: center; height: 100vh; height: 100svh; }
  article { height: 100%; }
  main { position: relative; z-index: 1; overflow: visible; }
  main p { height: 4.8em; max-width: 100%; }
  .sol { margin-top: 0; }
  .sol li { margin-right: 12px; }
  footer .mail-link { margin-top: calc(var(--block-margin-vertical)*2); }
  aside { align-self: stretch; text-align: left; padding: min(var(--side-padding), 48px); }
  aside p { cursor: pointer; text-align: left; }
  .trans-1 article { flex: 0 0 63%; height: min(max(80vh, 360px), 600px); }
  .trans-1 aside { flex: 0 0 37%; }
  .trans-3 .svg-logo { cursor: pointer; }
  #mail_form { display: flex; justify-content: space-between; flex-wrap: wrap; }
  #mail_form dl, #form_submit { width: 100%; margin-bottom: 0; }
  #mail_form dl:not(:last-of-type) { width: 49%; margin-top: 0; }
  #mail_form textarea { height: 200px; resize: both; }
  #form_submit_button { max-width: 120px; }
  #modal .comp-msg #type { font-size: 10vw; }
  .recaptcha_policy { padding: 0; }
}
/* iPhone Landscape Only*/
@media screen and (max-device-width: 480px) and (orientation:landscape) {
  /*#wrapper { height: calc(100vh - 50px); overflow: hidden; min-height: -webkit-fill-available; }*/
  main p { height: 3.2em; }
  footer .mail-link { margin-top: calc(var(--block-margin-vertical)*2); }
  #mail_form textarea { height: 160px; resize: none; }
}
/* 655 & Up */
@media screen and (min-width: 40.9375em) { main p { height: 3.2em; } }
@media screen and (min-width: 49.3125em) {/* 789 */
  .trans-1 article { flex: 1 0 55%; }
  .trans-1 aside { flex: 0 1 45%; }
}
/* 1025 & Up */
@media only screen and (min-width: 64.063em) {
  body { font-size: 2rem; }
  .trans-1 footer .mail-link { padding-bottom: .2em; }
  footer .t-container { position: relative; }
  footer a::after {
    content:  "";
    width: 0%;
    height: 1px;
    background: var(--text-color-main);
    position: absolute;
    right: 0;
    bottom: -.2em;
    left: inherit;
    transition: width .4s ease;
  }
  footer a:hover::after { width: 100%; left: 0; }
  .trans-1 h1, .trans-1 .svg-logo { --logo-height: calc(var(--logo-width) * 0.2); --logo-width: min(18vw, 240px); }
  .trans-1 article, .trans-1 aside { flex: 0 0 50%; }
}
/* 1280 & Up */
@media only screen and (min-width: 80em) {
  /*.space-transform { display: inline; }
  .br-transform { display: none; }*/
}
/* 1732 & Up */
@media only screen and (min-width: 108.25em) { main p { height: 3.2em; } }