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 {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 62.5%;
  font: inherit;
  vertical-align: baseline;
}
html,body{
  box-sizing: border-box;
  height: 100%;
}
body{
  font-family: "Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,
  sans-serif;
}
:root {
  --color-blue: #32a4cd;
  --color-darkblue: #01283e;
  --color-lightblue :#d5edf5;
  --color-gray: #f2f4f5;
  --common-width01: 1025px;
}
@media screen and (max-width:1350px) {
body{
  padding-top: 70px;
}
}
@media screen and (max-width:840px) {
body{
  padding-top: 50px;
  padding-bottom: 70px;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　h2
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.h2wrapper{
  position: relative;
  overflow: hidden;
}
h2{
  color: var(--color-darkblue);
  display: table;
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0 auto 40px;
  text-align: center;
  position: relative;
}
.h2wrapper .line{
  background:  var(--color-blue);
  bottom: 0;
  content: "";
  display: block;
  height: 20px;
  position: absolute;
  width: 2000px;
  z-index: -1;
}
#section01 .h2wrapper .line,
#section03 .h2wrapper .line,
#section05 .h2wrapper .line,
#section07 .h2wrapper .line,
#section09 .h2wrapper .line{
  left: -20px;
}
#section02 .h2wrapper .line,
#section04 .h2wrapper .line,
#section06 .h2wrapper .line,
#section08 .h2wrapper .line,
#section10 .h2wrapper .line{
  right: -20px;
}
@media screen and (max-width:840px) {
h2{
  font-size: 1.8rem;
  margin: 0 auto 40px;
}
.spbr{
  display: block;
}
#section01 .h2wrapper .line,
#section03 .h2wrapper .line,
#section05 .h2wrapper .line,
#section07 .h2wrapper .line,
#section09 .h2wrapper .line{
  left: -10px;
}
#section02 .h2wrapper .line,
#section04 .h2wrapper .line,
#section06 .h2wrapper .line,
#section08 .h2wrapper .line,
#section10 .h2wrapper .line{
  right: -10px;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　ヘッダー
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
header .wrapper{
  height: 70px;
  padding: 10px 50px;
  position: relative;
  z-index: 1000;
}
header .site-title{
  display: block;
  position: absolute;
  top: 23px;
}
header .wrapper .menu{
  background: #fff;
  float: right;
}
header .wrapper .menu > li{
  display: inline-block;
  margin-left: 25px;
  vertical-align: top;
  position: relative;
}
header .wrapper .menu .textlink{
  color: var(--color-darkblue);
  display: block;
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
}
header .wrapper .menu .textlink:hover{
  border-bottom: solid var(--color-blue);) 5px;
}
header .wrapper .menu .sub-menu{
  background: #fff;
  height: 0;
  overflow: hidden;
  list-style: none;
  left: 50%;
  margin-left: -100px;
  position: absolute;
  top: 0;
  width: 200px;
  text-align: center;
  transition :all 0.3s ease 0s;
  z-index: -1;
}
header .wrapper .menu .sub-menu a{
  color: var(--color-darkblue);
  display: inline-block;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  text-decoration: none;
}
header .wrapper .menu .has-sub:hover .sub-menu {
  top: 50px;
  height: auto;
  padding:0;
}
header .wrapper .menu .has-sub:hover .sub-menu a:hover{
  color: var(--color-blue);
}
header a{transition :all 0.3s ease 0s;}
header .wrapper .nav-toggle{
  display: none;
}
/*スマホメニュー*/
#spnav {
  position: fixed;
  z-index: 4;
  top: -100px;
  left: 0;
  color: #000;
  text-align: center;
  transform: translateY(-100%);
  transition: all 0.6s;
  width: 100%;
  padding-top:100px;
}
 
#spnav > ul {
  background: rgba(0,73,122,0.85);
  margin: 0 auto;
  padding: 50px 0;
  width: 100%;
  display:inherit;
}
 
