/**
* YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
* http://cssreset.com
* Copyright 2012 Yahoo! Inc. All rights reserved.
* http://yuilibrary.com/license/
*/
/*
TODO will need to remove settings on HTML since we can't namespace it.
TODO with the prefix, should I group by selector or property for weight savings?
*/
html {
  color: #070707;
  background: #FFF;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 400;
  font-style: normal;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  font-size: 100%;
}

html {
  visibility: hidden;
}

html.wf-active {
  visibility: visible;
}

/*
TODO remove settings on BODY since we can't namespace it.
*/
/*
TODO test putting a class on HEAD.
- Fails on FF.
*/
main,
article,
section {
  display: block;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.cf:after {
  clear: both;
  content: "";
  display: block;
}

/*
TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

caption,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before,
q:after {
  content: '';
}

abbr,
acronym {
  border: 0;
  font-variant: normal;
}

/* to preserve line-height and selector appearance */
sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/*to enable resizing for IE*/
input,
textarea,
select {
  *font-size: 100%;
}

/*because legend doesn't inherit in IE */
legend {
  color: #000;
}

/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset {
  display: none;
}

/* ------------------------------
 common - width: all
------------------------------ */
html,
body {
  /*min-width: 1400px;*/
}

a:hover {
  opacity: 0.6;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
}

.op {
  display: block !important;
}

.os {
  display: none !important;
}

header {
  min-width: 1400px;
  height: 70px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: 0px 7px 3px -3px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 7px 3px -3px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

header .wrapper {
  width: 1140px;
  margin: 0 auto;
}

header .wrapper h1 {
  width: 192px;
  padding-top: 11px;
  float: left;
}

header .wrapper h1 a {
  display: block;
}

header .wrapper h1 a img {
  width: 100%;
  display: block;
}

header .wrapper .gnav {
  width: 948px;
  height: 42px;
  margin-top: 14px;
  float: right;
  text-align: right;
}

header .wrapper .gnav .menu {
  height: 30px;
  line-height: 30px;
  margin: 6px 11px 0 11px;
  text-decoration: none;
  display: inline-block;
  vertical-align: top;
  font-size: 18px;
  color: #070707;
}

header .wrapper .gnav .request {
  width: 170px;
  height: 42px;
  margin-left: 12px;
  display: inline-block;
  background-color: #f90;
  vertical-align: top;
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  text-align: center;
  line-height: 42px;
  border-radius: 5px;
}

header .ham {
  display: none;
}

header .spmenu {
  display: none;
}

main .mainimgbox .mainimg {
   width: 100%;
   display:  block;

}

footer {
  padding: 60px 0;
  background-color: #111;
}

footer .wrapper {
  width: 700px;
  margin: 0 auto;
}

footer .wrapper .left {
  width: 350px;
  text-align: center;
  float: left;
}

footer .wrapper .left a {
  display: inline-block;
  text-align: center;
}

footer .wrapper .left a img {
  margin-bottom: 5px;
}

footer .wrapper .left p {
  text-align: center;
  font-size: 11px;
  color: #fff;
}

footer .wrapper .right {
  width: 350px;
  float: right;
}

footer .wrapper .right li {
  margin-bottom: 10px;
}

footer .wrapper .right li a {
  text-decoration: none;
  color: #fff;
  font-size: 14px;
}

footer .wrapper .right li a img {
  vertical-align: middle;
  margin-right: 5px;
}

/* ------------------------------
 common - width: < $width-1
------------------------------ */
@media screen and (max-width: 700px) {
  html,
  body {
    min-width: 375px;
  }
  .op {
    display: none !important;
  }
  .os {
    display: block !important;
  }
  header {
    min-width: 0;
    height: 40px;
    -webkit-box-shadow: 0px 5px 3px -3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 3px -3px rgba(0, 0, 0, 0.2);
  }
  header .wrapper {
    width: 100%;
    padding: 0 15px;
  }
  header .wrapper h1 {
    width: 100px;
    padding-top: 7px;
  }
  header .wrapper .gnav {
    width: calc(100% - 100px);
    height: 30px;
    margin-top: 7px;
  }
  header .wrapper .gnav .menu {
    display: none;
  }
  header .wrapper .gnav .request {
    width: 80px;
    height: 26px;
    margin-right: 40px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 26px;
    border-radius: 3px;
  }
  header .ham {
    width: 26px;
    height: 26px;
    display: block;
    position: absolute;
    top: 7px;
    right: 15px;
  }
  header .spmenu {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 20px 20px;
    top: 40px;
    right: 0;
    left: 0;
    z-index: 10000;
    -webkit-box-shadow: 0px 8px 8px -8px #000;
    box-shadow: 0px 8px 8px -8px #000;
  }
  header .spmenu .wrapper a {
    display: block;
    padding: 8px 5px;
    color: #003279;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid #003279;
  }
  header .spmenu .close {
    width: 120px;
    height: 30px;
    margin: 20px auto 0;
    color: #fff;
    background-color: #003279;
    border-radius: 3px;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
  }
  main {
    padding-top: 20px;
  }
  footer {
    padding: 40px 20px;
  }
  footer .wrapper {
    width: 100%;
    margin: 0 auto;
  }
  footer .wrapper .left {
    width: 100%;
    float: none;
    margin-bottom: 30px;
  }
  footer .wrapper .left a {
    width: 100px;
  }
  footer .wrapper .left a img {
    width: 100%;
  }
  footer .wrapper .left p {
    text-align: center;
    font-size: 10px;
    color: #fff;
  }
  footer .wrapper .right {
    width: 230px;
    margin: 0 auto;
    float: none;
  }
  footer .wrapper .right li {
    margin-bottom: 3px;
  }
  footer .wrapper .right li a {
    font-size: 12px;
  }
  footer .wrapper .right li a img {
    margin-right: 3px;
  }
}
/* ------------------------------
 width: all
------------------------------ */
main .s01 {
  padding: 50px 0 60px;
}

main .s01 .wrapper {
  width: 845px;
  margin: 0 auto;
}

main .s01 .wrapper h2 {
  text-align: center;
  font-size: 36px;
  font-weight: 900;
  color: #003279;
  margin-bottom: 40px;
}

main .s01 .wrapper .t01 {
  width: 700px;
  margin: 0 auto 45px;
  line-height: 180%;
  font-size: 18px;
}

main .s01 .wrapper .mailform {
  margin: 0 auto;
  display: block;
}

main .s01 .wrapper .mailform table {
  width: 100%;
  margin-bottom: 50px;
}

main .s01 .wrapper .mailform table tr {
  border-bottom: 1px dashed #aaa;
}

main .s01 .wrapper .mailform table tr:first-child {
  border-top: 1px dashed #aaa;
}

main .s01 .wrapper .mailform table tr th {
  width: 180px;
  padding: 25px 0;
  vertical-align: top;
  font-size: 18px;
  font-weight: 900;
  color: #003279;
}

main .s01 .wrapper .mailform table tr th .hissu {
  font-size: 14px;
  color: #c00;
  padding-left: 10px;
}

main .s01 .wrapper .mailform table tr th .ninni {
  padding-top: 5px;
  font-size: 14px;
  color: #888;
  display: block;
}

main .s01 .wrapper .mailform table tr td {
  padding: 25px 0 25px 20px;
  vertical-align: top;
  font-size: 18px;
}

main .s01 .wrapper .mailform table tr td input[type="text"] {
  width: 100% !important;
  height: 40px !important;
  padding: 5px 10px !important;
  line-height: 30px;
  font-size: 16px;
  display: block !important;
}

main .s01 .wrapper .mailform table tr td label {
  padding-right: 10px;
}

main .s01 .wrapper .mailform table tr td label input {
  margin-right: 5px;
}

main .s01 .wrapper .mailform table tr td textarea {
  width: 100% !important;
  display: block !important;
  padding: 10px !important;
  font-size: 16px;
}

main .s01 .wrapper .mailform table tr td textarea.ta01 {
  height: 100px !important;
}

main .s01 .wrapper .mailform table tr td textarea.ta02 {
  height: 200px !important;
}

main .s01 .wrapper .mailform table tr td .caution01,
main .s01 .wrapper .mailform table tr td .caution02,
main .s01 .wrapper .mailform table tr td .caution03,
main .s01 .wrapper .mailform table tr td .caution04 {
  padding: 10px 0 5px;
  font-size: 14px;
  color: #c00;
}

main .s01 .wrapper .mailform .t02 {
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
}

main .s01 .wrapper .mailform .t03 {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  font-size: 14px;
}

main .s01 .wrapper .mailform #submitbtn {
  width: 170px;
  height: 42px;
  margin: 0 auto;
  border: none !important;
  display: block;
  background-color: #f90;
  text-decoration: none;
  color: #fff;
  letter-spacing: 2px;
  font-size: 18px;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}

main .s01 .wrapper .mailform #submitbtn:hover {
  opacity: .6;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
}

