@charset "UTF-8";
/* CSS Document */

/* ----------------------------------------------------------------------------------------------------
*  基本情報
* --------------------------------------------------------------------------------------------------*/

html {
    font-size: 62.5%;
    overflow-y: scroll;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
address,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
img,
form {
    margin: 0;
    padding: 0;
    border: none;
    list-style-type: none;
    font-family: "Yu Gothic" , "YuGothic" , "游ゴシック" , "游ゴシック体" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    font-size: 16px;
    line-height: 1.8;
    color: #140f0e;
    -webkit-font-smoothing: antialiased;
}

.uk-list-disc {
    list-style-type: disc;
}

.uk-list-disc li {
    list-style-type: disc;
}

.container {
    max-width: 900px;
    min-width: 320px;
    margin: auto;
}

.section {
    width: 100%;
    padding: 60px 0;
}

@media (max-width: 768px) {
    .section {
        padding: 30px 0;
    }
}

img {
    -webkit-backface-visibility: hidden;
}

.uk-container {
	margin: 0 auto;
	box-sizing: border-box;
}

.contents {
    position: relative;
}

#header,
#main,
#footer {
    width: 100%;
}

a,
a:hover {
    color: #2C3D7C;
    text-decoration: none;
}

a:hover {
    opacity: 0.7;
}

a,
.uk-button {
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}

a:hover,
    .uk-button:hover {
    opacity: 0.7;
}

/* table */

.uk-table th,
.uk-table th {
    font-size: 14px;
    font-size: 1.4rem;
}

/* color -------------------------------------- */

.uk-section-primary {
    background-color: #F4F4F4;
}

.uk-section-secondary {
    background-color: #00192C;
}


/* footer -------------------------------------------------------------- */

#footer {
	background: #2C3D7C;
}

footer small {
    font-size: 11px;
    color: #fff;
    letter-spacing: 1px;
    text-align: center;
}


@media screen and (min-width:769px) {
	.sp {
		display: none!important;
	}
	.sp-inline {
		display: none!important;
	}
	.sp-flex {
		display: none!important;
	}
}

@media screen and (max-width:768px) {
	.pc {
		display: none!important;
	}
	.sp {
		display: block;
	}
	.sp-inline {
		display: inline;
	}
	.sp-flex {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
	body , .contents{
		min-width: 314px ;
	}
	p, table, dl, ol, a {
		font-size: 1.4rem;
		line-height: 1.6;
	}
	.main p,  .main p a {
		font-size: 1.4rem;
	}
    #main {
        padding-bottom: 5%;
    }
}


/* ------------------------------------------------------------------------------
    Button
-------------------------------------------------------------------------------*/

.uk-button {
    /*display: block;*/
    transition: .3s ease-in-out;
    box-sizing: border-box;
    text-transform: none;
}

.uk-button-large {
    padding: 0 40px;
    line-height: 53px;
    font-size: .875rem;
}

.uk-button-default,
.uk-button-secondary {
    padding: 0 18px 0 18px;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 32px;
    border-radius: 32px;
}

.uk-button-large.uk-button-default,
.uk-button-large.uk-button-secondary {
    padding: 0 40px;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 53px;
    border-radius: 53px;
}

.uk-button-default {
    color: #fff;
    border: 1px solid #2C3D7C;
    background-color: #2C3D7C;
}

.uk-button-default:hover {
    color: #fff;
    border: 1px solid #2C3D7C;
    background-color: #2C3D7C;
}

.uk-button-secondary {
    background-color: #00192C;
    color: #fff;
    border: 1px solid #00192C;
}


/* ------------------------------------------------------------------------------
    main
-------------------------------------------------------------------------------*/

main {
    position: relative;
}


/* ------------------------------
    汎用パーツ
------------------------------ */

.w50px {width: 50px;}
.w60px {width: 60px;}
.w70px {width: 70px;}
.w80px {width: 80px;}
.w90px {width: 90px;}
.w100px {width: 100px;}

.left {
    text-align: left !important;
}
.m_auto {
    margin: auto;
}

/* 背景 -------------------------------------- */

.bgGrey {
    background-repeat: repeat-y;
    background-size: contain;
}

.bgWhite {
    background: #FFFFFF;
}

.bgNavy {
    background:#1b100b;
}


/* Margin, Padding -------------------------------------- */