#spnav > ul li{
  list-style-type: none;
  line-height: 40px;
  margin: 0 auto 15px;
  padding: 0;
  width: 80%;
}
#spnav > ul > li{
  border-bottom: solid #fff 2px;
  padding-bottom: 10px;
}
#spnav > ul > li:last-of-type{
border: none;
}
#spnav > ul li li{
  margin: 0 auto 5px;
  width: 100%;
}
#spnav ul li a {
  background: #fff;
  display: block;
  color: var(--color-blue);
  text-decoration: none;
}
#spnav ul li p {
  display: block;
  color: #fff;
  margin-top: -10px;
  text-decoration: none;
}
/* このクラスを、jQueryで付与・削除する */
#spnav.active {
  transform: translateY(0%);
}
/*ハンバーガー用CSS*/
.spnav-toggle {
  display: none;
  position: fixed;
  right: 13px;
  top: 12px;
  width: 42px;
  height: 51px;
  cursor: pointer;
  z-index: 5;
  text-align: center;
}
.spnav-toggle span {
  display: block;
  position: absolute;
  width: 30px;
  border-bottom: solid 3px rgb(50, 164, 205);
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  left: 6px;
}
.spnav-toggle span:nth-child(1) {
  top: 9px;
}
.spnav-toggle span:nth-child(2) {
  top: 18px;
}
.spnav-toggle span:nth-child(3) {
  top: 27px;
}
.spnav-toggle span:nth-child(4) {
  border: none;
  color: #eee;
  font-size: 9px;
  font-weight: bold;
  top: 34px;
}
/*ハンバーガーメニュータップ後CSS*/
/* 最初のspanをマイナス45度に */
.spnav-toggle.active span:nth-child(1) {
  top: 18px;
  left: 6px;
  border-bottom: solid 3px #eee;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/* 2番目と3番目のspanを45度に */
.spnav-toggle.active span:nth-child(2),
.spnav-toggle.active span:nth-child(3) {
  top: 18px;
  border-bottom: solid 3px #eee;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media screen and (max-width:1350px) {
header{
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2000;
}
header .wrapper .menu{
  display: none;
}
.spnav-toggle {
  display: block;
}
}
@media screen and (max-width:840px) {
header .wrapper{
  height: 50px;
  margin: 0 auto;
  padding: 0;
  width: 95%;
}
header .site-title{
  top: 15px;
}
header .site-title img{
  max-width: 65%;
}
.spnav-toggle {
  right: 5px;
  top: 5px;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　トップイメージ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#topimage .wrapper{
  position: relative;
}
#topimage img{
  width: 100%;
}
#topimage .topimage_sp{
  display: none;
}
#topimage .topcaption{
  color: #fff;
  margin-left: calc(var(--common-width01) - var(--common-width01)*1.5);
  text-align: right;
  top: 70px;
  position: absolute;
  left: 50%;
  width: var(--common-width01);
}
#topimage .topcaption p:nth-of-type(1){
  font-size: 2.5rem;
  font-weight: bold;
}
#topimage .topcaption p:nth-of-type(2){
  font-size: 4.8rem;
  font-weight: bold;
}
#topimage .topcaption p:nth-of-type(3){
	font-size: 0.9rem;
	margin-top: 1rem;
	background: rgba(255,255,255,0.60);
	color: #000;
	padding: 1rem;
	display: inline-block;
}
@media screen and (max-width:1025px) {
#topimage .topcaption{
  margin-left: 0;
  left: 5%;
  width: 90%;
	top: 40px;
}
#topimage .topcaption p:nth-of-type(1){
  font-size: 2.3rem;
}
#topimage .topcaption p:nth-of-type(2){
  font-size: 4.8rem;
	line-height: 1.2;
}
#topimage .topcaption p:nth-of-type(3){
  font-size: 0.8rem;
	line-height: 1.2;
}
}
@media screen and (max-width:840px) {
#topimage .topimage_pc{
  display: none;
}
#topimage .topimage_sp{
  display: block;
}
#topimage .topcaption{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
#topimage .topcaption p:nth-of-type(1){
  font-size: 1rem;
}
#topimage .topcaption p:nth-of-type(2){
  font-size: 2rem;
}
#topimage .topcaption p:nth-of-type(3){
	color: #fff;
  font-size: 0.6rem;
	background: none;
	border: 1px solid #fff;
	padding: 0.5rem;
}
#topimage .topcaption p:nth-of-type(3) br {
  display: inline;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　斜めボックス共通
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.block{
  background: #fff;
  display: table;
  width: 100%;
  padding: 100px 0;
  transform: skewY(-5deg);
}
.block-gray{
  background-color: var(--color-gray);
}
.block .wrapper{
  display: table-cell;
  position: relative;
  transform: skewY(5deg);
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　共通ボタン
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.btn{
  border-radius: 25px;
  box-sizing: border-box;
  display: block;
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition :all 0.3s ease 0s;
  width: 200px;
}
.btn:after{
  content:"";
  height: 8px;
  width: 8px;
  position: absolute;
  right: 16px;
  transform: rotate(45deg);
  top: 18px;
}
.btn-border{
  border: solid var(--color-darkblue) 2px;
  color: var(--color-darkblue);
  line-height: 46px;
}
.btn-border:after{
  border: solid var(--color-darkblue) 2px;
  border-bottom: none;
  border-left: none;
}
.btn-background{
  background-color: var(--color-darkblue);
  color: #fff;
}
.btn-background:after{
  border: solid #fff 2px;
  border-bottom: none;
  border-left: none;
}
.btn:hover{
  opacity: 0.75;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　ボトム固定お問合せ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#contact-fix{
  background-color: var(--color-blue);
  bottom: 0;
  padding: 20px 50px;
  position: fixed;
  width: 100%;
}
#contact-fix .wrapper{
  height: 50px;
  position: relative;
}
#contact-fix .tell-wrapper{
  color: var(--color-darkblue);
  list-style: none;
  position: absolute;
  left: 0;
  top: 0;
}
#contact-fix .tell-wrapper li{
  display: inline-block;
}
#contact-fix .tell-wrapper li:first-of-type{
  font-weight: bold;
  line-height: 1.3rem;
  text-align: right;
}
#contact-fix .tell-wrapper li:first-of-type span{
  display: block;
}
#contact-fix .tell-wrapper li .telicon{
  background: url(../img/telicon.png);
  background-size: cover;
  display: block;
  height: 30px;
  margin: 0 10px;
  width: 30px;
}
#contact-fix .tell-wrapper .telnum{
  font-family: 'Public Sans', sans-serif;
  color: var(--color-darkblue);
  display: inline-block;
  font-size: 2.5rem;
  margin-right: 10px;
  text-decoration: none;
}
#contact-fix .tell-wrapper li:last-of-type p{
  display: inline-block;
  font-size: 0.8rem;
}
#contact-fix .btn-wrapper{
  position: absolute;
  right: 0;
  top: 0;
}
#contact-fix .btn-wrapper li{
  display: inline-block;
  margin-left: 25px;
}
@media screen and (max-width:1175px) {
#contact-fix .tell-wrapper li:first-of-type{
  display: none;
}
}
@media screen and (max-width:1050px) {
#contact-fix .tell-wrapper{
  display: none;
}
#contact-fix .btn-wrapper{
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}
#contact-fix .btn-wrapper li{
  margin-left: 0;
  width: 50%;
}
#contact-fix .btn-wrapper li:first-of-type{
  padding-right: 5px;
}
#contact-fix .btn-wrapper li:last-of-type{
  padding-left: 5px;
}
#contact-fix .btn-wrapper li .btn{
  width: 100%;
}
}
@media screen and (max-width:840px) {
#contact-fix{
  padding: 10px;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　section01 FLIGHTSのドローン橋梁点検サービスとは
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#section01{
  overflow: hidden;
}
#section01 .delta{
  background: var(--color-blue);
  height: 600px;
  position: absolute;
  right: 0;
  top: -410px;
  width: 15.2%;
  transform: rotate(-54deg);
}
#section01 .h2wrapper+p{
  margin: 0 0 20px;
  text-align: center;
}
#section01 .list{
  color: var(--color-darkblue);
  display: table;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 40px;
  list-style: none;
  margin: 0 auto 50px;
  max-width: var(--common-width01);
}
#section01 .list li{
  margin: 0 0 15px;
  padding-left: 45px;
  position: relative;
}
#section01 .list span{
  background: var(--color-darkblue);
  border-radius: 20px;
  color: #fff;
  display: block;
  height: 40px;
  left: 0;
  line-height: 40px;
  position: absolute;
  text-align: center;
  width: 40px;
}
#section01 .image{
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	flex-wrap: wrap;
}
#section01 .image li{
  color: #fff;
  display: inline-block;
  height: 366px;
  position: relative;
  width: 300px;
}
#section01 .image li:nth-of-type(1),
#section01 .image li:nth-of-type(3){
  background-image: url(../img/section01image01.png);
}
#section01 .image li:nth-of-type(2){
  background-image: url(../img/section01image02.png);
}
#section01 .image li img{
	display: block;
	margin: 0 auto;
	width: 65px;
}
#section01 .image li p{
  padding: 2rem 1rem;
}
#section01 .image li p span{
  display: block;
  font-size: 0.85rem;
	line-height: 1.3;
}
#section01 .image li p span:first-of-type{
  font-size: 2rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 0.5rem;
}
@media screen and (max-width:1025px) {
#section01 .list{
  width: 95%;
}
#section01 .image{
	justify-content: center;
	max-width: 620px;
}
#section01 .image li:nth-of-type(2){
	margin-left: 20px;
}
#section01 .image li:nth-of-type(3){
	margin-top: -70px;
}
}
@media screen and (max-width:840px) {
#section01 .delta{
  display: none;
}
#section01.block{
  transform: skewY(0deg);
}
#section01.block .wrapper{
  transform: skewY(0deg);
}
#section01 .h2wrapper+p{
  margin: 0 auto 20px;
  width: 95%;
}
#section01 .list{
  font-size: 1.2rem;
  margin: 0 auto 20px;
}
}
@media screen and (max-width:620px) {
#section01 .image{
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
#section01 .image li:nth-of-type(2){
	margin-left: 0;
	margin-top: 1rem;
}
#section01 .image li:nth-of-type(3){
	margin-top: 1rem;
}
#section01 .image li p{
	padding-top: 2.5rem;
}
#section01 .image li img{
	width: 50px;
	margin-bottom: 0.5rem;
}
#section01 .image li p span{
  display: ;
  font-size: 0.85rem;
}
#section01 .image li p span:first-of-type{
  font-size: 1.5rem;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　section02 技術概要
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#section02 .h2wrapper+p{
  margin: 0 0 20px;
  text-align: center;
}
#section02 ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 95%;
	max-width: var(--common-width01);
	margin: 1rem auto 0;
}
#section02 ul li{
	list-style: none;
	text-align: center;
	width: 31%;
	margin-left: 2%;
	margin-top: 1rem;
	margin-bottom: 1rem;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
