@charset "UTF-8";
.pc { display: block; }
@media only screen and (max-width: 1023px) { .pc { display: none; } }

.sp { display: none; }
@media only screen and (max-width: 1023px) { .sp { display: block; } }

body { position: relative; font-size: 1.2rem !important; font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif; color: #111; width: 100%; line-height: 1.8; overflow-x: hidden; }
@media only screen and (max-width: 1023px) { body { font-size: 0.9rem !important; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { body { font-size: 1rem !important; letter-spacing: -0.01rem; } }

section { display: block; overflow: hidden; }

h2 { font-size: 3rem !important; text-align: center; margin-bottom: 50px; font-weight: bold; line-height: 1; }
@media only screen and (max-width: 1023px) { h2 { font-size: 1.7rem !important; margin-bottom: 6.5%; line-height: 1.5; letter-spacing: -0.01rem; } }

.ttl { color: #fff; text-align: center; }
.ttl p { font-size: 1.25rem !important; margin-bottom: 50px; }
.ttl p span { position: relative; padding: 0 40px; }
.ttl p span:before, .ttl p span:after { content: ""; position: absolute; top: 50%; width: 20px; height: 1px; background: #fff; margin-top: -0.5px; }
.ttl p span:before { left: 0; }
.ttl p span:after { right: 0; }
@media only screen and (max-width: 1023px) { .ttl p { font-size: 0.85rem !important; margin-bottom: 3%; }
  .ttl p span:before, .ttl p span:after { width: 10px; } }

.bl { background: #6717cd; background: -moz-linear-gradient(90deg, #6717cd 0%, #00c0fa 100%); background: -webkit-linear-gradient(90deg, #6717cd 0%, #00c0fa 100%); background: linear-gradient(90deg, #6717cd 0%, #00c0fa 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6717cd",endColorstr="#00c0fa",GradientType=1); color: #fff; padding: 200px 0; position: relative; }
@media only screen and (max-width: 1023px) { .bl { padding: 22% 0; } }
.bl:before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 200px 100vw 0 0; border-color: #ffffff transparent transparent transparent; }
@media only screen and (max-width: 1023px) { .bl:before { border-width: 70px 100vw 0 0; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .bl:before { border-width: 140px 100vw 0 0; } }
.bl:after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 200px 100vw; border-color: transparent transparent #ffffff transparent; }
@media only screen and (max-width: 1023px) { .bl:after { border-width: 0 0 70px 100vw; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .bl:after { border-width: 0 0 140px 100vw; } }

img { width: 100%; }

a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease; display: block; line-height: 1.2; }

a[href^="tel:"] { pointer-events: none; }
@media only screen and (max-width: 1023px) { a[href^="tel:"] { pointer-events: painted; } }

.center { text-align: center; font-size: 1.4rem !important; }
@media only screen and (max-width: 1023px) { .center { font-size: 1rem !important; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .center { font-size: 1.15rem !important; } }

.em { font-size: 1.5rem !important; line-height: 1.8; }
.em span { font-size: 36px !important; font-weight: bold; color: #ffff0f; border-bottom: 3px solid #ffff0f; }
@media only screen and (max-width: 1023px) { .em { font-size: 0.9rem !important; line-height: 2; }
  .em span { font-size: 1.2rem !important; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .em { font-size: 1.2rem !important; line-height: 2; }
  .em span { font-size: 2rem !important; } }

.inner { width: 1180px; margin: 0 auto; }
@media only screen and (max-width: 1023px) { .inner { width: 86.98%; padding: 0; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .inner { width: 100%; padding: 0 4.23%; } }

.btn a { background: #fd644f; background: -moz-linear-gradient(left, #f28e26 0%, #fd644f 100%); background: -webkit-gradient(linear, left center, right center, from(#f28e26), to(#fd644f)); background: -webkit-linear-gradient(left, #f28e26 0%, #fd644f 100%); background: -o-linear-gradient(left, #f28e26 0%, #fd644f 100%); background: -ms-linear-gradient(left, #f28e26 0%, #fd644f 100%); background: linear-gradient(to right, #f28e26 0%, #fd644f 100%); color: #fff; padding: 20px 0; line-height: 1; text-align: center; border-radius: 50px; position: relative; font-weight: bold; }
.btn a:before { content: ""; position: absolute; top: 50%; right: 20px; width: 7px; height: 7px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); margin-top: -4px; }
.btn a:hover { transform: scale(1.1, 1.1); }
@media only screen and (max-width: 1023px) { .btn a { padding: 5% 0; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .btn a { padding: 20px 0; } }

.down-to-top { opacity: 0.1; transform: translateY(20px); transition: all 1s; }
.down-to-top.scrollin { opacity: 1; transform: translateY(0); }

.down-to-tops { opacity: 0.1; transform: translateY(20px); transition: all 1s; }
.down-to-tops:nth-child(2) { transform: translateY(30px); }
.down-to-tops:nth-child(3) { transform: translateY(40px); }
.down-to-tops:nth-child(4) { transform: translateY(50px); }
.down-to-tops:nth-child(5) { transform: translateY(60px); }
.down-to-tops:nth-child(6) { transform: translateY(70px); }
.down-to-tops:nth-child(6) { transform: translateY(80px); }
.down-to-tops:nth-child(7) { transform: translateY(90px); }
.down-to-tops.scrollin { opacity: 1; transform: translateY(0); }

.merit, .step, .ssk { padding-top: 100px; }
@media only screen and (max-width: 1023px) { .merit, .step, .ssk { padding-top: 14%; } }

.links, .cycle { margin-top: 100px; }
@media only screen and (max-width: 1023px) { .links, .cycle { marggin-top: 14%; } }

.fs-bl { color: #022cb2; font-weight: bold; }

.indent { text-indent: -1em; padding-left: 1em; }

.ruby { position: relative; }
.ruby:before { content: "・"; position: absolute; top: -0.8em; left: 0; }
@media only screen and (max-width: 1023px) { .ruby:before { top: -1.1em; } }

/***********************************************
header
***********************************************/
header { position: fixed; top: 0; left: 0; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; z-index: 9999; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease; }
header h1 { width: 45%; padding-left: 50px; }
header nav { width: 23.75%; }
header nav ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
header nav ul li { box-shadow: 0px 8px 16px -2px rgba(10, 10, 10, 0.1); width: 31.58%; }
header nav ul li:first-child { width: 36.84%; box-shadow: none; }
header div { width: 60px; height: 60px; right: -200px; opacity: 0; position: fixed; }
header div a:hover { transform: rotate(360deg); }
header.header-add { background: rgba(255, 255, 255, 0.9); box-shadow: 0px 8px 16px -2px rgba(10, 10, 10, 0.1); }
header.header-add h1 { width: 25%; }
header.header-add nav { width: 14.75%; }
header.header-add nav ul li { box-shadow: none; }
header.header-add nav ul li:first-child { opacity: 0; }
@media only screen and (max-width: 1023px) { header.header-add h1 { width: 50%; }
  header.header-add nav { width: 30.75%; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { header.header-add h1 { width: 28%; }
  header.header-add nav { width: 15.75%; } }
@media only screen and (max-width: 1023px) { header h1 { width: 57%; padding-left: 3%; }
  header nav { width: 36%; }
  header nav ul li { width: 50%; }
  header nav ul li:first-child { display: none; }
  header div { right: 2%; bottom: 2%; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { header h1 { width: 50%; padding-left: 4.23%; }
  header nav { width: 25.75%; } }

/***********************************************
case
***********************************************/
#loader-bg { display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #fff; z-index: 9999; }

#loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; color: #111; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; z-index: 10000; }
#loader h2 { margin-bottom: 0; line-height: 2; }

/***********************************************
case
***********************************************/
.case { padding: 0 0 50px; }
.case img { padding-bottom: 50px; }
.case:before, .case:after { border: none; }
.case > ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; margin-bottom: 90px; padding-bottom: 60px; position: relative; color: #111; }
@media only screen and (max-width: 1023px) { .case > ul { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } }
.case > ul:before { content: ""; position: absolute; bottom: -20px; left: 50%; width: 0; height: 0; border-style: solid; border-width: 30px 30px 0 30px; border-color: #ffffff transparent transparent transparent; margin-left: -30px; }
.case > ul > li { width: 32.08%; background: #ebfa00; background: -moz-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: -webkit-gradient(linear, left center, right center, from(#ccff00), to(#ebfa00)); background: -webkit-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: -o-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: -ms-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: linear-gradient(to right, #ccff00 0%, #ebfa00 100%); padding-bottom: 30px; }
.case > ul > li div { padding: 30px 25px 10px; background: #fff; }
.case > ul > li div h3 { text-align: center; background: #111; color: #fff; position: relative; width: 150px; margin: 0 auto 15px; padding: 8px 0; line-height: 1; font-weight: bold; }
.case > ul > li div h3:before, .case > ul > li div h3:after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-width: 35px 21px 0 0; border-color: #ffffff transparent transparent transparent; }
.case > ul > li div h3:before { left: 0; top: 0; }
.case > ul > li div h3:after { right: -1px; bottom: -3px; transform: rotate(180deg); }
.case > ul > li div ul li { padding-left: 1em; position: relative; letter-spacing: -0.01rem; line-height: 2; font-size: 1.1rem !important; }
.case > ul > li div ul li:before { content: ""; position: absolute; top: 10px; left: 0; width: 10px; height: 10px; border-radius: 50px; background: #022cb2; }
@media only screen and (max-width: 1023px) { .case > ul > li div ul li { font-size: 0.9rem !important; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .case > ul > li div ul li { font-size: 0.95rem !important; } }
.case > ul > li dl { padding: 60px 25px 0; position: relative; font-weight: bold; overflow: hidden; }
.case > ul > li dl:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 40px 190px 0 190px; border-color: #ffffff transparent transparent transparent; }
.case > ul > li dl dt { font-size: 2rem !important; text-align: center; margin-bottom: 20px; line-height: 1.2; height: 4rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
.case > ul > li dl dd { text-align: justify; }
@media only screen and (max-width: 1023px) { .case > ul > li dl dd { font-size: 1.1rem !important; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .case > ul > li dl dd { font-size: 1.15rem !important; } }
.case .onayami { position: relative; }
.case .onayami:before, .case .onayami:after { content: ""; position: absolute; width: 89px; height: 275px; top: 0; }
@media only screen and (max-width: 1023px) { .case .onayami:before, .case .onayami:after { width: 49px; height: 135px; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .case .onayami:before, .case .onayami:after { width: 80px; height: 121px; } }
.case .onayami:before { background: url("../img/lp1/case_ashirai01.png") no-repeat; background-size: 100%; left: 0; }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .case .onayami:before { left: 8%; } }
.case .onayami:after { background: url("../img/lp1/case_ashirai02.png") no-repeat; background-size: 100%; right: 0; }
@media only screen and (max-width: 1023px) { .case .onayami:after { width: 44px; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .case .onayami:after { width: 67px; right: 8%; } }
@media only screen and (max-width: 1023px) { .case h2 { line-height: 1.8; }
  .case .ttl { padding-top: 10%; }
  .case > ul { margin-bottom: 40px; padding-bottom: 40px; position: relative; color: #111; }
  .case > ul:before { bottom: -10px; border-width: 20px 20px 0 20px; margin-left: -20px; }
  .case > ul > li { width: 100%; margin-top: 3%; }
  .case > ul > li div { padding: 6.2% 6.2% 2%; }
  .case > ul > li dl { padding: 15% 6.2% 6.2%; }
  .case > ul > li dl:before { border-width: 40px 43vw 0 43vw; }
  .case > ul > li dl dt { font-size: 1.6rem !important; margin-bottom: 5%; line-height: 1.2; height: auto; }
  .case h2 { font-size: 1.5rem !important; }
  .case p span { padding: 0; display: block; }
  .case p span:before { left: 5%; }
  .case p span:after { right: 5%; }
  .case p.em span { display: inline; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .case > ul { margin-bottom: 40px; padding-bottom: 40px; position: relative; color: #111; }
  .case > ul:before { bottom: -10px; border-width: 20px 20px 0 20px; margin-left: -20px; }
  .case > ul > li { margin-top: 10px; }
  .case > ul > li div { padding: 20px 20px 10px; }
  .case > ul > li dl { padding: 60px 20px 20px; }
  .case > ul > li dl:before { border-width: 40px 14.5vw 0 14.5vw; }
  .case > ul > li dl dt { margin-bottom: 20px; font-size: 1.6rem !important; }
  .case h2 { font-size: 2.4rem !important; }
  .case .ttl p { font-size: 1rem !important; }
  .case p span { padding: 0; }
  .case p span:before { left: -100px; }
  .case p span:after { right: -100px; } }

/***********************************************
about
***********************************************/
.about { color: #fff; padding: 23mo0px 0; }
.about:before { background: url("../img/lp1/about_img_pc.png"); background-size: cover; width: 100%; height: 100%; border: none; }
@media only screen and (max-width: 1023px) { .about:before { background: url("../img/lp1/about_img_sp.png"); background-size: cover; background-position: top left; } }
.about div { margin: 0 0 0 auto; width: 40%; }
.about h2 { text-align: left; }
.about .em { font-size: 1.2rem !important; line-height: 2.0; }
.about .em span { font-size: 1.4rem !important; border-bottom: 2px solid #ffff0f; }
@media only screen and (max-width: 1023px) { .about { padding: 20% 0; height: auto; }
  .about div { width: 100%; }
  .about h2 { text-align: center; }
  .about .em { text-align: center; }
  .about .em span { font-size: 1.2rem !important; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .about { padding: 150px 0; }
  .about div { width: 50%; }
  .about .em span { font-size: 1.4rem !important; } }

/***********************************************
kenko
***********************************************/
.kenko img { width: 472px; display: block; margin: 0 auto; }
.kenko p { font-size: 1.75rem !important; font-weight: bold; }
@media only screen and (max-width: 1023px) { .kenko img { width: 70%; }
  .kenko p { font-size: 0.9rem !important; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .kenko img { width: 50%; }
  .kenko p { font-size: 1.4rem !important; } }

/***********************************************
merit
***********************************************/
.merit ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-top: 50px; color: #000f5b; text-align: center; position: relative; font-weight: bold; }
@media only screen and (max-width: 1023px) { .merit ul { margin-top: 6.5%; } }
.merit ul li { width: 30.50%; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #000f5b; }
.merit ul li:nth-child(n+4) { padding-bottom: 0; margin-bottom: 0; border: none; }
.merit ul li img { margin: 0 auto 20px; display: block; width: auto; }
.merit ul:before, .merit ul:after { content: ""; position: absolute; width: 1px; height: 100%; top: 0; background: #000f5b; }
.merit ul:before { left: calc(30.50% + 1.5vw); }
.merit ul:after { right: calc(30.50% + 1.5vw); }
@media only screen and (max-width: 1023px) { .merit ul { margin-top: 10.5%; }
  .merit ul p { font-size: 0.85rem !important; letter-spacing: -0.01rem; }
  .merit ul li { width: 47.5%; padding-bottom: 5%; margin-bottom: 5%; }
  .merit ul li:nth-child(n+4) { padding-bottom: 5%; margin-bottom: 5%; border-bottom: 1px solid #000f5b; }
  .merit ul li:nth-child(n+5) { padding-bottom: 0; margin-bottom: 0; border: none; }
  .merit ul li img { margin: 0 auto 20px; width: auto; height: 70px; }
  .merit ul:before { left: calc(47.5% + 1.5vw); }
  .merit ul:after { background: none; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .merit ul p { font-size: 1.1rem !important; height: 4rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } }

/***********************************************
step
***********************************************/
.step .step-subttl { width: 742px; display: block; margin: 0 auto 30px; }
.step .table { margin-top: 50px; }
@media only screen and (max-width: 1023px) { .step .table { margin-top: 6.5%; } }
.step .table tr { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
.step .table tr td { width: 30%; }
@media only screen and (max-width: 1023px) { .step .step-subttl { width: 100%; display: block; margin: 0 auto 30px; }
  .step .table { overflow-x: scroll; white-space: nowrap; box-sizing: border-box; }
  .step .table table { width: 220%; } }

/***********************************************
links
***********************************************/
.links ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-top: 50px; position: relative; }
@media only screen and (max-width: 1023px) { .links ul { margin-top: 6.5%; } }
.links ul:after { content: ""; display: block; width: 24.58%; }
.links ul li { width: 24.58%; }
.links ul li:nth-child(n+5) { margin-top: 0.6%; }
.links ul li a { background: #fff; color: #111; padding: 50px 0; text-align: center; position: relative; display: block; }
.links ul li a:before { content: ""; position: absolute; bottom: 8px; right: 8px; width: 0; height: 0; border-style: solid; border-width: 0 0 20px 20px; border-color: transparent transparent #022cb2 transparent; }
.links ul li a:hover { margin-top: -5px; }
.links ul li dl dt { background: #ebfa00; background: -moz-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: -webkit-gradient(linear, left center, right center, from(#ccff00), to(#ebfa00)); background: -webkit-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: -o-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: -ms-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: linear-gradient(to right, #ccff00 0%, #ebfa00 100%); position: relative; width: 150px; margin: 0 auto 15px; padding: 8px 0; line-height: 1; font-weight: bold; }
.links ul li dl dt:before, .links ul li dl dt:after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-width: 35px 21px 0 0; border-color: #ffffff transparent transparent transparent; }
.links ul li dl dt:before { left: 0; top: 0; }
.links ul li dl dt:after { right: -1px; bottom: -3px; transform: rotate(180deg); }
.links ul li dl dd { font-weight: bold; font-size: 1.5rem !important; line-height: 1.4; }
@media only screen and (max-width: 1023px) { .links ul:after { content: ""; display: block; width: 49%; }
  .links ul li { width: 49%; }
  .links ul li:nth-child(n+3) { margin-top: 1%; }
  .links ul li:nth-child(n+5) { margin-top: 1%; }
  .links ul li a { padding: 25px 0; }
  .links ul li a:before { bottom: 5px; right: 5px; border-width: 0 0 14px 14px; }
  .links ul li a:hover { margin-top: -3px; }
  .links ul li dl dt { background: #ebfa00; background: -moz-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: -webkit-gradient(linear, left center, right center, from(#ccff00), to(#ebfa00)); background: -webkit-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: -o-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: -ms-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: linear-gradient(to right, #ccff00 0%, #ebfa00 100%); width: 100px; margin: 0 auto 8px; padding: 5px 0; line-height: 1; font-size: 0.7rem; }
  .links ul li dl dd { font-size: 0.85rem !important; line-height: 1.6; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .links ul li dl dt { width: 170px; margin: 0 auto 15px; font-size: 1rem !important; }
  .links ul li dl dd { font-size: 1.2rem !important; line-height: 1.4; letter-spacing: -0.01rem; } }

/***********************************************
service
***********************************************/
.service { position: relative; padding-bottom: 120px; }
@media only screen and (max-width: 1023px) { .service { padding-bottom: 15%; } }
.service .inner { position: relative; }
.service .inner > div { width: 50%; }
.service .inner h2 { text-align: left; margin-bottom: 0; font-size: 2.5rem !important; line-height: 1.2; }
.service .inner h2.mini { font-size: 2rem !important; }
.service .inner h2 small { font-size: 1.4rem !important; }
.service .inner h3 { color: #fff; line-height: 2.8; margin: 30px 0 50px; letter-spacing: 0.1rem; }
.service .inner h3 span { padding: 8px 10px; background: #111; font-weight: bold; }
.service .inner .service-ttl { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
.service .inner .service-ttl img { width: 100px; height: auto; margin-right: 20px; }
.service .inner p { text-align: justify; }
.service .inner p span { font-weight: bold; color: #022cb2; }
.service .inner > img { width: 552px; position: absolute; bottom: -30px; z-index: -1; }
.service .inner-r > div { margin: 0 0 0 auto; }
.service .img-r > img { right: 0; }
.service .img-l > img { left: 0; }
.service .btn { width: 240px; margin-top: 30px; }
@media only screen and (max-width: 1023px) { .service .inner { width: auto; }
  .service .inner > div { width: 86.98%; margin: 0 auto; }
  .service .inner h2 { text-align: left; margin-bottom: 0; font-size: 1.6rem !important; line-height: 1.2; }
  .service .inner h2.mini { font-size: 1.1rem !important; line-height: 1.4; }
  .service .inner h2 small { font-size: 0.95rem !important; }
  .service .inner h3 { font-size: 0.8rem !important; line-height: 2.5; margin: 5% 0 6.5%; letter-spacing: -0.01rem; }
  .service .inner h3 span { padding: 5px 7px; background: #111; font-weight: bold; }
  .service .inner .service-ttl { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
  .service .inner .service-ttl img { width: auto; height: 50px; margin-right: 20px; }
  .service .inner p { text-align: justify; }
  .service .inner p span { font-weight: bold; color: #022cb2; }
  .service .inner > img { width: 75%; position: relative; bottom: 0; z-index: 1; display: block; }
  .service .inner-r > div { margin: 0 auto; }
  .service .img-r > img { right: 0; margin: 0 0 0 auto; }
  .service .img-l > img { left: 0; margin: 0 auto 0 0; }
  .service .btn { width: 70%; margin: 6.5% auto; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .service .inner { width: auto; }
  .service .inner > div { width: 56%; }
  .service .inner h2 { font-size: 2.2rem !important; }
  .service .inner h2.mini { font-size: 1.8rem !important; line-height: 1.4; }
  .service .inner h2 small { font-size: 1.2rem !important; }
  .service .inner h3 { font-size: 1.2rem !important; line-height: 2.4; }
  .service .inner .service-ttl img { width: auto; height: 90px; margin-right: 20px; }
  .service .inner > img { width: 40%; } }

#service01 { padding-top: 100px; }
@incluce sp { #service01 { padding-top: 20%; } }
#service02, #service03, #service04, #service05, #service06, #service07 { padding-top: 115px; margin-top: 155px; border-top: 1px solid #cecece; }
@media only screen and (max-width: 1023px) { #service02, #service03, #service04, #service05, #service06, #service07 { padding-top: 17%; margin-top: 17%; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { #service02, #service03, #service04, #service05, #service06, #service07 { padding-top: 85px; margin-top: 105px; } }

.service-menu { position: fixed; top: 50%; right: 30px; opacity: 0; margin-top: -122px; }
.service-menu li a { width: 12px; height: 12px; background: #fff; border: 1px solid #cecece; border-radius: 50px; margin: 20px 0; }

.js-fix.is-fixed { opacity: 1; }

/***********************************************
cycle
***********************************************/
.cycle dl { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
.cycle dl dt { width: 37.29%; }
.cycle dl dd { width: 57.63%; }
@media only screen and (max-width: 1023px) { .cycle dl dt { width: 100%; }
  .cycle dl dd { width: 100%; margin-top: 10%; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .cycle dl dt { width: 50%; }
  .cycle dl dd { width: 42%; } }

/***********************************************
result
***********************************************/
.result ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 1.5rem !important; }
@media only screen and (max-width: 1023px) { .result ul { font-size: 1.2rem !important; } }
.result ul li { margin: 0 30px; }

/***********************************************
ssk
***********************************************/
.ssk .inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
.ssk .inner div { width: 51.86%; }
.ssk .inner div h2 { margin-bottom: 40px; }
.ssk .inner div h2 small { font-size: 30%; display: block; margin-top: 15px; text-align: left; }
.ssk .inner div ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
.ssk .inner div ul li { font-size: 1.25rem !important; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
.ssk .inner div ul li:first-child { margin-right: 40px; }
.ssk .inner div ul img { width: auto; height: 20px; margin-right: 15px; }
.ssk .inner > ul { width: 38.14%; }
.ssk .inner > ul li:first-child { margin-bottom: 20px; }
@media only screen and (max-width: 1023px) { .ssk .inner { display: block; }
  .ssk .inner div { width: 100%; margin-bottom: 15%; }
  .ssk .inner div h2 { margin-bottom: 40px; }
  .ssk .inner div h2 small { font-size: 50%; text-align: center; }
  .ssk .inner div ul { display: block; }
  .ssk .inner div ul li { font-size: 1.2rem !important; }
  .ssk .inner div ul li:first-child { margin: 0 0 5% 0; }
  .ssk .inner div ul img { margin-right: 5%; width: 20px; height: auto; }
  .ssk .inner > ul { width: 100%; }
  .ssk .inner > ul li:first-child { margin-bottom: 3%; } }

/***********************************************
footer
***********************************************/
footer { margin-top: 100px; }
@media only screen and (max-width: 1023px) { footer { margin-top: 13%; } }
footer.bl { padding: 150px 0 30px; background: url("../img/lp1/contact_img.png") no-repeat; background-size: 100%; }
footer.bl:after { border: none; }
footer .center { font-size: 1.25rem !important; font-weight: bold; }
footer div { width: 540px; margin: 50px auto; }
footer .copy { font-size: 0.875rem !important; text-align: center; }
@media only screen and (max-width: 1023px) { footer.bl { padding: 100px 0 30px; background: url("../img/lp1/contact_img.png") no-repeat; background-size: cover; background-position: top center; }
  footer .center { font-size: 1.2rem !important; }
  footer div { width: 100%; margin: 6.5% auto 15%; }
  footer .copy { font-size: 0.75rem !important; } }

/***********************************************
modal
***********************************************/
.modal { display: none; height: 100vh; position: fixed; top: 0; width: 100%; z-index: 9999; overflow-x: scroll; }

.modal__bg { position: fixed; background: #fff; width: 100%; height: 100vh; top: 0; left: 0; /*	overflow-y:scroll;*/ }

.modal__content { position: absolute; width: 94%; height: 100vh; margin: 0; }
.modal__content .numer { width: auto; height: 90px; position: absolute; top: 30px; left: 30px; }
.modal__content .close { width: 50px; height: auto; position: fixed; top: 50px; right: 50px; z-index: 10001; }
.modal__content section { width: 1180px; margin: 0 auto; }
.modal__content section.modal-ttl { margin: 150px auto 50px; }
.modal__content section.modal-ttl p { font-size: 1.25rem !important; }
.modal__content section.modal-ttl h2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 20px 0 15px; }
.modal__content section.modal-ttl h2 span { font-size: 1.75rem !important; padding: 8px 10px; margin-right: 15px; border: 2px solid #111; }
.modal__content section.modal-ttl h3 { font-size: 1.3rem !important; font-weight: bold; color: #888; text-align: justify; }
.modal__content section.flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
.modal__content section.flex div { width: 48.47%; }
.modal__content section.flex div p { line-height: 1; font-weight: bold; }
.modal__content section.flex div p span { border-bottom: 3px dotted #022cb2; display: block; line-height: 1; padding-bottom: 16px; }
.modal__content section.flex div p span.line-sp span { border-bottom: none; display: inline; }
@media only screen and (max-width: 1023px) { .modal__content section.flex div p span.line-sp { border: none; }
  .modal__content section.flex div p span.line-sp span { border-bottom: 3px dotted #022cb2; display: block; } }
.modal__content section.flex div p em { color: #022cb2; font-style: normal; font-size: 1.25rem; }
.modal__content section.flex div dl { margin-top: 50px; }
.modal__content section.flex div dl dt { text-align: center; font-size: 1.5rem !important; font-weight: bold; color: #022cb2; }
.modal__content section.flex div dl dt span { position: relative; padding: 0 40px; }
.modal__content section.flex div dl dt span:before, .modal__content section.flex div dl dt span:after { content: ""; position: absolute; top: 50%; width: 20px; height: 1px; margin-top: -0.5px; background: #022cb2; }
.modal__content section.flex div dl dt span:before { left: 0; }
.modal__content section.flex div dl dt span:right { right: 0; }
.modal__content section.flex div dl li { margin-top: 10px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
.modal__content section.flex div dl li img { width: 7%; }
.modal__content section.flex div dl li p { width: 90%; }
.modal__content section.flex > img { width: 47.29%; }
.modal__content section.menu { padding-top: 80px; }
.modal__content section.menu > div { border: 2px solid #111; padding: 50px 30px 30px; position: relative; border-radius: 20px; }
.modal__content section.menu > div h4 { position: absolute; top: -20px; left: 50%; font-size: 1.5rem !important; line-height: 1; padding: 10px 0; text-align: center; font-weight: bold; background: #ebfa00; background: -moz-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: -webkit-gradient(linear, left center, right center, from(#ccff00), to(#ebfa00)); background: -webkit-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: -o-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: -ms-linear-gradient(left, #ccff00 0%, #ebfa00 100%); background: linear-gradient(to right, #ccff00 0%, #ebfa00 100%); width: 500px; margin-left: -250px; }
.modal__content section.menu > div h4:before, .modal__content section.menu > div h4:after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-width: 50px 20px 0 0; border-color: #ffffff transparent transparent transparent; }
.modal__content section.menu > div h4:before { left: 0; top: 0; }
.modal__content section.menu > div h4:after { right: 0; bottom: 0; transform: rotate(180deg); }
.modal__content section.menu > div .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; }
.modal__content section.menu > div li { text-indent: -1em; padding-left: 1em; }
.modal__content section.menu > div .center { margin-top: 20px; }
@media only screen and (max-width: 1023px) { .modal__content section.menu > div .center { text-align: justify; font-size: 0.85rem !important; line-height: 1.4; } }
.modal__content section.menu > div .center small { font-size: 80%; }
.modal__content .fs18 { text-align: center; font-size: 1.4rem !important; margin: 50px auto; font-weight: bold; }
@media only screen and (max-width: 1023px) { .modal__content .fs18 { font-size: 1.1rem !important; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .modal__content .fs18 { font-size: 1.3rem !important; } }
.modal__content .btn { padding-bottom: 50px; }
.modal__content .btn a { width: 20%; margin: 50px auto 0; }

@media only screen and (max-width: 1023px) { .modal__content { position: absolute; width: 100%; margin: 0; overflow-y: scroll; }
  .modal__content .numer { height: 60px; position: absolute; top: 3%; left: 3%; }
  .modal__content .close { height: 60px; top: 3%; right: 3%; }
  .modal__content section { width: 90%; margin: 0 auto; }
  .modal__content section.modal-ttl { margin: 30% auto 10%; }
  .modal__content section.modal-ttl p { font-size: 0.9rem !important; }
  .modal__content section.modal-ttl h2 { text-align: left; margin: 3% 0 2%; }
  .modal__content section.modal-ttl h2 span { font-size: 0.9rem !important; padding: 5px 0; margin-right: 0; width: 50%; text-align: center; display: block; }
  .modal__content section.modal-ttl h3 { font-size: 0.9rem !important; line-height: 1.6; }
  .modal__content section.flex div { width: 100%; }
  .modal__content section.flex div p { font-size: 0.9rem !important; }
  .modal__content section.flex div p em { font-size: 1.1rem; }
  .modal__content section.flex div dl { margin-top: 10%; }
  .modal__content section.flex div dl dt { text-align: center; font-size: 1.5rem !important; font-weight: bold; color: #022cb2; }
  .modal__content section.flex div dl dt span { position: relative; padding: 0 40px; }
  .modal__content section.flex div dl dt span:before, .modal__content section.flex div dl dt span:after { content: ""; position: absolute; top: 50%; width: 20px; height: 1px; margin-top: -0.5px; background: #022cb2; }
  .modal__content section.flex div dl dt span:before { left: 0; }
  .modal__content section.flex div dl dt span:right { right: 0; }
  .modal__content section.flex div dl li img { width: 10%; }
  .modal__content section.flex div dl li p { width: 85%; line-height: 1.6; text-align: justify; letter-spacing: -0.01rem; }
  .modal__content section.flex > img { width: 100%; margin-top: 10%; }
  .modal__content section.menu { padding-top: 15%; }
  .modal__content section.menu > div { border: 1px solid #111; padding: 10% 5% 5%; position: relative; border-radius: 10px; }
  .modal__content section.menu > div h4 { width: 90%; margin-left: -39vw; font-size: 1.2rem !important; padding: 8px 0; }
  .modal__content section.menu > div h4:before, .modal__content section.menu > div h4:after { border-width: 40px 20px 0 0; }
  .modal__content section.menu > div .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; }
  .modal__content .fs18 { font-size: 0.9rem !important; margin: 5% auto; width: 86.98%; text-align: justify; }
  .modal__content .btn { padding-bottom: 35%; }
  .modal__content .btn a { width: 86.98%; padding: 6% 0; margin-top: 0; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .modal__content section { width: 100%; }
  .modal__content section.modal-ttl { margin-top: 150px; }
  .modal__content section.modal-ttl p { font-size: 1.25rem !important; }
  .modal__content section.modal-ttl h2 { font-size: 2.8rem !important; }
  .modal__content section.modal-ttl h2 span { font-size: 1.4rem !important; }
  .modal__content section.modal-ttl h3 { font-size: 1.3rem !important; font-weight: bold; color: #888; }
  .modal__content section.menu div h4 { width: 350px; margin-left: -175px; }
  .modal__content .btn a { width: 50%; } }
body.modal-open { overflow-y: hidden; }

#modal01 section.menu { align-items: normal; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
@media only screen and (max-width: 1023px) { #modal01 section.menu { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } }
#modal01 section.menu > div { width: 47.5%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
#modal01 section.menu > div .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 45%; }
#modal01 section.menu > div .flex ul:first-child { margin-right: 20px; }
#modal01 section.menu > div img { width: 48.7%; }
#modal01 section.menu > div p { width: 100%; margin-top: 30px; line-height: 1.4; text-align: justify; }
@media only screen and (max-width: 1023px) { #modal01 section.menu > div { width: 100%; }
  #modal01 section.menu > div:last-child { margin-top: 10%; }
  #modal01 section.menu > div ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
  #modal01 section.menu > div ul li { width: 49%; }
  #modal01 section.menu > div ul li:nth-child(n+3) { margin-top: 1%; }
  #modal01 section.menu > div .flex { /*display: block;*/ width: 100%; }
  #modal01 section.menu > div .flex ul { width: 49%; display: block; }
  #modal01 section.menu > div .flex ul:first-child { margin-right: 0; }
  #modal01 section.menu > div .flex ul li { width: 100%; }
  #modal01 section.menu > div img { width: 80%; margin: 5% auto 0; }
  #modal01 section.menu > div p { width: 100%; margin-top: 5%; line-height: 1.4; } }

#modal04 section.menu > div { padding-left: 50px; padding-right: 50px; }
@media only screen and (max-width: 1023px) { #modal04 section.menu > div { padding-left: 5%; padding-right: 5%; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { #modal04 section.menu > div { padding-left: 30px; padding-right: 30px; } }
#modal04 section.menu > div ul { width: 25%; }
@media only screen and (max-width: 1023px) { #modal04 section.menu > div ul { width: 100%; } }

#modal05 section.menu > div ul { width: 25%; }
@media only screen and (max-width: 1023px) { #modal05 section.menu > div ul { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
  #modal05 section.menu > div ul li { width: 49%; line-height: 1.4; }
  #modal05 section.menu > div ul li:nth-child(n+3) { margin-top: 2%; } }
@media only screen and (max-width: 1023px) { #modal05 section.menu > div ul:last-of-type { margin-top: 6%; } }
#modal05 section.menu > div img { width: 25%; }
@media only screen and (max-width: 1023px) { #modal05 section.menu > div img { width: 80%; margin: 5% auto 0; } }

#modal06 .modal__content section.menu > div .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
#modal06 .modal__content section.menu > div .flex img { width: 47.5%; }
#modal06 .modal__content section.menu > div .flex img:nth-child(n+3) { margin-top: 50px; }
@media only screen and (max-width: 1023px) { #modal06 .modal__content section.menu > div .flex img { width: 100%; }
  #modal06 .modal__content section.menu > div .flex img:nth-child(n+2) { margin-top: 5%; } }

#modal07 section.menu { margin: 60px auto 0; padding: 50px; border: 2px solid #222; width: 50%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
#modal07 section.menu > img { width: 28%; }
@media only screen and (max-width: 1023px) { #modal07 section.menu > img { width: 70%; margin: 0 auto 5%; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { #modal07 section.menu > img { width: 30%; } }
#modal07 section.menu div { width: 62%; padding: 0; border: none; }
@media only screen and (max-width: 1023px) { #modal07 section.menu div { width: 100%; } }
#modal07 section.menu h4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-weight: bold; position: relative; margin: 0; top: 0; left: 0; width: 100%; margin-bottom: 20px; }
#modal07 section.menu h4 img { width: auto; height: 20px; padding-right: 10px; }
@media only screen and (max-width: 1023px) { #modal07 section.menu { width: 90%; padding: 5%; margin-top: 10%; }
  #modal07 section.menu h4 { margin-bottom: 5%; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { #modal07 section.menu { width: 100%; padding: 30px; } }

/***********************************************
service menu
***********************************************/
.service__nav { display: none; position: fixed; top: 50%; right: 30px; transform: translate(0, -50%); z-index: 9997; transition: .3s; }
@media only screen and (max-width: 1023px) { .service__nav { right: 2%; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .service__nav { right: 1.5%; } }
.service__nav.disNone { opacity: 0; pointer-events: none; }
.service__nav--list a { width: 12px; height: 12px; border: 1px solid #cecece; border-radius: 50%; margin: 20px 0; }
.service__nav--list a.active { background: #022cb2; border-color: #022cb2; }
@media only screen and (max-width: 1023px) { .service__nav--list a { width: 9px; height: 9px; } }
@media screen and (min-width: 1024px) and (max-width: 1180px) { .service__nav--list a { width: 7px; height: 7px; } }