/* ------------------------------
 width < $width-1
------------------------------ */
@media screen and (max-width: 700px) {
  main .s01 {
    padding: 25px 15px 30px;
  }
  main .s01 .wrapper {
    width: 100%;
  }
  main .s01 .wrapper h2 {
    font-size: 20px;
    margin-bottom: 25px;
  }
  main .s01 .wrapper .t01 {
    width: 100%;
    margin: 0 auto 25px;
    font-size: 13px;
  }
  main .s01 .wrapper .mailform table {
    width: 100%;
    margin-bottom: 30px;
  }
  main .s01 .wrapper .mailform table tr th {
    width: 100% !important;
    display: block;
    padding: 15px 0 10px;
    font-size: 14px;
  }
  main .s01 .wrapper .mailform table tr th .hissu {
    font-size: 12px;
    padding-left: 7px;
  }
  main .s01 .wrapper .mailform table tr th .ninni {
    padding-top: 3px;
    font-size: 12px;
  }
  main .s01 .wrapper .mailform table tr td {
    width: 100%;
    display: block;
    padding: 0 0 15px 0;
    vertical-align: top;
    font-size: 18px;
  }
  main .s01 .wrapper .mailform table tr td input[type="text"] {
    height: 30px !important;
    padding: 5px 10px !important;
    line-height: 20px;
    font-size: 14px;
  }
  main .s01 .wrapper .mailform table tr td label {
    padding-right: 10px;
    font-size: 13px;
  }
  main .s01 .wrapper .mailform table tr td label input {
    margin-right: 5px;
  }
  main .s01 .wrapper .mailform table tr td textarea {
    width: 100% !important;
    display: block !important;
    padding: 10px !important;
    font-size: 14px;
  }
  main .s01 .wrapper .mailform table tr td textarea.ta01 {
    height: 60px !important;
  }
  main .s01 .wrapper .mailform table tr td textarea.ta02 {
    height: 100px !important;
  }
  main .s01 .wrapper .mailform table tr td .caution01,
  main .s01 .wrapper .mailform table tr td .caution02,
  main .s01 .wrapper .mailform table tr td .caution03,
  main .s01 .wrapper .mailform table tr td .caution04 {
    padding: 5px 0 5px;
    font-size: 12px;
    color: #c00;
  }
  main .s01 .wrapper .mailform .t02 {
    margin-bottom: 20px;
    font-size: 14px;
  }
  main .s01 .wrapper .mailform .t03 {
    padding: 15px;
    font-size: 12px;
  }
  main .s01 .wrapper .mailform #submitbtn {
    width: 140px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    border-radius: 3px;
  }
}
@charset "UTF-8";

