@charset "UTF-8";
/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  base
--------------------------------
------------------------------*/

/*  01.  base
------------------------------*/
/*  base  */
html,body {width: 100%; height: 100%; margin: 0; padding: 0;}
h1,h2,h3,h4,h5,h6,h7,dl,dt,dd,ol,ul,li,p,a {margin: 0; padding: 0;}
ol,ul,li {list-style: none;}
a {display: block; text-decoration: none;}

/*  font style  */
body {
	font-family: Helvetica Neue,Helvetica,Arial,YuGothic,Yu Gothic,游ゴシック体,游ゴシック,ヒラギノ角ゴ ProN W3,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS ゴシック,MS Gothic,sans-serif;
	font-variant-ligatures: no-common-ligatures;
	font-kerning:　normal; -webkit-font-kerning:normal; -moz-font-kerning:normal; -ms-font-kerning:normal; -o-font-kerning:normal;
	font-feature-settings: "kern" 1,"kern"; -webkit-font-feature-settings: "kern" 1,"kern"; -moz-font-feature-settings: "kern" 1,"kern"; -ms-font-feature-settings: "kern" 1,"kern"; -o-font-feature-settings: "kern" 1,"kern";
	font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased;
	text-rendering: optimizeLegibility; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility;
	text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}

/*  text style  */
.en {font-family: 'Alatsi', sans-serif;}

/*  clearfix  */
.clearfix::after {display: block; clear: both; content: "";}

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  general - header
/*  02.  general - footer
/*  03.  general - content
/*  05.  scroll animation
/*  06. loading
--------------------------------
------------------------------*/

/*  01.  general - header
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  header  */
#head {position: relative; width: 100%; max-width: 1400px; height: 170px; margin: auto; overflow: hidden; z-index: 777;}
#head h1 {float: left; width: 200px; height: 50px; margin: 40px 0px 40px 40px;}
#head h1 a {width: 100%; height: 100%;}
#head h1 a img {width: 100%; height: auto; vertical-align: top;}
#head #menu {width: 400px; height: 40px; margin: auto; margin-top: 45px;}
#head #menu ul {float: left; width: 100%; height: auto;}
#head #menu ul {display: flex; flex-wrap: nowrap; justify-content: space-between;}
#head #menu ul li a,
#head #menu ul li button {position: relative;display: inline-block; line-height: 40px; font-size: 16px; letter-spacing: 2px; padding: 0; font-weight: normal; background:none; border: none; text-transform: uppercase; font-family: 'Alatsi', sans-serif; color: #FFF; cursor: pointer;}
#head #menu ul li a::after,
#head #menu ul li button::after {position: absolute; content: ""; width: 100%; height: 2px; left: 0; bottom: 0; background-color: #FFF; transform: translateY(10px); opacity: 0;}
#head #menu ul li a:hover::after,
#head #menu ul li button:hover::after {transform: translateY(0px); opacity: 1;}
#head #menu_sub {position: absolute; float: right; width: 160px; height: 40px; top: 45px; right: 10px; z-index: 111;}
#head #menu_sub a {position: relative; width: 100%; height: 100%; background-color: #DDD; box-shadow: 0px 0px 8px #777; border-radius: 20px; transform: translateY(0px); z-index: 10;}
#head #menu_sub a:hover {transform: translateY(-5px);}
#head #menu_sub a::before {position: absolute; content: ""; width: 40px; height: 40px; top: 0; left: 0px; background-color: #FFF; border-radius: 50%; box-shadow: 0px 0px 8px #777; z-index: 11;}
#head #menu_sub a::after {position: absolute; content: ""; width: 20px; height: 20px; top: 10px; left: 10px; background-color: #9A090C; border-radius: 50%; z-index: 12;}
#head #menu_sub a p {line-height: 20px; padding: 10px 0px 10px 30px; font-size: 12px; font-weight: bold; text-align: center; color: #005EAD;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  header  */
#head {position: relative; float: left; width: 100%; height: 80px; z-index: 777;}
#head h1 {float: left; width: 160px; height: 40px; margin: 20px 0px 20px 10px;}
#head h1 a {width: 100%; height: 100%;}
#head h1 a img {width: 100%; height: auto; vertical-align: top;}
#head #menu {position: fixed; width: 300px; height: 20px; top: 50%; right: -280px; margin-top: -150px; transform-origin: top left; transform: rotate(90deg)translateY(-50%);}
#head #menu ul {float: left; width: 100%; height: auto;}
#head #menu ul {display: flex; flex-wrap: nowrap; justify-content: space-between;}
#head #menu ul li {line-height: 20px; font-size: 14px; font-weight: normal; text-align: center; text-shadow: 0px 0px 8px #333; letter-spacing: 2px;}
#head #menu ul li a {position: relative; color: #FFF;}
#head #menu ul li a::after {position: absolute; content: ""; width: 100%; height: 2px; left: 0; bottom: 0; background-color: #FFF; transform: translateY(10px); opacity: 0;}
#head #menu ul li.on a::after {transform: translateY(0px); opacity: 1;}
#head #menu_sub {float: right; width: 24px; height: 24px; margin-top: 25px; margin-right: 10px;}
#head #menu_sub a {position: relative; width: 100%; height: 100%; z-index: 10;}
#head #menu_sub a::before {position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background-color: #FFF; border-radius: 50%; box-shadow: 0px 0px 8px #777; z-index: 11;}
#head #menu_sub a::after {position: absolute; content: ""; width: 16px; height: 16px; top: 4px; left: 4px; background-color: #9A090C; border-radius: 50%; z-index: 12;}
#head #menu_sub a p {display: none;}
}

