@charset "UTF-8";

/*==================================================================================================

       リセット

===================================================================================================*/

html, body, div, span, applet, object, iframe, strong,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, caption, 
tbody, tfoot, thead, table, label, tr, th, td{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline;
	list-style:none;
	}
ul { 
	letter-spacing: -1em;
	word-spacing: -1em;
	}
:root ul {
	letter-spacing: -1px;
	word-spacing: -1px;
	}
li { 
	letter-spacing: normal;
	word-spacing: normal;
	*display: inline;
	*zoom: 1;
	}
figure { margin:0;}
figure video { max-width: 100%;}
img,iframe	{ vertical-align:bottom;}

/*==================================================================================================

       メイン設定

===================================================================================================*/

html,body { width:100%; min-width: 320px; *width:320px; font-size:16px; }
body {
	background: url("../images/parts/background.jpg") center center repeat;
    font-family: 'Noto Serif JP', serif;
	letter-spacing:0.05em;
	color: #3F3D33;
    font-weight: 500;
	text-align:left;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	line-height:200%;
    font-feature-settings: "palt" 1;
  	}

    .wrapper    { overflow:hidden;}
    article		{ position:relative; width:100%; z-index: 0;}
    section		{ position:relative; }

    .section-l	{ padding-top:12rem; padding-bottom:12rem; }
    .section	{ padding-top:8rem; padding-bottom:8rem; }
    .section-s	{ padding-top:4rem; padding-bottom:4rem; }
    .section.second,.section-s.second	{ padding-top:0; }
    .outer		{ padding-left:50px; padding-right:50px; box-sizing:border-box; }
    .inner-outer{ padding-left:30px; padding-right:30px; box-sizing:border-box; }
    .wrap-1400  { width:100%; max-width:1400px; margin-left:auto; margin-right:auto; }
    .wrap-1200  { width:100%; max-width:1200px; margin-left:auto; margin-right:auto; }
    .wrap-1100  { width:100%; max-width:1100px; margin-left:auto; margin-right:auto; }
    .wrap-1000  { width:100%; max-width:1000px; margin-left:auto; margin-right:auto; }
    .wrap-900   { width:100%; max-width:900px; margin-left:auto; margin-right:auto; }
    .wrap-750   { width:100%; max-width: 750px; margin-left:auto; margin-right:auto; }


    .row			{ margin-left:auto; margin-right:auto; position: relative;}
    .row .row		{ min-width: 0px; }
    .row:before,
    .row:after      { content:""; display:table; }
    .row:after      { clear: both; }
    .row            { zoom: 1; }


	.float-l	{ float:left; }
	.float-r	{ float:right; }
    .float-l-c	{ float:left; }
    .float-r-c	{ float:right; }
    .margin-auto { margin-left:auto; margin-right:auto; }

    h1,h2,h3,h4,h5 { font-weight:500; letter-spacing: .05em;}
    
    small { font-size:.75rem; }
    .bold { font-weight:bold;}
    .serif{ font-family: 'Noto Serif JP', serif;}
    .text-r-c	{ text-align: right;}

@media screen and (max-width: 1350px) {
    html,body, .wrapper	{ line-height: 190%;}
    }
@media screen and (max-width: 1087px) {
    html,body, .wrapper	{ font-size:15px; line-height: 180%;}
    .outer			   { padding-left:30px; padding-right:30px; }
    .inner-outer       { padding-left:20px; padding-right:20px; }
    .section-l	       { padding-top:7rem; padding-bottom:7rem; }
    .section	       { padding-top:5rem; padding-bottom:5rem; }
    .section-s	       { padding-top:3rem; padding-bottom:3rem; }
    .section.second,.section-s.second	   { padding-top:0; }
    .wrap-1400, .wrap-1200, .wrap-1100, .wrap-1000, .wrap-900 { max-width:770px; }
    .float-l-c	{ float:none; }
    .float-r-c	{ float:none; }
    .margin-auto-tablet { margin-left:auto; margin-right:auto; }
    }
