@charset "UTF-8";

.en   { font-family: 'Lato', sans-serif; }
.sans { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}

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

       リセット

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

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("https://ubanoyu.com/images/parts/background.jpg") center center repeat;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	letter-spacing:0.05em;
	color: #131313;
    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-m	{ padding-top:6rem; padding-bottom:6rem; }
    .section-s	{ padding-top:4rem; padding-bottom:4rem; }
    .section-ss	{ padding-top:40px; padding-bottom:40px; }
    .second  	{ padding-top:0 !important; }
    .outer		{ padding-left:50px; padding-right:50px; box-sizing:border-box; }
    .outer-thin	{ padding-left:30px; padding-right:30px; box-sizing:border-box; }
    .outer-sp-none { padding-left:50px; padding-right:50px; box-sizing:border-box; }

    .inner-wrap { padding:25px 50px; box-sizing:border-box; }
    .inner-wrap-spnone { padding:25px 50px; box-sizing:border-box; }
    .inner-wrap-s { padding:25px 20px; box-sizing:border-box; }

    .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; }

    .margin-auto { margin-left:auto; margin-right:auto; }

    .bottom-none    { padding-bottom:0 !important;}

    h1,h2,h3,h4,h5 { font-weight:600; letter-spacing: .05em; line-height: 150%; }
    .en h1,.en h2,.en h3,.en h4,.en h5 { font-weight:400;}
    
    small { font-size:.75rem; }
    .bold { font-weight:bold;}
    .text-r-c	{ text-align: right;}
    .text-llc	{ text-align: left;}
    .text-rrl	{ 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; }
    .outer-thin	       { padding-left:30px; padding-right:30px; }
    .outer-sp-none     { padding-left:30px; padding-right:30px; }
    
    .inner-wrap        { padding:30px; }
    .inner-wrap.tablet-top0  { padding-top:0; }
    .inner-wrap-spnone { padding:20px; }
    .inner-wrap-s { padding: 20px; }
    
    .section-l	       { padding-top:7rem; padding-bottom:7rem; }
    .section	       { padding-top:5rem; padding-bottom:5rem; }
    .section-m	       { padding-top:4rem; padding-bottom:4rem; }
    .section-s	       { padding-top:3rem; padding-bottom:3rem; }
    .section-ss	       { padding-top:30px; padding-bottom:30px; }

    .text-llc	{ text-align: left;}
    .text-rrl	{ text-align: right;}
    .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:5.5rem; padding-bottom:5.5rem; }
    .section	    { padding-top:4.5rem; padding-bottom:4.5rem; }
    .section-m	    { padding-top:4rem; padding-bottom:4rem; }
    .section-s	    { padding-top:3rem; padding-bottom:3rem; }
    .section-ss	    { padding-top:20px; padding-bottom:20px; }
    .outer			{ padding-left:15px; padding-right:15px; }
    .outer-thin	    { padding-left:10px; padding-right:10px; }
    .outer-sp-none  { padding-left:0; padding-right:0; }
    .sp-outer-thin	    { padding-left:10px; padding-right:10px; }
    
    .inner-wrap        { padding:25px 20px; }
    .inner-wrap.tablet-top0  { padding-top:0; }
    .inner-wrap-spnone { padding:20px 0; }
    .inner-wrap-s { padding: 20px 15px; }

    .center-left    { text-align:left;}
    .left-center    { text-align:center;}
    .text-r-c	{ text-align: center;}
    .text-llc	{ text-align: center;}
    .text-rrl	{ text-align: left;}
    .margin-auto-sp { margin-left:auto; margin-right:auto; }
    }