/*  02.  general - footer
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
#foot {float: left; width: 100%; height: auto; background-color: #31424E;}
#foot #foot_top {float: left; width: 100%; height: auto; background-color: #FFF; border-top: 1px solid #31424E; border-bottom: 1px solid #31424E;}
#foot #foot_top a {float: left; width: 100%; height: auto; padding: 20px; box-sizing: border-box;}
#foot #foot_top img {display: block; width: 30px; height: 30px; margin: auto;}
#foot #foot_top p {line-height: 20px; margin-top: 10px; font-size: 14px; font-weight: normal; text-align: center; letter-spacing: 2px; color: #3a9ad9;}
#foot #foot_copy {float: left; width: 100%; height: auto; padding: 20px; box-sizing: border-box;}
#foot #foot_copy p {line-height: 20px; font-size: 12px; font-weight: normal; text-align: center; letter-spacing: 2px; color: #FFF;}
#foot #foot_btnarea {clear:both; padding-top: 16px;font-size: 12px; text-align: center;}
#foot #foot_btnarea button {display: inline-block; background:none; border: none; padding: 0 8px;color: #DDD;text-decoration: underline; cursor: pointer;}
}

/*  sp  */
@media screen and (max-width: 979px) {
#foot {float: left; width: 100%; height: auto; background-color: #31424E;}
#foot #foot_top {float: left; width: 100%; height: auto; background-color: #FFF; border-top: 1px solid #31424E; border-bottom: 1px solid #31424E;}
#foot #foot_top a {float: left; width: 100%; height: auto; padding: 10px; box-sizing: border-box;}
#foot #foot_top img {display: block; width: 30px; height: 30px; margin: auto;}
#foot #foot_top p {line-height: 20px; font-size: 12px; font-weight: normal; text-align: center; letter-spacing: 2px; color: #3a9ad9;}
#foot #foot_copy {float: left; width: 100%; height: auto; padding: 20px; box-sizing: border-box;}
#foot #foot_copy p {line-height: 10px; font-size: 10px; font-weight: normal; text-align: center; letter-spacing: 1px; color: #FFF;}
}

/*  03.  general - content
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  content  */
.content_wrap {float: left; width: 100%; height: auto;}
.content {width: 100%; max-width: 1400px; margin: auto;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  content  */
.content_wrap {float: left; width: 100%; height: auto;}
.content {width: 100%; max-width: 600px; margin: auto;}
}