@media only screen and (max-width: 767px) {
    html,body, .wrapper	{ font-size:14px; letter-spacing: 1px; line-height: 160%;}
	body			{ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
    .section-l	    { padding-top:3.5rem; padding-bottom:3.5rem; }
    .section	    { padding-top:3rem; padding-bottom:3rem; }
    .section-s	    { padding-top:2rem; padding-bottom:2rem; }
    .section.second,.section-s.second { padding-top:0; }
    .outer			{ padding-left:20px; padding-right:20px; }
    .inner-outer    { padding-left:10px; padding-right:10px; }
    .wrap-1400, .wrap-1200, .wrap-1100, .wrap-1000, .wrap-900, .wrap-750  { max-width:480px; }
    .sp-wrap        { max-width:360px; margin-left:auto; margin-right:auto; }
    .center-left    { text-align:left;}
    .left-center    { text-align:center;}
    .text-r-c	{ text-align: center;}

    }
@media only screen and (max-width:374px) {
    html,body, .wrapper	{ font-size:13px; }
    }
/*==================================================================================================

       text

===================================================================================================*/
	.center		{ text-align:center;}
    .center-left{ text-align:center;}
    .center-left-tablet{ text-align:center;}
    .left-center{ text-align: left;}
    .left-center-tablet{ text-align: left;}
    .right-center-tablet{ text-align: right;}
	.text-l		{ text-align:left;}
    .text-r		{ text-align:right;}
    
    
@media screen and (max-width: 1087px) {
    .center-left-tablet{ text-align: left;}
    .left-center-tablet{ text-align: center;}
    .right-center-tablet{ text-align: center;}
    }
@media only screen and (max-width: 767px) {
    .center-left    { text-align:left;}
    .left-center    { text-align:center;}
    }
/*==================================================================================================

       Link

===================================================================================================*/

a {
	text-decoration:none;
	color:#3F3D33;
	cursor:pointer;
	}
	a:hover {
	color:#888;
	}
	a img {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	}
	a:hover img {
	opacity:0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
	}
/*==================================================================================================

       Other

===================================================================================================*/

    img,.img-auto img {
        max-width: 100%;
        height: auto;
        width /***/:auto;
        vertical-align:bottom;
        }
    .radius,
    .radius video,
    .radius img {
        border-radius:         4px;
        moz-border-radius:     4px;
        -webkit-border-radius: 4px;
        -o-border-radius:      4px;
        -ms-border-radius:     4px;
        }
    .shadow	{
        box-shadow:	        0px 3px 5px rgba(0,0,0,0.3);
        -moz-box-shadow:	0px 3px 5px rgba(0,0,0,0.3);
        -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
        -o-box-shadow:		0px 3px 5px rgba(0,0,0,0.3);
        -ms-box-shadow:		0px 3px 5px rgba(0,0,0,0.3);
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        }
        a .shadow:hover {
        box-shadow:	        0px 3px 5px rgba(0,0,0,0);
        -moz-box-shadow:	0px 3px 5px rgba(0,0,0,0);
        -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0);
        -o-box-shadow:		0px 3px 5px rgba(0,0,0,0);
        -ms-box-shadow:		0px 3px 5px rgba(0,0,0,0);
        }

    .centered-outer { position: relative; height:100%; }
    .centered-inner {
        position: absolute;
        width:100%;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        -webkit-transform: translateY(-50%) translateX(-50%);
        }
    .relative { position: relative;}

.flexslider-wrap {
    position: relative;
    width:100%;
    }
    .flexslider-wrap.h66p:after {
        content: "";
        display: block;
        padding-bottom:66.666666%;
        }
    .flexslider-wrap:after {
        content: "";
        display: block;
        padding-bottom:58.8888%;
        }
        .flexslider-wrap .flexslider {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        }

/*==================================================================================================

      　hover_zoom

===================================================================================================*/

