@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,900,900italic);

/*------------------------------------------------
目次
1. Basic
	1-1. body
	1-2. a
	1-3. h
2. Header
	2-1. Global Navgation
	2-2. Collapse Menu
	2-3. Dropdown Menu
3. Footer
4. Parts
	5-1. margin
	5-2. padding
	5-3. h
	5-4. table
	5-5. list
	5-6. text
5. Contents
6. Form
7. Utilty
	7-1. Margin Top
	7-2. Margin Bottom
	7-3. Padding Top
	7-4. Padding Bottom
	7-5. PC/SP Display Switch
	7-6. Print
--------------------------------------------------*/


/*------------------------------------------------
1. Basic
--------------------------------------------------*/

/* 1-1. body
--------------------------------------------------*/
body {
	color: #666666; 
	background-color: #f8f8f5;
	font-family: "Raleway",'メイリオ',Meiryo,'Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	font-size: 16px;
	letter-spacing: 0;
	line-height: 1.6;
	text-rendering: geometricPrecision;
	word-wrap: break-word;
	word-break: break-word;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-print-color-adjust: exact;
}
@media (max-width: 767px) {
	/*ロゴ画像使用によるナビゲーションのレイアウト調整*/
	body {
		font-size: 14px;
		line-height: 1.2;
	}
}