/*  04.  general - title
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  content  *//*  title  */
.content_title {float: left; width: 100%; height: auto;}
.content_title h2,
.content_title h3 {line-height: 60px; font-size: 60px; font-weight: bold; font-style: italic; text-align: center; letter-spacing: 4px; color: #005EAD;}
.content_title p.text {line-height: 30px; margin-top: 10px; font-size: 16px; font-weight: normal; text-align: center; letter-spacing: 1px; color: #777;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  content  *//*  title  */
.content_title {float: left; width: 100%; height: auto;}
.content_title h2,
.content_title h3 {line-height: 36px; font-size: 24px; font-weight: bold; font-style: italic; text-align: center; letter-spacing: 2px; color: #005EAD;}
.content_title p.text {line-height: 20px; margin-top: 0px; font-size: 12px; font-weight: normal; text-align: center; letter-spacing: 1px; color: #777;}
}

/*  05.  scroll animation
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  content  *//*  scroll animation  */
.move {opacity: 1!important; visibility: visible!important; transform: translateY(0)!important;}
.animation {opacity : 0; visibility: hidden; transform: translateY(60px);}
.animation {transition: all 1.4s!important;}
.animation01 {transition-delay: 0.2s!important;}
.animation02 {transition-delay: 0.6s!important;}
.animation03 {transition-delay: 1.0s!important;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  content  *//*  scroll animation  */
.move {opacity: 1!important; visibility: visible!important; transform: translateY(0)!important;}
.animation {opacity : 0; visibility: hidden; transform: translateY(60px);}
.animation {transition: all 1.4s!important;}
.animation01 {transition-delay: 0.2s!important;}
.animation02 {transition-delay: 0.4s!important;}
.animation03 {transition-delay: 0.6s!important;}
}

/*  06. loading
----------------------------------------*/
/*  loading  */
.load_group01 div,
.load_group02 div {position: fixed; content: ""; width: 100vw; height: 100%; top: 0; left: -100vw; pointer-events: none;}
.load_group01 div {transition: all 0.6s; z-index: 999;}
.load_group02 div {transition: all 0.8s; z-index: 998;}
.load_group01 div:nth-of-type(1) {background: rgba(0,94,173,0.2);}
.load_group01 div:nth-of-type(2) {background: rgba(0,94,173,0.6); transition-delay: 0.1s;}
.load_group01 div:nth-of-type(3) {background: rgba(0,94,173,0.8); transition-delay: 0.2s;}
.load_group01 div:nth-of-type(4) {background: rgba(0,94,173,1.0); transition-delay: 0.3s;}
.load_group02 div:nth-of-type(1) {background: rgba(0,94,173,0.8); transition-delay: 0.2s;}
.load_group02 div:nth-of-type(2) {background: rgba(0,94,173,0.8); transition-delay: 0.3s;}
body.loading .load_group01 div{left: 0;}
body.loading .load_group02 div{left: 100vw;}

/*  ex.  animation
------------------------------*/
/*  animation  */
#head #menu ul li a,
#head #menu ul li button,
#head #menu ul li a::after,
#head #menu ul li button::after {transition: all 0.4s;}

#head #menu_sub a {transition: all 0.4s;}

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  mv
/*  02.  top page - service
/*  03.  top page - product
/*  04.  top page - about
/*  05.  top page - profile
--------------------------------
------------------------------*/

/*  01.  mv
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  mv  */
#mv {position: relative; float: left; width: 100%; height: 100%; margin-top: -170px;}

/*  mv  *//*  image  */
#mv .image {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;}
#mv .image .wrap {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.8); z-index: 2;}
#mv .image .bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; z-index: 1;}
	
/*  mv  *//*  text  */
#mv .text {position: absolute; width: 100%; height: auto; top: 50%; left: 0; transform: translateY(-50%); z-index: 3;}
#mv .text p.main {line-height: 70px; font-size: 60px; font-weight: bold; text-align: center; letter-spacing: 4px; color: #FFF;}
#mv .text p.sub {line-height: 30px; margin-top: 20px; font-size: 18px; font-weight: normal; text-align: center; letter-spacing: 2px; color: #FFF;}

/*  mv  *//*  scroll  */
#mv .scroll {position: absolute; width: 160px; height: auto; right: 40px; bottom: 40px; transform-origin: top right; transform: rotate(90deg); z-index: 7;}
#mv .scroll {display: flex; flex-wrap: nowrap;}
#mv .scroll p {width: 80px; line-height: 20px; font-size: 12px; font-weight: bold; letter-spacing: 2px; color: #FFF;}
#mv .scroll .line {position: relative; width: 80px;}
#mv .scroll .line::after {position: absolute; content: ""; height: 2px; top: 50%; margin-top: -1px; background-color: #FFF; animation-name: scroll-down; animation-duration: 2s; animation-timing-function: cubic-bezier(.415,.15,.15,1); animation-iteration-count: infinite;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  mv  */
#mv {position: relative; float: left; width: 100%; height: 100%; margin-top: -80px;}

/*  mv  *//*  image  */
#mv .image {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;}
#mv .image .wrap {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.8); z-index: 2;}
#mv .image .bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; z-index: 1;}
	
/*  mv  *//*  text  */
#mv .text {position: absolute; width: 100%; height: auto; top: 50%; left: 0; padding: 0px 40px 0px 10px; box-sizing: border-box; transform: translateY(-50%);}
#mv .text p.main {line-height: 9vw; font-size: 7vw; font-weight: bold; letter-spacing: 0px; color: #FFF;}
#mv .text p.sub {line-height: 20px; margin-top: 10px; font-size: 12px; font-weight: normal; letter-spacing: 1px; color: #FFF;}
#mv .text p.sub br {display: none;}

/*  mv  *//*  scroll  */
#mv .scroll {position: absolute; width: 120px; height: auto; left: 40px; bottom: 120px; transform-origin: top left; transform: rotate(90deg); z-index: 7;}
#mv .scroll {display: flex; flex-wrap: nowrap;}
#mv .scroll p {width: 60px; line-height: 20px; font-size: 10px; font-weight: bold; letter-spacing: 2px; color: #FFF;}
#mv .scroll .line {position: relative; width: 60px;}
#mv .scroll .line::after {position: absolute; content: ""; height: 1px; top: 50%; margin-top: 0px; background-color: #FFF; animation-name: scroll-down; animation-duration: 2s; animation-timing-function: cubic-bezier(.415,.15,.15,1); animation-iteration-count: infinite;}
}

@keyframes scroll-down {
     0% {left: 0; width: 0%;}
     50% {left: 0; width: 100%;}
     100% {left: 100%; width: 0%;}
}

/*  02.  top page - service
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  service  */
#top-page_service {position: relative; padding: 40px 80px 240px 80px; background-color: #005EAD; box-sizing: border-box;}
#top-page_service::before {position: absolute; content: ""; width: 0; height: 0; top: -300px; left: 0; border-left: 100vw solid transparent; border-bottom: 300px solid #005EAD; z-index: 1;}
#top-page_service::after {position: absolute; content: ""; width: 0; height: 0; top: -200px; left: 0; border-right: 100vw solid transparent; border-bottom: 200px solid #31424E; z-index: -1;}
#top-page_service .content {width: 800px;}
#top-page_service #top-page_service-body .content_title h2 {color: #FFF;}
#top-page_service #top-page_service-body .content_title p {color: #BBB;}
#top-page_service #top-page_service-body {float: left; width: 100%; height: auto;}
#top-page_service #top-page_service-body .text-area {position: relative; float: left; width: 100%; height: auto; margin-top: 80px;}
#top-page_service #top-page_service-body .text-area:last-of-type {margin-top: 40px;}
#top-page_service #top-page_service-body .text-area:last-of-type::before {position: absolute; content: ""; width: 100px; height: 100px; top: -140px; left: -120px; background-image: url("../image/icon_quote01.png"); background-size: 100%; background-position: center; background-repeat: no-repeat;}
#top-page_service #top-page_service-body .text-area:last-of-type::after {position: absolute; content: ""; width: 100px; height: 100px; bottom: -60px; right: -100px; background-image: url("../image/icon_quote02.png"); background-size: 100%; background-position: center; background-repeat: no-repeat;}
#top-page_service #top-page_service-body .text-area p.main {line-height: 40px; margin-top: 40px; font-size: 24px; font-weight: bold; letter-spacing: 1px; color: #FFF;}
#top-page_service #top-page_service-body .text-area p.sub {line-height: 40px; margin-top: 40px; font-size: 16px; font-weight: normal; letter-spacing: 1px; color: #E9E0D6;}
#top-page_service #top-page_service-body .text-area p.message {line-height: 30px; margin-top: 40px; font-size: 16px; font-weight: normal; font-family: 'Libre Bodoni', serif; letter-spacing: 1px; color: #FFF;}
#top-page_service #top-page_service-body .text-area p:first-of-type {margin-top: 0px;}
#top-page_service #top-page_service-body .text-area ul {float: left; width: 100%; height: auto; margin-top: 40px; margin-bottom: 40px;}
#top-page_service #top-page_service-body .text-area ul li {float: left; width: 100%; height: auto; line-height: 30px; margin-top: 5px; font-size: 18px; font-weight: bold; font-style: italic; letter-spacing: 1px; color: #FFF;}
#top-page_service #top-page_service-body .text-area ul li:first-of-type {margin-top: 0px;}
#top-page_service #top-page_service-body .text-area .box {position: relative; float: left; width: 100%; height: auto; margin-top: 80px; margin-bottom: 80px; text-align: center;}
#top-page_service #top-page_service-body .text-area .box::after {position: absolute; content: ""; width: 30px; height: 30px; top: 50%; left: 50%; margin-top: -15px; background-image: url("../image/yajirushi.png"); background-size: 100%; background-position: center; background-repeat: no-repeat; transform: translate(-50%,-50%);}
#top-page_service #top-page_service-body .text-area .box p {display: inline-block; width: auto; height: auto; line-height: 30px; padding: 10px 20px 10px 20px; margin-top: 60px; font-size: 16px; font-weight: bold; text-align: center; letter-spacing: 1px; color: #000; background-color: #FFF; border-radius: 10px;}
#top-page_service #top-page_service-body .text-area .box p:first-of-type {margin: 0px;}
#top-page_service #top-page_service-body .text-area .box p span {font-size: 14px;}
#top-page_service #top-page_service-body .text-area .profile {position: relative; float: left; width: 100%; height: auto; margin-top: 80px;}
#top-page_service #top-page_service-body .text-area .profile p.company {line-height: 30px; font-size: 16px; font-weight: normal; font-family: 'Libre Bodoni', serif; letter-spacing: 1px; color: #FFF;}
#top-page_service #top-page_service-body .text-area .profile p.name {line-height: 30px; margin-top: 5px; font-size: 30px; font-weight: normal; letter-spacing: 1px; color: #FFF;}
#top-page_service #top-page_service-body .text-area .profile p.name span {margin-right: 20px; font-size: 14px; font-weight: normal;}
#top-page_service #top-page_service-body .text-area .profile p.name br {display: none;}
#top-page_service #top-page_service-body .text-area .profile img {position: absolute; width: 260px; height: auto; right: 0px; bottom: -200px;}
#top-page_service #top-page_service-body .caset-title {float: left; width: 100%; height: auto; margin-top: 80px;}
#top-page_service #top-page_service-body .caset-title h3 {line-height: 40px; font-size: 30px; font-weight: bold; font-style: italic; letter-spacing: 2px; color: #FFF;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  service  */
#top-page_service {position: relative; padding: 20px 40px 80px 20px; background-color: #005EAD; box-sizing: border-box;}
#top-page_service::before {position: absolute; content: ""; width: 0; height: 0; top: -200px; left: 0; border-left: 100vw solid transparent; border-bottom: 200px solid #005EAD; z-index: 1;}
#top-page_service::after {position: absolute; content: ""; width: 0; height: 0; top: -100px; left: 0; border-right: 100vw solid transparent; border-bottom: 100px solid #31424E; z-index: -1;}
#top-page_service #top-page_service-body .content_title h2 {color: #FFF;}
#top-page_service #top-page_service-body .content_title p {color: #BBB;}
#top-page_service #top-page_service-body {float: left; width: 100%; height: auto;}
#top-page_service #top-page_service-body .text-area {position: relative; float: left; width: 100%; height: auto; margin-top: 40px;}
#top-page_service #top-page_service-body .text-area:last-of-type {margin-top: 20px;}
#top-page_service #top-page_service-body .text-area:last-of-type::before {position: absolute; content: ""; width: 80px; height: 80px; top: -130px; left: -20px; background-image: url("../image/icon_quote01.png"); background-size: 100%; background-position: center; background-repeat: no-repeat; opacity: 0.3; z-index: 1;}
#top-page_service #top-page_service-body .text-area:last-of-type::after {position: absolute; content: ""; width: 80px; height: 80px; bottom: -60px; right: -30px; background-image: url("../image/icon_quote02.png"); background-size: 100%; background-position: center; background-repeat: no-repeat; opacity: 0.3; z-index: 2;}
#top-page_service #top-page_service-body .text-area p.main {line-height: 36px; margin-top: 20px; font-size: 20px; font-weight: bold; letter-spacing: 1px; color: #FFF;}
#top-page_service #top-page_service-body .text-area p.sub {line-height: 30px; margin-top: 20px; font-size: 14px; font-weight: normal; letter-spacing: 1px; color: #E9E0D6;}
#top-page_service #top-page_service-body .text-area p.message {line-height: 24px; margin-top: 20px; font-size: 14px; font-weight: normal; font-family: 'Libre Bodoni', serif; letter-spacing: 1px; color: #FFF;}
#top-page_service #top-page_service-body .text-area p:first-of-type {margin-top: 0px;}
#top-page_service #top-page_service-body .text-area ul {float: left; width: 100%; height: auto; margin-top: 40px; margin-bottom: 40px;}
#top-page_service #top-page_service-body .text-area ul li {float: left; width: 100%; height: auto; line-height: 24px; margin-top: 10px; font-size: 16px; font-weight: bold; font-style: italic; letter-spacing: 0px; color: #FFF;}
#top-page_service #top-page_service-body .text-area ul li:first-of-type {margin-top: 0px;}
#top-page_service #top-page_service-body .text-area .box {position: relative; float: left; width: 100%; height: auto; margin-top: 40px; margin-bottom: 40px; text-align: center;}
#top-page_service #top-page_service-body .text-area .box::after {position: absolute; content: ""; width: 30px; height: 30px; top: 50%; left: 50%; margin-top: -10px; background-image: url("../image/yajirushi.png"); background-size: 100%; background-position: center; background-repeat: no-repeat; transform: translate(-50%,-50%);}
#top-page_service #top-page_service-body .text-area .box p {display: inline-block; width: auto; height: auto; line-height: 30px; padding: 10px; margin-top: 60px; font-size: 16px; font-weight: bold; text-align: center; letter-spacing: 0px; color: #000; background-color: #FFF; border-radius: 10px;}
#top-page_service #top-page_service-body .text-area .box p:first-of-type {margin: 0px;}
#top-page_service #top-page_service-body .text-area .box p span {display: block; line-height: 20px; font-size: 12px;}
#top-page_service #top-page_service-body .text-area .profile {position: relative; float: left; width: 100%; height: auto; margin-top: 80px; z-index: 3;}
#top-page_service #top-page_service-body .text-area .profile p.company {position: relative; line-height: 20px; font-size: 14px; font-weight: normal; font-family: 'Libre Bodoni', serif; letter-spacing: 1px; color: #FFF; z-index: 2;}
#top-page_service #top-page_service-body .text-area .profile p.name {position: relative; line-height: 30px; font-size: 30px; font-weight: bold; letter-spacing: 1px; color: #FFF; z-index: 2;}
#top-page_service #top-page_service-body .text-area .profile p.name span {display: inline-block; line-height: 20px; margin-bottom: 5px; font-size: 14px; font-weight: normal;}
#top-page_service #top-page_service-body .text-area .profile img {position: absolute; width: 190px; height: auto; right: -10px; bottom: -80px; z-index: 1;}
#top-page_service #top-page_service-body .caset-title {position: relative; float: left; width: 100%; height: auto; margin-top: 80px; z-index: 111;}
#top-page_service #top-page_service-body .caset-title h3 {line-height: 30px; font-size: 20px; font-weight: bold; font-style: italic; letter-spacing: 1px; color: #FFF;}
}

/*  03.  top page - product
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  product  */
#top-page_product {display: none;}
#top-page_product {position: relative; padding: 40px 80px 80px 80px; background-color: #354458; box-sizing: border-box;}
#top-page_product::before {position: absolute; content: ""; width: 0; height: 0; top: -100px; left: 0; border-right: 100vw solid transparent; border-bottom: 100px solid #354458; z-index: 2;}
#top-page_product::after {position: absolute; content: ""; width: 0; height: 0; top: -200px; right: 0; border-left: 50vw solid transparent; border-bottom: 200px solid #31424E; z-index: 1;}
#top-page_product #top-page_product-body {float: left; width: 100%; height: auto;}
#top-page_product #top-page_product-body .content_title h2 {color: #FFF;}
#top-page_product #top-page_product-body .content_title p {color: #BBB;}
#top-page_product #top-page_product-body .text-area {float: left; width: 100%; height: auto; margin-top: 40px;}
#top-page_product #top-page_product-body .text-area .content {width: 800px;}
#top-page_product #top-page_product-body .text-area p {line-height: 30px; margin-top: 40px; font-size: 14px; font-weight: normal; letter-spacing: 1px; color: #FFF;}
#top-page_product #top-page_product-body .text-area p:first-of-type {margin-top: 0px;}
#top-page_product #top-page_product-body .detail-area {position: relative; float: left; width: 100%; height: auto; margin-top: 80px; z-index: 3;}
#top-page_product #top-page_product-body .detail-area {display: flex; flex-wrap: wrap; justify-content: space-between;}
#top-page_product #top-page_product-body .detail-area::before {display: block; content: ""; width: calc(100% / 3 - 40px); order: 1;}
#top-page_product #top-page_product-body .detail-area::after {display: block; content: ""; width: calc(100% / 3 - 40px); order: 1;}
#top-page_product #top-page_product-body .detail-area .cell {width: calc(100% / 3 - 40px); margin-bottom: 60px; background-color: #FFF; border-radius: 40px 10px 40px 10px; overflow: hidden;}
#top-page_product #top-page_product-body .detail-area .cell .image {float: left; width: 100%; height: auto; padding: 20px 0px 20px 0px; background-color: #EEE; border-bottom: 8px solid #354458;}
#top-page_product #top-page_product-body .detail-area .cell .image img {display: block; width: 140px; height: 140px; margin: auto; vertical-align: top;}
#top-page_product #top-page_product-body .detail-area .cell .text {float: left; width: 100%; height: auto; padding: 20px; margin-top: 8px; box-sizing: border-box;}
#top-page_product #top-page_product-body .detail-area .cell .text h3 {line-height: 30px; font-size: 24px; font-weight: bold; text-align: center; text-shadow: 2px 2px 0px #CCC; letter-spacing: 0px; color: #005EAD;}
#top-page_product #top-page_product-body .detail-area .cell .text p {line-height: 30px; margin-top: 10px; font-size: 14px; font-weight: normal; letter-spacing: 0px; color: #333;}
}