.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt50{margin-top:50px !important;}
.mt70{margin-top:70px !important;}
.mt100{margin-top:100px !important;}
.mt150{margin-top:150px !important;}
.mb0{margin-bottom:0 !important;}
.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb40{margin-bottom:40px !important;}
.mb50{margin-bottom:50px !important;}
.mb60{margin-bottom:60px !important;}
.mb100{margin-bottom:100px !important;}
.mr05{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}
.mr30{margin-right:30px !important;}
.mr40{margin-right:40px !important;}
.ml10{margin-left:10px !important;}
.ml30{margin-left:30px !important;}
.mrAuto{margin-right: auto;}
.mlAuto{margin-left: auto;}
.p10{padding: 10px !important;}
.p15{padding: 15px !important;}
.p20{padding: 20px !important;}
.p30{padding: 30px !important;}
.pb05{padding-bottom: 5px !important;}
.pb10{padding-bottom: 10px !important;}
.pb15{padding-bottom: 15px !important;}
.pb20{padding-bottom: 20px !important;}
.pb30{padding-bottom: 30px !important;}
.pb50{padding-bottom: 50px !important;}
.pb100{padding-bottom: 100px !important;}
.pt05{padding-top: 5px !important;}
.pt10{padding-top: 10px !important;}
.pt15{padding-top: 15px !important;}
.pt20{padding-top: 20px !important;}
.p010{padding:0 10px !important;}
.p015{padding:0 15px !important;}
.p020{padding:0 20px !important;}
.p030{padding:0 30px !important;}
.pr02{padding-right: 2px !important;}
.pr05{padding-right: 5px !important;}
.pr10{padding-right: 10px !important;}
.pl05{padding-left: 5px !important;}
.pl10{padding-left: 10px !important;}


/* Font -------------------------------------- */

.f28{font-size:28px;}
.f21{font-size:21px;}
.bold {	font-weight: bold;}
.justify{text-align:justify;}
.fwB{font-weight:bold !important;}
.fs10{font-size:10px !important;line-height:1.5em;}
.fs11{font-size:11px !important;line-height:1.5em;}
.fs12{font-size:12px !important;line-height:1.5em;}
.fs13{font-size:13px !important;line-height:1.5em;}
.fs14{font-size:14px !important;line-height:1.5em;}
.fs15{font-size:15px !important;line-height:1.5em;}
.fs16{font-size:16px !important;line-height:1.5em;}
.fs18{font-size:18px !important;line-height:1.5em;}
.fs20{font-size:20px !important;line-height:1.5em;}
.fs24{font-size:24px !important;line-height:1.5em;}
.fs26{font-size:26px !important;line-height:1.5em;}
.fs30{font-size:30px !important;line-height:1.5em;}
.fsS{font-size:80% !important;line-height:1.5em;}
.fsL{font-size:120% !important;line-height:1.5em;}

.fs05rem{font-size:0.5rem !important;line-height:1.5em;}
.fs07rem{font-size:0.7rem !important;line-height:1.5em;}
.fs10rem{font-size:1.0rem !important;line-height:1.5em;}
.fs11rem{font-size:1.1rem !important;line-height:1.5em;}
.fs12rem{font-size:1.2rem !important;line-height:1.5em;}
.fs14rem{font-size:1.4rem !important;line-height:1.5em;}
.fs16rem{font-size:1.6rem !important;line-height:2em;}
.fs18rem{font-size:1.8rem !important;line-height:1.5em;}
.fs20rem{font-size:2.0rem !important;line-height:1.5em;}
.fs25rem{font-size:2.5rem !important;line-height:2em;}
.fs30rem{font-size:3.0rem !important;line-height:2em;}

.fs07em{font-size:0.7em !important;line-height:1.5em;}
.fs10em{font-size:1.0em !important;line-height:1.5em;}
.fs11em{font-size:1.1em !important;line-height:1.5em;}
.fs12em{font-size:1.2em !important;line-height:1.5em;}
.fs13em{font-size:1.3em !important;line-height:1.5em;}
.fs14em{font-size:1.4em !important;line-height:1.5em;}
.fs16em{font-size:1.6em !important;line-height:1.5em;}
.fs18em{font-size:1.8em !important;line-height:1.5em;}
.fs20em{font-size:2.0em !important;line-height:1.5em;}