#section02 ul li:nth-of-type(1),
#section02 ul li:nth-of-type(4){
	margin-left: 0;
}
#section02 ul li h3{
	background: var(--color-blue);
	color: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1;
	margin-bottom: 0.5rem;
	position: relative;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#section02 ul li h3::after{
	display: block;
	content: "";
	width: 40px;
	height: 50px;
	box-sizing: border-box;
	border: 25px solid #f2f4f5;
	border-right: 20px solid #f2f4f5;
	border-left: 20px solid var(--color-blue);
	position: absolute;
	right: -25px;
	bottom: 0;
}
#section02 ul li h3 .sp{
	display: none;
}
#section02 ul li img{
	display: block;
	margin: 0 auto 1rem;
	width: 100%;
	max-width: 300px;
}#section02 ul li:nth-of-type(5) img{
	border: 1px solid #ccc;
}
#section02 ul li p{
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px #ddd;
	padding: 1.5rem;
	box-sizing: border-box;
	flex: 1;
}
#section02 ul li p span{
	color: #f00;
	font-weight: bold;
	display: block;
}
@media screen and (max-width:1025px) {

}
@media screen and (max-width:840px) {
#section02 .h2wrapper + p{
  margin: auto;
  width: 95%;
}
#section02 ul{
	margin-top: 2rem;
}
#section02 ul li h3{
	font-size: 1.5rem;
}
}
@media screen and (max-width:600px) {
#section02 ul{
	flex-direction: column;
	max-width: 400px;
}
#section02 ul li{
	width: 100%;
	margin-left: 0;
	margin-top: 0;
	display: flex;
	justify-content: center;
	flex-direction: row;
}
#section02 ul li h3{
	font-size: 1.2rem;
	writing-mode: vertical-rl;
	width: 40px;
	height: auto;
	margin-right: 0.5rem;
}
#section02 ul li h3::after{
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	border: 20px solid #f2f4f5;
	border-bottom: 20px solid #f2f4f5;
	border-top: 20px solid var(--color-blue);
	position: absolute;
	right: 0;
	bottom: -30px;
}
#section02 ul li h3 .sp{
	display: inline;
}
#section02 ul li h3 .pc{
	display: none;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　section03 標準的な提出物
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#section03 .h2wrapper + p{
  text-align: center;
}
#section03 table {
	border-collapse: collapse;
	width: 100%;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	width: 95%;
	max-width: var(--common-width01);
	margin: 0 auto;
}
#section03 th,
#section03 td{
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
	padding: 10px;
	vertical-align: middle;
	font-size: 0.9rem;
	line-height: 1.3;
}
#section03 th{
	background: var(--color-blue);
	color: #fff;
	font-weight: bold;
}
#section03 th:nth-child(2){
	width: 4.5rem;
}
#section03 tr:nth-of-type(odd) td{
	background: rgba(50,164,205,0.15);
}
#section03 td ul{
	padding-left: 1rem;
}