.hover-zoom__image {
    overflow: hidden;
    position: relative;
    width:100%;
    -webkit-transition  : all .3s ease;
        -moz-transition : all .3s ease;
        -ms-transition  : all .3s ease;
            transition  : all .3s ease;
    }    
    .hover-zoom__image figure {
    -webkit-transition  : all .3s ease;
        -moz-transition : all .3s ease;
        -ms-transition  : all .3s ease;
            transition  : all .3s ease;
    }
    .hover-zoom__image:hover figure,
    a:hover .hover-zoom__image figure {
    opacity: 1;
    -moz-transform:    scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform:     scale(1.1);
    transform:         scale(1.1);
    }
    .hover-zoom__image a:hover img,
    a:hover .hover-zoom__image img {
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
	}

/*==================================================================================================

       デバイス

===================================================================================================*/

    .sp-none        { }
    .sp-inline-none { display:inline-block;}
	.sp-on		    { display:none;}
    .sp-inline-on   { display:none;}
	.tablet-on		{ display:none;}
	.tablet-none	{ }
@media screen and (max-width: 1087px) {
    .tablet-on		{ display:inherit;}
	.tablet-none	{ display:none;}
    }
@media screen and (max-width: 767px) {
    .sp-none		{ display:none;}
    .sp-inline-none { display:none;}
	.sp-on			{ display:inherit;}
    .sp-inline-on   { display:inline;}
	.sp-text-l		{ text-align:left !important;}
	.sp-center		{ text-align:center;}
    }

/*==================================================================================================

       Flex

===================================================================================================*/

.flex-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:center;
    align-items: center;
    align-content:stretch;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: nowrap;
    }
    .flex-wrap.is-align-stretch { /* 上端揃え */
    align-items: stretch;
    }
    .flex-wrap.is-align-end { /* 下端揃え */
    align-items: flex-end;
    }
    .flex-side-center { /* 子要素の左右の中央揃え IE一部バグあり */
    display: flex;
    justify-content: center;
    }
    .flex-wrap.is-between { /* 子要素の等間隔 + 両端揃え */
    justify-content: space-between;
    }
    .flex-wrap.is-wrap { /* 子要素折り返し */
    flex-wrap: wrap;
    }
    
    /* **** 子要素 **** */
    
    .flex {
    flex: none;
    display: block;
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    min-width:0;
    box-sizing: border-box;
    }


    .flex-pb-1 .flex { padding-bottom:.25em; }
    .flex-pb-2 .flex { padding-bottom:.5em; }
    .flex-pb-3 .flex { padding-bottom:.75em; }
    .flex-pb-4 .flex { padding-bottom:1em; }
    .flex-pb-5 .flex { padding-bottom:1.25em; }
    .flex-pb-6 .flex { padding-bottom:1.5em; }
    .flex-pb-7 .flex { padding-bottom:1.75em; }
    .flex-pb-8 .flex { padding-bottom:2em; }

    .flex.mr_3 { margin-right:3rem;}
    .flex.ml_3 { margin-left:3rem;}

    .flex-1   { order: 1; }
    .flex-2   { order: 2; }
    .flex-3   { order: 3; }
    .flex-4   { order: 4; }
    .flex-1-3   { order: 1; }
    .flex-2-1   { order: 2; }
    .flex-3-2   { order: 3; }

@media screen and (max-width: 1087px) {
    .flex-wrap.is-tablet { -webkit-flex-direction: column; flex-direction: column; flex: none; display: block; }
    .is-tablet .flex { margin-right:0 !important; margin-left:0 !important;}
    
    .flex.is-tablet { max-width:100% !important; min-width:100% !important;}
    .flex-1-3   { order: 3; }
    .flex-2-1   { order: 1; }
    .flex-3-2   { order: 2; }
    }
@media screen and (max-width: 767px) {
    .flex-wrap.is-mobile { -webkit-flex-direction: column; flex-direction: column; flex: none; display: block; }
    
    .flex.is-mobile { max-width:100% !important; min-width:100% !important;}
    }

/*========================
    Bulmaチューニング
 ========================*/
.column .inner { width:100%;}
.vertical-center { /* columnに付与 直下にinner設置 */
    display: flex;
    align-items: center;
    }