@media only screen and (max-width:374px) {
    html,body, .wrapper	{ font-size:13px; }
    }

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

       Width ( wrap + wrap-1200 )

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

    .wrap       { width:100%; margin-left:auto; margin-right:auto; position: relative; z-index: 10; }

    .wrap-2000  { max-width:2000px; }
    .wrap-1800  { max-width:1800px; }
    .wrap-1700  { max-width:1700px; }
    .wrap-1600  { max-width:1600px; }
    .wrap-1516  { max-width:1516px; }
    .wrap-1500  { max-width:1500px; }
    .wrap-1400  { max-width:1400px; }
    .wrap-1300  { max-width:1300px; }
    .wrap-1200  { max-width:1200px; }
    .wrap-1200-600  { max-width:1200px; }
    .wrap-1100  { max-width:1100px; }
    .wrap-1000  { max-width:1000px; }
    .wrap-900   { max-width: 900px; }
    .wrap-900-600  { max-width:900px; }
    .wrap-840   { max-width: 840px; }
    .wrap-800   { max-width: 800px; }
    .wrap-750   { max-width: 750px; }
    .wrap-600   { max-width: 600px; }

    .max240     { max-width:240px; width:100%;}
    .max300     { max-width:300px; width:100%;}
    .max350     { max-width:350px; width:100%;}
    .max400     { max-width:400px; width:100%;}
    .max450     { max-width:450px; width:100%;}
    .max500     { max-width:500px; width:100%;}
    .max550     { max-width:550px; width:100%;}
    .max600     { max-width:600px; width:100%;}
    .max650     { max-width:650px; width:100%;}
    .max700     { max-width:700px; width:100%;}

    .w4em { width:4em; }
    .w5em { width:5em; }
    .w6em { width:6em; }
    .w7em { width:7em; }
    .w8em { width:8em; }
    .w9em { width:9em; }
    .w10em { width:10em; }
    .w11em { width:11em; }
    .w12em { width:12em; }
    .w14em { width:14em; }

    .w32p       { width:32.962963%;}
    .w66p       { width:66.666667%; }
    
    .w20p { width:20%; }
    .w25p { width:25%; }
    .w33p { width:33%; }
    .w50p { width:50%; }

    .h100p { height:100%; }

@media screen and (max-width: 1087px) {
    .wrap { max-width:700px; }
    .wrap-1200-600  { max-width:600px; }
    .wrap-900-600  { max-width:600px; }
    }
@media only screen and (max-width: 767px) {
    .wrap { max-width:350px; }
    }

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

       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:#393332;
	cursor:pointer;
    opacity: 1;
    -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	}
	a:hover {
	opacity: .6;
	}
	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 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 22px 15px -15px rgba(0,0,0,.4);
        -moz-box-shadow:	0px 22px 15px -15px rgba(0,0,0,.4);
        -webkit-box-shadow: 0px 22px 15px -15px rgba(0,0,0,.4);
        -o-box-shadow:		0px 22px 15px -15px rgba(0,0,0,.4);
        -ms-box-shadow:		0px 22px 15px -15px rgba(0,0,0,.4);
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        }

        @media screen and (max-width: 767px) {
            .sp-shadow   	{
                box-shadow:	        0px 25px 12px -15px rgba(0,0,0,.4);
                -moz-box-shadow:	0px 25px 12px -15px rgba(0,0,0,.4);
                -webkit-box-shadow: 0px 25px 12px -15px rgba(0,0,0,.4);
                -o-box-shadow:		0px 25px 12px -15px rgba(0,0,0,.4);
                -ms-box-shadow:		0px 25px 12px -15px rgba(0,0,0,.4);
                -webkit-transition: all 0.5s ease;
                -moz-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
                }
        }

    .relative { position: relative;}