/*---------------------------------------------------------
reset
---------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: 'Noto Sans JP', sans-serif;
	box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	background-color: #fff;
	-webkit-text-size-adjust: none;
	font-size: 16px;
	color: #272727;
	line-height: 1.5;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
img{
	max-width:100%;
	vertical-align:bottom;
}
a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
}

a.anchor {
	position: relative;
	top: -80px;
	display: block;
}

a {
	color: #107bbf;
	outline: none;
}
.sp {
	display: none;
}

.container{
	max-width:1060px;
	width:92%;
	margin:auto;
}
h2{
	font-size:60px;
	font-weight:900;
	text-align:center;
	margin-bottom:1em;
}
h3{
	font-size:60px;
	font-weight:900;
	text-align:center;
}
h3.grad{
	background: linear-gradient(90deg,#2b1fb9 0%, #278cc2 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
@media screen and (max-width:1200px) and (min-width:768px){
	h2,h3{
		font-size: calc(3.75rem + ((1vw - 12px) * 2.7778));
	}
}
/*---------------------------------------------------------
header
---------------------------------------------------------*/
header#top {
	width:142px;
	position:absolute;
	top:0;
	left:30px;
	z-index:999;
	margin-top:70px;
}
header#top .logo{
	margin-top:15px;
}
#header{
	width:100%;
	min-height: 70px;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.9);
	-webkit-box-shadow: 0px 7px 3px -3px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 7px 3px -3px rgba(0, 0, 0, 0.2);
	z-index: 1000;
}
#header .wrapper{
	display:flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1140px;
	margin:auto;
}
#header .wrapper h1 {
	max-width: 192px;
	width:15%;
	padding-top: 11px;
}
#header .wrapper .gnav {
	max-width: 948px;
	height: 42px;
	margin-top: 14px;
	text-align: right;
	white-space: nowrap;
}
#header .wrapper .gnav .menu {
	height: 30px;
	line-height: 30px;
	margin: 6px 11px 0 11px;
	text-decoration: none;
	display: inline-block;
	vertical-align: top;
	font-size: 18px;
	font-size: calc(0.75rem + ((1vw - 7.68px) * 1.6129));
	color: #070707;
}
#header .wrapper .gnav .request {
	width: 170px;
	height: 42px;
	margin-left: 12px;
	display: inline-block;
	background-color: #f90;
	vertical-align: top;
	text-decoration: none;
	color: #fff;
	font-size: 18px;
	font-size: calc(0.75rem + ((1vw - 7.68px) * 1.6129));
	text-align: center;
	line-height: 42px;
	border-radius: 5px;
}
@media (min-width: 1140px) {
	#header .wrapper .gnav .menu,#header .wrapper .gnav .request {
		font-size: 18px;
	}
}
#header .wrapper .gnav .request:hover {
	opacity: 0.6;
	-webkit-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
