/*  :: Style CSS :: ************************************ */

/* ==========================================================================
Font
========================================================================== */ 

@import url("https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900");
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:300,400,500,600,700&subset=japanese');
/*------------------------------------------------------------
font-family: 'Lato', sans-serif;

font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', sans-serif;
------------------------------------------------------------*/

/*@import url("https://fonts.googleapis.com/css?family=Cormorant+SC:300,400,500,600,700");*/
/*@import url('https://fonts.googleapis.com/css?family=Marcellus+SC');*/
/*------------------------------------------------------------
font-family: 'Cormorant SC', serif;
font-family: 'Marcellus SC', serif;
------------------------------------------------------------*/

html {
	overflow-x: hidden;
	overflow-y: auto;
}

html, body {
	/*min-height: 100%;*/
}

body {
    font-family: 'Noto Sans JP', sans-serif;
	color:#040000;
	background-color:#fff;
	font-size:15px;
    line-height:30px;
    font-weight: 300;
	margin:0;
    padding:0;
    -webkit-text-size-adjust: 100%;
    word-wrap : break-all;
    overflow-wrap : break-word;
    position:relative;
}


/*body #wrapper {
		position:relative;
}*/


/* ==========================================================================
Common CSS
========================================================================== */ 
* {
    margin: 0;
    padding: 0;
}
.floatleft {
    float: left
}
.floatright {
    float: right
}
.alignleft {
    float: left;
    margin-right: 15px;
}
.alignright {
    float: right;
    margin-left: 15px;
}
.aligncenter {
    display: block;
    margin: 0 auto 15px;
}
a:focus {
    outline: 0px solid;
}
h1,  h2,  h3,  h4,  h5,  h6 {
    margin: 0 0 15px;
    font-weight: 700;
}

ol li,  ul li {
    list-style: outside none none;
}
img {
    height: auto;
    max-width: 100%;
}

.filter-gray{
    filter: grayscale(100%);
}

.filter-invert {
    -webkit-filter:invert(100%);
    -moz-filter:invert(100%);
    -ms-filter:invert(100%);
    filter:invert(100%);
}

.table {
    /*display: table;
    z-index: 9;
    position: absolute;
    width: 100%;
    height: 100%;*/
}
.table_cell {
    display: table-cell;
    vertical-align: middle;
}

a{
    color: #6f5436;
}
a:hover{
    color: #ee7800;
}