.flexslider-wrap {
    position: relative;
    width:100%;
    }
    .flexslider-wrap.h66p:after {
        content: "";
        display: block;
        padding-bottom:66.666666%;
        }
        .flexslider-wrap.h60p:after {
        content: "";
        display: block;
        padding-bottom:60%;
        }
        .flexslider-wrap.h50p:after {
        content: "";
        display: block;
        padding-bottom:50%;
        }
        .flexslider-wrap.h55p:after {
        content: "";
        display: block;
        padding-bottom:55%;
        }
        .flexslider-wrap.h61p:after {
        content: "";
        display: block;
        padding-bottom:61.11111%;
        }
        .flexslider-wrap .flexslider {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        }
    .flex-caption {
        padding: 3px 10px;
        margin: 0;

        color: #fff;
        font-size: .975rem;
        }

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

      　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	{ }
    .sp-inline-table { display: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-inline-table { display: inline-table; }
	.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;
    }

    /* **** Width **** */

    .flex240-190    { max-width:240px; min-width:240px; width:240px; }
    .flex300    { max-width:300px; min-width:300px; width:300px; }
    .flex330    { max-width:330px; min-width:330px; width:330px; }
    .flex500    { max-width:500px; min-width:500px; width:500px; }
    .flex900    { max-width:900px; min-width:900px; width:900px; }



    .flex-1-right { margin-right:.5rem; }
    .flex-2-right { margin-right:1rem; }
    .flex-3-right { margin-right:1.5rem; }
    .flex-4-right { margin-right:2rem; }
    .flex-5-right { margin-right:2.5rem; }
    .flex-6-right { margin-right:3rem; }

    .flex-1-left { margin-left:.5rem; }
    .flex-2-left { margin-left:1rem; }
    .flex-3-left { margin-left:1.5rem; }
    .flex-4-left { margin-left:2rem; }
    .flex-5-left { margin-left:2.5rem; }
    .flex-6-left { margin-left:3rem; }

    .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-1   { order: 1; }
    .flex-2   { order: 2; }
    .flex-3   { order: 3; }
    .flex-4   { order: 4; }
    .flex-1-3-3   { order: 1; }
    .flex-2-1-1   { order: 2; }
    .flex-3-2-2   { order: 3; }

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

    .flex-1-3-3   { order: 3; }
    .flex-2-1-1   { order: 1; }
    .flex-3-2-2   { order: 2; }
    }