.vertical-side-center { /* IE でバグあり */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    }
    /* IE でのflex+figure バグ対策 */
    @media all and (-ms-high-contrast: none) {
    .vertical-side-center figure,
    .vertical-side-center img { width:100%; height:100%; }
    }
.reverse-row-order {
    flex-direction: row-reverse;
    }
/*==================================================================================================

      　pace

===================================================================================================*/

.intro_bg{ position:fixed; background:#FFF; width:100%; height: 100vh; z-index: 100000; }
    .intro_bg .spinner { position: fixed; width:60px; height:60px;  bottom:50%; left:50%; margin:0 0 -30px -30px; }
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    }
    .pace-inactive {
    display: none;
    }
    .pace .pace-progress {
    background-color: rgba(0, 0, 0, 0.19999999999999996);
    position: fixed;
    z-index: -1;
    top: 0;
    right: 100%;
    bottom: 0;
    width: 100%;

    }

    /* ==============================================
        ball-scale
    ============================================== */

    @-webkit-keyframes ball-scale {
        0% { -webkit-transform: scale(0); transform: scale(0); }
        100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; }
    }
    @keyframes ball-scale {
        0% { -webkit-transform: scale(0); transform: scale(0); }
        100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; }
    }
    .ball-scale > div {
        background-color: #999;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        display: inline-block;
        height: 60px;
        width: 60px;
        -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
        animation: ball-scale 1s 0s ease-in-out infinite;
        }

/*==================================================================================================

       ボタン

===================================================================================================*/

.more {
        position:relative;
        font-weight:500;
        font-size:1rem;
        width:240px;
        }
        .more a {
        color:#526533;
        width:240px;
        height:50px;
        text-align: center;
        line-height:44px;
        box-sizing:border-box;
        border: 2px solid #526533;
        background: none;
        white-space: nowrap;
        text-decoration:none !important;
        position: relative;
        z-index: 1;
        -webkit-transition: color 0.3s ease;
        -moz-transition: color 0.3s ease;
        -ms-transition: color 0.3s ease;
        -o-transition: color 0.3s ease;
        transition: color 0.3s ease;
        letter-spacing: .05em;
        display: inline-block;
        }
        .more a:after {
        position: absolute;
        content: "";
        width: 0;
        height: 100%;
        top: 0;
        right: 0;
        z-index: -1;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background: #526533;
        }
        .more a:hover {
        color:#FFF;
        }
        .more a:hover:after {
        left: 0;
        width: 100%;
        }
@media screen and (max-width: 767px) {
    .more { margin-left: auto; margin-right:auto; font-size:14px; }
    .more a { height:44px; line-height:40px; }
}



/*==================================================================================================

        テキスト

===================================================================================================*/

.f18 {font-size:18px;}
.f21 {font-size:21px;}
.f24 {font-size:24px;}
.f27 {font-size:27px;}
.f30 {font-size:30px;}
.f33 {font-size:33px;}
.f36 {font-size:36px;}

.lh180 { line-height:180%; }
.lh200 { line-height:200%; }
.lh220 { line-height:220%; }
.lh250 { line-height:250%; }