a,  a:hover,  a:focus {
    -webkit-transition: all 700ms ease 0s;
    transition: all 700ms ease 0s;
    text-decoration: none;
    outline: none;
}
section a img {
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
section a img:hover {
    opacity: .7;
    filter: saturate( 2 ) !important;
    -webkit-filter:saturate( 2 );
    /*filter: brightness(60%) saturate( 1) !important;*/
    /*-webkit-filter: brightness(60%) saturate( 1);*/
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
a.telhref,  a.telhref:hover {
    text-decoration: none !important;
}

/* ========================================================================== 
Clerfix
========================================================================== */

.clear,  .clr {
    clear: both;
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    width: 100%;
}
.clearfix {
    display: inline-block;
    zoom: 100%;
}
.clearfix:after {
    content: ".";
    display: block !important;
    height: 0 !important;
    clear: both;
    visibility: hidden;
}

.float-left{
	float: left;
}

.float-right{
	float: right;
}
@media screen and (max-width: 479px) {
    .float-right .sp-clr{
        float: none !important;
        clear: both !important;
        text-align: center;
    }
}

/* ==========================================================================
UL LI
========================================================================== */

ul,  ol {
    padding: 0px;
    line-height: 26px;
    margin-bottom: 20px;
}
ul ul,  ul ol,  ol ul,  ol ol {
    padding-left: 0px;
}
ul li,  ol li {
    margin-bottom: 0px;
}

ul.list-disc li{
	list-style:disc;
	margin-left:20px;
	margin-bottom:10px;
}

p {
    margin: 0 0 20px 0;
}
.thumbnail p {
    margin: 0 10px;
    line-height: 1.2em !important;
}
blockquote {
    font-size: inherit;
    border-left: 5px solid #DDD;
}
figure {
    margin: 0 0 10px;
}

@media screen and (max-width: 479px) {
    p {
        margin: 0 0 15px 0;
    }
}
ul.list-inline {
    padding: 0;
}
ul.list-inline li {
    padding-right: 0px;
}
/* ==========================================================================
TEXT
========================================================================== */

.text-center {
    text-align: center !important;
}

.p-lead {
    font-size: 16px;
}

.p-lead-lg {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.6;
}


.p-lead-h30 {
    line-height: 30px;
}
.p-serif {
    font-family: 'Noto Serif JP', sans-serif;
}
.p-white {
    color: #FFFFFF;
}
.p-brown{
    color: #69361B !important;
}

.p-sans-serif {
    font-family: 'Noto Sans JP', sans-serif;
}

p.p-phone {
    font-size: 24px !important;
}

.p-sml13{
    font-size: 13px;
}



@media screen and (max-width: 768px) {
    p.p-phone{
        font-size: 18px;
    }

}


@media screen and (max-width: 479px) {
    .p-left{
        text-align: left !important;
    }
    
    .p-lead-lg {
    font-size: 18px;
    line-height: 1.6;
    }
    .p-lead-lg br{
    display: none !important;
    }
    .p-lead-h30 {
        line-height: 18px;
    }
    
    p.p-phone{
        font-size: 17px;
    }
}

@media screen and (-ms-high-contrast: active),  (-ms-high-contrast: none) {
    .p-serif,  .p-serif2 {
        font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    }
}

/* *************************
    :: 3.0 Preloader Css
    ************************* */

div#preloader {
    overflow: hidden;
    background-color: #fff;
    background-image: url(/assets/img/core/loading.gif);
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999999999;
}



/* ==========================================================================
BTN solid
========================================================================== */ 

.pagination > .active > a{
    /*background-color: #28bbf8;*/
}

.btn-md{
    font-size: 16px;
}

.btn-cyan,.btn-cyan:focus{
    color: #FFF;
    background-color: #28bbf8;
    padding: 8px 25px;
    border-radius: 2px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.btn-default,.btn-default:focus{
    color: #FFF;
    background-color: #62333C;
    border: 1px solid #62333C;
    padding: 6px 25px;
    border-radius: 2px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.btn-default:hover{
    color: #FFF;
    background-color: #8A4753;
    border: 1px solid transparent;
    /*padding: 8px 20px 8px 30px;*/
}


.btn-normal,.btn-normal:focus{
    color: #62333C;
    background-color: #FFF;
    border: 1px solid #62333C;
    padding: 6px 25px;
    border-radius: 2px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.btn-cyan:hover{
    color: #FFF;
    background-color: #282e3c;
    border: 1px solid transparent;
    /*padding: 8px 20px 8px 30px;*/
}

.btn-normal:hover{
    color: #FFF;
    background-color: #62333C;
    border: 1px solid transparent;
}

.btn-next::after,
.btn-back::before,
.btn-form::after{
    font-family: 'icofont';
    color: inherit;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.2em;
 }

.btn-next:after{
    content: "\eaa0";
    padding-left: 10px;    
}

.btn-form:after{
    content: "\ef14";
    padding-left: 10px;    
}

.btn-back::before{
    content: "\ea9d";
    padding-right: 10px;
}

/* ==========================================================================
Form BTN
========================================================================== */ 

/*.label {
    font-size: 90%;
    display: inline-block;
  font-weight: normal;
  border-radius: 2px;
  margin-right:2px;
}*/
/*


.btn-normal:after,
.btn-detail:after{
    content: "\eaa0";
    padding-left: 10px;    
}
*/



.btn-confirm, .btn-confirm:focus,
.btn-send, .btn-send:focus{
    border-radius: 0;
    color: #282e3c;
    background-color: #FFF;
    border: 1px solid #555;
    padding: 8px 25px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.btn-confirm:hover,
.btn-send:hover{
    background-color: #282e3c;
    color: #FFF;
}
.btn-confirm::after,
.btn-send::after {
    font-family: 'icofont';
    color: inherit;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.3em;
 }

.btn-confirm::after{
    content: "\eaa0";
    padding-left: 5px;    
}

.btn-send::after{
    content: "\f0c5";
    padding-left: 5px;    
}
/* *************************************************************************************
Contact Form
*************************************************************************************** */
/* confirm table */

.form-control-static{
    border-bottom: 1px solid #CCC;
}

.confirm-table{
    border-bottom: 1px solid #CCC;
    margin-bottom: 30px;
}
.confirm-table th,
.confirm-table td{
    padding: 15px !important;
    font-weight: 400;
}
.confirm-table th{
    width: 20%;
}


.label-red{
	background-color:#e8383d;
}

.label-required{
    
}

.label-required::before{
    content: '必須';
	padding: 4px .5em;
    margin-top: 5px;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.2;
    margin-right: .5em;
    display: inline-block;
	color: #FFF;
    border-radius: 2px;
	background-color: #e8383d;
    float: left;
}

/*---------------------------------BLACK */
.btn-black,
.label-black {
	background: rgba(0, 0, 0, 1.0);
}

.btn-black:hover,
.btn-black:focus,
.label-black[href]:hover,
.label-black[href]:focus {
	background: #00a1e9;
}

/*---------------------------------BLUE */
.btn-blue,
.label-blue {
	background-color: #428bca;
}
.btn-blue:hover,
.btn-blue:focus,
.label-blue[href]:hover,
.label-blue[href]:focus {
	background-color: #3071a9;
}

/*---------------------------------GREEN */
.btn-green,
.label-green {
	background-color: #5cb85c;
}
.btn-green:hover,
.btn-green:focus,
.label-green[href]:hover,
.label-green[href]:focus {
	/*background-color: #449d44;*/
    background-color: #282e3c;
}

/*---------------------------------CYAN */
/*.btn-cyan,
.label-cyan {
	background-color: #28bbf8;
}

.btn-cyan:hover,
.btn-cyan:focus,
.label-cyan[href]:hover,
.label-cyan[href]:focus {
  background-color: #282e3c;
}*/
/*---------------------------------PINK */
.btn-pink{
    background-color: #de82a7;
}

.btn-pink:hover,
.btn-pink:focus{
    background-color: #e95388;
}


/*---------------------------------ORANGE */
.btn-orange,
.label-orange {
  background-color: #ed6d46;
}
.btn-orange:hover,
.btn-orange:focus,
.label-orange[href]:hover,
.label-orange[href]:focus {
  background-color: #ec971f;
}

/*---------------------------------RED */
.btn-red,
.label-red {	
  background-color: #d9534f;
  border:1px solid #d9534f;
}
.btn-red:hover,
.btn-red:focus,
.label-red[href]:hover,
.label-red[href]:focus {
  background-color: #c9302c;
}

.btn-black, .btn-blue, .btn-green, .btn-cyan, .btn-orange, .btn-red, .btn-pink,
.label-black, .label-blue, .label-green, .label-cyan, .label-orange, .label-red{
	color: #fff;
}

.btn-black:hover, .btn-blue:hover, .btn-green:hover, .btn-cyan:hover, .btn-orange:hover, .btn-red:hover,.btn-pink:hover,
.btn-black:focus, .btn-blue:focus, .btn-green:focus, .btn-cyan:focus, .btn-orange:focus, .btn-red:focus {
	color: #fff;
}



/*//////////////////////////////////////////////////////////////////////*/





/* ==========================================================================
ScrollUP
========================================================================== */ 
#scrollUp {
    background-color: #471D0D;
    border-radius: 0px;
    bottom: 20px;
    color: #FFF;
    font-size: 22px;
    padding: 8px 15px;
    right: 10px;
    opacity: 0.8;
}
#scrollUp:hover {
    background: rgba(71,29,13, .5)
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
    #scrollUp {
        bottom: 0px;
        padding: 5px 15px;
        right: 0px;
    }
}

/* ==========================================================================
5 GRID
========================================================================== */

col-xs-1-5,  .col-sm-1-5,  .col-md-1-5,  .col-lg-1-5,  .col-xs-2-5,  .col-sm-2-5,  .col-md-2-5,  .col-lg-2-5,  .col-xs-3-5,  .col-sm-3-5,  .col-md-3-5,  .col-lg-3-5,  .col-xs-4-5,  .col-sm-4-5,  .col-md-4-5,  .col-lg-4-5 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-1-5 {
    width: 20%;
    float: left;
}
.col-xs-2-5 {
    width: 40%;
    float: left;
}
.col-xs-3-5 {
    width: 60%;
    float: left;
}
.col-xs-4-5 {
    width: 80%;
    float: left;
}

@media (min-width: 768px) {
.col-sm-1-5 {
    width: 20%;
    float: left;
}
.col-sm-2-5 {
    width: 40%;
    float: left;
}
.col-sm-3-5 {
    width: 60%;
    float: left;
}
.col-sm-4-5 {
    width: 80%;
    float: left;
}
}

@media (min-width: 992px) {
.col-md-1-5 {
    width: 20%;
    float: left;
}
.col-md-2-5 {
    width: 40%;
    float: left;
}
.col-md-3-5 {
    width: 60%;
    float: left;
}
.col-md-4-5 {
    width: 80%;
    float: left;
}
}

@media (min-width: 1200px) {
.col-lg-1-5 {
    width: 20%;
    float: left;
}
.col-lg-2-5 {
    width: 40%;
    float: left;
}
.col-lg-3-5 {
    width: 60%;
    float: left;
}
.col-lg-4-5 {
    width: 80%;
    float: left;
}
}

/* ==========================================================================
Helper Classes　Spacer
========================================================================== */

.p-spacer {
    clear: both;
    position: relative;
    border: none;
    padding: 0;
    margin: 0;
}
.p-spacer-xlg {
    height: 150px;
}
.p-spacer-lg {
    height: 100px;
}
.p-spacer-md {
    height: 80px;
}
.p-spacer-sm {
    height: 50px;
}
.p-spacer-xs {
    height: 30px;
}
.p-spacer-xxs {
    height: 20px;
}

@media screen and (max-width: 768px) {
.p-spacer-xlg {
    height: 70px;
}
.p-spacer-lg {
    height: 50px;
}
.p-spacer-md {
    height: 30px;
}
.p-spacer-sm {
    height: 20px;
}
.p-spacer-xs {
    height: 20px;
}
}
/* ==========================================================================
Helper Classes
========================================================================== */

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid rgba(92, 63, 62, 0.2);
}
hr.space10,  hr.space20,  hr.space30 {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 1px dotted #ccc;
    clear: both;
    float: none;
}
hr.space10 {
    margin-top: 10px;
    margin-bottom: 30px;
}
hr.space20 {
    margin-top: 20px;
    margin-bottom: 20px;
}
hr.space30 {
    margin-top: 30px;
    margin-bottom: 30px;
}
/*

hr.hr-dot {
    border:0;
    border-top:thick dotted #5DABBF;
    margin: 25px 0;
    display: block;
    float: none;
    clear: both;
}
@media screen and (max-width: 479px) {
    hr.hr-dot {
        margin: 20px;
    }
}

*/

/* ==========================================================================
H line
========================================================================== */
.has-lines{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.has-lines:before,
.has-lines:after{
  content: '';
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 1px;
  background: #BBB;
  min-width: 20px;
  display: inline-block;
  vertical-align: middle;
}
.has-lines:before {
  margin-right: 20px;
}
.has-lines:after{
  margin-left: 20px;
}

@media screen and (max-width: 479px) {
	.has-lines:before,
	.has-lines:after {
		margin-right: 0px;
		margin-left: 0px;
		/*display: none;*/
	}
}
/* ==========================================================================
Padding & Margin　
========================================================================== */

.nopadding {
    padding: 0px !important;
    margin: 0px !important;
}

@media screen and (max-width: 479px) {
    .xs-nopadding {
        padding: 0px !important;
        margin: 0px !important;
    }
}


/*------------------------------------------------
.row L＋R Margine = 0 左右のネガティブマージン0
------------------------------------------------*/

.row--nopadding {
    margin-left: 0;
    margin-right: 0;
}
/*------------------------------------------------
Inside L＋R　Padding：0
------------------------------------------------*/

.row--nopadding > [class*="col-"] {
    padding-left: 0 !Important;
    padding-right: 0 !Important;
}
/*------------------------------------------------*/

    /* COL padding BASE
------------------------------------------------*/

.row--padding {
    padding-left: 5px !Important;
    padding-right: 5px !Important;
}

/* ==========================================================================
Margin　
========================================================================== */


.mtb20 {
	margin-top: 20px;
	margin-bottom: 20px;
}
.mtb30 {
	margin-top: 30px;
	margin-bottom: 30px;
}
.mtb100 {
	margin-top: 100px;
	margin-bottom: 100px;
}
.mA10{
	margin:10px;
}
.mA15{
	margin:15px;
}
.mA20{
	margin:20px;
}

.mT0{
	margin-top: 0px!important;
}
.mT10{
	margin-top:10px;
}

.mT20{
	margin-top:20px;
}

.mT30{
	margin-top:30px;
}

.mB0{
	margin-bottom:0px !important;
}

.mB10{
	margin-bottom:10px !important;
}

.mB20{
	margin-bottom:20px;
}

.mR10{
	margin-right:10px;
}
.mR20{
	margin-right:20px;
}
.mR30{
	margin-right:30px;
}
.mL10{
	margin-left:10px;
}
.mL20{
	margin-left:20px;
}
.mL30{
	margin-left:30px;
}

 /* ========================================================================== 
ERROR 404 page
========================================================================== */
    
.error-page{
		padding-top:200px;
        padding-bottom: 200px;
	}

.error-page:after{
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    top: 0;
    left: 0;
    z-index: -1;
}

.error-page .not-found-text h2 {
        color: #1abc9c;
        font-size: 70px;
        font-weight: 700;
        letter-spacing: 3px;
        font-family: 'Open Sans', sans-serif;
    }
    
 .error-page .not-found-text h2 span {
        color: #2c3e50;
    }
    
.error-page .not-found-text h3 {
        color: #FFF;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: 3px;
        font-family: 'Open Sans', sans-serif;
    }

.error-page p {
    color: #FFF;
}
    
.not-found-text > a {
    background-color:rgba(255,255,255, .0);
    display: inline-block;
    margin-top: 15px;
    padding: 15px 30px;
    color: #FFF;
    border-radius: 0;
    }
    
.not-found-text > a:hover,
.not-found-text > a:focus {
        background-color:rgba(255,255,255, .3);
        color: #2c3e50;
     color: #FFF;
 }

/* ==========================================================================
HIDE
========================================================================== */

.sp-hide{
	display:block !important;
	}

@media only screen and (min-width : 320px) {
    .sp-hide{
		display:none !important;
	}
}
 

@media only screen and (min-width : 480px) {
		.sp-hide{
		display:none !important;
	}
}
 

@media only screen and (min-width : 768px) {

	.pc-hide{
		display:none !important;
	}
	.sp-hide{
		display:block !important;
	}
	
}

/* ==========================================================================
PRINT
========================================================================== */

@media print {
  a[href]:after {
    content: ""!important;
  }
  abbr[title]:after {
    content: ""!important;
  }
}