/*  sp  */
@media screen and (max-width: 979px) {
#top-page_product {display: none;}
#top-page_product {position: relative; padding: 20px 40px 120px 20px; background-color: #354458; box-sizing: border-box;}
#top-page_product::before {position: absolute; content: ""; width: 0; height: 0; top: -100px; left: 0; border-right: 100vw solid transparent; border-bottom: 100px solid #354458; z-index: 5;}
#top-page_product::after {position: absolute; content: ""; width: 0; height: 0; top: -100px; right: 0; border-left: 50vw solid transparent; border-bottom: 100px solid #31424E; z-index: 1;}
#top-page_product #top-page_product-body {float: left; width: 100%; height: auto;}
#top-page_product #top-page_product-body .content_title h2 {color: #FFF;}
#top-page_product #top-page_product-body .content_title p {color: #BBB;}
#top-page_product #top-page_product-body .text-area {float: left; width: 100%; height: auto; margin-top: 40px;}
#top-page_product #top-page_product-body .text-area p {line-height: 30px; margin-top: 40px; font-size: 14px; font-weight: normal; letter-spacing: 1px; color: #FFF;}
#top-page_product #top-page_product-body .text-area p:first-of-type {margin-top: 0px;}
#top-page_product #top-page_product-body .detail-area {position: relative; float: left; width: 100%; height: auto; margin-top: 40px; z-index: 3;}
#top-page_product #top-page_product-body .detail-area {display: flex; flex-wrap: wrap;}
#top-page_product #top-page_product-body .detail-area .cell {width: 100%; margin-bottom: 20px; background-color: #FFF; border-radius: 40px 10px 40px 10px; overflow: hidden;}
#top-page_product #top-page_product-body .detail-area .cell .image {float: left; width: 100%; height: auto; padding: 20px 0px 20px 0px; background-color: #EEE; border-bottom: 8px solid #354458;}
#top-page_product #top-page_product-body .detail-area .cell .image img {display: block; width: 100px; height: 100px; margin: auto; vertical-align: top;}
#top-page_product #top-page_product-body .detail-area .cell .text {float: left; width: 100%; height: auto; padding: 20px 10px 20px 10px; margin-top: 8px; box-sizing: border-box;}
#top-page_product #top-page_product-body .detail-area .cell .text h3 {line-height: 30px; font-size: 20px; font-weight: bold; text-align: center; text-shadow: 2px 2px 0px #CCC; letter-spacing: 1px; color: #005EAD;}
#top-page_product #top-page_product-body .detail-area .cell .text p {line-height: 20px; margin-top: 10px; font-size: 12px; font-weight: normal; letter-spacing: 0px; color: #333;}
}

