@charset "UTF-8";

/*=============================================================================
	Original styles　
=============================================================================*/
body {
	color: #323232;
	line-height: 1.75;/*24px/42px*/
}
body.fix {
	overflow: hidden;
}

/*=============================================================================
	layout
=============================================================================*/
#wrapper {
    margin: 0 0 10%;
}
#main {
}
.lower #main {
}
.inner-590 {
	margin: auto;
	width: 92%;
}
.inner-560 {
	margin: auto;
	width: 86%;
}
section,
.section {
    margin: 10% auto;
}
.page-header {
	overflow-x: hidden;
}

/*=============================================================================
	z-index
=============================================================================*/
#header			{ z-index: 20;}

/*=============================================================================
	#header
=============================================================================*/
#ci-logo img {
	/* height: 80px; */
}
h1#ci-copy {
	background-color: #80b9ea;
	color: #fff;
	text-align: center;
	line-height: 1.875;
	font-size: 1.6rem;
	white-space: nowrap;
	overflow: hidden;
}
#header {
	position: fixed;
		top: 0;
	border-bottom: 2px solid #848484;
	background-color: #fff;
	width: 100%;
}

/*=============================================================================
	#gnav
=============================================================================*/
#gnav-fixed li {
    float: left;
    /* padding-left: 2px; */
    width: 120px;
    text-align: center;
}
#gnav-fixed li.btn {
	float: right;
	/* background: #3e3a39; */
}
#gnav-fixed li#close-menu {
    position: fixed;
    right: -100%;
    opacity: 0;
    background: #80b9ea;
    -webkit-transition: opacity 200ms ease-in-out;
    -moz-transition: opacity 200ms ease-in-out;
    -ms-transition: opacity 200ms ease-in-out;
    -o-transition: opacity 200ms ease-in-out;
    transition: opacity 200ms ease-in-out;
}
#gnav-fixed li#close-menu.view {
    right: 0;
	z-index: 20;
	opacity: 1;
}
#gnav-fixed li#ci-logo {
    width: 520px;
    height: 120px;
    /* border-left: 2px solid #878787; */
    /* border-right: 2px solid #878787; */
    line-height: 120px;
}
#gnav-fixed li img {
    vertical-align: middle;
}
#gnav-fixed li.btn img {
    width: 80px;
    margin: 20px;
}

#gnav-sub {
	position: fixed;
	right: -200%;
	top: 0;
	width: 100%;
    overflow: scroll;
    background: #80b9ea;
    padding-bottom: 100%;
	color: #fff;
	opacity: 0;
	-webkit-transition: opacity 200ms ease-in-out;
	   -moz-transition: opacity 200ms ease-in-out;
	    -ms-transition: opacity 200ms ease-in-out;
	     -o-transition: opacity 200ms ease-in-out;
	        transition: opacity 200ms ease-in-out;
}
#gnav-sub.view {
	right: 0;
	z-index: 20;
	opacity: 1;
}


/* gnav-sub */
#gnav-sub a {
	display: block;
	text-decoration: none;
	color: #fff;
}

#gnav-sub .btnnav {
    margin: 3vh auto;
    text-align: center;
}
	#gnav-sub .btnnav li {
	    display: inline-block;
	    background: #fcdc66;
	    width: 9em;
	    text-align: center;
	    margin: 1%;
	    font-size: 120%;
	    font-weight: 600;
	}
	#gnav-sub .btnnav li a {
	    padding: 1.5vh 0;
	    color: #3e3a39;
	}
#gnav-sub ul.menu {
    margin: auto -2px;
    width: 644px;
}
#gnav-sub ul.menu > li {
    float: left;
    box-sizing: border-box;
    width: 324px;
    border: 2px solid;
    margin: -1px;
}
#gnav-sub ul.menu a {
	display: block;
    padding: 1.5rem;
    font-weight: 600;
    text-align: center;
}


.exnav {
    display: table;
    margin: 3vh auto;
}
	.exnav ul {
	    margin-top: 3vh;
	}
	.exnav li {
	    /* display: table-cell; */
	}
	.exnav li a::before {
	    content: '・';
	}

.closetxt {
	margin: 5% auto 2rem;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: rgba(255,255,255,.8);
	padding: 7px 1em;
    display: table;
    padding: 1.4rem 1em;
    color: #213e7f;
}





/*=============================================================================
	#main
=============================================================================*/
#main {
}

/* h2 */
.page-title {
	background-color: #faf0f1;
	background-image: url(../images/page-title.png);
	background-position: center;
    background-repeat: no-repeat;
	-webkit-background-size: contain;
	     -o-background-size: contain;
	        background-size: contain;
	text-align: center;
	line-height: 100px;
}
.page-title img {
	vertical-align: middle;
}


.catch_wrapper {
	margin: 30px auto 50px;
}
.catch {
	line-height: 1.531;
	font-size: 3.2rem;
	font-weight: 600;
	color: #773f16;
}
.catch-content {
	margin-top: 15px;
	font-size: 2.8rem;
}
.variation {
    margin: 6% auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px dashed #d6c5b9;
    padding: 5% 6%;
}



/*====================================================
	js カスタマイズ
====================================================*/