@media screen and (max-width:1025px) {

}
@media screen and (max-width:840px) {
#section03 .h2wrapper + p{
  margin: auto;
  width: 95%;
}
}
@media screen and (max-width:600px) {
#section03 th,
#section03 td{
	font-size: 0.8rem;
}
#section03 th:nth-child(2){
	width: 4rem;
}
#section03 td ul{
	padding-left: 0.75rem;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　section04 採用実績
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#section04 .h2wrapper + p{
	text-align: center;
	margin: 0 auto 20px;
	width: 95%;
	font-size: 1.8rem;
	font-weight: bold;
	color: var(--color-darkblue);
}
#section04 table {
	border-collapse: collapse;
	width: 100%;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	width: 95%;
	max-width: 700px;
	margin: 0 auto 1rem;
}
#section04 th,
#section04 td{
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
	padding: 5px;
	vertical-align: middle;
	font-size: 0.9rem;
	line-height: 1.3;
}
#section04 th{
	background: var(--color-blue);
	color: #fff;
	font-weight: bold;
}
#section04 th:nth-child(2),
#section04 th:nth-child(3){
	width: 5rem;
}
#section04 tr:nth-of-type(odd) td{
	background: rgba(50,164,205,0.15);
}
#section04 tr.subtotal td{
	color: var(--color-darkblue);
	font-weight: bold;
}
#section04 tr.subtotal td:first-child,
#section04 tr td:last-child{
	text-align: right;
}
#section04 table.total{
	border-top: none;
	border-left: none;
}
#section04 table.total td{
	border-bottom: 2px solid var(--color-darkblue);
	border-right: none;
	font-size: 1.2rem;
	color: var(--color-darkblue);
	font-weight: bold;
	text-align: center;
}
#section04 table.total tr:nth-of-type(odd) td{
	background: none;
}
#section04 table.total td:nth-of-type(1){
	border-bottom: none;
}
#section04 .image{
	width: 90%;
	margin: 3rem auto 0;
	display: flex;
	justify-content: space-between;
}
#section04 .image p{
	background: #fff;
	border: 1px solid #999;
	width: 32%;
}
#section04 .image p img{
	display: block;
	width: 100%;
}

