@charset "UTF-8";


/* web fonts */
@import url(http://fonts.googleapis.com/css?family=Courgette);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*
 * cmn_layout.css
 *
 */


/* !HTML5 elements
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{ display: block;}

/* !Reseting
---------------------------------------------------------- */
body {
	font-family:"メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: none;
	font-size: 16px;
	color: #111;
	word-wrap:break-word;/* 英数字折り返し */
}
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, figure, figcaption
{ margin: 0; padding: 0;}
input, textarea
{ margin: 0; font-size: 100%;}
label
{ cursor: pointer;}
table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}
fieldset, img
{ border: 0;}
img
{ max-width: 100%; width: 100%; height: auto; vertical-align: top;}
address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}
ol, ul
{ list-style: none;}
caption, th
{ text-align: left;}
h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal;}
q:after, q:before
{ content:'';}
a, input
{ outline: none; }
input, textarea
{ border-radius: 0; font-family:"メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
input[type="button"],input[type="submit"]
{ -webkit-appearance: none; background: none; border: none; padding: 0; cursor: pointer;}
abbr, acronym
{ border: 0;}
*
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
/* !Clearfix
---------------------------------------------------------- */
.clearfix,
#header,
#contents,
section,
.box_layout01,
.box_column01,
.list_inline01
{
	display: block;
	min-height: 1%;
}
.clearfix:after,
#header:after,
#contents:after,
section:after,
.box_layout01:after,
.box_column01:after,
.list_inline01:after
{
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
}

/* !contents
---------------------------------------------------------- */
html { overflow-y: scroll;}
@media print {
	html,
	html body { *zoom: 0.65;}
}

.Clear {
   clear: both;
}

a {
   color: #009ACA;
   text-decoration: underline;
}

a:hover {
   color: #009ACA;
   text-decoration: none;
}

.row {
   width: 100%;
   max-width: 960px;
   margin: 0 auto;
}
.contents {
   margin: 0 auto;
   max-width: 960px;
   text-align: left;
   position: relative;
}

/* !ナビゲーション
---------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
}

/* nav-wrap */
#nav-wrap {
   width: 100%;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 15px;
   margin: 0 auto;
   z-index: 100;
   position: fixed;
   left: 0;
   top: 0;
   background: #FFF;
   border-bottom: 1px solid #FFF;
}

.opaque { background-color: #FFF; opacity: 0.9; }

/* hide toggle button */
#nav-wrap > a.mobile-btn { display: none; }

ul#nav {
   display: none; /* !非表示 */
}
ul#nav li {
   position: relative;
   list-style: none;
   display: inline-block;
}

/* Links */
ul#nav li a {

/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
   display: inline-block;
   padding: 0 10px;
   line-height: 32px;
   text-decoration: none;
   text-align: left;
   color: #FFF;
   -webkit-transition: color .2s ease-in-out;
   -moz-transition: color .2s ease-in-out;
   -o-transition: color .2s ease-in-out;
   -ms-transition: color .2s ease-in-out;
   transition: color .2s ease-in-out;
}

ul#nav li a:hover {
   color: #D80100;
}

ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #D80100; }

/* !リード文
---------------------------------------------------------- */
#Lead {
   width: 100%;
   background: #00A0EA;
   color: #FFF;
   padding: 5px;
}

/* !ナビゲーション
---------------------------------------------------------- */
#Btn_Navi {
   width: 100%;
   background: #D8C6A2;
   padding: 20px 0;
}

#Btn_Trial a {
   display:block;
   width: 100%;
   background:url(../img/btn_trial_on.jpg) no-repeat left top;
   background-size: cover;
}

#Btn_Trial a:hover {
   text-indent:-9999px;
}

#Btn_Price a {
   display:block;
   width: 100%;
   background:url(../img/btn_price_on.jpg) no-repeat left top;
   background-size: cover;
}

#Btn_Price a:hover {
   text-indent:-9999px;
}