#header .ham{
	display:none;
}
/*---------------------------------------------------------
main
---------------------------------------------------------*/
#main{
	background:url("../img/mainbg.jpg") no-repeat center top / cover;
	position:relative;
	width:100%;
	max-height:650px;
	padding-top:47.5%;
	margin-top:70px;
}
#main h1 {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-size:30px;
	font-weight:900;
	text-align:center;
	position: absolute;
	top: 0;
	right: 0;
	max-width: 665px;
	width: 100%;
	height: 100%;
	transition:0.3s;
}
#main h1 span{
	display:block;
	font-size:20px;
	font-weight:normal;
	margin-top:1em;
}
@media screen and (max-width:1300px){
	#main h1 {
		width:46%;
		right:10px;
		font-size: calc(1.5rem + ((1vw - 7.68px) * 1.1278));
	}
	#main h1 span{
		font-size: calc(0.6875rem + ((1vw - 7.68px) * 1.6917));
	}
}
#main_btm{
	display: flex;
	background: linear-gradient(-45deg,#2b1fb9 -90%, #278cc2 100%);
	width: 100%;
	padding: 30px 0;
}
#main_btm ul{
	display:flex;
	justify-content:center;
}
#main_btm ul li{
	border: solid 1px #fff;
	outline: solid 1px #fff;
	outline-offset: 4px;
	font-size:20px;
	width:30%;
	text-align:center;
	margin:0 20px;
	transition:0.3s;
}
#main_btm ul li a{
	display:block;
	color:#fff;
	text-decoration:none;
	padding:15px;
}
#main_btm ul li:hover{
	background:rgba(255,255,255,0.3);
}
@media screen and (max-width:1070px){
	#main_btm ul li{
		font-size: calc(1.25rem + ((1vw - 10.7px) * 2.649));
	}
}