/*=============================================================================
	#footer
=============================================================================*/
#footer {
	padding-bottom: 104px;
}



/* fnav ------------------------------ */
nav.fnav {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
}
nav.fnav li {
	float: left;
	width: 49.5%;
}
nav.fnav li:nth-child(even) {
	float: right;
}


#footer .ci-copy {
	margin-top: 6px;
    padding: 1em;
	background: #f2f2f2;
	line-height: 1.5;
	color: #989898;
}
#footer .copyright {
	/* display: inline-block;
    margin-top: 1em; */
}


/*=============================================================================
	#parts
=============================================================================*/
a {
	-webkit-transition: all 200ms ease-in-out;
	   -moz-transition: all 200ms ease-in-out;
	    -ms-transition: all 200ms ease-in-out;
	     -o-transition: all 200ms ease-in-out;
	        transition: all 200ms ease-in-out;
}

/* background ------------------------------ */
.bg-gray {
	background: #f2f2f2;
}

/* title ------------------------------ */
.ttl-section {
	margin: 6.4% auto;
	background-color: #c8e5ff;
	background-image: url(../images/ttl-section.png);
	-webkit-background-size: contain;
	     -o-background-size: contain;
	        background-size: contain;
	background-position: top right;
	background-repeat: no-repeat;
	padding: 18px 1em 19px;
    padding-left: 40px;
	line-height: 1.333;;
	font-size: 3rem;
	font-weight: 600;
	color: #773f16;
	text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff;
}
.ttl-section img {
    vertical-align: middle;
}

.ttl.overflow-ellipsis {
	white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
}

/* list ------------------------------ */
.disc > li {
	position: relative;
}
.disc > li:before {
    content: '・';
    font-size: 160%;
    line-height: 7%;
    position: relative;
    top: .2em;
}
.disc.outside > li:before {
    content: '・';
    font-size: 160%;
    line-height: 7%;
    position: absolute;
    top: .5em;
    left: -1em;
}
.rice,
.ls-square {
	margin-left: 1.5em;
}
.rice > li:before {
	content: '※';
	padding: 0 0.5em 0 0;
	margin-left: -1.5em;
}
.ls-square > li:before {
	content: '■';
	padding: 0 0.5em 0 0;
	margin-left: -1.5em;
}
.ls-check > li {
	position: relative;
	line-height: 1.4;
}
	.ls-check > li:before {
		content: '';
		margin-left: -1.5em;
		display: block;
		position: absolute;
		    top: .2em;
		width: 1em;
		height: 1em;
		background: url(../images/ls-check.svg);
		-webkit-background-size: contain;
		     -o-background-size: contain;
		        background-size: contain;
		background-repeat: no-repeat;
	}

/* ボタン */
.btn {
}
.btn-reserve {
    margin: 6.4% auto;
    background: #F6E1E3;
    padding: 3%;
}


/* icon - image src ------------------------------ */
.next a,
.arrow-disc-next {
	padding-left: 1.333em;
	background: url(../images/arrow-disc-next.svg) left top no-repeat;
	-webkit-background-size: 1em;
	-o-background-size: 1em;
	background-size: 1em;
}
.prev a,
.arrow-disc-prev {
	padding-left: 1.333em;
	background: url(../images/arrow-disc-prev.svg) left top no-repeat;
	-webkit-background-size: 1em;
	-o-background-size: 1em;
	background-size: 1em;
}
.icon.close {
	padding-left: 1.333em;
	background: url(../images/icon-close.svg) center center no-repeat;
	-webkit-background-size: 1em;
	-o-background-size: 1em;
	background-size: 1em;
}
.icon.calendar {
	padding-left: 1.333em;
	background: url(../images/icon-calendar.svg) center center no-repeat;
	-webkit-background-size: 1em;
	-o-background-size: 1em;
	background-size: 1em;
}
.icon.present {
	padding-left: 1.333em;
	background: url(../images/icon-present.svg) center center no-repeat;
	-webkit-background-size: 1em;
	-o-background-size: 1em;
	background-size: 1em;
	background-size: contain;
}

/* Separator ------------------------------ */
.separator {
}

/* transform ------------------------------ */
.rotate90 {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}

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

/* font - font family ------------------------------ */
/* .fc - bland color */
.fc-brown {
	color: #773f16;
}
.fc-pink {
	color: #d36a74;
}

/* font - root=24px and child only ------------------------------ */
.fs-10 {font-size: 1rem}
.fs-12 {font-size: 1.2rem}
.fs-14 {font-size: 1.4rem}
.fs-15 {font-size: 1.5%}
.fs-16 {font-size: 1.6rem}
.fs-17 {font-size: 1.7%}
.fs-18 {font-size: 1.8%}
.fs-19 {font-size: 1.9%}
.fs-20 {font-size: 2rem}
.fs-21 {font-size: 2.1%}
.fs-22 {font-size: 2.2%}
.fs-23 {font-size: 2.3%}
.fs-24 {font-size: 2.4%}
.fs-26 {font-size: 2.6%}
.fs-27 {font-size: 2.7%}
.fs-28 {font-size: 2.8rem}
.fs-30 {font-size: 3rem}
.fs-32 {font-size: 3.2rem}