/*  04.  top page - about
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  about  */
#top-page_about {position: relative; padding: 40px 80px 160px 80px; background-color: #3A9AD9; box-sizing: border-box;}
#top-page_about::before {position: absolute; content: ""; width: 0; height: 0; top: -200px; left: 0; border-right: 100vw solid transparent; border-bottom: 200px solid #3A9AD9; z-index: 1;}
#top-page_about #top-page_about-body {float: left; width: 100%; height: auto;}
#top-page_about #top-page_about-body {display: flex; flex-wrap: nowrap;}
#top-page_about #top-page_about-body .content_title {width: 50%; padding-left: 80px; box-sizing: border-box; order: 2;}
#top-page_about #top-page_about-body .content_title h2 {text-align: left; color: #FFF;}
#top-page_about #top-page_about-body .content_title p {text-align: left; color: #BBB;}
#top-page_about #top-page_about-body .content_title .sub-title {float: left; width: 100%; height: auto; margin-top: 40px;}
#top-page_about #top-page_about-body .content_title .sub-title p {float: left; width: 100%; height: auto; line-height: 40px; margin-bottom: 40px; font-size: 20px; font-weight: normal; letter-spacing: 1px; color: #E9E0D6;}
#top-page_about #top-page_about-body .content_title .sub-title .bg {position: relative; float: left; width: 100%; height: auto; padding-top: 150%; background-size: cover; background-position: center; z-index: 777;}
#top-page_about #top-page_about-body .detail-area {position: relative; width: 50%; height: auto; z-index: 3; order: 1;}
#top-page_about #top-page_about-body .detail-area .cell {width: 100%; height: auto; margin-bottom: 80px; overflow: hidden;}
#top-page_about #top-page_about-body .detail-area .cell h3 {position: relative; display: inline-block; line-height: 30px; padding-bottom: 24px; font-size: 30px; font-weight: normal; letter-spacing: 2px; color: #FFF;}
#top-page_about #top-page_about-body .detail-area .cell h3::after {position: absolute; content: ""; width: 100px; height: 6px; left: 0; bottom: 0; background-color: #E9E0D6; border-radius: 0px 10px 10px 0px;}
#top-page_about #top-page_about-body .detail-area .cell p {line-height: 30px; margin-top: 20px; font-size: 18px; font-weight: normal; letter-spacing: 2px; color: #FFF;}
#top-page_about #top-page_about-body .detail-area .cell a {position: relative; display: inline-block; line-height: 20px; padding: 10px 0px 10px 0px; margin-top: 20px; font-size: 14px; font-weight: bold; letter-spacing: 1px; color: #FFF;}
#top-page_about #top-page_about-body .detail-area .cell a::before {position: absolute; content: ""; width: 0px; height: 2px; left: 0; bottom: 0; background-color: #FFF;}
#top-page_about #top-page_about-body .detail-area .cell a:hover::before {width: 100%;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  about  */
#top-page_about {position: relative; padding: 20px 40px 80px 20px; background-color: #3A9AD9; box-sizing: border-box;}
#top-page_about::before {position: absolute; content: ""; width: 0; height: 0; top: -50px; left: 0; border-right: 100vw solid transparent; border-bottom: 50px solid #3A9AD9; z-index: 3;}
#top-page_about #top-page_about-body {float: left; width: 100%; height: auto;}
#top-page_about #top-page_about-body .content_title {float: left; width: 100%; height: auto; box-sizing: border-box; order: 2;}
#top-page_about #top-page_about-body .content_title h2 {color: #FFF;}
#top-page_about #top-page_about-body .content_title p {color: #BBB;}
#top-page_about #top-page_about-body .content_title .sub-title {float: left; width: 100%; height: auto; margin-top: 20px; overflow: hidden;}
#top-page_about #top-page_about-body .content_title .sub-title .bg {position: relative; float: left; width: 100vw; height: auto; padding-top: 100%; left: 50%; margin-left: 10px; background-size: cover; background-position: center; transform: translateX(-50%); z-index: 10;}
#top-page_about #top-page_about-body .detail-area {position: relative; float: left; width: 100%; height: auto; z-index: 3;}
#top-page_about #top-page_about-body .detail-area .cell {width: 100%; height: auto; margin-top: 40px; overflow: hidden;}
#top-page_about #top-page_about-body .detail-area .cell h3 {position: relative; display: inline-block; line-height: 30px; padding-bottom: 12px; font-size: 24px; font-weight: normal; letter-spacing: 2px; color: #FFF;}
#top-page_about #top-page_about-body .detail-area .cell h3::after {position: absolute; content: ""; width: 50px; height: 4px; left: 0; bottom: 0; background-color: #E9E0D6; border-radius: 0px 5px 5px 0px;}
#top-page_about #top-page_about-body .detail-area .cell p {line-height: 30px; margin-top: 10px; font-size: 14px; font-weight: normal; letter-spacing: 1px; color: #FFF;}
#top-page_about #top-page_about-body .detail-area .cell a {position: relative; display: inline-block; line-height: 20px; padding: 10px 20px 10px 0px; margin-top: 20px; font-size: 16px; font-weight: bold; letter-spacing: 0px; color: #FFF;}
#top-page_about #top-page_about-body .detail-area .cell a::before {position: absolute; content: ""; width: 10px; height: 10px; top: 16px; right: 0px; border: 1px solid #FFF;}
#top-page_about #top-page_about-body .detail-area .cell a::after {position: absolute; content: ""; width: 10px; height: 10px; top: 13px; right: -3px; border: 1px solid #FFF;}
}

