@charset "UTF-8";
/* ========================================================
	reset.css
	Format,Font Reset
======================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Remove default margin */
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, figure { margin: 0; padding: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

body { min-height: 100vh; text-rendering: optimizeSpeed; }

a:not([class]) { text-decoration-skip-ink: auto; }

img, picture { max-width: 100%; border: 0; }

input, button, textarea, select { margin: 0; padding: 0; font: inherit; }

address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: normal; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

@media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
html { font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif; font-size: 62.5%; /*font-weight: 300;*/ }

body { margin: 0; color: #222222; font-size: 1.4rem; line-height: 1.65; position: relative; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
body::before { content: ''; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.7); display: block; position: fixed; top: 0; z-index: 100; opacity: 0; visibility: hidden; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); }
@media (max-width: 820px) { body { font-size: 1.4rem; } }
body.fixed::before { opacity: 1; visibility: visible; }

a, a:link, a:visited { color: #0000ff; text-decoration: none; transition: 0.5s; }

a:hover { text-decoration: underline; }

img { max-width: 100%; width: auto; height: auto; vertical-align: bottom; transition: 0.5s; }

.container { margin: auto; width: 90%; max-width: 950px; height: auto; box-sizing: border-box; }

/*============================================================================
	header
=============================================================================*/
header { margin-bottom: 10px !important; padding: 20px 0 0; }
@media (max-width: 480px) { header { padding: 10px 0 0; } }
header #headerTopArea { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
header #headerTopArea ul li + li { margin-left: 20px; }
@media (max-width: 820px) { header #headerTopArea h1 { width: 60%; }
  header #headerTopArea ul { display: none; } }
header #gnaviWrap { padding: 10px 0 8px; border-bottom: 5px solid #08ad63; }
header #gnaviWrap ul { width: calc(100% - 2px); height: 38px; border: 1px solid #cecece; border-radius: 4px; }
header #gnaviWrap ul li { width: 25%; box-sizing: border-box; }
header #gnaviWrap ul li a { color: #222222; font-size: 1.6rem; font-weight: 700; width: 100%; height: 100%; text-align: center; line-height: 42px; background: -moz-linear-gradient(top, #ffffff 0%, #e3e3e3 50%, #cfcfcf 51%, #f5f5f5 100%); background: -webkit-linear-gradient(top, #ffffff 0%, #e3e3e3 50%, #cfcfcf 51%, #f5f5f5 100%); background: linear-gradient(to bottom, #ffffff 0%, #e3e3e3 50%, #cfcfcf 51%, #f5f5f5 100%); border-left: 1px solid #FFFFFF; display: block; }
header #gnaviWrap ul li a:hover { color: #f5f5f5; background: -moz-linear-gradient(top, #1d1d1d 0%, #7b7b7b 50%, #161616 51%, #777777 100%); background: -webkit-linear-gradient(top, #1d1d1d 0%, #7b7b7b 50%, #161616 51%, #777777 100%); background: linear-gradient(to bottom, #1d1d1d 0%, #7b7b7b 50%, #161616 51%, #777777 100%); text-decoration: none; }
header #gnaviWrap ul li + li { border-left: 1px solid #cecece; }
header #gnaviWrap ul li:first-of-type { border-radius: 2px 0 0 2px; }
header #gnaviWrap ul li:first-of-type a { border-radius: 2px 0 0 2px; }
header #gnaviWrap ul li:last-of-type { border-radius: 0 2px 2px 0; }
header #gnaviWrap ul li:last-of-type a { border-radius: 0 2px 2px 0; }
body#home header #gnaviWrap ul li.home a, body#webservice header #gnaviWrap ul li.webservice a, body#product header #gnaviWrap ul li.product a, body#faq header #gnaviWrap ul li.faq a { color: #FFFFFF; background: -moz-linear-gradient(top, #1d1d1d 0%, #7b7b7b 50%, #161616 51%, #777777 100%); background: -webkit-linear-gradient(top, #1d1d1d 0%, #7b7b7b 50%, #161616 51%, #777777 100%); background: linear-gradient(to bottom, #1d1d1d 0%, #7b7b7b 50%, #161616 51%, #777777 100%); }
@media (max-width: 480px) { header #gnaviWrap ul { height: 33px; }
  header #gnaviWrap ul li a { font-size: 1.1rem; line-height: 35px; } }

/*============================================================================
	drawer menuBtn
=============================================================================*/
header .menuBtn { margin: auto; padding: 5px; color: #FFFFFF; font-size: 1.2rem; width: 40px; height: 40px; text-align: center; box-sizing: border-box; background: #08ad63; outline: 0; border: 0; position: fixed; top: 20px; left: auto; right: 20px; bottom: auto; z-index: 1200; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
header .menuBtn:hover { cursor: pointer; }
@media (min-width: calc(820px + 1px)) { header .menuBtn { display: none; } }
@media (max-width: 820px) { header .menuBtn { display: block; } }
@media (max-width: 480px) { header .menuBtn { width: 30px; height: 30px; top: 10px; right: 10px; } }
header .menuBtn .drawer-hamburger-icon { margin: auto; width: 100%; height: 2px; background-color: #FFFFFF; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); position: relative; display: block; }
header .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:before, header .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:after { content: ''; width: 100%; height: 2px; background-color: #FFFFFF; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); position: absolute; left: 0; }
header .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:before { top: -8px; }
header .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:after { top: 8px; }
header .menuBtn.close-btn .drawer-hamburger-icon { background: transparent; }
header .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:before, header .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:after { top: 0; }
header .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
header .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

/*--------------------------
	breadcrumb
--------------------------*/
#breadcrumb { margin: 0 auto 20px; font-size: 1.4rem; }
@media (max-width: 480px) { #breadcrumb { font-size: 1.2rem; } }
#breadcrumb ol li:not(:first-of-type)::before { content: '\00ff1e'; margin-right: 10px; font-size: 1.2rem; }
#breadcrumb ol li + li { margin-left: 10px; }

/*============================================================================
	main
=============================================================================*/
#wrapper { margin-top: 20px !important; }

main { width: 66.3%; max-width: 630px; display: block; }
@media (max-width: 820px) { main { width: 100%; max-width: none; } }

/*--------------------------
	pageSearch
--------------------------*/
.pageSearch .searchBox { margin: 15px 0; width: 90%; position: relative; }
.pageSearch .searchBox input[type="text"] { padding: 6px 10px; outline: none; width: 85%; height: 35px; border: 1px solid #aaa; -webkit-transition: all .3s; transition: all .3s; box-sizing: border-box; }
.pageSearch .searchBox input[type="submit"] { outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; position: absolute; right: 0; top: 0; color: #FFFFFF; width: calc(15% + 1px); height: 35px; border: 1px solid #2F5BB7; background: #2F5BB7; box-sizing: border-box; }
@media (max-width: 480px) { .pageSearch { display: none; } }

/*============================================================================
	side
=============================================================================*/
#sideWrap { margin: 0 0 0 auto; width: 31.6%; max-width: 300px; }
@media (max-width: 820px) { #sideWrap { margin: auto; padding: 60px 10px 200px; width: 90%; height: 100svh; background: #FFFFFF; overflow: scroll; position: fixed; top: 0; right: -9999px; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); z-index: 100; }
	#sideWrap.open { right: 0; } }
#sideWrap section { border: 1px solid #cecece; box-sizing: border-box; }
#sideWrap section h4 { padding: 7px 0 0 20px; font-size: 1.7rem; font-weight: 700; height: 40px; background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%); border-bottom: 1px solid #cecece; box-sizing: border-box; }
#sideWrap section ul { padding: 18px; background: #eef7ff; }
#sideWrap section ul li { padding-left: 20px; background: url("../img/common/arrow01.png") no-repeat left top 4px; }
#sideWrap section ul li + li { margin-top: 10px; }
#sideWrap section + section { margin-top: 15px; }
@media (max-width: 820px) { #sideWrap section { margin: auto; width: 95%; }
  #sideWrap section h4 { font-size: 1.6rem; }
  #sideWrap section ul { padding: 10px; } }
#sideWrap #smpSideNaviWrap { margin: 20px auto; width: 90%; display: none; }
@media (max-width: 820px) { #sideWrap #smpSideNaviWrap { display: block; } }

/*============================================================================
	footer
=============================================================================*/
footer { margin-top: 40px !important; }

#footerContactWrap { border: 1px solid #cecece; box-sizing: border-box; }
#footerContactWrap h3 { margin: 0 auto 20px; padding: 5px 10px; font-size: 1.84rem; font-weight: 700; background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%); border-bottom: 1px solid #cecece; }
#footerContactWrap > p { margin: auto; width: 95%; }
#footerContactWrap > p + p { margin-top: 10px; }
#footerContactWrap .contactBtn a { margin: auto; padding: 5px; color: #FFFFFF; font-size: 1.6rem; width: 80%; max-width: 400px; text-align: center; background: #cd853f; border-radius: 5px; display: block; }
#footerContactWrap #forLINE { margin: 40px auto; width: 95%; }
@media (max-width: 480px) { #footerContactWrap #forLINE { margin: 40px auto 20px; } }
#footerContactWrap #forLINE h4 { margin: 0 auto 10px; font-size: 1.6rem; font-weight: 700; }
#footerContactWrap #forLINE > .fl { margin: 20px auto 0; }
#footerContactWrap #forLINE > .fl dl { padding: 20px; width: 49%; background: #EFEFEF; border-radius: 5px; box-sizing: border-box; }
#footerContactWrap #forLINE > .fl dl dt { margin-bottom: 20px; padding-bottom: 5px; font-weight: 700; text-align: center; border-bottom: 1px solid #cecece; }
#footerContactWrap #forLINE > .fl dl dd p + p { margin-top: 10px; }
@media (max-width: 480px) { #footerContactWrap #forLINE > .fl dl { width: 100%; }
  #footerContactWrap #forLINE > .fl dl + dl { margin-top: 10px; } }

#footerTelArea { margin-top: 40px; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
#footerTelArea div p + p { margin-top: 10px; }
@media (max-width: 480px) { #footerTelArea div { width: 100%; }
  #footerTelArea figure { margin-top: 10px; width: 100%; } }

#flink { margin-top: 40px; }
#flink li + li { margin-left: 40px; }

.copyright { margin: 40px auto 20px; }

/*============================================================================
	regulation
=============================================================================*/
/*============================================================================
	調整用
=============================================================================*/
.fl { display: -webkit-flex; display: -moz-flex; display: flex; }

.fl-tab { display: -webkit-flex; display: -moz-flex; display: flex; }
@media (max-width: 820px) { .fl-tab { -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; } }

.fl-smp { display: -webkit-flex; display: -moz-flex; display: flex; }
@media (max-width: 480px) { .fl-smp { -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; } }

.fl-jst { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.fl-cen { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.fl-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }

.fl-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }

.fl-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.fl-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }

.mt0 { margin-top: min(0vw,0px); }

.mb0 { margin-bottom: min(0vw,0px); }

.pt0 { padding-top: min(0vw,0px); }

.pb0 { padding-bottom: min(0vw,0px); }

.mt10 { margin-top: min(3vw,10px); }

.mb10 { margin-bottom: min(3vw,10px); }

.pt10 { padding-top: min(3vw,10px); }

.pb10 { padding-bottom: min(3vw,10px); }

.mt20 { margin-top: min(6vw,20px); }

.mb20 { margin-bottom: min(6vw,20px); }

.pt20 { padding-top: min(6vw,20px); }

.pb20 { padding-bottom: min(6vw,20px); }

.mt30 { margin-top: min(9vw,30px); }

.mb30 { margin-bottom: min(9vw,30px); }

.pt30 { padding-top: min(9vw,30px); }

.pb30 { padding-bottom: min(9vw,30px); }

.mt40 { margin-top: min(12vw,40px); }

.mb40 { margin-bottom: min(12vw,40px); }

.pt40 { padding-top: min(12vw,40px); }

.pb40 { padding-bottom: min(12vw,40px); }

.mt50 { margin-top: min(15vw,50px); }

.mb50 { margin-bottom: min(15vw,50px); }

.pt50 { padding-top: min(15vw,50px); }

.pb50 { padding-bottom: min(15vw,50px); }

.mt60 { margin-top: min(18vw,60px); }

.mb60 { margin-bottom: min(18vw,60px); }

.pt60 { padding-top: min(18vw,60px); }

.pb60 { padding-bottom: min(18vw,60px); }

.mt70 { margin-top: min(21vw,70px); }

.mb70 { margin-bottom: min(21vw,70px); }

.pt70 { padding-top: min(21vw,70px); }

.pb70 { padding-bottom: min(21vw,70px); }

.mt80 { margin-top: min(24vw,80px); }

.mb80 { margin-bottom: min(24vw,80px); }

.pt80 { padding-top: min(24vw,80px); }

.pb80 { padding-bottom: min(24vw,80px); }

.mt90 { margin-top: min(27vw,90px); }

.mb90 { margin-bottom: min(27vw,90px); }

.pt90 { padding-top: min(27vw,90px); }

.pb90 { padding-bottom: min(27vw,90px); }

.mt100 { margin-top: min(30vw,100px); }

.mb100 { margin-bottom: min(30vw,100px); }

.pt100 { padding-top: min(30vw,100px); }

.pb100 { padding-bottom: min(30vw,100px); }

br { display: inline; }
@media (min-width: calc(1024px + 1px)) { br.showPC { display: none !important; } }
@media (min-width: calc(820px + 1px)) { br.showTab { display: none !important; } }
@media (min-width: calc(480px + 1px)) { br.showSP { display: none !important; } }
@media (max-width: 1024px) { br.hdnPC { display: none; }
  br.showPC { display: inherit; } }
@media (max-width: 820px) { br.hdnTab { display: none; }
  br.showTab { display: inherit; } }
@media (max-width: 480px) { br.hdnSP { display: none; }
  br.showSP { display: inherit; } }

span { display: inline-block; }
@media (min-width: calc(1024px + 1px)) { span.showPC { display: none !important; } }
@media (min-width: calc(820px + 1px)) { span.showTab { display: none !important; } }
@media (min-width: calc(480px + 1px)) { span.showSP { display: none !important; } }
@media (max-width: 1024px) { span.hdnPC { display: none !important; }
  span.showPC { display: inherit; } }
@media (max-width: 820px) { span.hdnTab { display: none !important; }
  span.showTab { display: inherit; } }
@media (max-width: 480px) { span.hdnSP { display: none !important; }
  span.showSP { display: inherit; } }

article, section, div, p, figure, ul, h1 { display: block; }
@media (min-width: calc(1024px + 1px)) { article.showPC, section.showPC, div.showPC, p.showPC, figure.showPC, ul.showPC, h1.showPC { display: none !important; } }
@media (min-width: calc(820px + 1px)) { article.showTab, section.showTab, div.showTab, p.showTab, figure.showTab, ul.showTab, h1.showTab { display: none !important; } }
@media (min-width: calc(480px + 1px)) { article.showSP, section.showSP, div.showSP, p.showSP, figure.showSP, ul.showSP, h1.showSP { display: none !important; } }
@media (max-width: 1024px) { article.hdnPC, section.hdnPC, div.hdnPC, p.hdnPC, figure.hdnPC, ul.hdnPC, h1.hdnPC { display: none !important; }
  article.showPC, section.showPC, div.showPC, p.showPC, figure.showPC, ul.showPC, h1.showPC { display: initial; } }
@media (max-width: 820px) { article.hdnTab, section.hdnTab, div.hdnTab, p.hdnTab, figure.hdnTab, ul.hdnTab, h1.hdnTab { display: none !important; }
  article.showTab, section.showTab, div.showTab, p.showTab, figure.showTab, ul.showTab, h1.showTab { display: initial; } }
@media (max-width: 480px) { article.hdnSP, section.hdnSP, div.hdnSP, p.hdnSP, figure.hdnSP, ul.hdnSP, h1.hdnSP { display: none !important; }
  article.showSP, section.showSP, div.showSP, p.showSP, figure.showSP, ul.showSP, h1.showSP { display: initial; } }

li { display: list-item; }
@media (min-width: calc(1024px + 1px)) { li.showPC { display: none !important; } }
@media (min-width: calc(820px + 1px)) { li.showTab { display: none !important; } }
@media (min-width: calc(480px + 1px)) { li.showSP { display: none !important; } }
@media (max-width: 1024px) { li.hdnPC { display: none !important; }
  li.showPC { display: initial; } }
@media (max-width: 820px) { li.hdnTab { display: none !important; }
  li.showTab { display: initial; } }
@media (max-width: 480px) { li.hdnSP { display: none !important; }
  li.showSP { display: initial; } }

.ta_cnt { text-align: center; }

.ta_right { text-align: right; }

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