#Btn_Inquiry a {
   display:block;
   width: 100%;
   background:url(../img/btn_appli_on.jpg) no-repeat left top;
   background-size: cover;
}

#Btn_Inquiry a:hover {
   text-indent:-9999px;
}

/* !汎用コンテンツ
---------------------------------------------------------- */
/*---見だし---*/
h2 {
   font-size: 30px;
   font-weight: bold;
   color: #FFF;
   background: #e5004f;
   padding: 4px 0px 0px 12px;
   border-radius: 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
}

h3 {
   font-size: 24px;
   font-weight: bold;
   color: #FFF;
   background: #00a0e9;
   padding: 4px 0px 0px 12px;
   margin-bottom: 20px;
}

h4 {
   font-size: 24px;
   font-weight: bold;
   color: #0099ff;
   margin-bottom: 10px;
}

.cmn_cont {
   background: #FFF;
   overflow: hidden;
}

/*---詳細ボタン---*/
.more_info_01 a {
   color: #FFF;
   background: #0AA0E7;
   padding: 3px 20px;
   text-decoration: underline;
   border-radius: 12px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
}

.more_info_01 a:hover {
   color: #FFF;
   text-decoration: none;
}

.more_info_02 a {
   color: #FFF;
   background: #f39700;
   padding: 3px 20px;
   text-decoration: underline;
   border-radius: 12px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
}

.more_info_02 a:hover {
   color: #FFF;
   text-decoration: none;
}

/*---全幅（背景色：茶色）---*/
.Full_bg_brown {
   width: 100%;
   background: #D8C6A2;
   padding: 20px 0;
}

/*---背景色：黒---*/
.Bg_black {
   width: 100%;
   color: #FFF;
   background: #1B1B1B;
   padding: 10px;
}

/*---ライン---*/
.Line_top_solid {
   border-top: 1px solid #999;
}

.Line_bottom_solid {
   border-bottom: 1px solid #999;
}

/*---狭い幅用---*/
.Narrow {
   width:85%;
   margin: 0 auto;
}

.Narrow_02 {
   width:70%;
   margin: 0 auto;
}

/*---角丸---*/
.border_radius {
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
}

/*---横並び画像---*/
ul.Img_Float {
   display:table;
   margin: 0 auto;
}

ul.Img_Float li {
   float:left;
   margin-left:5px;
   margin-right:5px;
   margin-bottom:10px;
}

/*---横並び画像（均等幅）---*/
ul.Img_Float_Equal {
   display:table;
   table-layout:fixed;
   width:100%;
}

ul.Img_Float_Equal li {
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}

@media screen and (max-width: 640px) {
ul.Img_Float_Equal {
      display: block;
}
   ul.Img_Float_Equal li {
      display: block;
      text-align:center;
      margin-bottom:10px;
   }
}

/*---2カラム（リキッド）---*/
.Liquid_box {
   display: table;
   margin: 0px;
   padding: 0px;
   width: 100%;
}

.Liquid_box .box_20 {
   display: table-cell;
   width: 19%;
}

.Liquid_box .box_30 {
   display: table-cell;
   width: 29%;
}

.Liquid_box .box_40 {
   display: table-cell;
   width: 39%;
}

.Liquid_box .box_50 {
   display: table-cell;
   width: 49%;
}

.Liquid_box .box_60 {
   display: table-cell;
   width: 59%;
}

.Liquid_box .box_70 {
   display: table-cell;
   width: 69%;
}

.Liquid_box .box_80 {
   display: table-cell;
   width: 79%;
}

.Liquid_box .box_margin {
   display: table-cell;
   width: 2%;
}

.Liquid_box .box_margin_20 {
   display: table-cell;
   width: 22%;
}

@media screen and (max-width: 640px) {
   .Liquid_box {
      display: block;
   }
   .Liquid_box .box_30 {
      display: block;
      width: 100%;
      margin-bottom:10px;
   }
   .Liquid_box .box_40 {
      display: block;
      width: 100%;
      margin-bottom:10px;
   }
   .Liquid_box .box_50 {
      display: block;
      width: 100%;
      margin-bottom:10px;
   }
   .Liquid_box .box_60 {
      display: block;
      width: 100%;
      margin-bottom:10px;
   }
   .Liquid_box .box_margin {
      display: block;
      width: 100%;
   }
}

