@charset "utf-8";

/*fadein*/
@-webkit-keyframes fadein-ttl {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@-ms-keyframes fadein-ttl {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@-moz-keyframes fadein-ttl {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadein-ttl {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-webkit-keyframes fadeout-ttl {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@-ms-keyframes fadein-ttl {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@-moz-keyframes fadein-ttl {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes fadein-ttl {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@-webkit-keyframes fadein-nav {
	from {
		opacity: 0;
	}
	to {
		opacity: 0.7;
	}
}
@-ms-keyframes fadein-ttl {
	from {
		opacity: 0;
	}
	to {
		opacity: 0.7;
	}
}
@-moz-keyframes fadein-ttl {
	from {
		opacity: 0;
	}
	to {
		opacity: 0.7;
	}
}
@keyframes fadein-ttl {
	from {
		opacity: 0;
	}
	to {
		opacity: 0.7;
	}
}



@keyframes home-bg-move {
	from {
		transform: scale(1.3)
	}
	to {
		transform: scale(1)
	}
}

@keyframes home-bg-move-sp {
	from {
		transform: scale(1.3)
	}
	to {
		transform: scale(1)
	}
}

/*スクロールアニメーション*/
@-webkit-keyframes sdb2 {
  0% {
    transform: translate(0, -40px);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 200px) scaleY(0.3);
  }
}
@-ms-keyframes sdb2 {
  0% {
    transform: translate(0, -40px);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 200px) scaleY(0.3);
  }
}
@-moz-keyframes sdb2 {
  0% {
    transform: translate(0, -40px);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 200px) scaleY(0.3);
  }
}
@keyframes sdb2 {
  0% {
    transform: translate(0, -40px);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 200px) scaleY(0.3);
  }
}


/*下からフェードイン*/
.fadeUpTrigger { opacity: 0 }
.fadeUpTrigger.fadeUp {
	animation-name:fadeUpTriggerAnime;
	animation-duration:1s;
	animation-delay: 0.5s;
	animation-fill-mode:forwards;
	opacity: 0;
	transform: translateY(40px);
}
@keyframes fadeUpTriggerAnime{
0% {
transform: translateY(40px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}

@media screen and (min-width: 1001px) ,print {
/*************************************
* 共通
*************************************/
#main-content {  }
.dsp-no-pc { display: none !important; }
main {  }
.content-inner { padding: 0 5% 0 5%; max-width: 1000px; margin: auto }
section { padding-top: 150px;  display: block; }
section:first-child { padding-top: 0 }
.detail-inner { margin: 0; padding: 0; width: 100%; height: 100%; }
.tel { pointer-events: none; }
.area-c-pc { text-align: center }
.area-r-pc { text-align: right }
.area-l-pc { text-align: left }
/*************************************
* 見出し
*************************************/
.h2-area { margin-bottom: 70px }
.h2-01 { color: #003288 }
.h2-01 .jp {
	display: block;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-size: 60px;
	line-height: 90px
}
.h2-01 .large { font-size: 100px; line-height: 120px; font-weight: 600 }
.h2-01 .en { display: inline-block; font-size: 40px; line-height: 50px; padding-bottom: 15px; margin-bottom: 15px; position: relative }
.h2-01 .en:after { content: " "; border-bottom: 1px solid #003288; position: absolute; left: 0; bottom: 0; width: 100% }
.h3-01 { font-size: 32px; line-height: 45px; margin-bottom: 15px; color: #003288; font-weight: 700; }
.h3-02 { font-size: 40px; line-height: 60px; margin-bottom: 20px; color: #003288; font-weight: 700; text-align: justify }
.h3-04 { font-size: 25px; line-height: 45px; margin-bottom: 15px; color: #003288; font-weight: 700; text-align: justify }
/*************************************
* テーブル
*************************************/
th {  }
.table-01 { width: 100%; font-size: 12px; }
.table-01 tr { line-height: 1.5rem; padding-left: 2.5%; padding-right: 2.5%; width: 95%; vertical-align: top }
.table-01 tr > * { padding: 5px 0 5px 0; }
.table-01 th { width: 10%; font-weight: normal; min-width: 80px }
.table-01 td { width: 90%; }
/*************************************
* リスト
*************************************/
ul.list-01, ul.list-01 li { list-style: none; } 
ul.list-01 li { padding-left: 1.2em; text-indent: -1.2em; line-height: 1.7rem; }
ul.list-01 li:before {
	font-family: 'Font Awesome 5 Free';
	content: '\f111';
	color: #ddd;
	margin-right: 0.5em;
	font-weight: bold;
	font-size: 10px;
}
/*************************************
* ボタン
*************************************/
.btn-01 {
	min-width: 250px;
	padding: 15px 30px;
	box-sizing: border-box;
	background-color: #003288;
	color: #fff;
	border-radius: 40px;
	font-size: 20px;
	line-height: 35px;
	display: inline-block
}
.btn-01:visited { color: #fff; }
.btn-01:hover {
	opacity: 1;
	background-color:  #005fff
}
/*************************************
* header
*************************************/
/*グロナビ*/
#home-header-top {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2000;
	width: 100%;
	-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    padding-bottom: 10px
}
#home-header-top.on {
	background-color: rgba(250,250,250,0.9);
	-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#home-header-top .global-navi {
	opacity: 0;
	background-color: rgba(255,255,255,0.99);
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	text-align: center;
	transition: all 1s;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    visibility: hidden;
}
/* .global-naviに.activeが追加 */
#home-header-top .global-navi.active {
	opacity: 1;
	z-index: 1000;
	-webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    transition: all 1s ease-out;
    visibility: visible;
}
#home-header-top .global-navi.active .menu-list a {
	opacity: 1;
	-webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
    transform: translateY(0)
}
#home-header-top .menu-list {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%)
}
/*バーガーメニュー*/
#side-bar-menu { position: fixed; right: 30px; top: 3px; z-index: 1500; width: 30px; height: 30px; }
.nav-toggle {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 40px;
	z-index: 2500;
	-webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
    margin: 4px 0 0 13px
}
#header-top.smaller .nav-toggle {
	height: 30px;
	-webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
.nav-toggle span {
	display: block;
	position: absolute; /* .toggleに対して */
	width: 30px;
	margin-top: 10px;
	border-bottom: solid 1px #000;
	-webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 12px; }
/***** クリック後のボタン *****/
/* 最初のspanをマイナス45度にする */
.nav-toggle.active span:nth-child(1) {
	top: 9px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
	border-bottom: solid 1px #808080;
	opacity: 1;
}
/* 2番目と3番目のspanを45度にする */
.nav-toggle.active span:nth-child(2) {
	top: 9px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	border-bottom: solid 1px #808080;
	opacity: 1;
}
/*ナビ中身*/
.menu-list a span.jp { position: relative }
.menu-list a span { display: block }
.menu-list a span.en { font-size: 13px; line-height: 20px }
.menu-list a { display: inline-block; margin-bottom: 1.3rem; color: #003288; }
.menu-list li:last-child a { margin-bottom: 0; }
.menu-list a:hover { opacity: 1; }
.menu-list a span.jp:after {
	content: " ";
	width: 100%;
	height: 100%;
	background-color: #ffea00;
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: left bottom;
	transform: scaleX(0);
	-webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
    z-index: -1
}
.menu-list a:hover span.jp:after {
	transform-origin: left bottom;
	transform: scaleX(1);
	-webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
/*************************************
* footer
*************************************/
footer { text-align: center; margin-top: 8rem }
.f-detail { padding: 60px 0; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.f-logo { width: 300px; margin: 1rem auto 0 auto }
.f-txt { margin-top: 1rem }
.f-tel { margin-top: 2rem }
footer .copy { padding: 60px 0 }
/*************************************
* トップページ
*************************************/
/*メインビジュアル*/
#home-00 { position: relative; height: 800px; }
#home-00 .main-img {
	 position: relative;
  top: 0;
  width: 100%;
  height: 450px;
  overflow: hidden;
}
#canvas {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.plane {
    position: absolute;
    left: 50%;
    top: -200px;
    transform: translateX(-50%);
    width: 2000px;
    height: 590px;
}
.plane img {
    
}


.h1-01 {
	position: absolute;
	left: 5%;
	top: 400px;
}
.h1-01 .caption { font-size: 22px; margin-bottom: 20px; display: block }
.h1-01 .logo { width: 500px; display: block }
.home-navi {
	position: absolute;
	text-align: right;
	top: 430px;
	right: 8%
}
.home-navi a { position: relative; display: inline-block; margin-bottom: 8px }
.home-navi a:before {
	content: " ";
	position: absolute;
	border-bottom: 1px solid #000;
	bottom: 0;
	left: 0;
	width: 100%;
	transform-origin: right bottom;
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}
.home-navi a:hover { opacity: 1; color: #003288 }
.home-navi a:hover:before { transform: scaleX(0); transform-origin: right bottom; } 
.home-navi li:last-child a { margin-bottom: 0 }

/*Service*/
/*スクロールバー*/
.top-main-scroll-00 {
	position: absolute;
	right: 40px;
	top: 430px;
	z-index: 100;
	width: 1px;
	height: 100px;
}
.scroll {
    bottom: 0;
    height: 100px;
    position: absolute;
    width: 1px;
    overflow: hidden;
    background-color: #003288;
}
.scroll-wheel {
    animation: sdb2 3s ease-in-out infinite;
    background-color: #fff;
    height: 40px;
    position: absolute;
    width: 1px;
    top: -40px;
}
.scroll::before {
    background-color: #003288;
    content: " ";
    display: block;
    height: 100px;
    top: 0;
    position: absolute;
    width: 1px;
    left: 50%;
}
#home-01 {
	position: relative;
	padding: 300px 0 0 0;
	background-image: url(../img/01-00.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 50% 500px;
}
.service-01-area {
	display: flex;
	justify-content: space-between
}
.service-01-detail {
	width: 30%;
	text-align: center
}
#home-01 .h2-area { margin-top: -200px; }
.service-01-detail .img { margin-bottom: 15px; }
.service-01-detail p { text-align: justify }
/*Advantage*/
#home-02 .content-inner { max-width: 1200px }
.advantage-01-detail { display: flex; justify-content: space-between; margin-bottom: 8rem }
.advantage-01-detail:last-child { margin-bottom: 0 }
.advantage-01-detail .img { width: 50%; }
.advantage-01-detail .txt { width: 50%; }
.advantage-01-01 .img { margin-left: -5% }
.advantage-01-02 .img { margin-right: -5%; order: 2 }
.advantage-01-03 .img { margin-left: -5% }
.advantage-01-detail .number { font-size: 100px; line-height: 120px; color: #003288; margin-bottom: 20px }
/*Case study*/
.case-01 { font-size: 0 }
.case-01-detail { font-size: 1rem; display: inline-block; vertical-align: top; margin-bottom: 2rem; width: 47%; margin-right: 6%; text-align: center }
.case-01-detail:nth-child(2n) { margin-right: 0 }
.case-01-detail .txt { margin-top: 15px }
.case-02 { margin-top: 1rem; }
.price-info { font-size: 0; padding: 40px 20px; border: 1px solid #003288; text-align: center; color: #003288; }
.price-info > * { display: inline-block; font-size: 1rem; vertical-align: middle; margin-right: 15px }
.price-info > *:last-child { margin-right: 0 }
.price-info .h3-03 { color: #fff; font-size: 25px; line-height: 35px; background-color: #003288; font-weight: 700; padding: 10px }
.price-info .mid { font-size: 25px; line-height: 35px; font-weight: 700 }
.price-info .price { font-size: 50px; line-height: 65px; font-weight: 700 }
/*Flow*/
.flow-01 { padding: 40px; background-color: #FAFAFA }
.flow-detail { display: flex; justify-content: space-between; margin-bottom: 30px; padding-bottom: 30px; position: relative }
.flow-detail .flow-no { width: 5%; font-size: 35px; line-height: 45px; color: #003288; }
.flow-detail .flow-no:after { content: " "; border-left: 1px solid #003288; position: absolute; bottom: 0; left: 10px; height: 50% }
.flow-detail .txt { width: 94% }
.flow-detail:last-child .flow-no:after { display: none }
.flow-detail:last-child { margin-bottom: 0; padding-bottom: 0 }
/*Message*/
.message-01 {
	text-align: center;
	line-height: 40px;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}
/*Contact*/
.contact-01 { text-align: center }
.contact-01-detail > * { display: inline-block; vertical-align: top; margin: 0 20px }
.contact-01-detail { margin-top: 2rem }










}




































@media screen and (max-width: 1000px) {
/*************************************
* 共通
*************************************/
body { font-size: 16px; line-height: 30px }
#main-content {  }
main {  }
.content-inner { padding: 0 5% 0 5%; max-width: 600px; margin: auto }
section { padding-top: 80px;  display: block; }
section:first-child { padding-top: 0 }
.detail-inner { margin: 0; padding: 0; width: 100%; height: 100%; }
.area-c-sp { text-align: center }
.area-r-sp { text-align: right }
.area-l-sp { text-align: left }
.dsp-no-sp { display: none }
/*************************************
* 見出し
*************************************/
.h2-area { margin-bottom: 30px }
.h2-01 { color: #003288 }
.h2-01 .jp {
	display: block;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-size: 22px;
	line-height: 30px
}
.h2-01 .large { font-size: 50px; line-height: 70px; font-weight: 600 }
.h2-01 .en { display: inline-block; font-size: 20px; line-height: 30px; padding-bottom: 15px; margin-bottom: 15px; position: relative }
.h2-01 .en:after { content: " "; border-bottom: 1px solid #003288; position: absolute; left: 0; bottom: 0; width: 100% }
.h3-01 { font-size: 18px; line-height: 28px; margin-bottom: 8px; color: #003288; font-weight: 700; }
.h3-02 { font-size: 22px; line-height: 32px; margin-bottom: 10px; color: #003288; font-weight: 700; text-align: justify }
.h3-04 { font-size: 22px; line-height: 32px; margin-bottom: 10px; color: #003288; font-weight: 700; text-align: justify }
/*************************************
* テーブル
*************************************/
th {  }
.table-01 { width: 100%; font-size: 12px; }
.table-01 tr { line-height: 1.5rem; padding-left: 2.5%; padding-right: 2.5%; width: 95%; vertical-align: top }
.table-01 tr > * { padding: 5px 0 5px 0; }
.table-01 th { width: 10%; font-weight: normal; min-width: 80px }
.table-01 td { width: 90%; }
/*************************************
* リスト
*************************************/
ul.list-01, ul.list-01 li { list-style: none; } 
ul.list-01 li { padding-left: 1.2em; text-indent: -1.2em; line-height: 1.7rem; }
ul.list-01 li:before {
	font-family: 'Font Awesome 5 Free';
	content: '\f111';
	color: #ddd;
	margin-right: 0.5em;
	font-weight: bold;
	font-size: 10px;
}
/*************************************
* ボタン
*************************************/
.btn-01 {
	min-width: 250px;
	padding: 15px 30px;
	box-sizing: border-box;
	background-color: #003288;
	color: #fff;
	border-radius: 40px;
	font-size: 16px;
	line-height: 35px;
	display: inline-block
}
.btn-01:visited { color: #fff; }
.btn-01:hover {
	opacity: 1;
	background-color:  #005fff
}
/*************************************
* header
*************************************/
/*グロナビ*/
#home-header-top {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2000;
	width: 100%;
	-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    padding-bottom: 10px
}
#home-header-top.on {
	background-color: rgba(250,250,250,0.9);
	-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#home-header-top .global-navi {
	opacity: 0;
	background-color: rgba(255,255,255,0.99);
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	text-align: center;
	transition: all 1s;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    visibility: hidden;
}
/* .global-naviに.activeが追加 */
#home-header-top .global-navi.active {
	opacity: 1;
	z-index: 1000;
	-webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    transition: all 1s ease-out;
    visibility: visible;
}
#home-header-top .global-navi.active .menu-list a {
	opacity: 1;
	-webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
    transform: translateY(0)
}
#home-header-top .menu-list {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%)
}
/*バーガーメニュー*/
#side-bar-menu { position: fixed; right: 30px; top: 3px; z-index: 1500; width: 30px; height: 30px; }
.nav-toggle {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 40px;
	z-index: 2500;
	-webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
    margin: 4px 0 0 13px
}
#header-top.smaller .nav-toggle {
	height: 30px;
	-webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
.nav-toggle span {
	display: block;
	position: absolute; /* .toggleに対して */
	width: 30px;
	margin-top: 10px;
	border-bottom: solid 1px #000;
	-webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 12px; }
/***** クリック後のボタン *****/
/* 最初のspanをマイナス45度にする */
.nav-toggle.active span:nth-child(1) {
	top: 9px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
	border-bottom: solid 1px #808080;
	opacity: 1;
}
/* 2番目と3番目のspanを45度にする */
.nav-toggle.active span:nth-child(2) {
	top: 9px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	border-bottom: solid 1px #808080;
	opacity: 1;
}
/*ナビ中身*/
.menu-list a span.jp { position: relative }
.menu-list a span { display: block }
.menu-list a span.en { font-size: 13px; line-height: 20px }
.menu-list a { display: inline-block; margin-bottom: 1.3rem; color: #003288; }
.menu-list li:last-child a { margin-bottom: 0; }
.menu-list a:hover { opacity: 1; }
.menu-list a span.jp:after {
	content: " ";
	width: 100%;
	height: 100%;
	background-color: #ffea00;
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: left bottom;
	transform: scaleX(0);
	-webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
    z-index: -1
}
.menu-list a:hover span.jp:after {
	transform-origin: left bottom;
	transform: scaleX(1);
	-webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
/*************************************
* footer
*************************************/
footer { text-align: center; margin-top: 60px }
.f-detail { padding: 60px 0; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.f-logo { width: 200px; margin: 1rem auto 0 auto }
.f-txt { margin-top: 1rem }
.f-tel { margin-top: 2rem }
footer .copy { padding: 40px 0 }
/*************************************
* トップページ
*************************************/
/*メインビジュアル*/
#home-00 { position: relative; height: 500px; }
#home-00 .main-img {
	 position: relative;
  top: 0;
  width: 100%;
  height: 450px;
  overflow: hidden;
}
#canvas {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.plane {
    position: absolute;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    width: 1000px;
}
.h1-01 {
	position: absolute;
	left: 5%;
	top: 200px;
}
.h1-01 .caption { font-size: 18px; margin-bottom: 20px; display: block }
.h1-01 .logo { width: 250px; display: block }
.home-navi {
	position: absolute;
	text-align: right;
	top: 210px;
	right: 8%
}
.home-navi li { margin-bottom: 5px; font-size: 13px; line-height: 20px }
.home-navi a { position: relative; display: inline-block; }
.home-navi a:before {
	content: " ";
	position: absolute;
	border-bottom: 1px solid #000;
	bottom: 0;
	left: 0;
	width: 100%;
	transform-origin: right bottom;
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}
.home-navi a:hover { opacity: 1; color: #003288 }
.home-navi a:hover:before { transform: scaleX(0); transform-origin: right bottom; } 
.home-navi li:last-child a { margin-bottom: 0 }
/*スクロールバー*/
.top-main-scroll-00 {
	position: absolute;
	right: 5%;
	top: 210px;
	z-index: 100;
	width: 1px;
	height: 100px;
}
.scroll {
    bottom: 0;
    height: 100px;
    position: absolute;
    width: 1px;
    overflow: hidden;
    background-color: #003288;
}
.scroll-wheel {
    animation: sdb2 3s ease-in-out infinite;
    background-color: #fff;
    height: 40px;
    position: absolute;
    width: 1px;
    top: -40px;
}
.scroll::before {
    background-color: #003288;
    content: " ";
    display: block;
    height: 100px;
    top: 0;
    position: absolute;
    width: 1px;
    left: 50%;
}
/*Service*/
#home-01 {
	position: relative;
	padding: 250px 0 0 0;
	background-image: url(../img/01-00.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 50% 300px;
}
.service-01-area {
	display: flex;
	justify-content: space-between
}
.service-01-detail {
	width: 30%;
	text-align: center
}
#home-01 .h2-area { margin-top: -200px; }
.service-01-detail .img { margin-bottom: 15px; }
.service-01-detail p { text-align: justify }
/*Advantage*/
.advantage-01-detail { margin-bottom: 40px }
.advantage-01-detail:last-child { margin-bottom: 0 }
.advantage-01-detail .img { margin-bottom: 10px }
.advantage-01-detail .txt {  }
.advantage-01-detail .number { font-size: 40px; line-height: 50px; color: #003288; margin-bottom: 5px }
/*Case study*/
.case-01 {  }
.case-01-detail { margin-bottom: 40px;text-align: center }
.case-01-detail .txt { margin-top: 15px }
.case-02 { margin-top: 40px; }
.price-info { font-size: 0; padding: 20px; border: 1px solid #003288; text-align: center; color: #003288; }
.price-info > * { display: inline-block; font-size: 1rem; vertical-align: middle; }
.price-info > *:last-child { margin-right: 0 }
.price-info .h3-03 { color: #fff; font-size: 22px; line-height: 30px; background-color: #003288; font-weight: 700; padding: 10px; display: block }
.price-info .mid { font-size: 22px; line-height: 35px; font-weight: 700; margin-right: 10px }
.price-info .price { font-size: 40px; line-height: 55px; font-weight: 700 }
/*Flow*/
.flow-01 { padding: 20px; background-color: #FAFAFA }
.flow-detail { display: flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 20px; position: relative }
.flow-detail .flow-no { width: 45px; font-size: 25px; line-height: 35px; color: #003288; }
.flow-detail .flow-no:after { content: " "; border-left: 1px solid #003288; position: absolute; bottom: 0; left: 10px; height: 70% }
.flow-detail .txt { width: 94% }
.flow-detail:last-child .flow-no:after { display: none }
.flow-detail:last-child { margin-bottom: 0; padding-bottom: 0 }
/*Message*/
.message-01 {  }
.message-01 .txt {  }
.message-01 .img {  }
.message-01 .txt p {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	text-align: justify
}
/*Contact*/
#home-06 { text-align: center }
.contact-01 { text-align: center }
.contact-01-detail > * { display: inline-block; vertical-align: top; margin: 0 20px }
.contact-01-detail { margin-top: 2rem }






}
















@media screen and (max-width: 650px) {
/*Service*/
#home-01 {
	position: relative;
	padding: 250px 0 0 0;
	background-image: url(../img/01-00.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% 300px;
}
.service-01-area {
	display: block;
}
.service-01-detail {
	width: 100%;
	text-align: left;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px
}
.service-01-detail .img { width: 30%; margin-bottom: 0 }
.service-01-detail .txt { width: 65%; }
#home-01 .h2-area { text-align: center; padding-top: 300px }


.btn-01 { margin-bottom: 15px }


















}