/*---------------------------------------------------------
features
---------------------------------------------------------*/
#features{
	background:url("../img/features_bg.jpg") no-repeat top center / cover;
	padding:80px 0 0;
}
#features h2{
	color:#fff;
}
#features ul{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	width:100%;
}
#features ul li{
	background:rgba(0,0,0,0.6);
	border-radius:8px;
	color:#fff;
	width:30%;
	text-align:center;
	padding:20px;
	margin-bottom:70px;
	transition:0.3s;
}
#features ul li h3{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content: center;
	border-radius:4px;
	color:#fff;
	font-size:20px;
	font-weight:900;
	height:60px;
	margin-bottom:20px;
}
#features ul li:nth-child(1){
	box-shadow: 0px 0px 12px rgba(238,58,104,0.6);
	margin-right:5%;
}
#features ul li:nth-child(1) h3{
	background:#ee3a68;
}
#features ul li:nth-child(2){
	box-shadow: 0px 0px 12px rgba(238,142,62,0.6);
	margin-right:5%;
}
#features ul li:nth-child(2) h3{
	background:#EE8E3E;
}
#features ul li:nth-child(3){
	box-shadow: 0px 0px 12px rgba(237,232,59,0.6);
}
#features ul li:nth-child(3) h3{
		background:#EDE83B;
}
#features ul li:nth-child(4){
	box-shadow: 0px 0px 12px rgba(12,139,98,0.6);
	margin-right:5%;
}
#features ul li:nth-child(4) h3{
	background:#0C8B62;
}
#features ul li:nth-child(5){
	box-shadow: 0px 0px 12px rgba(2,162,241,0.6);
}
#features ul li:nth-child(5) h3{
	background:#02A2F1;
}
@media screen and (max-width:1160px){
	#features ul li{
		width:32%;
		padding: 2% 1% 4%;
		margin-bottom: 30px;
	}
	#features ul li:nth-child(1),
	#features ul li:nth-child(2),
	#features ul li:nth-child(4){
		margin-right:2%;
	}
	#features ul li h3{
		font-size: calc(1.25rem + ((1vw - 11.6px) * 1.5306));
		height:40%;
	}
	#features p{
		font-size: calc(1rem + ((1vw - 11.6px) * 1.5306));
	}
}
/*---------------------------------------------------------
functions
---------------------------------------------------------*/
#functions{
	padding:60px 0 0;
}
#functions section{
	font-size:20px;
	text-align:center;
	padding-bottom:100px;
	margin-bottom:100px;
	position:relative;
}
#functions section::after{
	content:"";
	background: linear-gradient(90deg,#fff 0%, #154698 50.05%, #fff 100%);
	width:100%;
	height:2px;
	position:absolute;
	bottom:0;
	left:0;
}
#functions section:last-child::after{
	display:none;
}
@media screen and (max-width:1160px){
	#functions section{
		font-size: calc(1.25rem + ((1vw - 10px) * 1.7241));
	}
}
/*---------------------------------------------------------
lineup
---------------------------------------------------------*/
#lineup{
	background:#f2f2f2;
	text-align:center;
	padding:60px 0;
}
#lineup ul{
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom:60px;
}
#lineup ul li{
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 8px;
	color: #fff;
	width: 30%;
	max-width:300px;
	margin: 0 2% 30px;
	text-align: center;
	overflow: hidden;
	box-shadow: 0px 0px 8px rgba(150, 150, 150, 0.6);
	transition: 0.3s;
}
#lineup ul li ul{
	display:block;
	margin-bottom:0;
}
#lineup ul li ul li{
	display:block;
	background:none;
	font-size: 12px;
	font-weight: 500;
	width:100%;
	margin-bottom:1em;
	box-shadow:none;
}
#lineup .ttl{
	padding:20px 20px 30px;
}
#lineup h4{
	color:#272727;
	font-size:40px;
	font-weight:900;
}
#lineup span{
	display:block;
	border-radius: 16px;
	background: linear-gradient(-90deg,#2463bf 0%, #123260 100%);
	font-size:16px;
	font-weight:500;
	line-height: 2;
	margin-bottom:1em;
}
#lineup .detail{
	display: flex;
	flex-direction: column;
	background: linear-gradient(-45deg,#2b1fb9 0%, #278cc2 80%);
	font-size:15px;
	font-weight:200;
	height: 100%;
	padding:25px 18px ;
	transition:0.3s;
}
#lineup .detail p{
	margin-bottom:2em;
}
#lineup .detail a{
	display: block;
	background: #fff;
	border-radius: 2em;
	color: #272727;
	font-size: 16px;
	font-weight: 700;
	line-height: 2.5;
	text-decoration: none;
	margin-top: auto;
	transition:0.3s;
}
#lineup .detail a:hover{
	background:rgba(255,255,255,0.6);
}
#lineup .note{
	font-size:0.875em;
	font-weight:200;
	margin-top:1.5em;
}
#lineup h3.grad{
	display:none;
}
@media screen and (max-width:1140px) {
	#lineup .ttl {
		padding: 8% 6% 10%;
	}
	#lineup h4{
		font-size: calc(2.5rem + ((1vw - 11.4px) * 4.3011));
	}
	#lineup .detail{
		padding: 8% 6%;
	}
	#lineup ul li ul li{
		font-size: calc(0.75rem + ((1vw - 11.4px) * 0.5376));
		font-weight: 400;
	}
	#lineup span{
		font-size: calc(1rem + ((1vw - 11.4px) * 1.0753));
	}
	#lineup .detail a{
		font-size: calc(1rem + ((1vw - 11.4px) * 1.0753));
	}
}
/*---------------------------------------------------------
Merit
---------------------------------------------------------*/
#merit{
	padding:100px 0;
}
#merit section div{
	display:flex;
}
#merit section{
	border:1px solid #f2f2f2;
	margin-bottom:20px;
}