/* 1-2. a
--------------------------------------------------*/
a, a:link {color: #00a28d;}
a:visited {color: #00a28d;}
a:hover, a:active {color: #66c7bb; text-decoration: none;}
a:focus {outline: none;}
.inverse a, .inverse a:link {color: #ffffff;}
.inverse a:visited {color: #ffffff;}
.inverse a:hover, .inverse a:active {color: #dddddd;}

a:hover img {
	filter: alpha(opacity=70);
	-moz-opacity: 0.70;
	opacity: 0.70;
	-webkit-transition-duration: 350ms;
	-webkit-transition-property: opacity;
	-webkit-transition-timing-function: ease;
	-moz-transition-duration: 350ms;
	-moz-transition-property: -moz-opacity;
	-moz-transition-timing-function: ease;
	-o-transition-duration: 350ms;
	-o-transition-property: -o-opacity;
	-o-transition-timing-function: ease;
}

/* 1-3. h
--------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	font-family: "Raleway",'メイリオ',Meiryo,'Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

h1 {
	color: #333333;
	font-size: 200%;
	margin-bottom: 50px;
	margin-top: 0;
	text-align: center;
}
@media (max-width: 767px) {
	h1 {
		text-align: left;
	}
}

h2 {
	border-bottom: 2px solid #00a28d;
	color: #333333;
	font-size: 164.3%;
	line-height: 1.4em;
	margin-bottom: 20px;
	margin-top: 0;
	padding-bottom: 5px;
}
@media (max-width: 767px) {
	h2 {
		font-size: 18px;
	}
}

h3 {
	color: #00a28d;
	font-size: 130%;
	font-weight: bold;
	padding-bottom: 5px;
	margin-top: 0;
	margin-bottom: 20px;
	border-bottom: 1px solid #eee;
}
@media (max-width: 767px) {
	h3 {
		font-size: 16px;
	}
}




/*------------------------------------------------
2. Header
--------------------------------------------------*/
/* 2-1. Global Navigation
--------------------------------------------------*/
/*------------------------------------------------
ナビゲーション
--------------------------------------------------*/
.navbar {
	margin-bottom: 0;
}

@media screen and (min-width: 768px){
	.navbar {
		padding-bottom: 0;
	}
}

.caret {
	margin-left: 0;
	margin-right: 5px;
}

.caret-right {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0;
    margin-right: 5px;
    vertical-align: middle;
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid;
}

.navbar-brand {
    float: left;
    height: 68px;
    padding: 10px 0;
}

@media (max-width: 767px) {
	.navbar-brand {
		height: 53px;
		padding: 10px 15px;
	}
}

@media (min-width: 768px) {
	.global li a {
		padding-top: 16px;
		font-size: 14px;
		
		font-weight: 400;
		letter-spacing: 0;
		text-align: center;
	}

	.global li span	{
		display: block;
		font-size: 11px;
		font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}

	.dropdown-menu li a {
	padding-top: 10px;
	padding-bottom: 8px;
	font-size: 14px;
	color: #FFFFFF;
	letter-spacing: 0;
	text-align: left;
	}

	.dropdown-menu li span	{
	display: inline;
	}

	.dropdown-menu {
		right: auto !important;
		background-color: #885479;
	}

	.navbar-nav > li > a {
		padding-top: 25px;
		padding-bottom: 25px;
	}

	.navbar-right > li{
		background-color: #9b9b9b;
		margin-left: 5px;
		text-align: center;
		
		font-size: 12px;
	}

	.navbar-right > li.current {
		background-color: #09abda;
	}

	.navbar-right > li > a {
		padding: 3px 10px;
	}
	
}

@media (max-width: 767px) {
	.navbar-right > li {
		float: left;
	}

	.global li span{
		margin-left: 5px;
	}
}

.navbar-inverse {
	background-color: #FFFFFF;
}

 .navbar-inverse .navbar-toggle {
	border-color: #FFFFFF;
}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
	background-color: #663f5b;
}

.navbar-inverse .navbar-toggle .icon-bar{
	background-color: #FFFFFF;
}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    color: #000;
    background-color: transparent;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form{
	border: none;
}

.navbar-inverse {
	border: none;
}

.navbar-header {
	background: #885479;
}


@media screen and (min-width:768px) {
	.brand {
	display: inherit;
	margin: 0;
	padding-right: 50px;
	text-align: center;
	background-color: white;
	}

	.navbar-header {
		display: none;
		background-color: #000000;
	}

	.navbar {
		min-height: 0;
	}

	.navbar-default {
		border: none;
		/*background: #663f5b;*/
		background: #885479;
	}

	.navbar-default .navbar-nav > li > a {
		color: #FFFFFF;
	}

	.navbar-default .navbar-nav > li > a:hover,  .navbar-default .navbar-nav > li > a:focus {
		color: #dfd6b8;
		background-color: transparent;
	}

	.navbar-default .navbar-nav > .active > a,  .navbar-default .navbar-nav > .active > a:hover,  .navbar-default .navbar-nav > .active > a:focus {
		color: #dfd6b8;
		background-color: transparent;
	}

	.navbar-nav>li>a {
		line-height: normal;
	}

	.navbar-nav {
		display: table;
		float: none;
		margin: 0 auto;
		table-layout: fixed;
		font-size: 1.25em;
		color: black;
		
	}
}



/* 2-2. Collapse Menu
--------------------------------------------------*/


.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}



/*------------------------------------------------
3. Footer
--------------------------------------------------*/
footer {
	padding: 10px 0;
	color: #eee;
	background-color: #00a28d;
}

footer .copyright {
	padding-top: 10px;
	padding-bottom: 10px;
}


/*------------------------------------------------
4. Parts
--------------------------------------------------*/
/* 4-1. Buttons
--------------------------------------------------*/
.btn-primary {
		color: #fff;
		background-color: #d30535;
		border-color: #d30535;
}
.btn-primary:hover {
		background-color: #e56986;
		border-color: #e56986;
}

.btn-success {
		color: #fff;
		background-color: #111111;
		border-color: #111111;
}
.btn-success:hover {
		background-color: #333333;
		border-color: #333333;
}

/* 4-2. Color Section
--------------------------------------------------*/
/*White*/
.color-section-01 {
	background-color: #ffffff;
	border-bottom: 4px solid #00a28d;
}
/*Gray*/
.color-section-02 {
	background-color: #f6f6f6;
	border-bottom: 4px solid #00a28d;
}
/*Tan*/
.color-section-03 {
	background-color: #bcab97;	
}
/*Purple*/
.color-section-04 {
	background-color: #885479;
}
/*Pink*/
.color-section-05 {
	background-color: #c37d80;
}
/*Orange*/
.color-section-06 {
	background-color: #da5a24;
}
/*Light Tan*/
.color-section-07 {
	background-color: #d6cdc3;
}

/* 4-2. Content Section
--------------------------------------------------*/
/*リード用コンテンツセクション*/
.content-section-01 p {
	line-height: 2.4em;
}
.content-section-01 .ttl {
	font-size: 164.3%;
}


.content-section-02 p {
	line-height: 2.0;
	margin-bottom: 30px;
}
.content-section-02 p.green {
	color: #00a28d;
}
.content-section-02 .middle {
	text-align: center;
}
@media (max-width: 767px) {
	.content-section-02 .middle {
		text-align: left;
	}
}
.content-section-02 img {
	margin-bottom: 10px;
}
.content-section-02 ul {
	padding-left: 30px;
}
@media (max-width: 767px) {
	.content-section-02 ul {
		padding: 0.5em 0.5em 0.5em 25px;
	}
}
.content-section-02 ul li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
}
.content-section-02 ul li:before {
	font-family: FontAwesome;
	content: "\f138";
	position: absolute;
	left : 1em;
	color: #00a28d;
}
@media (max-width: 767px) {
	.content-section-02 ul {
		padding-left: 20px;
	}
}


.content-section-02 ol{
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding: 0;
}
.content-section-02 ol li{
	position: relative;
	line-height: 1.5em;
	padding: 0.5em 0.5em 0.5em 40px;
}
@media (max-width: 767px) {
	.content-section-02 ol li {
		padding: 0.5em 0.5em 0.5em 35px;
	}
}
.content-section-02 ol li:before{
	/* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
	/*以下数字のデザイン変える*/
	display:inline-block;
	background: #00a28d;
	color: white;
	font-size: 14px;
	border-radius: 50%;
	left: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align:center;
	/*以下 上下中央寄せのため*/
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.content-section-02 dt {
  clear: left;
  color: #00a28d;
  float: left;
  width: 5%;
}
.content-section-02 dd { 
  margin: 0 0 0 5%;
}

@media (max-width: 767px) {
	.content-section-02 dt {
		width: 15%;
	}
	.content-section-02 dd {
		 margin: 0 0 0 15%;
	}
}
/*通常コンテンツセクション*/
.box-section-01 {
	margin-bottom: 40px;
}

/* 4-3. Content Utility
--------------------------------------------------*/
.marker-green {
	background: linear-gradient(transparent 60%, #99dad1 0%);
}
.font-small {
	font-size: 14px;
}
.font-bold {
	font-weight:bold;
}
.color-red {
	color: #d30535;
}

/*5. Contents
--------------------------------------------------*/
.custom-table th  { width: 30%; text-align: left; color: #ffffff;}
.custom-table td {background-color: #ffffff;}

.custom-table.cl01 th {background-color: #2764a7;}
.custom-table.cl02 th {background-color: #e16a20;}
.custom-table.cl03 th {background-color: #1b833b;}
.custom-table.cl04 th {background-color: #d83942;}
.custom-table.cl05 th {background-color: #b18b68;}

.custom-table.cl01 td.cl {background-color: #ccdae6; color: #2764a7; font-weight: bold;}
.custom-table.cl02 td.cl {background-color: #f9e1d2; color: #e16a20; font-weight: bold;}
.custom-table.cl03 td.cl {background-color: #d1e6d8; color: #1b833b; font-weight: bold;}
.custom-table.cl04 td.cl {background-color: #f7d7d9; color: #d83942; font-weight: bold;}
.custom-table.cl05 td.cl {background-color: #efe8e1; color: #b18b68; font-weight: bold;}

.custom-table.cl01 td span.cl {color: #2764a7;}

@media only screen and (max-width:767px){
	.custom-table {
		
		border: none;
		border-top: 1px solid #dddddd;
	}
	
	.custom-table th, .custom-table td {
		width: 100%;
		display: block;
		border: none;
	}

	.custom-table th {
		border: none;
	}

	.custom-table th {
		border: none;
	}

	.custom-table >tbody >tr > th, .custom-table >tbody >tr >td {
		border-bottom: 1px solid #dddddd;
		border-right: 1px solid #dddddd;
		border-left: 1px solid #dddddd;
		border-top: none;
	}
	
}




/*------------------------------------------------
5. Contents
--------------------------------------------------*/
.wrapper-image {
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
@media (max-width: 767px) {
	.wrapper-image {
	background-attachment: scroll;
	}
}

.wrapper-pixelgrid {
	background: url(../../assets/img/top/pixelgrid.png) 0px 0px repeat fixed transparent;
}

.wrapper-transparent-black {
	background-color: rgba(25,24,23,0.2);
}

#footerFloatingMenu {
    display: block;
    width: 100%;
    background-color: #00a28d;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 9999;
    text-align: center;
}
#footerFloatingMenu .container {
	 border-left: 1px solid #66c7bb;
}
#footerFloatingMenu a{
	padding: 10px 0;
	display: block;
	float: left;
	width: 33.3%;
	border-right: 1px solid #66c7bb;
	font-size: 18px;
	color: white;
}
@media (min-width: 768px) {
	#footerFloatingMenu a{
		width: 50%;
	}
}
#footerFloatingMenu a:hover{
	background-color: #33b5a4;
}
#footerFloatingMenu span {
	margin-top: 5px;
	font-size: 12px;
	display: block;
}

.social-icon {
	font-size: 35px;
	color:#1feed1;
}

@media only screen and (max-width:767px){
	.social-icon {
		font-size: 40px;
	}
}

@media only screen and (max-width:767px){
	.top-img {
		width: 70%;
	}
}

/*------------------------------------------------
6. Form
--------------------------------------------------*/


/*------------------------------------------------
7. Utility
--------------------------------------------------*/
/* 7-1. Margin Top 
--------------------------------------------------*/
.mt0 {
	margin-top: 0;
}
.mt5 {
	margin-top: 5px;
}
.mt10 {
	margin-top: 10px;
}
.mt15 {
	margin-top: 15px;
}
.mt20 {
	margin-top: 20px;
}
.mt25 {
	margin-top: 25px;
}
.mt30 {
	margin-top: 30px;
}
.mt35 {
	margin-top: 35px;
}
.mt40 {
	margin-top: 40px;
}
.mt45 {
	margin-top: 45px;
}
.mt50 {
	margin-top: 50px;
}
.mt55 {
	margin-top: 25px;
}
.mt60 {
	margin-top: 60px;
}

/* 7-2. Margin Bottom
--------------------------------------------------*/
.mb0 {
	margin-bottom: 0;
}
.mb5 {
	margin-bottom: 5px;
}
.mb10 {
	margin-bottom: 10px;
}
.mb15 {
	margin-bottom: 15px;
}
.mb20 {
	margin-bottom: 20px;
}
.mb25 {
	margin-bottom: 25px;
}
.mb30 {
	margin-bottom: 30px;
}
.mb35 {
	margin-bottom: 35px;
}
.mb40 {
	margin-bottom: 40px;
}
.mb45 {
	margin-bottom: 45px;
}
.mb50 {
	margin-bottom: 50px;
}
.mb55 {
	margin-bottom: 25px;
}
.mb60 {
	margin-bottom: 60px;
}

/* 7-3. Padding Top 
--------------------------------------------------*/
.pt0 {
	padding-top: 0;
}
.pt5 {
	padding-top: 5px;
}
.pt10 {
	padding-top: 10px;
}
.pt15 {
	padding-top: 15px;
}
.pt20 {
	padding-top: 20px;
}
.pt25 {
	padding-top: 25px;
}
.pt30 {
	padding-top: 30px;
}
.pt35 {
	padding-top: 35px;
}
.pt40 {
	padding-top: 40px;
}
.pt45 {
	padding-top: 45px;
}
.pt50 {
	padding-top: 50px;
}
.pt55 {
	padding-top: 55px;
}
.pt60 {
	padding-top: 60px;
}
.pt65 {
	padding-top: 65px;
}
.pt70 {
	padding-top: 70px;
}
.pt75 {
	padding-top: 75px;
}
.pt80 {
	padding-top: 80px;
}

/* 7-4. Padding Bottom
--------------------------------------------------*/
.pb0 {
	padding-bottom: 0;
}
.pb5 {
	padding-bottom: 5px;
}
.pb10 {
	padding-bottom: 10px;
}
.pb15 {
	padding-bottom: 15px;
}
.pb20 {
	padding-bottom: 20px;
}
.pb25 {
	padding-bottom: 25px;
}
.pb30 {
	padding-bottom: 30px;
}
.pb35 {
	padding-bottom: 35px;
}
.pb40 {
	padding-bottom: 40px;
}
.pb45 {
	padding-bottom: 45px;
}
.pb50 {
	padding-bottom: 50px;
}
.pb55 {
	padding-bottom: 25px;
}
.pb60 {
	padding-bottom: 60px;
}
.pb65 {
	padding-bottom: 65px;
}
.pb70 {
	padding-bottom: 70px;
}
.pb75 {
	padding-bottom: 75px;
}
.pb80 {
	padding-bottom: 80px;
}

/* 7-5. PC/SP Display Switch
--------------------------------------------------*/
@media screen and (max-width:767px) {
	.pc {
		display: none!important;
	}
}
@media(min-width:768px) {
	.sp {
		display: none!important;
	}
}

/* 7-6. Print
--------------------------------------------------*/
@media print {
	.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
		float: left;
	}
	.col-sm-12 {
		width: 100%;
	}
	.col-sm-11 {
		width: 91.66666667%;
	}
	.col-sm-10 {
		width: 83.33333333%;
	}
	.col-sm-9 {
		width: 75%;
	}
	.col-sm-8 {
		width: 66.66666667%;
	}
	.col-sm-7 {
		width: 58.33333333%;
	}
	.col-sm-6 {
		width: 50%;
	}
	.col-sm-5 {
		width: 41.66666667%;
	}
	.col-sm-4 {
		width: 33.33333333%;
	}
	.col-sm-3 {
		width: 25%;
	}
	.col-sm-2 {
		width: 16.66666667%;
	}
	.col-sm-1 {
		width: 8.33333333%;
	}
	.col-sm-pull-12 {
		right: 100%;
	}
	.col-sm-pull-11 {
		right: 91.66666667%;
	}
	.col-sm-pull-10 {
		right: 83.33333333%;
	}
	.col-sm-pull-9 {
		right: 75%;
	}
	.col-sm-pull-8 {
		right: 66.66666667%;
	}
	.col-sm-pull-7 {
		right: 58.33333333%;
	}
	.col-sm-pull-6 {
		right: 50%;
	}
	.col-sm-pull-5 {
		right: 41.66666667%;
	}
	.col-sm-pull-4 {
		right: 33.33333333%;
	}
	.col-sm-pull-3 {
		right: 25%;
	}
	.col-sm-pull-2 {
		right: 16.66666667%;
	}
	.col-sm-pull-1 {
		right: 8.33333333%;
	}
	.col-sm-pull-0 {
		right: auto;
	}
	.col-sm-push-12 {
		left: 100%;
	}
	.col-sm-push-11 {
		left: 91.66666667%;
	}
	.col-sm-push-10 {
		left: 83.33333333%;
	}
	.col-sm-push-9 {
		left: 75%;
	}
	.col-sm-push-8 {
		left: 66.66666667%;
	}
	.col-sm-push-7 {
		left: 58.33333333%;
	}
	.col-sm-push-6 {
		left: 50%;
	}
	.col-sm-push-5 {
		left: 41.66666667%;
	}
	.col-sm-push-4 {
		left: 33.33333333%;
	}
	.col-sm-push-3 {
		left: 25%;
	}
	.col-sm-push-2 {
		left: 16.66666667%;
	}
	.col-sm-push-1 {
		left: 8.33333333%;
	}
	.col-sm-push-0 {
		left: auto;
	}
	.col-sm-offset-12 {
		margin-left: 100%;
	}
	.col-sm-offset-11 {
		margin-left: 91.66666667%;
	}
	.col-sm-offset-10 {
		margin-left: 83.33333333%;
	}
	.col-sm-offset-9 {
		margin-left: 75%;
	}
	.col-sm-offset-8 {
		margin-left: 66.66666667%;
	}
	.col-sm-offset-7 {
		margin-left: 58.33333333%;
	}
	.col-sm-offset-6 {
		margin-left: 50%;
	}
	.col-sm-offset-5 {
		margin-left: 41.66666667%;
	}
	.col-sm-offset-4 {
		margin-left: 33.33333333%;
	}
	.col-sm-offset-3 {
		margin-left: 25%;
	}
	.col-sm-offset-2 {
		margin-left: 16.66666667%;
	}
	.col-sm-offset-1 {
		margin-left: 8.33333333%;
	}
	.col-sm-offset-0 {
		margin-left: 0%;
	}
	.visible-xs {
		display: none !important;
	}
	.hidden-xs {
		display: block !important;
	}
	table.hidden-xs {
		display: table;
	}
	tr.hidden-xs {
		display: table-row !important;
	}
	th.hidden-xs,
	td.hidden-xs {
		display: table-cell !important;
	}
	.hidden-xs.hidden-print {
		display: none !important;
	}
	.hidden-sm {
		display: none !important;
	}
	.visible-sm {
		display: block !important;
	}
	table.visible-sm {
		display: table;
	}
	tr.visible-sm {
		display: table-row !important;
	}
	th.visible-sm,
	td.visible-sm {
		display: table-cell !important;
	}
}