@media screen and (max-width:1025px) {
#section04 .h2wrapper + p{
  margin: 0 auto;
  width: 95%;
}
}
@media screen and (max-width:840px) {
#section04 .h2wrapper + p{
	font-size: 1.5rem;
	margin: 0 auto 2rem;
	width: 95%;
}
#section04 .image{
	width: 95%;
	flex-direction: column;
}
#section04 .image p{
	width: 100%;
	max-width: 500px;
	margin: 0 auto 1.5rem;
}
}
@media screen and (max-width:600px) {
#section04 .h2wrapper + p{
	font-size: 1.2rem;
}
#section04 th,
#section04 td{
	font-size: 0.8rem;
}
#section04 th:nth-child(2){
	width: 4rem;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　section05 内製化支援サービス
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.comingsoon{
  color: #666;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 160px;
  text-align: center;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　section06 スペック
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#section06{
  background: url(../img/section06bg.jpg);
  background-position: center top;
  background-size: cover;
}
#section06 .image{
  margin: 0 auto;
  width: var(--common-width01);
}
#section06 .image li{
  display: inline-block;
  vertical-align: top;
  width: 50%;
}
#section06 .image li img{
  width: 90%;
}
#section06 .caption{
  color: var(--color-darkblue);
  font-size: 1.8rem;
  font-weight: bold;
}
#section06 .text{
  margin-bottom: 1.8rem;
}
#section06 .catalog{
  font-size: 0.85rem;
  margin: 0 0 1rem;
}
.minibtn{
  background: var(--color-blue);
  border-radius: 25px;
  color: #fff;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  margin: 0 0 15px;
  padding: 0 40px 0 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
}
.minibtn:after{
  border: solid #fff 2px;
  border-bottom: none;
  border-left: none;
  content:"";
  height: 8px;
  width: 8px;
  position: absolute;
  right: 12px;
  transform: rotate(45deg);
  top: 12px;
}
.minibtn:hover{
  opacity: 0.75;
}
@media screen and (max-width:1025px) {
#section06 .image{
  width: 95%;
}
}
@media screen and (max-width:840px) {
#section06 .image li{
  display: block;
  width: 100%;
}
#section06 .image li img{
  margin-bottom: 20px;
  width: 100%;
}
#section06 .caption{
  font-size: 1.25rem;
}
#section06 .catalog{
  font-size: 0.75rem;
  margin: 0 0 1rem;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　section07 FAQ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#section07 dl{
  border-top: solid #d7dee0 2px;
  width: var(--common-width01);
  margin: 0 auto;
}
#section07 dl input[type="radio"]{
  display: none;
}
#section07 dl dt{
  border-bottom: solid #d7dee0 2px;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
  transition : all 0.5s ease 0s;
}
#section07 dl input[type="radio"]:checked+dt,
#section07 dl dt:hover{
  background: var(--color-lightblue);
}
#section07 dl dt label{
  cursor: pointer;
  display: block;
  padding: 20px 10px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
