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

1.リセットCSS 一般
2.リセットCSS カスタマイズ
3.共通設定

------------------*/
/*リセットCSS（一般）
================================================*/
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

/*リセットCSS（カスタマイズ）
================================================*/
/* html5対応 */
main { display: block; }

/* リンク設定クリア */
a:link, a:visited, a:active, a:hover { color: #000; text-decoration: none; }

/* img下の余白を消す */
img { display: block; margin: 0 auto; padding: 0; }

/*共通設定
================================================*/
/* Flexbox */
.flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: horizontal; -moz-flex-direction: horizontal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; }

@media screen and (max-width: 767px) { .flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: horizontal; -moz-flex-direction: horizontal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; justify-content: space-around; -ms-flex-pack: space-around; } }
/* レスポンシブ */
.pc { display: block; }

.sp { display: none; }

@media screen and (max-width: 767px) { .pc { display: none; }
  .sp { display: block; } }
img { width: 100%; }

/* ホバーアクション、透過 */
a { display: block; }

a:hover { opacity: 0.8; }

/* 画面ローディング */
body { animation: fadeIn 2s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal; }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
/* フロート設定 */
.left { float: left; }

.right { float: right; }

.clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }

/* Hides from IE Mac \*/
* html .clearfix { height: 1%; }

.clearfix { display: block; }