/*  05.  top page - profile
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  profile  */
#top-page_profile {position: relative; padding: 40px 80px 160px 80px; background-color: #E9E0D6; box-sizing: border-box;}
#top-page_profile::before {position: absolute; content: ""; width: 0; height: 0; top: -200px; left: 0; border-left: 100vw solid transparent; border-bottom: 200px solid #E9E0D6; z-index: 1;}
#top-page_profile #top-page_profile-body {float: left; width: 100%; height: auto;}
#top-page_profile #top-page_profile-body {display: flex; flex-wrap: nowrap;}
#top-page_profile #top-page_profile-body .title-area {width: 50%; height: auto; padding-right: 80px; box-sizing: border-box;}
#top-page_profile #top-page_profile-body .title-area .content_title h2 {text-align: left;}
#top-page_profile #top-page_profile-body .title-area .content_title p {text-align: left;}
#top-page_profile #top-page_profile-body .title-area .text-area {float: left; width: 100%; height: auto; margin-top: 80px;}
#top-page_profile #top-page_profile-body .title-area .text-area h3 {line-height: 30px; font-size: 30px; font-weight: bold; font-style: italic; letter-spacing: 2px; color: #2CA2E0;}
#top-page_profile #top-page_profile-body .title-area .text-area p {line-height: 40px; margin-top: 20px; font-size: 18px; font-weight: normal; font-family: 'Libre Bodoni', serif; letter-spacing: 2px;}
#top-page_profile #top-page_profile-body .detail-area {width: 50%; height: auto;}
#top-page_profile #top-page_profile-body .detail-area dl {float: left; width: 100%; height: auto; margin-top: 40px; border-bottom: 1px solid #AAA;}
#top-page_profile #top-page_profile-body .detail-area dl {display: flex; flex-wrap: wrap;}
#top-page_profile #top-page_profile-body .detail-area dl:last-of-type,
#top-page_profile #top-page_profile-body .detail-area dl:nth-last-of-type(2) {border: 0px;}
#top-page_profile #top-page_profile-body .detail-area dl dt {width: 100%; line-height: 30px; font-size: 20px; font-weight: normal; letter-spacing: 1px;}
#top-page_profile #top-page_profile-body .detail-area dl dt img {width: 150px; height: auto; vertical-align: top;}
#top-page_profile #top-page_profile-body .detail-area dl dt a {display: inline-block;}
#top-page_profile #top-page_profile-body .detail-area dl dd {width: 100%; line-height: 30px; margin-top: 5px; padding-bottom: 20px; font-size: 16px; font-weight: normal; letter-spacing: 1px;}
#top-page_profile #top-page_profile-body .detail-area dl dd a {display: inline-block; line-height: 20px; font-size: 12px; font-weight: bold; text-decoration: underline;letter-spacing: 1px; color: #000;}
#top-page_profile #top-page_profile-body .detail-area dl dd a:hover {text-decoration: none;}
#top-page_profile #top-page_profile-body .detail-area dl:nth-last-of-type(2) dd {line-height: 20px; margin-top: 10px; font-size: 12px; color: #000;}
#top-page_profile #top-page_profile-body .detail-area dl:nth-last-of-type(2) dd span {clear: both; display: block; margin-top: 20px;}
#top-page_profile #top-page_profile-body .detail-area dl dd ul {float: left; width: 100%; height: auto;}
#top-page_profile #top-page_profile-body .detail-area dl dd ul li {float: left; width: 100%; height: auto; margin-top: 5px; font-size: 16px; font-weight: normal; letter-spacing: 1px;}
#top-page_profile #top-page_profile-body .detail-area dl dd ul li:first-of-type {margin-top: 0px;}
#top-page_profile #top-page_profile-body .detail-area dl dd ul li span {margin-left: 10px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  profile  */
#top-page_profile {position: relative; padding: 20px 50px 80px 30px; background-color: #E9E0D6; box-sizing: border-box;}
#top-page_profile::before {position: absolute; content: ""; width: 0; height: 0; top: -100px; left: 0; border-left: 100vw solid transparent; border-bottom: 100px solid #E9E0D6; z-index: 1;}
#top-page_profile #top-page_profile-body {float: left; width: 100%; height: auto;}
#top-page_profile #top-page_profile-body .title-area {float: left; width: 100%; height: auto; box-sizing: border-box;}
#top-page_profile #top-page_profile-body .title-area .text-area {float: left; width: 100%; height: auto; margin-top: 40px;}
#top-page_profile #top-page_profile-body .title-area .text-area h3 {line-height: 20px; font-size: 20px; font-weight: bold; font-style: italic; letter-spacing: 2px; color: #2CA2E0;}
#top-page_profile #top-page_profile-body .title-area .text-area p {line-height: 30px; margin-top: 10px; font-size: 16px; font-weight: normal; font-family: 'Libre Bodoni', serif; letter-spacing: 1px;}
#top-page_profile #top-page_profile-body .detail-area {float: left; width: 100%; height: auto; margin-top: 20px;}
#top-page_profile #top-page_profile-body .detail-area dl {float: left; width: 100%; height: auto; margin-top: 20px;}
#top-page_profile #top-page_profile-body .detail-area dl:last-of-type {border: 0px;}
#top-page_profile #top-page_profile-body .detail-area dl {display: flex; flex-wrap: wrap;}
#top-page_profile #top-page_profile-body .detail-area dl dt {width: 100%; line-height: 20px; font-size: 14px; font-weight: bold; letter-spacing: 1px;}
#top-page_profile #top-page_profile-body .detail-area dl dt img {width: 120px; height: auto; vertical-align: top;}
#top-page_profile #top-page_profile-body .detail-area dl dt a {display: inline-block;}
#top-page_profile #top-page_profile-body .detail-area dl dd {width: 100%; line-height: 20px; margin-top: 10px; padding-bottom: 10px; font-size: 14px; font-weight: normal; letter-spacing: 2px;}
#top-page_profile #top-page_profile-body .detail-area dl dd a {display: inline-block; line-height: 20px; font-size: 12px; font-weight: bold; text-decoration: underline;letter-spacing: 1px; color: #000;}
#top-page_profile #top-page_profile-body .detail-area dl:nth-last-of-type(2) dd {line-height: 15px; margin-top: 10px; font-size: 10px; color: #000;}
#top-page_profile #top-page_profile-body .detail-area dl:nth-last-of-type(2) dd span {clear: both; display: block; margin-top: 10px;}
#top-page_profile #top-page_profile-body .detail-area dl dd ul {float: left; width: 100%; height: auto;}
#top-page_profile #top-page_profile-body .detail-area dl dd ul li {float: left; width: 100%; height: auto; margin-top: 10px; font-size: 14px; font-weight: normal; letter-spacing: 1px;}
#top-page_profile #top-page_profile-body .detail-area dl dd ul li:first-of-type {margin-top: 0px;}
#top-page_profile #top-page_profile-body .detail-area dl dd ul li span {display: block; margin-top: -5px; font-size: 10px;}
}