@media screen and (max-width: 767px) {
    .flex-wrap.is-flex-mobile { -webkit-flex-direction: column; flex-direction: column; flex: none; display: block; }
    .is-flex-mobile .flex { margin-right:0 !important; margin-left:0 !important; 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: 10000; }
    .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:400;
        font-size:15px;
        max-width:210px;
        width:100%;
        }
        .more.w100p { max-width:100%; }
        .more.lage { max-width:300px; }

        .more a {
        color:#FFF;
        width:100%;
        padding:17px 0;
        line-height: 1;
        text-align: center;
        box-sizing:border-box;
        background: url("https://ubanoyu.com/images/parts/red.jpg") center center repeat;
        white-space: nowrap;
        text-decoration:none !important;
        position: relative;
        border-radius:4px;
        z-index: 1;
        letter-spacing: 0;
        display: inline-block;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        }
        .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:rgba(255,255,255,.3);
        }
        .more a:hover {

        }
        .more a:hover:after {
        left: 0;
        width: 100%;
        }
        
        .more.banner-more a { background: #805F1E; color:#FFF; }
        
        @media screen and (max-width: 1087px) {
        .more { margin-left: auto; margin-right:auto; font-size:14px; }
        .more a { padding:17px 0; }
        }  
        @media screen and (max-width: 767px) {
            .more { margin-left: auto; margin-right:auto; font-size:13px; }
            .more a { padding:15px 0; }
        }



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

        テキスト

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

.red { color:#990000; }

.tategaki {
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        }
        .tategaki-nomber { /* 数字のみ横 */
        -webkit-text-combine: horizontal;
        -ms-text-combine-horizontal: all;
        text-combine-upright: all;
        }
        @media screen and (max-width: 767px) {
        .tategaki.sp-yokogaki { -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; }
        }
.drop {
        overflow: hidden;
        zoom:1;
        }
        .drop:first-letter{
        line-height: 1;
        font-size: 178%;
        color:#AE3939;
        padding-right: 5px;
        }

.lead {
        position: relative;
        width:100%;
        line-height: 180%;
        overflow: hidden;
        z-index: 1;
        }
        .lead.white { color:#F1F1F1;}
        .lead:after {
        content: "";
        display:inline-block;
        position: absolute;
        top:.9em;
        margin-left:1rem;
        width:100%;
        height:1px;
        background:rgba(0,0,0,.5);
        opacity:.6;
        }
        
        
        .lead.center:after { display:block; left:0; z-index:-1;margin-left:0; }
        .lead.center span { position:relative; z-index:10; background:#FFF; padding:0 1rem; }
        .bg-gray .lead.center span { background:#F3F3F3; }
        
        .bg-darkbrown .lead { color:#CCB46E; }
        .bg-darkbrown .lead:after { background: rgba(255,255,255,.4); }
        
        
        @media screen and (max-width: 1087px) {
        .lead {font-size:11px;}
        }
        @media screen and (max-width: 767px) {
        .lead {font-size:10px;}
        .lead.left-center:after { display:block; left:0; z-index:-1;margin-left:0; }
        .bg-darkbrown .lead.left-center span { position:relative; z-index:10; background:#261B11; padding:0 1rem; }
        }
.text-indent {
        padding-left:50px;
        box-sizing: border-box;
        }
        @media screen and (max-width: 1087px) {
        .text-indent { padding-left:40px; }
        }
        @media screen and (max-width: 767px) {
        .text-indent { padding-left:0px; }
        }
.label-title {
        background: rgba(255,255,255,.1);
        padding:1.25rem 1rem;
        line-height: 1;
        box-sizing: border-box;
        }
.bar-title {
        position: relative;
        width:92%;
        max-width:1200px;
        margin:0 auto;
        }
        .bar-title span {
        position: relative;
        z-index: 10;
        background: #FFF;
        padding:0 1.5rem;
        }
        .section-title .bar-title span {
        position: relative;
        z-index: 10;
        background: #261B11;
        padding:0 1.5rem;
        }
        .bar-title:before {
        content:"";
        display:block;
        position: absolute;
        top:50%;
        left:0;
        width:100%;
        height:1px;
        background: rgba(255,255,255,.5);
        z-index: -1;
        }
        
.dotted-title {
        padding-bottom:5px;
        border-bottom:2px dotted rgba(0,0,0,.4);
        }
.border-title {
        position: relative;
        padding-bottom:5px;
        border-bottom:1px solid #444;
        box-sizing: border-box;
        }
.f-span {
        line-height: 160%;
        }
        .f-span span{
            display:block;
            font-size:1em;
            font-weight:100;
            letter-spacing: .15em;
            color:#BA933B;
            }
        .f-span-inline {
        line-height: 150%;
        }
        .f-span-inline span{
            display:inline-block;
            font-size:1rem;
            font-weight:100;
            letter-spacing: .15em;
            line-height: 1;
            color:#BA933B;
            }
        @media screen and (max-width: 1087px) {
        .f-span span{ font-size:11px; }
        .f-span-inline span{ font-size:12px; }
        }
        @media screen and (max-width: 767px) {
        .f-span span{ font-size:10px; }
        .f-span-inline span{ font-size:10px; }
        }

.ls-03em { letter-spacing: .3rem; }


.f10 {font-size:10px;}
.f12 {font-size:12px;}
.f14 {font-size:14px;}
.f15 {font-size:15px;}
.f16 {font-size:16px;}
.f17 {font-size:17px;}
.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;}
.f60 {font-size:60px;}
.f72 {font-size:72px;}
.f75 {font-size:75px;}
.f90 {font-size:90px;}

.lh125 { line-height:125%; }
.lh150 { line-height:150%; }
.lh175 { line-height:175%; }
.lh180 { line-height:180%; }
.lh200 { line-height:200%; }
.lh220 { line-height:220%; }
.lh250 { line-height:250%; }

@media screen and (max-width: 1350px) {
    .f16 {font-size:15px;}
    .f17 {font-size:16px;}
    .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;}
    .f60 {font-size:54px;}
    .f72 {font-size:63px;}
    .f75 {font-size:68px;}
    .f90 {font-size:81px;}
}
@media screen and (max-width: 1087px) {
    .f12 {font-size:11px;}
    .f14 {font-size:12px;}
    .f15 {font-size:13px;}
    .f16 {font-size:14px;}
    .f17 {font-size:15px;}
    .f18 {font-size:16px;}
    .f21 {font-size:17px;}
    .f24 {font-size:18px;}
    .f27 {font-size:21px;}
    .f30 {font-size:24px;}
    .f33 {font-size:27px;}
    .f36 {font-size:29px;}
    .f60 {font-size:45px;}
    .f72 {font-size:32px;}
    .f75 {font-size:56px;}
    .f90 {font-size:67px;}

    .lh220 { line-height:200%; }
    .lh250 { line-height:200%; }

}
@media screen and (max-width: 767px) {
    .f12 {font-size:10px;}
    .f14 {font-size:12px;}
    .f15 {font-size:13px;}
    .f16 {font-size:13px;}
    .f17 {font-size:13px;}
    .f18 {font-size:16px;}
    .f21 {font-size:17px;}
    .f24 {font-size:18px;}
    .f27 {font-size:19px;}
    .f30 {font-size:20px;}
    .f33 {font-size:21px;}
    .f36 {font-size:22px;}
    .f60 {font-size:36px;}
    .f72 {font-size:42px;}
    .f75 {font-size:45px;}
    .f90 {font-size:54px;}

    .lh175 { line-height:160%; }
    .lh180 { line-height:160%; }
    .lh200 { line-height:180%; }
    .lh220 { line-height:180%; }
    .lh250 { line-height:180%; }
    
}

/*================================================
      　list
================================================*/

    .dotted-list {
            border-top:2px dotted #999;
            }
            .dotted-list li {
            border-bottom:2px dotted #999;
            padding:.25em 0;
            }
            .dotted-list span {
            padding-right:1em;
            }
    .line-list {
            }
            .line-list li {
            border-bottom:1px solid #CCC;
            padding:.75em 0;
            }
            .line-list li:last-child {
            border-bottom:none;
            }
    .disk-list {
            }
            .disk-list li {
            padding: 0 0 .5em 1rem ;
            position: relative;
            line-height: 160%;
            }
            .disk-list li:before {
                content: "・";
                display:block;
                position: absolute;
                top: 0;
                left: 0;
                font-size:10px;
                vertical-align: middle;
                }
    .kome-list {
            }
            .kome-list li {
            padding: 0;
            position: relative;
            padding-left:1em;
            }
            .kome-list li:before {
                content: "※";
                display:block;
                position: absolute;
                top: 0;
                left: 0;
                font-size:10px;
                vertical-align: middle;
                }
    .links-list { position: relative; zoom: 1; }
                .links-list:before,.links-list:after { min-width: 0px; content:""; display:table; }
                .links-list:after { clear: both; }

            .links-list li {
            width:50%;
            float:left;
            margin-bottom:.5rem;
            }
            .links-list li a {
            position: relative;
            display: block;
            width:96%;
            margin:0 2%;
            text-align: center;
            padding:12px;
            box-sizing: border-box;
            background:#FFF;
            border:2px solid rgba(0,0,0,.5);
            }
            .links-list li 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:rgba(0,0,0,.1);
            }
            .links-list li a:hover:after {
            left: 0;
            width: 100%;
            }


    .amenities-list {
            }
            .amenities-list li {
            padding: 0 0 .25em 1rem ;
            box-sizing: border-box;
            position: relative;
            font-size:15px;
            display: inline-block;
            width:49%;
            line-height: 135%;
            }
            .amenities-list li:before {
                content: "・";
                display:inline-block;
                position: absolute;
                top: 0;
                left: 0;
                font-size:10px;
                vertical-align: middle;
                }
    .menu-list {
            }
            .menu-list li {
            padding: 0 0 .25em 1rem ;
            box-sizing: border-box;
            position: relative;
            font-size:15px;
            display: inline-block;
            width:49%;
            line-height: 135%;
            }
            .menu-list li:before {
                content: "・";
                display:inline-block;
                position: absolute;
                top: 0;
                left: 0;
                font-size:10px;
                vertical-align: middle;
                }
    .spot-list {
            }
            .spot-list li {
            padding: 0 0 .25em 1rem ;
            box-sizing: border-box;
            position: relative;
            font-size:15px;
            display: inline-block;
            width:49%;
            line-height: 135%;
            }
            .spot-list li:before {
                content: "・";
                display:inline-block;
                position: absolute;
                top: 0;
                left: 0;
                font-size:10px;
                vertical-align: middle;
                }
            @media screen and (max-width: 1087px) {
            .amenities-list li { width:49%; font-size:14px;}
            .menu-list li { width:49%; font-size:14px; }
            .spot-list li { width:100%; font-size:14px; }
            .links-list li { width:100%; }
            }
            @media screen and (max-width: 767px) {
            .amenities-list li { width:auto; font-size:13px;}
            .menu-list li { width:auto; font-size:13px; }
            .spot-list li { font-size:13px; }
            }


/*================================================
      　table
================================================*/

.table {
            width:100%;
            border-collapse:collapse;
            border-spacing:0;
            text-align:left;
            letter-spacing:0;
            box-sizing: border-box;
            border: 1px solid rgba(0,0,0,.6);
            line-height: 150%;
            font-weight:400;
            }

            
            .table th {
                padding:.75rem;
                vertical-align: top;
                font-weight:normal;
                text-align:left;
                border: 1px solid rgba(0,0,0,.6);
                background: rgba(0,0,0,.08);
                }

            .table td {
                padding:.75rem;
                text-align:left;
                border: 1px solid rgba(0,0,0,.6);
                background: rgba(255,255,255,.8);
                }

            .table.td-right td { text-align: right;}
            .table.center td,.table.center th { text-align: center;}

    @media screen and (max-width: 767px) {
        .table.sp-table { border:none; }
        .table.sp-table tr { border-bottom:none; }
        .table.sp-table th { width:100% !important; display: block !important; padding:.625em 1em; box-sizing: border-box; border:none; text-align: left; }
        .table.sp-table td { width:100% !important; display: block !important; padding:.625em 1em 1.25em; box-sizing: border-box; border:none; background: none; }
        .table.sp-table td.sp-bottom-none { padding-bottom:0; }

    }

/*================================================
      　other
================================================*/
    .inline-p { display:inline;}
    .line-text { padding:.25rem 0 ; border-top:1px solid rgba(0,0,0,.3); border-bottom:1px solid rgba(0,0,0,.3); }
    
    hr.line {
        border: none;
        padding:0;
        background: url("https://ubanoyu.com/images/parts/line-b.png") center center repeat-x;
        height:1px;
        width:94%;
        margin:0 auto 1rem;
        }

    .sp-b { border-bottom:1px solid #FAF7F2; }
    .sp-t { border-top:1px solid #FAF7F2; }
    .sp-l { border-left:1px solid #FAF7F2; }
    .sp-r { border-right:1px solid #FAF7F2; }
    .sp-l-sp-none { border-left:1px solid #FAF7F2; }
    .sp-r-sp-none { border-right:1px solid #FAF7F2; }
    .sp-l-tab-none { border-left:1px solid #FAF7F2; }
    .sp-r-tab-none { border-right:1px solid #FAF7F2; }
        
        @media screen and (max-width: 1087px) {
        .sp-b-tab { border-bottom:1px solid #FAF7F2; }
        .sp-t-tab { border-top:1px solid #FAF7F2; }
        .sp-l-tab-none { border-left:none; }
        .sp-r-tab-none { border-right:none; }
        }
        @media screen and (max-width: 767px) {
        .sp-l-sp-none { border-left:none; }
        .sp-r-sp-none { border-right:none; }
        }

/*================================================
      　access
================================================*/

    .access-text {
        padding-left:1.25rem;
        text-indent:-1.25rem;
        }
        .access-text span {
            text-indent:0;
            display: inline-block;
            padding:1px 6px;
            margin:1px 5px 1px;
            line-height: 150%;
            border: 1px solid #ddd;
            background:rgba(169,135,99,.2);
            border-radius:         2px;
            moz-border-radius:     2px;
            -webkit-border-radius: 2px;
            -o-border-radius:      2px;
            -ms-border-radius:     2px;
            }
    .access-logo { width:276px;}
        @media screen and (max-width: 1087px) {
        .access-logo { width:210px;}
        }
        @media screen and (max-width: 767px) {
        .access-logo { width:210px; padding-bottom:1em}
        }
.root-wrap {
        position: relative;
        text-align: center;
        max-width:280px;
        margin-left: auto;
        margin-right:auto;
        z-index: 10;
        }
        .root-wrap:before {
        content:"";
        display:block;
        position: absolute;
        left:50%;
        top:0;
        width:2px;
        height:100%;
        border-left:2px dotted #999;
        z-index: -1;
        }
        .root {
            padding:.75rem 5px;
            width:100%;
            box-sizing: border-box;
            font-size:1rem;
            }
            .root-start {
            background:url("https://ubanoyu.com/images/parts/blue.jpg") center center repeat ;
            color:#FFF;
            margin-bottom:1.25rem;
            font-weight: bold;
            }
            .root-point {
            background:url("https://ubanoyu.com/images/parts/gray.jpg") center center repeat ;
            color:#111;
            border: 1px solid #999;
            margin-bottom:1.25rem;
            }
            .root-goal {
            background: url("https://ubanoyu.com/images/parts/blue.jpg") center center repeat;
            color:#FFF;
            padding:1rem .75rem;
            }
            .root-goal img { height:60px; width:auto; }
            .root-memo {
            font-size:.9375rem;
            background: url("https://ubanoyu.com/images/parts/background.jpg") center center repeat;
            padding:.25rem .75rem;
            box-sizing: border-box;
            margin-bottom:1.25rem;
            }

/*================================================
      　link
================================================*/

    .link-btn {
        display: inline-block;
        padding: 2px 1em;
        line-height: 150%;
        margin-bottom: 3px;
        margin-left:1rem;
        background: #333;
        font-size: 12px;
        color: #FFF;
        border-radius:         4px;
        moz-border-radius:     4px;
        -webkit-border-radius: 4px;
        -o-border-radius:      4px;
        -ms-border-radius:     4px;
        }
    .link { padding-bottom:.25rem ; border-bottom:1px dotted #990000; color:#990000;}
        .link:hover { border-bottom:1px solid #666; color:#222;}

/*================================================
      　icon
================================================*/

.link-icon {
        width:1rem;
        height:1rem;
        display:inline-block;
        margin-left:.75rem;
        position: relative;
        top: .05rem;/* line-heightに合わせる */
        background: url("https://ubanoyu.com/images/parts/icon-link.svg") center center / cover;
        opacity: .7;
        }

/*================================================
      　map
================================================*/

    .map {
        position: relative;
        padding-bottom: 500px;
        margin-bottom:2rem;
        height: 0;
        border: 5px solid #261B11;
        overflow: hidden;
        box-sizing: border-box;
        }
        .map.top-map {
        padding-bottom:0;
        height:100%;
        width:100%;
        margin-bottom: 0;
        }
        .map iframe,
        .map object,
        .map embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        }
        @media screen and (max-width: 1215px) {
        .map.top-map { padding-bottom:500px; height:0; margin-bottom: 0; }
        }
        @media screen and (max-width: 1087px) {
        .map { padding-bottom: 450px; border: 3px solid #261B11; margin-bottom:1.5rem}
        .map.top-map { padding-bottom:450px; }
        }
        @media screen and (max-width: 767px) {
        .map { padding-bottom: 90%; }
        .map.top-map { padding-bottom:90%; }
        }

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

       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;}
    .mb15em		{ margin-bottom:1.5rem;}
	.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-0		{ padding-top:2rem;}
    .pt-2-1		{ padding-top:2rem;}
    .pt-3-2		{ padding-top:3rem;}
    .pt-3-3-0	{ padding-top:3rem;}
    .pb-1-05	{ padding-bottom:1rem;}
    .pb-2-1		{ padding-bottom:2rem;}
    .pb-3-2		{ padding-bottom:3rem;}
    .pb-3-4		{ padding-bottom:3rem;}
    .pb-4-2		{ padding-bottom:4rem;}
    .pb-4-3		{ padding-bottom:4rem;}
    .pb-5-2		{ padding-bottom:5rem;}
    .pb-5-4		{ padding-bottom:5rem;}
    .mb-2-1		{ margin-bottom:2rem;}
    .mb-3-1		{ margin-bottom:3rem;}
    .mb-3-2		{ margin-bottom:3rem;}
    .mb-3-4		{ margin-bottom:3rem;}
    .mb-4-2		{ margin-bottom:4rem;}
    .mb-5-2		{ margin-bottom:5rem;}

    .mb-1-1-05		{ margin-bottom:1rem;}
    .mb-2-2-1		{ margin-bottom:2rem;}
    
    .mb-1-0		{ margin-bottom:1rem;}

	.pb-3-1		{ padding-bottom:3rem;}
    .pb-1-0     { padding-bottom:1rem;}


    .pl-1em     { padding-left:1rem;}
    
    .mt10p      { margin-top:10%; }
    .mr10p      { margin-right:10%;}
    .mr20p      { margin-right:20%;}
    .mr30p      { margin-right:30%;}
    .mr40p      { margin-right:40%;}
    
    .ml10p      { margin-left:10%;}
    .ml20p      { margin-left:20%;}
    .ml30p      { margin-left:30%;}
    .ml40p      { margin-left:40%;}
    
    .pd-tb-1em  { padding-top:1rem; padding-bottom:1rem; }
    .pd-tb-2em  { padding-top:2rem; padding-bottom:2rem; }
    
    .pb-1px     { padding-bottom:1px;}
    .pb-10px    { padding-bottom:10px;}

@media only screen and (max-width: 1087px) {
    .pt-2-1		{ padding-top:1rem;}
    .pt-3-2		{ padding-top:2rem;}
    .pt-3-3-0	{ padding-top:3rem;}
    .pb-1-05	{ padding-bottom:.5rem;}
    .pb-2-1		{ padding-bottom:1rem;}
    .pb-3-2		{ padding-bottom:2rem;}
    .pb-3-4		{ padding-bottom:4rem;}
    .pb-4-2		{ padding-bottom:2rem;}
    .pb-4-3		{ padding-bottom:3rem;}
    .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-3-4		{ margin-bottom:4rem;}
    .mb-4-2		{ margin-bottom:2rem;}
    .mb-5-2		{ margin-bottom:2rem;}

    .mb-1-1-05		{ margin-bottom:1rem;}
    .mb-2-2-1		{ margin-bottom:2rem;}

    .pb-3-1		{ padding-bottom:2.76rem;}
    .pb-1-0     { padding-bottom:0;}
    
    .tab-pb-1    { padding-bottom:1rem;}
    .tab-pt-1    { padding-top:1rem;}
    .tab-pt-2    { padding-top:2rem;}
    
    .tab-pd-1    { padding-top:1rem; padding-bottom:1rem;}
    .tab-pd-2    { padding-top:2rem; padding-bottom:2rem;}
    
    .tab-mb-2    { margin-bottom:2rem;}


    .mt10p      { margin-top:0%; }

    .mr10p      { margin-right:0%;}
    .mr20p      { margin-right:0%;}
    .mr30p      { margin-right:0%;}
    .mr40p      { margin-right:0%;}
    
    .ml10p      { margin-left:0%;}
    .ml20p      { margin-left:0%;}
    .ml30p      { margin-left:0%;}
    .ml40p      { margin-left:0%;}

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

    .mb-1-0		{ margin-bottom:0rem;}

    .mr10p      { margin-right:0%;}
    .mr20p      { margin-right:0;}
    .ml10p      { margin-left:0%;}
    .ml20p      { margin-left:0%;}

    .sp-pt-3em   { padding-top:3rem;}
    .sp-pb-1em    { padding-bottom:1rem;}
    .sp-pb-2em    { padding-bottom:2rem;}
    .sp-pb-3em    { padding-bottom:3rem;}
    
}