#merit figure{
	width:300px;
	border-right:1px solid #f2f2f2;
}
#merit section .txt{
	display:flex;
	flex-direction:column;
	font-size:20px;
	width:calc( 100% - 300px );
	padding:1em 2em;
}
#merit h3{
	font-size:36px;
	text-align:left;
	margin-bottom:.5em;
}
@media screen and (max-width:1040px) {
	#merit figure {
		width: 35%;
	}
	#merit section .txt{
		width: 65%;
		font-size: calc(1.25rem + ((1vw - 10.4px) * 1.4706));
	}
	#merit h3{
		font-size: calc(2.25rem + ((1vw - 10.4px) * 5.1471));
	}
}
/*---------------------------------------------------------
Insurance
---------------------------------------------------------*/
#insurance{
	background: linear-gradient(-45deg,#2b1fb9 0%, #278cc2 80%);
	color:#fff;
	text-align:center;
	padding:40px;
}
#insurance h2{
	background:#fff;
	border-radius:1em;
	display:table;
	font-size:32px;
	font-weight:900;
	padding:0 1em;
	margin:0 auto 1em;
}
#insurance h2 .grad{
	background: linear-gradient(90deg,#2b1fb9 0%, #278cc2 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#insurance strong{
	display:block;
	font-size:24px;
	font-weight:700;
	margin-bottom:1em;
}
#insurance p{
	font-size:14px;
	font-weight:300;
}
@media screen and (max-width:1040px) {
	#insurance h2{
		font-size:30px;
	}
}
/*---------------------------------------------------------
Customers
---------------------------------------------------------*/
#customers{
	padding:100px 0;
}
#customers .container{
	max-width:1200px;
}
#customers h2{
	background: linear-gradient(-45deg,#2b1fb9 0%,#278cc2 80%);
	color:#fff;
	padding:30px 0;
}
#customers ul{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	max-width:1060px;
	margin:auto;
}
#customers ul li{
	width:17%;
	margin-right:20px;
}
.intro_case{
	background: #f4f4f4;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 2rem 3.5rem;
}
.intro_case .photo {
	width: 44%;
	margin-bottom: 1rem;
}
.intro_case .explain {
	display:flex;
	flex-direction:column;
	width: 54%;
	padding-bottom: 15px;
}
#customers h4{
	font-size:24px;
	font-weight: bold;
	margin-bottom: 1rem;
}
.intro_case .explain p{
	line-height:1.8;
}
#customers .btn{
	margin-top:auto;
}
#customers .btn a {
	display: block;
	text-align: center;
	background: linear-gradient(90deg, #2b1fb9, #278cc2);
	border-radius: 100px;
	padding: .5em;
	color: #fff;
	font-weight: 600;
	text-decoration:none;
	transition: 0.3s;
}
#customers .btn a:hover {
	opacity: 0.7;
}
#customers p.list a {
	border-radius: 6px;
	font-size: 20px;
	font-weight: 700;
	display: table;
	padding: 0.5em 1.5em;
	margin: 2em auto 0;
}
@media screen and (max-width:900px) {
	#customers h4 {
		font-size: calc(1.5rem + ((1vw - 9px) * 1.5152));
		
	}
	.intro_case .explain p{
		font-size: calc(1rem + ((1vw - 9px) * 1.5152));
	}
}
/*---------------------------------------------------------
Flow
---------------------------------------------------------*/
#flow{
	background:linear-gradient(90deg, #2b1fb9, #278cc2);
	color:#fff;
	padding:100px 0;
	display:none;
}
#flow .container{
	position:relative;
	z-index:2;
}
#particles-js{
	position:relative;
}
#particles-js canvas{
	position:absolute;
	top:0;
	opacity: 0.6;
}
p.flow_note{
	font-size:0.85em;
	font-weight:300;
	text-align:center;
}
.flow {
	padding-left: 120px;
	margin-bottom: 60px;
	position: relative;
}
.flow::before {
	content: "";
	width: 15px;
	height: 100%;
	background: #eee;
	margin-left: -8px;
	display: block;
	position: absolute;
	top: 0;
	left: 120px;
}
.flow > li {
	position: relative;
}
.flow > li:not(:last-child) {
	margin-bottom: 8vh;
}
.flow > li .icon {
	font-size: 12px;
	color: #fff;
	background: rgb(107,144,219);
	background: -moz-linear-gradient(left, rgba(107,144,219,1) 0%, rgba(102,213,233,1) 100%);
	background: -webkit-linear-gradient(left, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
	background: linear-gradient(to right, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b90db', endColorstr='#66d5e9',GradientType=1 );
	padding: 8px 20px;
	display: block;
	position: absolute;
	top: 0;
	left: -120px;
	z-index: 100;
}
.flow > li .icon::after {
	content: "";
	border-style: solid;
	border-width: 5px 0 5px 10px;
	border-color: transparent transparent transparent #66d5e9;
	position: absolute;
	top: 50%;
	left: 100%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.flow > li dl {
	padding-left: 70px;
	position: relative;
}
.flow > li dl::before,
.flow > li dl::after {
	content: "";
	display: block;
	position: absolute;
	top: 15px;
}
.flow > li dl::before {
	width: 7px;
	height: 7px;
	margin-top: -3px;
	background: #0745ad;
	border-radius: 50%;
	left: -4px;
}
.flow > li dl::after {
	width: 50px;
	border-bottom: 1px dashed #fff;
	position: absolute;
	left: 5px;
}
.flow > li dl dt {
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 1vh;
}
/*---------------------------------------------------------
Require
---------------------------------------------------------*/
#require{
	background: #f8f8f8;
	padding:100px 0;
}
#require .container{
	max-width:1200px;
}
#require table {
	width:100%;
	table-layout: fixed;
}
#require table th{
	background: #444;
	border: 1px solid #ddd;
	color:#fff;
	font-size:0.9em;
	font-weight:500;
	padding: 0.5em 0.8em;
	text-align:left;
	word-break: break-all;
}
#require table td{
	background:#fff;
	border: 1px solid #444;
	font-size: 0.8em;
	padding:1em;
}
#require small{
	display:block;
	font-size:0.7em;
}
#require .mg{
	margin-top:100px;
}
#require .system{
	display:none;
}
/*---------------------------------------------------------
movie
---------------------------------------------------------*/
#movie{
	margin-top: 150px;
	height: calc(100vh - 375px);
}
#movie iframe{
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}
/*---------------------------------------------------------
notice
---------------------------------------------------------*/
#notice{
	background: linear-gradient(-45deg, #2b1fb9 -90%, #278cc2 100%);
	color:#fff;
	position:fixed;
	top:70px;
	width:100%;
	z-index:100;
}
#notice a{
	position:absolute;
	left:20px;
	top:20px;
}
#notice a img{
	width:20px;
	height:20px;
}
#notice p{
	text-align:center;
	padding: 10px 0;
}
@media screen and (max-width: 767px) {
	#notice{
		top:40px;
	}
	#notice a img {
		width: 15px;
		height: 15px;
	}
	#notice a {
		position: absolute;
		right: 10px;
		left:unset;
		top: 8px;
	}
	#notice p {
		font-size:12px;
		padding: 5px 20px;
	}
}
/*---------------------------------------------------------
footer
---------------------------------------------------------*/

