@charset "UTF-8";
/* CSS Document */
/* ------------------------------------ #################################### 共通要素 #################################### ------------------------------------ */
/* CSS Document */
/* ------------------------------------ #################################### 共通設定 #################################### ------------------------------------ */
/* ------------------------------------ MediaScreen指定 ------------------------------------ */
/* ------------------------------------ ベースプロパティ ------------------------------------ */
/* ------------------------------------ FONT指定 ------------------------------------ */
/* CSS Document */
/* ------------------------------------ #################################### module #################################### ------------------------------------ */
body { background: #fff; color: #333333; font-family: 'Montserrat', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; line-height: 1.5; font-size: 14px; }

a { text-decoration: none; -webkit-transition: 0.3s; transition: 0.3s; color: #333; }

.wrap { width: 100%; overflow: hidden; }

/* ------------------------------------ HEADER ------------------------------------ */
header { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0); transition: 0.3s; }

header h1 { margin: 0 1.5em; }

/* ------------------------------------ GNAVI ------------------------------------ */
.gnav a { color: #fff; }

.gnav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

.gnav ul li { position: relative; }

.gnav ul li a { padding: 0 1.0em; display: block; position: relative; }

.gnav ul li a:after { content: ''; position: absolute; left: 50%; -webkit-transform: translateX(-50%) rotate(0deg); transform: translateX(-50%) rotate(0deg); -moz-transform: translateX(-50%) rotate(0deg); bottom: -10px; width: 0; height: 2px; transition: 0.5s; background: #fff; }

.gnav ul li a:hover:after { width: 40%; }

.gnav .contact { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; margin: 0 10px; }

.gnav .contact a:after { content: none; }

.gnav .contact em { display: inline-block; margin-right: 1em; }

.gnav .contact em img { vertical-align: middle; }

.gnav .contact a { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; background: #ffc80a; border-radius: 25px; padding: 5px 15px 5px 5px; }

.gnav .contact a:hover { background: #ffa052; }

header.active { position: fixed; background: #222; }

/* ------------------------------------ FOOTER ------------------------------------ */
footer { padding: 20px 0; text-align: center; background: #fff; font-size: 90%; }

/* ------------------------------------ COMMON Class ------------------------------------ */
.sp { display: none; }

.pc { display: block; }

h3 { text-align: center; margin-bottom: 5px; font-size: 200%; }

h3 + p { text-align: center; margin-bottom: 40px; }

h3 + p span { position: relative; margin: 0 auto; font-size: 90%; letter-spacing: 2px; color: #666666; }

h3 + p span:after, h3 + p span:before { position: absolute; content: ''; height: 1px; width: 25px; top: 50%; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -moz-transform: translateY(-50%) rotate(0deg); background: #ddd; }

h3 + p span:before { left: -40px; }

h3 + p span:after { right: -40px; }

.inner { max-width: 1080px; margin: 0 auto; }

/* ------------------------------------ MainVisual ------------------------------------ */
#mainvis { position: relative; background: url("../img/visual.jpg") no-repeat center center; background-size: cover; height: 100vh; width: 100%; color: #fff; }

#mainvis .inner { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); text-align: center; }

#mainvis .inner p { margin-top: 20px; line-height: 1.8; }

#mainvis .scroll { position: absolute; left: 50%; -webkit-transform: translateX(-50%) rotate(0deg); transform: translateX(-50%) rotate(0deg); -moz-transform: translateX(-50%) rotate(0deg); bottom: 75px; }

#mainvis .scroll dt { position: relative; }

#mainvis .scroll dt a { display: block; width: 20px; height: 38px; border: 2px solid #fff; border-radius: 25px; margin: 0 auto 10px; }

#mainvis .scroll dt a:before { content: ''; transition: 0.3s; position: absolute; left: 50%; -webkit-transform: translateX(-50%) rotate(0deg); transform: translateX(-50%) rotate(0deg); -moz-transform: translateX(-50%) rotate(0deg); width: 5px; height: 5px; background: #23b9cb; border-radius: 50%; top: 20%; }

#mainvis .scroll dt a:hover:before { top: 65%; background: #fff; }

#mainvis .scroll dd { text-align: center; font-size: 80%; }

section.news { padding: 20px 0; border-top: 4px solid rgba(35, 185, 203, 0.7); border-bottom: 4px solid rgba(35, 185, 203, 0.7); text-align: center; margin: -60px auto -30px; position: relative; z-index: 5; background: rgba(255, 255, 255, 0.8); }

section.news h2 { margin-bottom: 30px; font-weight: bold; font-size: 110%; color: #23b9cb; position: relative; }

section.news h2:after { position: absolute; content: ''; width: 50px; height: 2px; left: 50%; -webkit-transform: translateX(-50%) rotate(0deg); transform: translateX(-50%) rotate(0deg); -moz-transform: translateX(-50%) rotate(0deg); bottom: -5px; background: #23b9cb; }

section.news span { margin-right: 1em; font-weight: bold; color: #666; }

section.news a { color: #111; }

#contents01 { padding-top: 80px; }

#contents01 .flexbox { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

#contents01 .flexbox > * { width: calc(100% / 5); }

@media screen and (max-width: 1200px) { #contents01 .flexbox > * { width: calc(100% / 3); }
  #contents01 .flexbox > *:nth-child(1), #contents01 .flexbox > *:nth-child(2) { width: calc(100% / 2); }
  #contents01 .flexbox > * dt { max-height: 200px; overflow: hidden; } }

@media screen and (max-width: 679px) { #contents01 .flexbox > * { width: calc(100% / 2); }
  #contents01 .flexbox > *:nth-child(5) { width: 100%; }
  #contents01 .flexbox > * dt { max-height: 250px; overflow: hidden; } }

@media screen and (max-width: 480px) { #contents01 .flexbox > * { width: 100%; }
  #contents01 .flexbox > *:nth-child(1), #contents01 .flexbox > *:nth-child(2), #contents01 .flexbox > *:nth-child(3), #contents01 .flexbox > *:nth-child(4) { width: 100%; }
  #contents01 .flexbox > * dt { max-height: 250px; overflow: hidden; } }

#contents01 dt { position: relative; }

#contents01 dt span { line-height: 1.3; text-align: center; position: absolute; display: inline-block; width: 56px; height: 56px; font-size: 60%; box-sizing: border-box; padding: 5px 0; left: 0; top: 0; background: #ffc80a; color: #fff; }

#contents01 dt span em { display: block; font-size: 300%; }

#contents01 dt p { background: rgba(17, 17, 17, 0.8); box-sizing: border-box; padding: 1.5em; display: none; width: 100%; height: 100%; font-size: 90%; line-height: 1.7; color: #fff; position: absolute; left: 0; top: 0; }

#contents01 dt img { width: 100%; max-width: inherit; display: block; }

#contents01 dd { padding: 30px 20px; }

#contents01 dd h4 { color: #111; font-size: 130%; font-weight: bold; letter-spacing: 2px; margin-bottom: 40px; text-align: center; position: relative; }

#contents01 dd h4:after { position: absolute; content: ''; left: 50%; -webkit-transform: translateX(-50%) rotate(0deg); transform: translateX(-50%) rotate(0deg); -moz-transform: translateX(-50%) rotate(0deg); bottom: -20px; width: 50px; height: 1px; background: #23b9cb; }

#contents01 dd h4 em { margin-left: 1em; font-size: 80%; font-weight: normal; color: #888; }

#contents01 dd .sub { font-size: 80%; text-align: center; color: #999999; }

#contents01 dd .txt { font-size: 90%; }

#contents01 dl:nth-child(5) { border: none; }

#contents01 dl { border-right: 1px solid #eee; box-sizing: border-box; }

#contents02 { padding: 0 0 80px; background: url("../img/bg00.png") no-repeat center center; background-size: cover; }

#contents02 .inner { margin-top: 40px; }

#contents02 .tit-cont { background: #23b9cb; color: #fff; padding: 30px 0; }

#contents02 .tit-cont h3 + p { margin-bottom: 0; }

#contents02 h3 { color: #fff; }

#contents02 h3 + p span { color: #fff; }

#contents02 h3 + p span:after, #contents02 h3 + p span:before { background: #fff; }

#contents02 h4 { color: #fff; font-size: 160%; }

#contents02 .txt { color: #fff; font-size: 110%; line-height: 1.8; }

#contents02 .inner { text-align: center; }

#contents02 .deploy { margin-top: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; }

#contents02 .deploy dl { width: 30%; background: #fff; box-shadow: 0 5px 20px -6px rgba(0, 0, 0, 0.2); display: inline-block; }

#contents02 .deploy dl img { margin: 40px auto 0; display: block; max-width: 117px; width: 100%; }

#contents02 .deploy dl:nth-child(1) dd h4 { color: #fff; padding: 10px; text-align: center; background: #23b9cb; }

#contents02 .deploy dl:nth-child(3) dd h4 { color: #fff; padding: 10px; text-align: center; background: #ee553c; }

#contents02 .deploy dl:nth-child(5) dd h4 { color: #fff; padding: 10px; text-align: center; background: #f1b137; }

#contents02 .deploy .border { width: 2%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; position: relative; }

#contents02 .deploy .border span { position: absolute; width: 0; height: 0; border: 15px solid transparent; border-left-color: #63d3e0; left: 50%; -webkit-transform: translateX(-50%) rotate(0deg); transform: translateX(-50%) rotate(0deg); -moz-transform: translateX(-50%) rotate(0deg); left: 18px; }

#contents02 .deploy .border:after, #contents02 .deploy .border:before { position: absolute; content: ''; height: 40%; width: 1px; left: 50%; -webkit-transform: translateX(-50%) rotate(0deg); transform: translateX(-50%) rotate(0deg); -moz-transform: translateX(-50%) rotate(0deg); background: #fff; }

#contents02 .deploy .border:before { top: 0; }

#contents02 .deploy .border:after { bottom: 0; }

#contents02 .deploy dd { padding: 30px 2em; }

#contents02 .deploy h4 { width: 80%; margin: 0 auto; letter-spacing: 2px; border-radius: 3px; font-size: 100%; color: #23b9cb; font-weight: bold; margin-bottom: 30px; position: relative; }

#contents02 .deploy .txt { font-size: 100%; color: #333333; }

#contents03 h4 { font-size: 130%; color: #23b9cb; font-weight: bold; margin-bottom: 30px; position: relative; align-items: center; padding: 10px 0 10px 40px; border-bottom: 1px solid #ddd; position: relative; }

#contents03 h4 em { position: absolute; top: 50%; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -moz-transform: translateY(-50%) rotate(0deg); left: 0; color: #333333; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; font-weight: normal; width: 30px; height: 30px; font-size: 70%; border-radius: 25px; background: #ffc80a; margin-right: 15px; }

#contents03 .separate { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

#contents03 .separate > * { box-sizing: border-box; width: 50%; }

#contents03 .separate .sep1 { position: relative; height: 450px; }

#contents03 .separate .sep1:after { position: absolute; content: ''; height: 70px; width: 70px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); background: url("../img/check.png") no-repeat center center; background-size: contain; }

#contents03 .separate .sep2 { background: #fff; align-self: center; padding: 0 5%; }

#contents03 .separate:nth-child(1) .sep1 { background: url("../img/bg01.png") no-repeat center center; background-size: cover; }

#contents03 .separate:nth-child(2) .sep1 { background: url("../img/bg02.png") no-repeat center center; background-size: cover; order: 1; }

#contents03 .separate:nth-child(2) .sep2 { order: 0; }

#contents03 .separate:nth-child(3) .sep1 { background: url("../img/bg03.png") no-repeat center center; background-size: cover; }

#contents04, #contents05 { position: relative; background: #eee; padding: 60px 0 80px; }

#contents04 .blue-box, #contents05 .blue-box { width: 100%; height: 280px; position: absolute; background: #23b9cb; top: 0; z-index: 0; }

#contents04 h3, #contents05 h3 { color: #fff; }

#contents04 h3 + p span, #contents05 h3 + p span { color: #fff; }

#contents04 h3 + p span:after, #contents04 h3 + p span:before, #contents05 h3 + p span:after, #contents05 h3 + p span:before { background: #fff; }

#contents04 .inner, #contents05 .inner { position: relative; z-index: 1; }

#contents04 .box, #contents05 .box { position: relative; z-index: 1; margin: 0 auto; background: url("../img/bg-box.png"); box-shadow: 0 5px 20px -6px rgba(0, 0, 0, 0.2); padding: 5%; box-sizing: border-box; }

#contents04 .box { max-width: 1200px; }

#contents04 .cont { position: relative; }

#contents04 .detail { text-align: center; display: none; opacity: 0; transition: 0.3s; }

#contents04 .detail.active { display: block; opacity: 1; }

#contents04 .tab { width: 180px; box-sizing: border-box; position: absolute; right: -10px; top: 50%; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -moz-transform: translateY(-50%) rotate(0deg); top: 40%; font-size: 80%; }

#contents04 .tab li { padding: 15px 10px 15px 50px; border-bottom: 1px solid #ddd; position: relative; color: #aaa; font-weight: bold; transition: 0.3s; display: block; cursor: pointer; }

#contents04 .tab li:after { position: absolute; content: ''; width: 0; height: 0; border: 23px solid transparent; border-left-color: #ddd; top: 50%; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -moz-transform: translateY(-50%) rotate(0deg); right: -46px; transition: 0.3s; opacity: 0; }

#contents04 .tab li em { position: absolute; top: 50%; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -moz-transform: translateY(-50%) rotate(0deg); left: 10px; border-radius: 25px; font-size: 80%; background: #ddd; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; }

#contents04 .tab li.active, #contents04 .tab li:hover { background: #ddd; color: #333333; }

#contents04 .tab li.active em, #contents04 .tab li:hover em { color: #333333; background: #ffc80a; }

#contents04 .tab li.active:after, #contents04 .tab li:hover:after { position: absolute; content: ''; width: 0; height: 0; border: 23px solid transparent; border-left-color: #ddd; top: 50%; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -moz-transform: translateY(-50%) rotate(0deg); right: -46px; opacity: 1; }

#contents04 .caption { display: none; position: absolute; top: 50%; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -moz-transform: translateY(-50%) rotate(0deg); left: -10px; top: 40%; width: 200px; transition: 0.3s; opacity: 0; }

#contents04 .caption.active { display: block; opacity: 1; }

#contents04 .caption dt { font-weight: bold; font-size: 120%; }

#contents04 .caption dd { margin-top: 15px; color: #666; }

#contents04 .change { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; }

#contents04 .change span { transition: 0.3s; margin: 0 10px; width: 12px; height: 12px; display: block; border-radius: 25px; background: #ddd; cursor: pointer; }

#contents04 .change .active, #contents04 .change span:hover { background: #ffc80a; }

#contents05 h3 + p { text-align: center; margin-bottom: 20px; }

#contents05 .txt { color: #fff; text-align: center; margin-bottom: 40px; font-size: 110%; }

#contents05 .box { max-width: 1080px; }

#contents05 .box-child { border: 1px solid #23b9cb; padding: 30px 50px 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-around; text-align: center; }

#contents05 .box-child .come { height: 80%; vertical-align: middle; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #666; font-size: 240%; }

#contents05 dl { transition: 0.5s; margin-top: 60px; border: 2px solid #f0f0f0; border-radius: 10px; padding: 60px 40px 40px; position: relative; background: #fff; min-width: 210px; }

#contents05 dl:before { position: absolute; content: ''; height: 60px; width: 60px; top: -30px; left: 50%; -webkit-transform: translateX(-50%) rotate(0deg); transform: translateX(-50%) rotate(0deg); -moz-transform: translateX(-50%) rotate(0deg); }

#contents05 dl:nth-child(1):before { background: url("../img/icon01.png") no-repeat center center; background-size: contain; }

#contents05 dl:nth-child(2):before { background: url("../img/icon02.png") no-repeat center center; background-size: contain; }

#contents05 dl.active { -webkit-transform: scale(1); transform: scale(1); box-shadow: 0 5px 20px -6px rgba(0, 0, 0, 0.2); }

#contents05 dt { font-size: 120%; color: #23b9cb; letter-spacing: 2px; }

#contents05 .prace { margin: 20px auto; }

#contents05 .txt2 { color: #666; margin-bottom: 20px; }

#contents05 .txt3 { margin-top: 30px; font-size: 90%; line-height: 1.7; border-radius: 5px; color: #fff; background: #23b9cb; padding: 10px; }

#contents05 .btn a { border: 1px solid #ffc80a; color: #ffc80a; padding: 10px 40px; text-align: center; display: inline-block; border-radius: 25px; transition: 0.3s; letter-spacing: 2px; }

#contents05 .btn a:hover { color: #fff; background: #ffc80a; }

#contents05 .caution { margin-top: 40px; background: #eee; padding: 20px; }

#contents06 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; margin-top: 45px; }

#contents06 ul li { margin: 0 2%; width: 28%; max-width: 192px; }

#contents06 ul li img { width: 100%; }

#contents06 ul li a { display: block; transition: 0.3s; }

#contents06 ul li a:hover { opacity: 0.6; }

#contents06 .tit { font-size: 70%; color: #fff; background: #23b9cb; width: 100%; padding: 20px 0; }

#contents06 .tit h3 { margin-bottom: 0; }

#contents06 .inner2 { width: 100%; padding: 55px 0; background: url("../img/contact-bg.png") no-repeat center center; background-size: cover; }

#contents06 .inner2 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0; margin: 0 auto; width: 80%; background: #fff; border: 2px #23b9cb solid; border-radius: 3px; box-sizing: border-box; justify-content: space-around; align-items: center; padding: 5%; }

#contents06 .inner2 ul li { margin: 0; box-sizing: border-box; text-align: center; width: 47%; min-width: 360px; }

#contents06 .inner2 ul li p { width: 100%; }

#contents06 .inner2 ul li span { font-size: 140%; display: block; font-weight: bold; }

#contents06 .inner2 ul li:nth-child(2) span { font-weight: normal; font-size: 200%; color: #23b9cb; letter-spacing: 2px; }

#contents06 .inner2 ul li:nth-child(2) span em { font-size: 60%; margin-right: 0.5em; font-weight: bold; }

#contents07 { padding: 60px 0; background: #23b9cb; }

#contents07 h3 { color: #fff; }

#contents07 h3 + p span { color: #fff; }

#contents07 h3 + p span:after, #contents07 h3 + p span:before { background: #fff; }

#contents07 form { display: block; margin: 0 auto; max-width: 980px; padding: 0 2%; }

#contents07 form ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; }

#contents07 form ul > * { width: 48%; }

#contents07 form ul .full { width: 100%; }

#contents07 form ul .full input[type='text'] { margin-bottom: 3%; }

#contents07 form input:focus::-webkit-input-placeholder { color: transparent; }

#contents07 form input:focus:-moz-placeholder { color: transparent; }

#contents07 form input:focus:placeholder { color: transparent; }

#contents07 form input:focus:-moz-placeholder { color: transparent; }

#contents07 form input:focus:-webkit-input-placeholder { color: transparent; }

#contents07 form textarea { resize: vertical; }

#contents07 form textarea:focus::placeholder { opacity: 0; }

#contents07 form textarea:focus::-moz-placeholder { opacity: 0; }

#contents07 form textarea:focus::-webkit-input-placeholder { opacity: 0; }

#contents07 form input[type='text'], #contents07 form textarea { padding: 15px; width: 100%; box-sizing: border-box; border: 2px solid #eee; margin-bottom: 6%; }

#contents07 form textarea { height: 150px; }

#contents07 form input[type='submit'] { display: none; }

#contents07 form .btn { text-align: center; }

#contents07 form .btn label { background: #ffc80a; color: #fff; padding: 15px 30px; font-size: 110%; border-radius: 25px; transition: 0.3s; cursor: pointer; }

#contents07 form .btn label:hover { background: #ffa052; }

/* ------------------------------------ Responsiv 共通 ------------------------------------ */
/* ------------------------------------ Responsiv 共通　TB ------------------------------------ */
@media screen and (max-width: 780px) { #contents05 .box-child dl:nth-child(2) { display: none; } }

/* ------------------------------------ Responsiv 共通 SP ------------------------------------ */
@media screen and (max-width: 679px) { section.news { padding: 20px 0; border-top: 4px solid rgba(35, 185, 203, 0.7); border-bottom: 4px solid rgba(35, 185, 203, 0.7); text-align: center; margin: -40px auto -30px; position: relative; z-index: 5; background: rgba(255, 255, 255, 0.8); display: flex; padding: 15px 2%; }
  section.news h2 { display: none; margin-bottom: 0; font-weight: bold; font-size: 110%; color: #23b9cb; position: relative; width: 100px; }
  section.news h2:after { position: absolute; content: none; width: 50px; height: 2px; left: 50%; -webkit-transform: translateX(-50%) rotate(0deg); transform: translateX(-50%) rotate(0deg); -moz-transform: translateX(-50%) rotate(0deg); bottom: -10px; background: #23b9cb; }
  section.news ul { width: 100%; }
  section.news li { text-align: left; display: block; padding: 0 2%; }
  section.news span { margin-bottom: 10px; margin-right: 1em; font-weight: bold; color: #666; display: block; }
  section.news a { color: #111; }
  #con .sp { display: block; }
  .pc { display: none; }
  img { max-width: 100%; }
  .gnav { display: none; }
  .menu-trigger, .menu-trigger span { display: inline-block; transition: all 0.4s; box-sizing: border-box; }
  .menu-trigger { position: relative; width: 30px; height: 25px; margin-right: 10px; cursor: pointer; }
  .menu-trigger span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; border-radius: 4px; }
  .menu-trigger span:nth-of-type(1) { top: 0; }
  .menu-trigger span:nth-of-type(2) { top: 11px; }
  .menu-trigger span:nth-of-type(3) { bottom: 0; }
  .menu-trigger { -webkit-animation: menu-close 0.6s; animation: menu-close 0.6s; }
  .menu-trigger.active { -webkit-animation: menu-open 0.6s; animation: menu-open 0.6s; }
  @-webkit-keyframes menu-close { 30% { -webkit-transform: scale(0);
      opacity: 0; }
    100% { -webkit-transform: scale(1);
      opacity: 1; } }
  @keyframes menu-close { 30% { transform: scale(0);
      opacity: 0; }
    100% { transform: scale(1);
      opacity: 1; } }
  @-webkit-keyframes menu-open { 30% { -webkit-transform: scale(0);
      opacity: 0; }
    100% { -webkit-transform: scale(1);
      opacity: 1; } }
  @keyframes menu-open { 30% { transform: scale(0);
      opacity: 0; }
    100% { transform: scale(1);
      opacity: 1; } }
  .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(11px) rotate(-45deg); transform: translateY(11px) rotate(-45deg); }
  .menu-trigger.active span:nth-of-type(2) { opacity: 0; }
  .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-11px) rotate(45deg); transform: translateY(-11px) rotate(45deg); }
  .gnav { display: none; position: absolute; top: 80px; background: rgba(34, 34, 34, 0.9); width: 100%; }
  .gnav ul { display: block; }
  .gnav ul li { border-bottom: 1px dotted #1f4f71; }
  .gnav ul li a { padding: 10px 10px 10px 30px; box-sizing: border-box; position: relative; color: #fff; }
  .gnav ul li a:before { position: absolute; content: ''; width: 0; height: 0; border: 5px solid transparent; border-left-color: #60617b; top: 50%; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -moz-transform: translateY(-50%) rotate(0deg); left: 10px; }
  .gnav ul li em { display: none; }
  .gnav ul li a:after { content: none; }
  #mainvis { height: 100vh; min-height: 560px; }
  #mainvis .inner { top: 45%; width: 90%; }
  #mainvis .inner h2 { width: 40%; margin: 0 auto; }
  #contents01 .flexbox > * { width: calc(100% / 2); box-sizing: border-box; }
  #contents01 dd { padding: 5%; }
  #contents01 dl:nth-child(even) { border: none; }
  #contents01 dl:nth-child(odd) { border-right: 1px solid #eee; }
  #contents01 dt .txt { display: none; font-size: 100%; }
  #contents01 dd h4 em { display: block; margin-left: 0; font-size: 60%; }
  #contents02 { padding: 40px 0; }
  #contents02 .box { width: 90%; margin: 0 auto; }
  #contents02 .box h4 { font-size: 120%; }
  #contents02 .box .txt { font-size: 90%; text-align: left; }
  #contents02 .deploy { margin-top: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-around; }
  #contents02 .deploy dl { width: 80%; background: #fff; box-shadow: 0 5px 20px -6px rgba(0, 0, 0, 0.2); }
  #contents02 .deploy dl img { margin: 40px auto 0px; display: block; max-width: 117px; width: 100%; }
  #contents02 .deploy .border { width: 80%; margin: 30px 0; box-sizing: border-box; }
  #contents02 .deploy .border span { width: 0; height: 0; border: 15px solid transparent; border-top-color: #63d3e0; left: 50%; -webkit-transform: translateX(-50%) rotate(0deg); transform: translateX(-50%) rotate(0deg); -moz-transform: translateX(-50%) rotate(0deg); left: 50%; top: -5px; bottom: inherit; }
  #contents02 .deploy .border:after, #contents02 .deploy .border:before { position: absolute; content: ''; height: 1px; width: 40%; transform: none; top: 50%; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -moz-transform: translateY(-50%) rotate(0deg); background: #fff; }
  #contents02 .deploy .border:before { left: 0; }
  #contents02 .deploy .border:after { right: 0; left: inherit; }
  #contents02 .deploy dd { padding: 30px 2em; }
  #contents02 .deploy h4 { font-size: 120%; color: #23b9cb; font-weight: bold; margin-bottom: 30px; position: relative; }
  #contents02 .deploy h4:after { position: absolute; content: ''; height: 1px; width: 30px; bottom: -15px; left: 50%; -webkit-transform: translateX(-50%) rotate(0deg); transform: translateX(-50%) rotate(0deg); -moz-transform: translateX(-50%) rotate(0deg); background: #23b9cb; }
  #contents02 .deploy .txt { font-size: 100%; color: #333333; }
  #contents03 h4 { font-size: 110%; padding-left: 30px; }
  #contents03 h4 em { width: 25px; height: 25px; }
  #contents03 .separate:nth-child(2) .sep1 { order: 0; }
  #contents03 .separate:nth-child(2) .sep2 { order: 1; }
  #contents03 .separate > * { width: 100%; }
  #contents03 .separate .sep1 { height: 35vw; }
  #contents03 .separate .sep2 { padding: 5%; }
  #contents04 .change { margin: 20px 0; }
  #contents04 .cont .tab { position: static; top: inherit; left: inherit; transform: none; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; }
  #contents04 .cont li { box-sizing: border-box; text-align: center; padding: 10px; border-bottom: 1px solid #ddd; position: relative; color: #aaa; font-weight: bold; transition: 0.3s; display: block; cursor: pointer; }
  #contents04 .cont li em { position: static; top: 0; left: 0; transform: none; border-radius: 0; font-size: 100%; display: inline-block; background: #ddd; width: inherit; height: inherit; background: none; }
  #contents04 .cont li em:after { content: '.'; }
  #contents04 .cont li.active, #contents04 .cont li:hover { border-radius: 10px 10px 0 0; }
  #contents04 .cont li.active em, #contents04 .cont li:hover em { background: none; }
  #contents04 .cont li.active:after, #contents04 .cont li:hover:after { content: none; border: none; }
  #contents04 .cont .caption { margin-top: 20px; position: static; top: inherit; left: inherit; transform: none; width: 100%; }
  #contents05 .box-child dl:nth-child(2) { display: none; }
  #contents01, #contents02, #contents04, #contents05, #contents06 { padding: 20px 0 40px; }
  #contents01 h3 + p, #contents02 h3 + p, #contents04 h3 + p, #contents05 h3 + p, #contents06 h3 + p { margin-bottom: 20px; }
  #contents01 { padding: 40px 0 0; }
  #contents02 { padding: 0 0 40px; }
  #contents05 .box-child { padding: 0; border: none; }
  #contents05 dl { width: 100%; }
  #contents06 { padding-bottom: 0; }
  #contents06 .tit { margin-top: 30px; }
  #contents06 .tit h3 { font-size: 150%; }
  #contents06 .inner2 ul { width: 95%; }
  #contents06 .inner2 ul li span { margin: 5px auto; }
  #contents07 form ul > * { width: 100%; }
  #contents07 form input[type='text'] { margin-bottom: 3%; }
  #contents07 form input[type='text'], #contents07 form textarea { font-size: 110%; } }

/*# sourceMappingURL=common.css.map */