.text-grey { color: #777777 !important; }
.text-white { color: #fff !important; }
.text-red { color: #2C3D7C !important; }

.underline{text-decoration:underline !important;}
.line-through {text-decoration: line-through !important;}

.lineHeightWide-small { line-height: 1.8em !important; }
.lineHeightWide-medium { line-height: 2.0em !important; }
.lineHeightWide-large { line-height: 2.2em !important; }


/* Title -------------------------------------- */

.section-title {
    width: 20%;
    margin: auto;
}



@media (max-width: 768px) {
    .section-title {
        font-size: 22px;
        font-size: 2.2rem;
        margin-bottom: 30px;
    }
    .section-title::before {
        bottom: 0px;
    }
}

.container-title {
    width: 40%;
    margin: auto;
}

.title_2embold {
    font-size: 2em;
    font-weight: bold;
    line-height:1.3em;
}
/* ------------------------------------------------------------------------------
    メイン画像 - スタイル
-------------------------------------------------------------------------------*/
.main_visual {
    background-size: auto 100%;
    height: 25%;
}

.main_visual.sp {
    background-size: 100% auto;
    background-repeat:no-repeat;
    height: 500px;
}

.main_visual.sp .uk-container {
    padding: 0;
}

.main_visual .logo_area {
    margin-left: 20px;
    padding-top: 15px;
}

.main_visual.sp .logo_area {
    padding: 10px;
    background-color: #fff;
    display: inline-block;
}

.main_visual .logo_area img {
    margin-top: 10px;
    width: 12%;
}

.main_visual.sp .logo_area img {
    width: 60px;
}
.main_visual {
    background-size: auto 100%;
    height: 25%;
}

.main_visual.sp {
    background-size: 100% auto;
    background-repeat:no-repeat;
    height: 500px;
}

.main_visual.sp .uk-container {
    padding: 0;
}

.main_visual .logo_area {
    margin-left: 20px;
    padding-top: 15px;
}

.main_visual.sp .logo_area {
    padding: 10px;
    background-color: #fff;
    display: inline-block;
}

.main_visual .logo_area img {
    margin-top: 10px;
    width: 12%;
}

.main_visual.sp .logo_area img {
    width: 60px;
}

.main_visual .text_area {
    margin-top: -50px;
    margin-left: 20px;
    padding-bottom: 30px;
}

@media (max-width: 1190px) {
    .main_visual .text_area {
        width: 100%;
        max-width: 1110px;
        margin-left: 0;
    }
}

.main_visual.sp .text_area {
    padding-top: 43px;
    padding-bottom: 30px;
}

.main_visual.sp .main_catch_txt {
    background-color: rgba(255,255,255,0.60);
    width: 100%;
    text-align: center;
    padding-top: 23px;
    padding-bottom: 30px;
}

.main_visual.sp .main_catch_txt:first-child {
    padding-bottom: 0;
}

.product_name img {
    width: 90%;
    max-width: 400px;
}

.main_visual .text_area h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #ffffff;
}

.main_visual.sp .text_area h2 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 30px;
    margin-top: 130px;
    margin-left: 20px;
    text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0-2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
}

.main_visual .text_area ul li {
    background-color: #E2E2E2;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 10px;
}

.main_visual.sp .text_area .list_area {
    margin-top: -14px;
}

.main_visual.sp .text_area ul li {
    background-color: #E2E2E2;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    padding: 5px 10px;
}

.main_visual .text_area .sub_catch_txt p {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
}

.main_visual.sp .text_area .sub_catch_txt p {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 30px;
    margin-left: 20px;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

.main_visual .text_area .cta_btn_area  {
    animation: fluffy1 3s ease infinite;
    text-align: center;
}

.main_visual.sp .text_area .cta_btn_area  {
    animation: fluffy1 3s ease infinite;
    text-align: center;
}

@keyframes fluffy1 {
    0% { transform:translateY(0) }
    5% { transform:translateY(0) }
    10% { transform:translateY(0) }
    20% { transform:translateY(-15px) }
    25% { transform:translateY(0) }
    30% { transform:translateY(-15px) }
    50% { transform:translateY(0) }
    100% { transform:translateY(0) }
}


/* ------------------------------------------------------------------------------
    こんな方におすすめです - スタイル
-------------------------------------------------------------------------------*/
.ribbon img {
    margin-top: 30px;
    width: contain;
}

.uk-container .cut {
    width: 92%;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
}



#recom .icon_check {
    width: 38px
}

@media (max-width: 768px) {
    #recom .icon_check {
        width: 28px
    }
}