footer {
	width: 100%;
	background: #444;
	color: #fff;
	margin: auto;
	font-size: 13px;
	font-weight: 300;
	text-align: center;
	padding:30px 0;
}
footer figure{
	margin-bottom:30px;
}
footer ul{
	display:flex;
	justify-content:center;
}
footer ul li{
	margin:0 2em;
}
footer a{
	color:#fff;
	text-decoration:none;
}
footer a:hover{
	text-decoration:underline;
}
footer .copy{
	font-size:10px;
	margin-top:40px;
}
#page-top {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 999;
}

#page-top img {
	vertical-align: bottom;
}

/*---------------------------------------------------------
Mobile
---------------------------------------------------------*/


/*Media Queries*/

@media screen and (max-width: 767px) {
	body, html {
		min-width: 100%;
	}
	body {
		font-size: 15px;
	}
	img {
		max-width: 100%;
	}
	img.sp {
		width: 100%;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	h2,h3{
		font-size:30px;
	}
	header {
		width: 100px;
		position: absolute;
		top: 0;
		left: 10px;
		margin-top: 40px;
	}
	#header {
		min-width: 0;
		min-height: 40px;
		margin-top:0;
	}
	#header .wrapper.cf {
		justify-content: space-between;
		align-items: unset;
		width: 100%;
		padding: 0 15px;
	}
	#header .spmenu .wrapper{
		display:block;
	}
	#header .wrapper h1 {
		width: 100px;
		padding-top: 5px;
	}
	#header .wrapper .gnav {
		width: calc(100% - 100px);
		height: 30px;
		margin-top: 7px;
	}
	#header .wrapper .gnav .menu {
		display: none;
	}
	#header .wrapper .gnav .request {
		width: 80px;
		height: 26px;
		margin-right: 40px;
		color: #fff;
		font-size: 12px;
		text-align: center;
		line-height: 26px;
		border-radius: 3px;
	}
	#header .ham {
		width: 26px;
		height: 26px;
		display: block;
		position: absolute;
		top: 7px;
		right: 15px;
	}
	#header .spmenu {
		position: absolute;
		background-color: rgba(255, 255, 255, 0.9);
		padding: 10px 20px 20px;
		top: 40px;
		right: 0;
		left: 0;
		z-index: 10000;
		-webkit-box-shadow: 0px 8px 8px -8px #000;
		box-shadow: 0px 8px 8px -8px #000;
	}
	#header .spmenu .wrapper a {
		display: block;
		padding: 8px 5px;
		color: #003279;
		font-size: 13px;
		text-decoration: none;
		border-bottom: 1px solid #003279;
	}
	#header .spmenu .close {
		width: 120px;
		height: 30px;
		margin: 20px auto 0;
		color: #fff;
		background-color: #003279;
		border-radius: 3px;
		text-align: center;
		line-height: 30px;
		font-size: 12px;
	}
	#main {
		padding-top: 80%;
		margin-top: 40px;
	}
	#main h1 {
		width: 55%;
		top: 10px;
		right: 5px;
		font-size: 20px;
		justify-content: flex-start;
		text-align: right;
		padding-top: 3%;
	}
	#main h1 img{
		margin:20px 0 10px;
	}
	#main h1 span {
		font-size: 14px;
	}
	#main_btm{
		padding: 15px 0;
	}
	#main_btm ul {
		display: flex;
		flex-wrap:wrap;
		flex-direction: column;
		justify-content: center;
	}
	#main_btm ul li{
		width:100%;
		font-size: 14px;
		margin:0;
		margin-bottom: 20px;
	}
	#main_btm ul li:last-child{
		margin-bottom:0;
	}
	#main_btm ul li a{
		padding:10px;
	}
	#features ul{
		display:block;
	}
	#features{
		padding:30px 0;
	}
	#features ul li {
		width: 100%;
		padding: 4% ;
	}
	#features ul li h3 {
		font-size: 16px;
		margin-bottom: 10px;
	}
	#features p {
		font-size: 13px;
	}
	#features ul li:nth-child(1), #features ul li:nth-child(2), #features ul li:nth-child(4){
		margin:0 0 20px;
	}
	#functions {
		padding: 30px 0 0;
	}
	#functions section {
		font-size: 12px;
		padding-bottom: 50px;
		margin-bottom: 50px;
	}
	#lineup{
		padding: 30px 0;
	}
	#lineup ul {
		display: block;
	}
	#lineup ul li{
		margin: 0 auto 40px;
		width: 92%;
	}
	#lineup .ttl {
		padding: 15px;
	}
	#lineup span {
		font-size: 14px;
	}
	#lineup h4 {
		font-size: 30px;
	}
	#lineup .detail {
		padding: 15px 15px 20px;
	}
	#lineup ul li ul li {
		font-size: 14px;
	}
	#lineup .detail a {
		font-size: 16px;
	}
	#merit {
		padding: 30px 0;
	}
	#merit section div {
		display: flex;
		flex-direction: column;
	}
	#merit figure {
		width: 100%;
		border-right: 0;
		border-bottom: 1px solid #f2f2f2;
	}
	#merit section .txt {
		width: 100%;
		font-size: 14px;
		padding: 1em;
	}
	#merit h3 {
		font-size: 20px;
		text-align:center;
	}
	#insurance{
		padding:30px 4%;
	}
	#insurance h2 {
		display: block;
		font-size: 21px;
		line-height: 1.2;
		border-radius: 2em;
		padding: 0.5em;
	}
	#insurance strong {
		font-size: 16px;
	}
	#customers {
		padding: 30px 0;
	}
	#customers ul li {
		width: 30%;
		margin-right: 0;
	}
	#customers ul li:nth-child(3n-1){
		margin:0 5%;
	}
	#customers ul {
		justify-content: center;
	}
	.intro_case {
		flex-direction: column;
		padding: 1rem 1.5rem;
		height: 100%;
	}
	.intro_case .photo,.intro_case .explain {
		width: 100%;
	}
	#customers h4 {
		font-size: 18px;
		text-align: center;
	}
	.intro_case .explain p {
		font-size: 13px;
		margin-bottom: 1.5em;
	}
	.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
		left: 5px;
		right: auto;
		background-size: cover;
	}
	.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
		right: 5px;
		left: auto;
		background-size: cover;
	}
	.swiper-button-next, .swiper-button-prev {
		position: absolute;
		top: 50%;
		width: 10px;
		height: 16px;
	}
	.swiper-slide{
		height: auto;
	}
	#flow{
		padding:30px 0 ;
	}
	.flow {
		padding-left: 80px;
	}
	.flow > li .icon {
		font-size: 10px;
		padding: 5px 10px;
		left: -80px;
	}
	.flow::before{
		left:80px;
	}
	.flow > li dl::after {
		width: 30px;
	}
	.flow > li dl {
		padding-left: 40px;
	}
	.flow > li dl dt {
		font-size: 18px;
	}
	.flow > li dd{
		font-size:14px;
	}
	footer ul{
		justify-content:space-between;
		flex-wrap:wrap;
		width:90%;
		margin:auto;
	}
	footer ul li{
		font-size:12px;
		width: 45%;
		margin: 0 0 20px;
	}
	footer figure {
		width: 60%;
		margin: 0 auto 30px;
	}
	#page-top{
		width:48px;
	}
}