/*  ex.  animation
------------------------------*/
/*  animation  */
#top-page_about #top-page_about-body .detail-area .cell a::before {transition: all 0.4s;}

body#terms_popup h1 {
    position: fixed;
    z-index: 98;
    top: 0px;
    left: 0px;
    width: 100%;
    padding: 20px 26px 21px;
    font-size: 24px;
    line-height: 1;
    color: #005EAD;
    border-bottom: 1px solid #DEDEDE;
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.95);
    margin: 0px;
    font-weight: 500;
    display: block;
    }


body#terms_popup h2 {
    width: 100%;
    padding: 20px 26px 21px;
    font-size: 24px;
    line-height: 1;
    color: #005EAD;
    border-bottom: 1px solid #DEDEDE;
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.95);
    margin: 0px;
    font-weight: 500;
    display: block;
    }


body#terms_popup .popup_cont {
    padding: 92px 26px 34px;
}

body#terms_popup .popup_cont1 {
    padding: 32px 26px 34px;
}

body#terms_popup h3 {
    font-size:20px;
    margin-top:30px;
}

body#terms_popup h4 {
    font-size:20px;
    margin-bottom:10px;
}

body#terms_popup p {
    line-height:1.8em;
}

body#terms_popup button.btn_close {
    position: fixed;
    top: 19px;
    right: 26px;
    z-index: 99;
    width: 24px;
    height: 24px;
    opacity: 0.75;
}

body#terms_popup button.btn_close img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}