#recom ul li {
    margin-bottom: 20px;
}

#recom ul li p {
    padding-top: 5px;
    font-size: 15px;
    line-height: 2.0em
}

@media (max-width: 768px) {
    #recom ul li p {
        padding-top: 0px;
    }
}


/* ------------------------------------------------------------------------------
    IT導入補助金とは？ - スタイル
-------------------------------------------------------------------------------*/

#about_subsidy .uk-button-secondary {
    padding: 10px;
    line-height: 1.5;
}


/* ------------------------------------------------------------------------------
    導入可能なITツール - スタイル
-------------------------------------------------------------------------------*/

#it_tool-detail .uk-card-body.uk-card-small {
    padding: 30px 30px;
}

@media (max-width: 768px) {
    #it_tool-detail .uk-card-body.uk-card-small {
        padding: 30px 20px;
    }
}

#it_tool-detail .uk-card-defaul {
    border: 5px solid #2C3D7C;
    background-color: #fff;
}

#it_tool-detail .uk-card-defaul .uk-card-title {
    font-size: 2rem;
    margin-bottom: 30px;
    font-weight: bold;
}

#it_tool-detail .uk-card-defaul .uk-card-title,
#it_tool-detail .uk-card-defaul p {
    color: #00192C;
}

#it_tool-detail .uk-card-defaul .uk-table th {
    font-weight: bold;
    white-space: nowrap;
}

#it_tool-detail .uk-card-defaul .uk-table th,
#it_tool-detail .uk-card-defaul .uk-table td {
    color: #00192C;
    font-size: 12px;
}

/* スクロールの幅の指定 */

#it_tool-detail .uk-card-defaul .uk-overflow-auto {
    -webkit-overflow-scrolling: touch;
}

#it_tool-detail .uk-card-defaul .uk-overflow-auto::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

#it_tool-detail .uk-card-defaul .uk-overflow-auto::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* スクロールの背景の設定 */

#it_tool-detail .uk-card-defaul .uk-overflow-auto::-webkit-scrollbar-track {
    border-radius: 5px;
    background: #eee;
}

/* スクロールのつまみ部分の設定 */

#it_tool-detail .uk-card-defaul .uk-overflow-auto::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #00192C;
}


/* ------------------------------------------------------------------------------
    料金プラン - スタイル
-------------------------------------------------------------------------------*/

#price_plan .uk-card-body.uk-card-small {
    padding: 30px 30px;
}

@media (max-width: 768px) {
    #price_plan .uk-card-body.uk-card-small {
        padding: 30px 20px;
    }
}

#price_plan .uk-card-defaul {
    background-color: #fff;
}

#price_plan .uk-card-defaul .uk-card-title {
    font-size: 2rem;
    margin-bottom: 30px;
    font-weight: bold;
}

#price_plan .uk-card-defaul .uk-card-title,
#price_plan .uk-card-defaul p {
    color: #00192C;
}

#price_plan .uk-card-defaul .uk-table th {
    font-weight: bold;
    white-space: nowrap;
    border: 1px solid #e5e5e5;
}

#price_plan .uk-card-defaul .uk-table th,
#price_plan .uk-card-defaul .uk-table td {
    color: #00192C;
    font-size: 12px;
}

@media (max-width: 768px) {
    #price_plan .uk-card-defaul .uk-table th.explain {
        min-width: 380px;
    }
    #price_plan .uk-card-defaul .uk-table td.soft_type {
        min-width: 175px;
    }
}

/* スクロールの幅の指定 */

#price_plan .uk-card-defaul .uk-overflow-auto {
    -webkit-overflow-scrolling: touch;
}

#price_plan .uk-card-defaul .uk-overflow-auto::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

#price_plan .uk-card-defaul .uk-overflow-auto::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* スクロールの背景の設定 */

#price_plan .uk-card-defaul .uk-overflow-auto::-webkit-scrollbar-track {
    border-radius: 5px;
    background: #eee;
}

/* スクロールのつまみ部分の設定 */

#price_plan .uk-card-defaul .uk-overflow-auto::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #00192C;
}