/*---外枠---*/
.Outside_frame {
   border: 1px solid #999;
   padding: 5px;
}

/*---質問集---*/
.Faq_Tit {
   font-size: 20px;
   font-weight: bold;
   color: #FFF;
   line-height: 1.3em;
   background: #03bcff;
   border-top: 1px solid #999;
   border-left: 1px solid #999;
   border-right: 1px solid #999;
   padding: 15px 20px;
}

.Faq_Cont {
   border-left: 1px solid #999;
   border-right: 1px solid #999;
   border-bottom: 1px solid #999;
   padding: 20px;
}

/* !Table
---------------------------------------------------------- */
.table_basic01 {
	width: 100%;
	border-collapse: separate;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
	.table_basic01 th,
	.table_basic01 td {
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		padding: 10px 15px;
		background-color: #fff;
	}
	.table_basic01 th {
		background-color: #f0f0f0;
	}
	.table_basic01 td {
	}

@media screen and (max-width:767px){
.table_basic01 {
	width: 100%;
}
	.table_basic01,
	.table_basic01 thead,
	.table_basic01 tbody,
	.table_basic01 tr,
	.table_basic01 th,
	.table_basic01 td {
		width: 100%;
		display: block;
	}
	.table_basic01 th,
	.table_basic01 td {
		border-top: none;
		border-left: none;
	}
	.table_basic01 th {
	}
	.table_basic01 td {
	}
}

.table_basic02 {
	width: 100%;
	border-collapse: separate;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
	.table_basic02 th,
	.table_basic02 td {
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		padding: 10px 15px;
	}
	.table_basic02 th {
		background-color: #f3f3f3;
		text-align: right;
	}
	.table_basic02 td {
	}
@media screen and (max-width:767px){
.table_basic02 {
	width: 100%;
}
	.table_basic02,
	.table_basic02 thead,
	.table_basic02 tbody,
	.table_basic02 tr,
	.table_basic02 th,
	.table_basic02 td {
		width: 100%;
		display: block;
	}
	.table_basic02 th,
	.table_basic02 td {
		border-top: none;
		border-left: none;
	}
	.table_basic02 th {
		text-align: center;
	}
	.table_basic02 td {
	}
}

/* !Box
----------------------------------------------------------- */
.box_column01 {
	margin: -16px 0 0 0;
}
	.box_column01 .col {
		float: left;
	}
	.box_column01.col2 .col {
		margin: 16px 2.2% 0 0;
		width: 48.9%;
	}
	.box_column01.col3 .col {
		margin: 16px 2.2% 0 0;
		width: 31.85%;
	}
	.box_column01.col4 .col {
		margin: 16px 2.2% 0 0;
		width: 23.35%;
	}
	.box_column01.col5 .col {
		margin: 24px 2.2% 0 0;
		width: 18.24%;
		border: 1px solid #CCC;
		padding: 10px;
	}
	.box_column01.col6 .col {
		margin: 16px 2.2% 0 0;
		width: 14.83%;
		border: 1px solid #CCC;
		padding: 10px;
	}
	.box_column01.col2 .col:nth-child(2n),
	.box_column01.col3 .col:nth-child(3n),
	.box_column01.col4 .col:nth-child(4n),
	.box_column01.col5 .col:nth-child(5n),
	.box_column01.col6 .col:nth-child(6n) {
		margin-right: 0;
	}
	.box_column01.col2 .col:nth-child(2n+1),
	.box_column01.col3 .col:nth-child(3n+1),
	.box_column01.col4 .col:nth-child(4n+1),
	.box_column01.col5 .col:nth-child(5n+1),
	.box_column01.col6 .col:nth-child(6n+1) {
		clear: both;
	}
	.box_column01 a {
	}
	.box_column01 figure {
	}

@media screen and (max-width:767px){
.box_column01  {
	margin: 0;
}
	.box_column01 .col,
	.box_column01.col2 .col,
	.box_column01.col3 .col,
	.box_column01.col4 .col,
	.box_column01.col5 .col {
		float: none;
		width: auto;
		margin: 0;
		padding: 10px 0;
	}
	.box_column01.col6 .col {
		float: none;
		width: auto;
		margin: 0;
		padding: 10px;
	}
	.box_column01 figure {
		float: left;
		width: 100px;
		margin-right: 10px;
		margin-bottom: 10px;
		width: 100%;
	}
}

/* !Footer
---------------------------------------------------------- */
footer {
   padding-top: 100px;
   padding-bottom: 30px;
   position: relative;
   background: #000;
   height: auto;
   color: #FFF;
   font-size: 14px;
}

/* !Fonts -------------------------------------------------------------- */
.ffMincho { font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','HiraMinProN-W3','ＭＳ 明朝','MS Mincho',serif;}
.fwB { font-weight: bold;}
.fcBlue { color: #00a0e9;}
.fcGreen { color: #48dc00;}
.fcPink { color: #ff5d5d;}
.fcRed { color: #e60012;}
.fzSSS  { font-size:  63%;}/* base 16px -> 10px */
.fzSS   { font-size:  75%;}/* base 16px -> 12px */
.fzS    { font-size:  88%;}/* base 16px -> 14px */
.fzM    { font-size: 100%;}
.fzL    { font-size: 113%;}/* base 16px -> 18px */
.fzLL   { font-size: 125%;}/* base 16px -> 20px */
.fzLLL  { font-size: 138%;}/* base 16px -> 22px */
.fzLLLL { font-size: 150%;}/* base 16px -> 24px */
.fz32 { font-size: 32px;}

/* !Margin ------------------------------------------------------------------ */
.mt10 { margin-top:10px !important;}
.mt20 { margin-top:20px !important;}
.mt30 { margin-top:30px !important;}
.mt40 { margin-top:40px !important;}
.mt50 { margin-top:50px !important;}
.mt60 { margin-top:60px !important;}
.mt70 { margin-top:70px !important;}
.mt80 { margin-top:80px !important;}
.mt100 { margin-top:100px !important;}
.mt120 { margin-top:120px !important;}
.mt160 { margin-top:160px !important;}
.mb10 { margin-bottom:10px !important;}
.mb20 { margin-bottom:20px !important;}
.mb30 { margin-bottom:30px !important;}
.mb40 { margin-bottom:40px !important;}
.mb50 { margin-bottom:50px !important;}
.mb60 { margin-bottom:60px !important;}
.mb70 { margin-bottom:70px !important;}
.mb80 { margin-bottom:80px !important;}

/* !Padding ------------------------------------------------------------------ */
.pt10 { padding-top:10px !important;}
.pt80 { padding-top:80px !important;}
.pb8 { padding-bottom:8px !important;}
.pb10 { padding-bottom:10px !important;}
.pb30 { padding-bottom:30px !important;}

/* !Inline Align ------------------------------------------------------------ */
.taC { text-align: center !important;}
.taL { text-align: left !important;}
.ImgC { display: block; margin-left: auto; margin-right: auto;}
/* !Padding  ---------------------------------------------------------------- */
.pt80 { padding-top:80px !important;}
.pt15per { padding-top:15% !important;}
/* !Width ------------------------------------------------------------------- */
.w15per { width: 15% !important;}
.w25per { width: 25% !important;}
.w50per { width: 50% !important;}
.w80per { width: 80% !important;}
.wAuto { width: auto !important;}
/* !Floats ------------------------------------------------------------------ */
.flL    { display: inline; float: left;}
.flR    { display: inline; float: right;}

/* !印刷用 ------------------------------------------------------------------ */
#Sp_Cover {
   display: none;
}

.Sp_Btn_Appli {
   display: none;
}

#nav-wrap {
   display: none;
}