@media screen and (max-width: 1350px) {
    .f18 {font-size:17px;}
    .f21 {font-size:20px;}
    .f24 {font-size:22px;}
    .f27 {font-size:24px;}
    .f30 {font-size:27px;}
    .f33 {font-size:29px;}
    .f36 {font-size:31px;}
}
@media screen and (max-width: 1087px) {
    .f18 {font-size:16px;}
    .f21 {font-size:17px;}
    .f24 {font-size:18px;}
    .f27 {font-size:18px;}
    .f30 {font-size:26px;}
    .f33 {font-size:27px;}
    .f36 {font-size:29px;}
    .lh220 { line-height:200%; }
    .lh250 { line-height:200%; }

}
@media screen and (max-width: 767px) {
    .f18 {font-size:13px;}
    .f21 {font-size:15px;}
    .f24 {font-size:16px;}
    .f27 {font-size:18px;}
    .f30 {font-size:20px;}
    .f33 {font-size:21px;}
    .f36 {font-size:22px;}
    .lh180 { line-height:160%; }
    .lh200 { line-height:180%; }
    .lh220 { line-height:180%; }
    .lh250 { line-height:180%; }
    
}
/*==================================================================================================

       padding margin 設定

===================================================================================================*/

	.pt-1em		{ padding-top:1rem;}
	.pt-2em		{ padding-top:2rem;}
	.pt-3em		{ padding-top:3rem;}
	.pt-4em		{ padding-top:4rem;}
	.pt-5em		{ padding-top:5rem;}

    .pb-05em	{ padding-bottom:.5rem;}
    .pb-1em		{ padding-bottom:1rem;}
	.pb-2em		{ padding-bottom:2rem;}
	.pb-3em		{ padding-bottom:3rem;}
	.pb-4em		{ padding-bottom:4rem;}
	.pb-5em		{ padding-bottom:5rem;}
    .pb-6em		{ padding-bottom:6rem;}

    .mt-1em		{ margin-top:1rem;}
	.mt-2em		{ margin-top:2rem;}
	.mt-3em		{ margin-top:3rem;}
	.mt-4em		{ margin-top:4rem;}
	.mt-5em		{ margin-top:5rem;}

	.mb-05em	{ margin-bottom:.5rem;}
    .mb-1em		{ margin-bottom:1rem;}
	.mb-2em		{ margin-bottom:2rem;}
	.mb-3em		{ margin-bottom:3rem;}
	.mb-4em		{ margin-bottom:4rem;}
	.mb-5em		{ margin-bottom:5rem;}
    .mb-6em		{ margin-bottom:6rem;}
    .mb-7em		{ margin-bottom:7rem;}
    .mb-8em		{ margin-bottom:8rem;}

    .pt-2-1		{ padding-top:2rem;}
    .pt-3-2		{ padding-top:3rem;}
    .pb-2-1		{ padding-bottom:2rem;}
    .pb-3-2		{ padding-bottom:3rem;}
    .pb-4-2		{ padding-bottom:4rem;}
    .pb-5-2		{ padding-bottom:4rem;}
    .mb-2-1		{ margin-bottom:2rem;}
    .mb-3-1		{ margin-bottom:3rem;}
    .mb-3-2		{ margin-bottom:3rem;}
    .mb-4-2		{ margin-bottom:4rem;}
    .mb-5-2		{ margin-bottom:5rem;}

    .pl-1em     { padding-left:1rem;}
    
    .pd-1       { padding-top:1rem; padding-bottom:1rem; }
    .pd-2       { padding-top:2rem; padding-bottom:2rem; }

@media only screen and (max-width: 1087px) {
    .pt-2-1		{ padding-top:1rem;}
    .pt-3-2		{ padding-top:2rem;}
    .pb-2-1		{ padding-bottom:1rem;}
    .pb-3-2		{ padding-bottom:2rem;}
    .pb-4-2		{ padding-bottom:2rem;}
    .pb-5-2		{ padding-bottom:2rem;}
    .mb-2-1		{ margin-bottom:1rem;}
    .mb-3-1		{ margin-bottom:1rem;}
    .mb-3-2		{ margin-bottom:2rem;}
    .mb-4-2		{ margin-bottom:2rem;}
    .mb-5-2		{ margin-bottom:2rem;}
    
    .tab-pb-1    { padding-bottom:1rem;}
    
    .tab-pd-1    { padding-top:1rem; padding-bottom:1rem;}
    .tab-pd-2    { padding-top:2rem; padding-bottom:2rem;}
    
    .tab-pt-2    { padding-top:2rem;}
    
    .tab-pb-1    { padding-bottom:1rem;}
    
    .tab-mb-1    { margin-bottom:1rem;}
    .tab-mb-2    { margin-bottom:2rem;}
}
@media only screen and (max-width: 767px) {
    .sp-pb-2    { padding-bottom:2rem;}

    .sp-pd-1    { padding-top:1rem; padding-bottom:1rem;}
    .sp-pd-2    { padding-top:2rem; padding-bottom:2rem;}
    .sp-pd-3    { padding-top:3rem; padding-bottom:3rem;}
    
}