/* End Hack */
/*全体設定
================================================*/
body { font-family: "Noto Sans Japanese","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; -webkit-text-size-adjust: 100%; font-size: 16px; color: #323232; line-height: 1.6; width: 100%; overflow-wrap: break-word; /*折り返しを綺麗にする*/ text-rendering: optimizeLegibility; /*アンチエイリアスなどフォント見やすくする*/ text-align: justify; /*均等に配置する*/ }

.col_01 { width: 95%; margin: 0 auto; max-width: 1000px; }

.sbr { display: none; }

/*ヘッダー
================================================*/
header { background: #fff; position: relative; z-index: 2; /*position:fixed;
top:0;
left:0;
z-index: 10000;*/ padding: 20px 0 20px; width: 100%; }
header .box_01 { width: 65%; }
header .box_01 h1 { color: transparent; width: 0; height: 0; }
header .box_01 p { width: 300px; line-height: 1; }
header .box_01 p img { width: 100%; }
header .box_01 li { font-size: 12px; }
header .box_01 li span { color: #e60012; font-size: 12px; }
header .box_02 { width: 33%; padding-top: 18px; box-sizing: border-box; }
header .box_02 .tel { font-size: 35px; font-weight: bold; background: url(../img/tel.png) no-repeat left 8px; background-size: 35px; padding-left: 50px; box-sizing: border-box; line-height: 1; }
header .box_02 p { width: 100%; font-size: 12px; }
header .box_02 p a { display: unset; font-size: 12px; }
@media screen and (max-width: 1200px) { header .box_02 .tel { font-size: 30px; background-size: 30px; padding-left: 40px; } }

/*メインビジュアル
================================================*/
.mv { background-color: #415464; background-image: url(../img/bg_mv.jpg); background-repeat: no-repeat; background-position: top center; background-size: contain; padding: 120px 0 20px; margin: -70px 0 0 0; position: relative; z-index: 1; box-sizing: border-box; }
.tekikakumark img {text-align: center;margin: 50px auto;max-width:500px;}

@media screen and (max-width: 1200px) { margin-top: 80px; }
/*こんなお悩み
================================================*/
.cont_01 { padding: 5% 0 0; background: url(../img/bg_01.jpg) no-repeat center center; background-size: cover; /*col_01{ background:url(../img/img_01.png) no-repeat -100px 60px; background-size:contain;
}*/ }
.cont_01 .col_01 { position: relative; }
.cont_01 .bg { position: absolute; bottom: -50px; left: -130px; z-index: 2; max-width: 380px; }
@media screen and (max-width: 1200px) { .cont_01 .bg { max-width: 330px; } }
.cont_01 h2 { font-size: 55px; line-height: 1.2; text-align: center; font-weight: bold; position: relative; z-index: 3; }
.cont_01 h2 strong { color: #00a6cf; font-size: 55px; font-weight: bold; }
@media screen and (max-width: 960px) { .cont_01 h2 { text-shadow: 0 0 0 #fff; } }
.cont_01 p { font-size: 20px; text-align: center; margin: 10px auto 20px; position: relative; z-index: 3; }
.cont_01 ul { width: 80%; margin: 0 auto; padding: 40px 0 60px; position: relative; z-index: 3; }
.cont_01 ul li { width: 30%; }

/*解決
================================================*/
.cont_02 h2 { background: #e5004f; padding: 25px 0; color: #fff; font-weight: bold; font-size: 50px; text-align: center; position: relative; z-index: 3; box-shadow: 0 6px 10px #bbb; line-height: 1.2; }
.cont_02 h2 strong { color: #fff100; font-size: 50px; }
@media screen and (max-width: 960px) { .cont_02 h2 .sp { display: block; } }
.cont_02 ul { background: url(../img/bg_02.png) repeat left top; padding: 60px 0 80px; }
.cont_02 li { margin-bottom: 20px; background: #fff; padding: 30px 40px 35px; box-sizing: border-box; border: 3px #dddddd solid; border-radius: 5px; }
@media screen and (max-width: 1000px) { .cont_02 li { padding: 30px 20px 35px; } }
.cont_02 li h3 { font-size: 45px; font-weight: bold; padding-left: 6%; box-sizing: border-box; line-height: 1.2; margin-bottom: 10px; }
@media screen and (max-width: 1000px) { .cont_02 li h3 { line-height: 1.6; } }
@media screen and (max-width: 959px) { .cont_02 li h3 .sp { display: block; } }
.cont_02 li h3 .pink { font-size: 45px; font-weight: bold; color: #e5004f; }
.cont_02 li:nth-child(1) h3 { background: url(../img/ico_01.png) no-repeat left 5px; background-size: 3%; }
.cont_02 li:nth-child(2) h3 { background: url(../img/ico_02.png) no-repeat left 5px; background-size: 4.5%; }
.cont_02 li:nth-child(3) h3 { background: url(../img/ico_03.png) no-repeat left 5px; background-size: 4.5%; }
.cont_02 li p { font-size: 16px; padding-left: 6%; box-sizing: border-box; }
.cont_02 li .getsu { border: 1px solid #000; box-sizing: border-box; padding: 5px 10px 2px; font-size: 35px; font-weight: bold; margin: -3px 10px 0; display: inline-block; line-height: 35px; vertical-align: middle; }
.cont_02 li .getsu span { font-size: 16px; line-height: 35px; }
.cont_02 li .num { font-size: 48px; line-height: 1; }
.cont_02 li .mono { background: #dddddd; padding: 6px 10px; box-sizing: border-box; font-size: 20px; letter-spacing: 1px; }
.cont_02 li .mono .num2 { font-size: 25px; }

/*プラン
================================================*/
.cont_03 { background: url(../img/bg_03.jpg) no-repeat left top; background-size: cover; padding: 80px 0 80px; }
.cont_03 h2 { font-size: 40px; font-weight: bold; line-height: 1.2; margin-bottom: 20px; color: #fff; text-align: center; }
.cont_03 h3 { font-size: 30px; font-weight: bold; line-height: 1.2; margin-bottom: 30px; text-align: center; color: #fff; }
.cont_03 h3 .l { font-size: 40px; padding-right: 5px; box-sizing: border-box; }
.cont_03 h3 .r { font-size: 40px; padding-left: 5px; box-sizing: border-box; }

.cont_03_01 { width: 100%; background: #fff; border-radius: 5px; padding: 90px 2.5% 2.5%; box-sizing: border-box; position: relative; margin-top: 100px; }
.cont_03_01 h4 { width: 80%; margin: 0px auto 0; position: absolute; top: -50px; left: 10%; }
.cont_03_01 .i_1 { width: 60%; margin: 0 auto 20px; }
.cont_03_01 .i_2 { width: 55%; margin-right: 2.5%; margin-left: 2.5%; }
.cont_03_01 .i_3 { width: 35%; margin-right: 2.5%; }
.cont_03_01 .w-box { margin-top: 20px; background: #00a6cf; padding: 2.5%; box-sizing: border-box; border-radius: 5px; }
.cont_03_01 .i_4 { width: 35%; margin-left: 5%; margin-right: 2.5%; margin-top: 10px; }
.cont_03_01 .i_5 { width: 50%; margin-right: 5%; }
.cont_03_01 ul { border-radius: 5px; background: #fff; padding: 3% 2.5% 2%; box-sizing: border-box; margin-top: 2.5%; }
.cont_03_01 ul li { margin-bottom: 20px; }
.cont_03_01 ul .q { color: #00a6cf; font-size: 18px; padding-bottom: 10px; border-bottom: 1px solid #323232; }
.cont_03_01 ul .a { font-size: 15px; padding-top: 10px; }

.cont_03_02 { width: 100%; background: #fff; border-radius: 5px; padding: 50px 2.5% 2.5%; box-sizing: border-box; position: relative; margin-top: 100px; margin-bottom: 60px; }
.cont_03_02 h4 { width: 80%; margin: 0px auto 0; position: absolute; top: -50px; left: 10%; }
.cont_03_02 .i_1 { width: 60%; }
.cont_03_02 .i_2 { width: 38%; }
.cont_03_02 .t_1 { font-size: 18px; text-align: center; margin: 20px auto; }
.cont_03_02 .w-box { background: #00a6cf; padding: 2.5%; box-sizing: border-box; border-radius: 5px; }
.cont_03_02 ul { border-radius: 5px; background: #fff; padding: 3% 2.5% 2%; box-sizing: border-box; margin-top: 2.5%; }
.cont_03_02 ul li { margin-bottom: 20px; }
.cont_03_02 ul .q { color: #00a6cf; font-size: 18px; padding-bottom: 10px; border-bottom: 1px solid #323232; }
.cont_03_02 ul .a { font-size: 15px; padding-top: 10px; }

.cont_03_03 { width: 100%; background: #fff; border-radius: 5px; padding: 50px 2.5% 2.5%; box-sizing: border-box; position: relative; margin-top: 80px; }
.cont_03_03 h4 { width: 80%; margin: 0px auto 0; position: absolute; top: -50px; left: 10%; }
.cont_03_03 .i_1 { width: 60%; }
.cont_03_03 .i_2 { width: 38%; }
.cont_03_03 .t_1 { font-size: 18px; text-align: center; margin: 20px auto; }
.cont_03_03 .w-box { background: #415464; padding: 2.5%; box-sizing: border-box; border-radius: 5px; }
.cont_03_03 ul { border-radius: 5px; background: #fff; padding: 3% 2.5% 2%; box-sizing: border-box; margin-top: 2.5%; }
.cont_03_03 ul li { margin-bottom: 20px; }
.cont_03_03 ul .q { color: #00a6cf; font-size: 18px; padding-bottom: 10px; border-bottom: 1px solid #323232; }
.cont_03_03 ul .a { font-size: 15px; padding-top: 10px; }

/*試算表
================================================*/
.cont_04 { background: url(../img/bg_02.png) repeat left top; padding: 60px 0 60px; }
.cont_04 h2 { background: #e5004f; padding: 15px 0; box-sizing: border-box; color: #fff; font-size: 30px; text-align: center; }
.cont_04 .t_1 { font-size: 30px; font-weight: bold; text-align: center; padding: 40px 0; box-sizing: border-box; }
.cont_04 .t_1 span { background: linear-gradient(transparent 60%, #ffff66 60%); }
.cont_04 li { width: 30%; }

/*CV
================================================*/
.cont_05 { color: #fff; padding-bottom: 40px; }
.cont_05 h4 { padding: 15px 0; background: #415464; font-size: 26px; text-align: center; margin-bottom: 40px; }
.cont_05 .cvarea { padding: 20px 5%; box-sizing: border-box; background: #e5004f; border-radius: 5px; color: #fff; }
.cont_05 .cvarea .box_02 { width: 60%; padding-top: 0px; box-sizing: border-box; text-align: left; }
.cont_05 .cvarea .box_02 .tel { font-size: 62px; font-weight: bold; background: url(../img/tel2.png) no-repeat left 12px; background-size: 62px; padding-left: 70px; box-sizing: border-box; line-height: 1; color: #fff; }
.cont_05 .cvarea .box_02 p { width: 100%; font-size: 14px; margin-top: 10px; }
.cont_05 .cvarea .box_02 p a { display: unset; font-size: 14px; color: #fff; }
.cont_05 .cvarea .btn { width: 40%; }
.cont_05 .cvarea .t_1 { font-size: 25px; margin-bottom: 20px; width: 100%; text-align: center; }
.cont_05 .caution { font-size: 14px; line-height: 1.2; color: #323232; text-align: center; margin-top: 20px; }

/*QA
================================================*/
.cont_06 { background: #e5f5f9; padding: 60px 0 60px; }
.cont_06 h2 { background: #00a6cf; padding: 15px 0; text-align: center; margin-bottom: 20px; color: #fff; font-size: 30px; }
.cont_06 dt { font-size: 18px; cursor: pointer; background-color: #fff; background-image: url(../img/arrow.png); background-repeat: no-repeat; background-position: 98% center; padding: 15px 25px; box-sizing: border-box; margin-bottom: 1px; }
.cont_06 dt span { color: #00a6cf; padding-right: 10px; box-sizing: border-box; }
.cont_06 dd { font-size: 15px; padding: 20px; box-sizing: border-box; display: none; }

/*特典
================================================*/
.cont_07 { background: url(../img/bg_04.jpg) no-repeat center center; background-size: cover; padding-bottom: 60px; }
.cont_07 h2 { background: #e5004f; padding: 15px 0; text-align: center; box-sizing: border-box; font-size: 35px; font-weight: bold; color: #fff; margin: 0 auto 60px; }
.cont_07 h2 strong { color: #fff45c; }
.cont_07 p { width: 60%; margin-left: 40%; }

/*お客様の声
================================================*/
.cont_08 { position: relative; }
.cont_08 .tri { position: absolute; top: -1px; left: 48%; display: block; width: 0; height: 0; border-top: 30px solid #e8e7e3; border-right: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid transparent; }
.cont_08 h2 { background: #00a6cf; padding: 40px 0 30px; box-sizing: border-box; text-align: center; color: #fff; font-size: 43px; font-weight: bold; }

.cont_08_01 { width: 100%; }
.cont_08_01 li { width: 25%; color: #fff; font-size: 30px; text-align: center; }
.cont_08_01 li:nth-child(1) { background: url(../img/bg_06.jpg) no-repeat center center; padding: 100px 0; }
.cont_08_01 li:nth-child(2) { background: url(../img/bg_07.jpg) no-repeat center center; padding: 80px 0; }
.cont_08_01 li:nth-child(3) { background: url(../img/bg_08.jpg) no-repeat center center; padding: 100px 0; }
.cont_08_01 li:nth-child(4) { background: url(../img/bg_09.jpg) no-repeat center center; padding: 60px 0; }

.cont_08_02 { background: url(../img/bg_05.jpg) no-repeat center center; background-size: cover; padding: 60px 0 40px; }
.cont_08_02 section { background: rgba(0, 0, 0, 0.6); padding: 40px; box-sizing: border-box; border-radius: 10px; }
.cont_08_02 section h3 { color: #fff; font-size: 43px; margin-bottom: 10px; text-align: center; }
.cont_08_02 section .t_1 { color: #fff; font-size: 15px; margin-bottom: 20px; text-align: center; }
.cont_08_02 li { width: 48%; background: #fff; border-radius: 5px; padding: 20px; box-sizing: border-box; margin-bottom: 20px; }
.cont_08_02 li h4 { color: #00a6cf; font-size: 17px; }
.cont_08_02 li p { margin-bottom: 20px; font-size: 13px; }

/*CV
================================================*/
.cont_09 { color: #fff; padding: 60px 0; }
.cont_09 .cvarea { padding: 20px 5%; box-sizing: border-box; background: #e5004f; border-radius: 5px; color: #fff; }
.cont_09 .cvarea .box_02 { width: 60%; padding-top: 0px; box-sizing: border-box; text-align: left; }
.cont_09 .cvarea .box_02 .tel { font-size: 62px; font-weight: bold; background: url(../img/tel2.png) no-repeat left 12px; background-size: 62px; padding-left: 70px; box-sizing: border-box; line-height: 1; color: #fff; }
.cont_09 .cvarea .box_02 p { width: 100%; font-size: 14px; margin-top: 10px; }
.cont_09 .cvarea .box_02 p a { display: unset; font-size: 14px; color: #fff; }
.cont_09 .cvarea .btn { width: 40%; }
.cont_09 .cvarea .t_1 { font-size: 25px; margin-bottom: 20px; width: 100%; text-align: center; }
.cont_09 .caution { font-size: 14px; line-height: 1.2; color: #323232; text-align: center; margin-top: 20px; }

/*会社概要
================================================*/
.cont_10 { background: url(../img/bg_10.png) repeat left top; padding: 60px 0; }
.cont_10 .t_1 { font-size: 30px; text-align: center; margin-bottom: 30px; }
.cont_10 .t_2 { font-size: 20px; text-align: center; margin-bottom: 30px; }
.cont_10 .flex li { margin-bottom: 20px; }
.cont_10 .flex li:nth-child(1) { width: 53%; }
.cont_10 .flex li:nth-child(2) { width: 40%; }
.cont_10 .flex li:nth-child(3) { width: 70%; }
.cont_10 .flex li:nth-child(4) { width: 25%; }
.cont_10 table { width: 100%; }
.cont_10 table:first-of-type { margin-bottom: 10px; }
.cont_10 tr { border: 1px solid #323232; }
.cont_10 th { background: #e5e5e5; padding: 10px; box-sizing: border-box; width: 30%; font-size: 14px; }
.cont_10 td { background: #fff; padding: 10px; box-sizing: border-box; width: 70%; border-left: 1px solid #323232; font-size: 14px; }
.cont_10 .btn_b { background-color: #00a6cf; text-align: center; display: block; border-radius: 30px; width: 40%; max-width: 400px; margin: 0 auto; padding: 20px 0; box-sizing: border-box; background-image: url(../img/arrow_w.png); background-size: 10px; background-position: 95% center; background-repeat: no-repeat; color: #fff; font-size: 16px; }
.cont_10 .pbtn-bk {background-color:#19448e; text-align: center; margin: 0 auto; padding: 50px 0px;} 
.shoukaimidashi {color:white;font-weight:700;}
.margin_ue {margin:5px 10px 15px;}
.margin_shita {margin:35px 10px 15px;}
.button_shoukai { background-color: #ec6800; text-align: center; display: block; border-radius: 30px; width: 80%; max-width: 400px; margin: 0 auto; padding: 20px 0; box-sizing: border-box; background-image: url(../img/arrow_w.png); background-size: 10px; background-position: 95% center; background-repeat: no-repeat; color: #fff!important; font-size: 18px; font-weight: 700; }


/*フッター
================================================*/
footer { padding: 60px 0 0; }
footer h2 { font-size: 32px; margin-bottom: 20px; text-align: center; }
footer h3 { font-size: 20px; margin-bottom: 15px; text-align: center; }
footer p { margin-bottom: 30px; font-size: 14px; }
footer th { width: 10%; color: #e5004f; text-align: left; padding-bottom: 10px; font-size: 14px; }
footer td { width: 85%; padding-bottom: 10px; font-size: 14px; }
footer .line { height: 40px; background: #415464; margin-top: 60px; }