#section07 dl dt span.question{
  background: var(--color-blue);
  border-radius: 26px;
  color: #fff;
  display: block;
  height: 52px;
  line-height: 52px;
  margin-right: 20px;
  text-align: center;
  width: 52px;
}
#section07 dl dt span:not(.question){
	flex: 1;
}
#section07 dl dd{
  height: 0;
  overflow: hidden;
  padding: 0 10px 0 82px;
  position: relative;
  transition : all 0.5s ease 0s;
}
#section07 dl dd .answer{
  color: var(--color-blue);
  display: inline-block;
  font-size: 2rem;
  font-weight: bold;
  left: 0;
  line-height: 1.6rem;
  position: absolute;
  text-align: center;
  width: 72px;
}
#section07 dl dd p{
  display: inline-block;
}
#section07 dl input[type="radio"]:checked+dt+dd{
  border-bottom: solid #d7dee0 2px;
  height: auto;
  padding: 30px 10px 30px 82px;
}
@media screen and (max-width:1025px) {
#section07 dl{
  width: 95%;
}
}
@media screen and (max-width:840px) {
#section07 dl dt{
  font-size: 1.25rem;
}
}
@media screen and (max-width:600px) {
#section07 dl dt{
  font-size: 1rem;
}
#section07 dl dt label{
  padding: 10px 5px;
}
#section07 dl dt span.question{
  border-radius: 18px;
  height: 36px;
  line-height: 36px;
  margin-right: 10px;
  width: 36px;
}
#section07 dl dt span:not(.question){
	padding-left: 8px;
}
#section07 dl dd{
  font-size: 0.875rem;
  padding: 0 5px 0 60px;
}
#section07 dl dd .answer{
  font-size: 2rem;
  line-height: 1.6rem;
  width: 50px;
}
#section07 dl input[type="radio"]:checked+dt+dd{
  padding: 20px 5px 20px 60px;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　section08 各社コメント
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#section08 .image{
  list-style: none;
  width: var(--common-width01);
  margin: 0 auto;
}
#section08 .image li{
  margin-bottom: 40px;
  position: relative;
}
#section08 .image li:nth-of-type(odd){
  padding: 50px 0 0 220px;
}
#section08 .image li:nth-of-type(even){
  padding: 50px 220px 0 0;
}
#section08 .image .portrait{
  background-size: cover;
  height: 300px;
  position: absolute;
  top: 0;
  width: 300px;
}
#section08 .image li:nth-of-type(1) .portrait{
  background-image: url(../img/section08portrait01.jpg);
}
#section08 .image li:nth-of-type(2) .portrait{
  background-image: url(../img/section08portrait02.jpg);
}
#section08 .image li:nth-of-type(odd) .portrait{
  left: 0;
}
#section08 .image li:nth-of-type(even) .portrait{
  right: 0;
}
#section08 .image .portrait:before{
  border: solid var(--color-blue) 4px;
  box-sizing: border-box;
  content: "";
  height: 300px;
  position: absolute;
  top: 25px;
  width: 300px;
  z-index: -1;
}
#section08 .image li:nth-of-type(odd) .portrait:before{
  left: 32px;
}
#section08 .image li:nth-of-type(even) .portrait:before{
  right: 32px;
}
#section08 .image .article{
  background: #fff;
  width: 800px;
}
#section08 .image li:nth-of-type(odd) .article{
  padding: 40px 40px 40px 110px;
}
#section08 .image li:nth-of-type(even) .article{
  padding: 40px 110px 40px 40px;
}
#section08 .image .article .jobtitle{
  font-weight: bold;
}
#section08 .image .article .name{
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}
@media screen and (max-width:1025px) {
#section08 .image{
  width: 95%;
}
#section08 .image li:nth-of-type(odd){
  padding: 50px 0 0 20%;
}
#section08 .image li:nth-of-type(even){
  padding: 50px 20% 0 0;
}
#section08 .image .portrait{
  background-size: contain;
  height: 30vmin;
  width: 30vmin;
}
#section08 .image .article{
  width: 100%;
}
#section08 .image li:nth-of-type(odd) .article{
  padding: 40px 40px 40px 18%;
}
#section08 .image li:nth-of-type(even) .article{
  padding: 40px 18% 40px 40px;
}
#section08 .image .article .jobtitle{
  font-weight: bold;
}
}
@media screen and (max-width:840px) {
#section08 .image li:nth-of-type(odd) .article{
  padding: 30px 15px 30px 18%;
}
#section08 .image li:nth-of-type(even) .article{
  padding: 15px 18% 30px 15px;
}
#section08 .image .article .jobtitle,
#section08 .image .article .text{
  font-size: 0.875rem;
}
#section08 .image .article .name{
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　section10 メディア ／ section09 MOVIE
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#section09 ul,
#section10 ul{
	list-style: none;
	width: 95%;
	max-width: 800px;
	margin: 45px auto 0;
	padding-left: 45px;
	box-sizing: border-box;
}
#section09 li,
#section10 li{
	border: solid var(--color-blue) 2px;
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
#section09 h3,
#section10 h3{
	border: none;
	color: var(--color-darkblue);
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.5;
	padding: 20px 20px 20px 45px;
	width: 100%;
	order: 2;
}
#section09 h3 span,
#section10 h3 span{
	color: #999999;
	display: block;
	font-size: 1.2rem;
	font-weight: normal;
}
#section09 p,
#section10 p{
	box-sizing: border-box;
	margin: -45px 0 0 -45px;
	width: 100%;
	order: 1;
}
#section09 p {
	width: 100%;
	aspect-ratio: 16 / 9;
}
#section09 iframe {
	width: 100%;
	height: 100%;
}
#section10 p{
	border: solid #d7dee0 1px;
}
#section09 img,
#section10 img{
	display: block;
	width: 100%;
}
@media screen and (max-width:840px) {
#section09.block,
#section10.block{
	padding: 0;
}
#section09 ul,
#section10 ul{
	margin: 30px auto 0;
	padding-left: 30px;
}
#section09 h3,
#section10 h3{
	font-size: 1.2rem;
	padding: 15px 20px 20px;
}
#section09 h3 span,
#section10 h3 span{
	font-size: 0.9rem;
}
#section09 p,
#section10 p {
	margin: -30px 0 0 -30px;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　section11 お問合せ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#section11 .wrapper{
  background: var(--color-blue);
  color: #fff;
  margin-top: 100px;
  padding-top: 70px;
  text-align: center;
}
#section11 h2{
  color: #fff;
}
#section11 .contact01{
  padding-bottom: 40px;
}
#section11 .contact01 a{
  color: #fff;
  text-decoration: none;
}
#section11 .contact01 .telnum{
  font-family: 'Public Sans', sans-serif;
  font-size: 4rem;
  text-decoration: none;
}
#section11 .contact01 p{
  margin-bottom: 40px;
}
#section11 .contact01 .formlink{
  border: solid #fff 2px;
  border-radius: 40px;
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
  height: 80px;
  line-height: 80px;
  margin: 0 auto;
  padding-left: 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition :all 0.3s ease 0s;
  width: 400px;
}
#section11 .contact01 .formlink:before{
  background: url(../img/mailicon.png);
  background-size: cover;
  content: "";
  display: block;
  height: 32px;
  left: 30px;
  position: absolute;
  top: 22px;
  width: 40px;
}
#section11 .contact01 .formlink:hover{
  border: solid var(--color-darkblue) 2px;
  background: var(--color-darkblue);
}
#section11 .contact02{
  background: var(--color-darkblue);
  padding: 1rem;
}
#section11 .contact02 a{
  color: var(--color-blue);
  text-decoration: none;
}
#section11 .contact02 a:hover{
  text-decoration: underline;
}
@media screen and (max-width:840px) {
#section11 .contact01 .telnum{
  font-size: 2.5rem;
}
#section11 .contact01 .formlink{
  font-size: 1.4rem;
  line-height: 80px;
  width: 95%;
}
#section11 .contact01 .formlink:before{
  background: url(../img/mailicon.png);
  background-size: cover;
  content: "";
  display: block;
  height: 32px;
  left: 30px;
  position: absolute;
  top: 22px;
  width: 40px;
}
#section11 .contact01 .formlink:hover{
  border: solid var(--color-darkblue) 2px;
  background: var(--color-darkblue);
}
#section11 .contact02{
  background: var(--color-darkblue);
  padding: 1rem;
}
#section11 .contact02 a{
  color: var(--color-blue);
  text-decoration: none;
}
#section11 .contact02 a:hover{
  text-decoration: underline;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　フッター
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
footer{
	background: #333;
	color: #fff;
	padding: 0 0 90px;
}
footer .wrapper{
	margin: 0 50px;
	padding: 30px 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
footer .copyright img{
	display: block;
	margin-bottom: 10px;
}
footer .copyright{
	font-size: 0.75rem;
	width: 25%;
}
footer ul{
	font-size: 0.75rem;
	list-style: none;
	text-align: right;
	width: 75%;
}
footer ul li{
	display: inline-block;
	white-space: nowrap;
	padding-left: 1.5em;
}
footer ul a{
	color: #fff;
	text-decoration: none;
}
footer ul a:hover{
	color: var(--color-blue);
}
@media screen and (max-width:840px) {
footer .wrapper{
	flex-direction: column-reverse;
}
footer .copyright img{
	margin: 0 auto 10px;
}
footer .copyright,
footer ul{
	margin-bottom: 1rem;
	text-align: center;
	width: 100%;
}
footer ul li{
	display: block;
	padding-left: 0;
	margin: 1rem 0;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　フォーム系ページ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.formpage{
  min-height: calc(100% - 400px);
}
.formpage .wrapper{
  margin: 80px auto 60px;
  width: var(--common-width01);
}
#seminar .infomation{
  background: var(--color-gray);
  border-spacing: 20px;
  margin: 0 auto 60px;
  width: 100%;
}
#seminar .infomation th,
#seminar .infomation td{
  display: block;
  margin: 0 auto;
  max-width: 600px;
  text-align: center;
}
#seminar .infomation th{
  border-bottom: solid var(--color-blue) 3px;
  color: var(--color-blue);
  font-size: 1.5rem;
  font-weight: bold;
  white-space: nowrap;
}
#seminar .infomation td{
  font-size: 1.2rem;
  padding: 20px 0;
}
#seminar .infomation .leftalign{
  text-align: left;
}
#seminar .infomation td p{
  margin: 0 0 0.75rem;
}
#seminar .infomation ul{
  list-style: none;
}
#seminar .infomation ol{
  margin-left: 25px;
  text-align: left;
}
#doc .infomation{
  background: var(--color-gray);
  border-spacing: 20px;
  margin: 0 auto 60px;
  width: 100%;
}
#doc .infomation th,
#doc .infomation td{
  vertical-align: top;
}
#doc .infomation th{
  max-width: 30%;
}
#doc .infomation th img{
  width: 100%;
}
#doc .infomation td p{
  margin-bottom: 1rem;
}
#doc .infomation td .caption{
  border-bottom: solid var(--color-blue) 3px;
  color: var(--color-blue);
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 20px;
}
#doc .infomation ul{
  margin: 0 0 1rem 25px;
}
.formpage .thanks{
  margin: 0 auto;
  width: 840px;
}
.formpage .thanks .caption{
  background: var(--color-gray);
  border: solid var(--color-darkblue) 1px;
  display: block;
  font-size: 1.25rem;
  margin: 0 0 40px;
  padding: 20px 10px;
  text-align: center;
}
.formpage .thanks .text{
  margin-bottom: 1rem;
}
.formpage .thanks ul{
  padding-left: 20px;
}
@media screen and (max-width:1150px) {
.formpage{
  min-height: calc(100% - 330px);
}
}
@media screen and (max-width:1025px) {
.formpage .wrapper{
  width: 90%;
}
}
@media screen and (max-width:840px) {
.formpage{
  min-height: calc(100% - 240px);
}
#doc .infomation th,
#doc .infomation td{
  display: block;
}
#doc .infomation th{
  max-width: 100%;
  padding-bottom: 20px;
}
.formpage .thanks{
  width: 90%;
}
}