/* THEME STYLE ------------------------------------------------------

 00. ADMIN SETTING  				管理画面投稿用の設定※消さないで※

 01. COMMON SETTINGS , HEADER

 02. KEY VISUAL

 03. SECOND MENU					PC、タブレット用下層のメニュースタイル

 04. CLPG DEFAULT STYLE				wysiwygエディタデフォルトスタイル
 									.clpg-page-content スタイル以下に作成

 05. LOOP							記事一覧のスタイル

 06. FORM							お問い合わせフォーム

 07. SITEMAP						サイトマップ
 
 08. OTHER CONTENTS					その他のコンテンツ

 09. FOOTER							フッター

 10. MEDIAQUERY for HORIZONTALNAVI	メニュー　PC、タブレット用

 11. MEDIAQUERY for TABLET

 12. MEDIAQUERY for BIG SP & SMALL TABLET

 13. MEDIAQUERY for SMARTPHONE

-------------------------------------------------------------------- */



/* 00. ADMIN SETTING
-------------------------------------------------------------------- */
.clpg-page-content{
	font-family:Meiryo, Verdana, Arial, sans-serif;
	word-break:break-strict;
	-webkit-text-size-adjust:100%; /* For iPhone , iPad */
}

#body{
	background:url(../img/bg.png) repeat-y center top;
	background-size:100% auto;
	font-size:1em!important;
	line-height:1.0em;
	color:#353131;
}



/* 01. COMMON SETTINGS , HEADER
-------------------------------------------------------------------- */
p{
	font-size:0.9em;
	line-height:1.5;
	color:#353131;
}

a{
	text-decoration:none;
	color:#cd4657;
	transition:.3s;
}

header[role="banner"] .inner,
.wrapper,
footer[role="contentinfo"] .inner{
	margin:0 auto;
	width:1000px;
}

header[role="banner"] .inner,
.wrapper{
	background:#fdf8ed;
}

header[role="banner"] .inner{
	padding: 0 20px;
}

input[type="submit"]{
	-webkit-appearance:none;
}

input[type="button"],
input[type="text"],
input[type="submit"]{
	-webkit-appearance:none;
	border-radius:0;
}

.container{
	padding: 0 30px 80px;
}

nav.utility .utilNav li{
	margin:1em 0 0 0;
	padding:0 1.5em 0 1em;
}

nav.utility .utilNav.header li{
	font-size: 1.4em;
	font-weight: bold;
	background:url(../img/arrowPink.png) no-repeat left 0.2em top 0.05em;
	background-size:6px 10px;
}

nav.utility .fontSize{
	margin: -0.8em 1em 0 0;
}


/* CONTENTS AREA */
.bgColor{
	background:#f4edda;
	margin:0 0 30px;
	padding:50px;
}

.contentsArea h2{
	text-align:center;
	margin:0 0 30px;
}

.contentsArea img{
	vertical-align:bottom;
}

.contentsArea ul{
	letter-spacing:-0.4em;
	text-align:center;
	border-top:solid 3px #aea48b;
	width:100%;
	max-width:780px;
	margin:0 auto;
}

.contentsArea ul li{
	display:inline-block;
	letter-spacing:normal;
	vertical-align:top;
	width:24%;
}

.contentsArea ul li a{
	color:#353131;
}

.contentsArea ul li img{
	width:100%;
	max-width:150px;
	height:auto;
	transition:.3s;
}

.contentsArea ul li a:hover img{
	opacity:0.7;
}

.contentsArea ul li p{
	font-size:0.95em;
	padding:1em 1em 0;
}


/* SUBCONTENTS AREA */
.subContentsArea{
	letter-spacing:-0.4em;
}

.subContentsArea .fb,
.subContentsArea .bannerArea{
	display:inline-block;
	letter-spacing:normal;
	vertical-align:top;
}

.subContentsArea .fb{
	width:100%;
	max-width:520px;
	padding:9px;
	margin:0 30px 0 0;
	border:solid 1px #eae2cd;
}

.subContentsArea .bannerArea ul{
	width:100%;
	max-width:390px;
	padding:9px;
	border:solid 1px #eae2cd;
}

.subContentsArea .bannerArea ul li{
	margin:0 0 10px;
}

.subContentsArea .bannerArea ul li:last-child{
	margin:0;
}

.subContentsArea .bannerArea ul li img{
	width:100%;
	height:auto;
	vertical-align:bottom;
}

.subContentsArea .bannerArea ul li a:hover{
	opacity:0.7;
}



/* 02. KEY VISUAL
-------------------------------------------------------------------- */
header[role="banner"] a{
	color:#cd4657;
}

header[role="banner"] .KV{
	background: #fdf8ed;
	width:100%;
	max-width: 1000px;
	margin: 0 auto;
	text-align:center;
}

.KV img{
	width:100%;
	max-width:1000px;
	height:auto;
	vertical-align: bottom;
}


.bx-wrapper .bx-pager{
	text-align:center;
	padding:20px 0 30px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item{
	display:inline-block;
}

.bx-wrapper .bx-pager.bx-default-pager a{
	background:#bbb;
	text-indent:-9999px;
	display:block;
	width:10px;
	height:10px;
	margin:0 10px;
	outline:0;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active{
	background:#cd4657;
}



/* 03. SECOND MENU
-------------------------------------------------------------------- */
nav.secondMenu{}

nav.secondMenu h2{
	padding:0.5em 0 1em;
	font-size:1.1em;
	font-weight:bold;
	border-bottom:2px solid #000;
}

nav.secondMenu ul li a{
	padding:0.8em 0.5em;
	display:block;
	font-size:0.9em;
}

nav.secondMenu ul li.current > a{
	font-weight:bold;
	background:#f4edda;
}

body:not(.touch) nav.secondMenu ul li a{
	color:#353131;
}

body:not(.touch) nav.secondMenu ul li a:hover{
	color:#cd4657;
}

nav.secondMenu ul.child > li > a{
	border-bottom:1px solid #eae2cd;
}

nav.secondMenu ul.grandchild > li{
}

nav.secondMenu ul.grandchild > li > a{
	padding-left:1.4em;
	border-bottom:1px solid #eae2cd;
	background:url(../img/arrowPink.png) no-repeat left 0.4em center;
	background-size:5px 9px;
}

.second .secondMenu{
	margin:2em 0 60px 20px;
}

.second .container{
	padding:10px 20px 60px;
}



/* 04. CLPG DEFAULT STYLE
-------------------------------------------------------------------- */
.clpg-page-content{}

.clpg-page-content a{
	text-decoration:underline;
}

.clpg-page-content a img{
	transition:.3s;
	background:#fff;
	vertical-align:bottom;
}

.clpg-page-content a:hover img{
	opacity:0.7;
}

.clpg-page-content h1.maintitle{
	margin:0.5em 0;
	font-weight:bold;
	font-size:2em;
	line-height:120%;
}

.clpg-page-content h2{
	margin:0.5em 0;
	padding-left:1.4em;
	font-weight:bold;
	font-size:1.4em;
	line-height:120%;
	background:url(../img/icnFootprint.png) no-repeat left center;
	background-size:24px;
}

.clpg-page-content h3{
	margin:1em 0 0.5em;
	padding:0.3em 0;
	font-weight:bold;
	font-size:1.3em;
	line-height:120%;
	border-bottom:solid 3px #aea48b;
}

.clpg-page-content h4{
	margin:1.5em 0 0.5em;
	padding:0.5em 0;
	font-size:1em;
	line-height:120%;
	color:#3b8973;
	border-bottom:1px dashed #3b8973;
}

.clpg-page-content h5{
	margin:1.5em 0 0.5em;
	padding:0.3em 0;
	font-size:0.95em;
	line-height:120%;
	color:#3b8973;
}

.clpg-page-content h6{
	margin:1.5em 0 0.5em;
	line-height:120%;
	font-weight:bold;
}

.clpg-page-content p{
	padding:0.5em 0;
	font-size:0.9em;
	line-height:180%;
}

.clpg-page-content table,
.clpg-page-content th,
.clpg-page-content td{
	border-collapse:collapse;
}

.clpg-page-content table{
	margin:1em auto 0.5em;
	font-size:0.9em;
	line-height:180%;
	width:100%;
}

.clpg-page-content th,
.clpg-page-content td{
	padding:0.5em;
	border:1px solid #9cc0b0;
	text-align:left;
}

.clpg-page-content th{
	border:1px solid #9cc0b0;
	background:#e9ede1;
	text-align:left;
	color:#3b8973;
}


.clpg-page-content ul,
.clpg-page-content ol{
	margin:0.5em 0 1em 1em;
	font-size:0.9em;
	line-height:180%;
}

.clpg-page-content ul li,
.clpg-page-content ol li{
	margin:0.3em 0;
}

.clpg-page-content ul li{
	padding-left:0.8em;
	background:url(../img/icnArrowGray.png) no-repeat left 0.5em;
}

.clpg-page-content ol li{
	margin-left:0.8em;
	list-style:decimal;
}



/* 05. LOOP
-------------------------------------------------------------------- */
h2.maintitle + article.loop{
	margin-top:-0.5em;
}

article.loop{
	padding:1.5em 0;
	clear:both;
	border-bottom:2px groove #DDD;
}

article.loop:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
* html article.loop             { zoom: 1; }
*:first-child+html article.loop { zoom: 1; }

article.loop figure{
	margin:0 1em 0 0;
	float:left;
}

article.loop h3{
	margin:0;
	font-size:1em;
	border-bottom:none;
}

article.loop h3 time{
	display:inline-block;
	*display:inline;
	*zoom:1;
	margin-right:1em;
	font-size:0.8em;
}



/* 06. FORM
-------------------------------------------------------------------- */
.clpg-form-container .require{
	color:#AC1618;
	font-size:0.8em;
}

.clpg-form-container table{
	width:100%;
}

.clpg-form-container table p{
	font-size:1em;
}

.clpg-form-container table th{
	background:#e9ede1;
}

.clpg-form-container p.caution{
	padding-left:20px;
	color:#AC1618;
	font-weight:bold;
	background:url(../img/icon/errIcon.png) no-repeat left 0.2em;
}

.clpg-form-container .input-err{
	background:#FFCFCF;
}

.clpg-form-container .buttonContainer{
	text-align:center;
}

.clpg-form-container .buttonContainer input{
	cursor:pointer;
	display:inline;
}

.clpg-form-container input.button{
	margin:1em 0;
	padding:0.5em;
	background: #3b8973;
	border:none;
	color: #f4edda;
	font-size: 1em;
	font-weight: bold;
	width:10em;
}

.clpg-form-container .button.back{
	background: #333;
}

.clpg-form-container .button a{
	padding:0.8em;
	display:block;
	color:#FFF;
	text-align:center;
}

body:not(.touch) .clpg-form-container .button a:hover{
	background:#264155;
}

body:not(.touch) .clpg-form-container .button.back a:hover{
	background: #111;
}



/* 07. SITEMAP
-------------------------------------------------------------------- */
ul.clpg-sitemap-container{
	margin:0;
}

ul.clpg-sitemap-container *{
	font-size:1em;
}

ul.clpg-sitemap-container > li{
	margin-bottom:1.5em;
}

ul.clpg-sitemap-container li ul{
	margin:0.5em 0;
}

ul.clpg-sitemap-container li ul > li{
	margin-bottom:0.8em;
	padding:0 0 0 1.8em;
	background:url(../img/icnTree.png) no-repeat left -2px;
}

ul.clpg-sitemap-container li ul li ul li{
	margin-bottom:0.5em;
	padding:0 0 0 1.8em;
	background:url(../img/icnTree.png) no-repeat left -2px;
}



/* 08. OTHER　CONTENTS
-------------------------------------------------------------------- */
/* OP AREA */
.opArea{
	letter-spacing:-0.4em;
}

.opArea .opArea-logo,
.opArea .text{
	display:inline-block;
	letter-spacing:normal;
	vertical-align:middle;
}

.opArea .opArea-logo{
	width:40%;
	margin:0 5% 0 0;
}

.opArea .opArea-logo img{
	width:100%;
	max-width:313px;
	height:auto;
}

.opArea .text{
	width:55%;
}

.opArea h2{
	font-size:1.2em;
	line-height: 1.4;
	font-weight:bold;
	color:#3b8973;
	margin:0;
	padding:0 0 1.2em;
	background:none;
}

.opArea .link{
	font-size:1em;
	font-weight:bold;
	text-align:right;
	padding:1.2em 0 0;
}

.opArea .link a{
	background:url(../img/arrowPink.png) no-repeat left 0.2em center;
	background-size:7px 12px;
	padding:0 0 0 1em;
}

.opArea .link a:hover{
	opacity:0.7;
	
}


/* HISTORY */
.clpg-page-content .history th,
.clpg-page-content .history td{
	border:none;
	border-bottom:1px solid #9cc0b0;
}


/* INSTAGRAM */
.insta .title{
	background: url(../img/icnInstagram.png) no-repeat 0 center;
	background-size:30px;
	font-size:1.2em;
	line-height:1.4;
	font-weight:bold;
	letter-spacing:0.2em;
	margin:1em 0;
	padding:10px 0 10px 45px;
}

.insta .btnMore{
	font-size:0.9em;
	line-height:1.4;
	font-weight:bold;
	text-align:center;
}

.insta .btnMore a{
	display:block;
	width:100%;
	max-width:280px;
	color:#fff;
	background:#cd4657;
	text-decoration:none;
	margin:1em auto;
	padding:0.8em 0;
	transition:.3s;
}

.insta .btnMore a:hover{
	opacity:0.7;
}

ul.instaList{
	display:-webkit-flex;
	display:flex;
	flex-wrap:wrap;
}

ul.instaList li{
	background:none;
	width:23%;
	margin:0 1% 2%;
	padding:0;
}

ul.instaList li img{
	width:100%;
	height:auto;
	vertical-align:bottom;
	border:solid 8px #f4edda;
}




/** 2017.09.21 後で消す　ここから **/
#instafeed{
	letter-spacing:-0.4em;
}

#instafeed .col-sm-3{
	width:24%;
	display:inline-block;
	letter-spacing:normal;
	margin:0 1% 2%;
}

#instafeed .col-sm-3 img{
	width:100%;
	height:auto;
	vertical-align:bottom;
	border:solid 8px #f4edda;
}


@media only screen and (max-width: 480px) {
	#instafeed .col-sm-3{
		width:46%;
		margin:0 2% 4%;
	}
}
/** 2017.09.21 後で消す　ここまで **/





/* 09. FOOTER
-------------------------------------------------------------------- */
footer[role=contentinfo]{
	padding-top:40px;
	background:#353131;
	position:relative;
}

nav.utility .utilNav.footer ul{
	text-align: center;
}

nav.utility .utilNav.footer li{
	background:url(../img/arrowCream.png) no-repeat left 0.2em top 0.02em;
	background-size:5px 9px;
}

nav.utility .utilNav.footer li a{
	color:#e2dac6;
}

nav.utility .utilNav.footer li a:hover{
	opacity:0.7;
}

footer[role=contentinfo] .sns p{
	font-size:0.95em;
	line-height:1.4;
	font-weight:bold;
	letter-spacing:0.05em;
	color:#e2dac6;
	text-align:center;
	padding:20px 0 10px;
}

footer[role=contentinfo] .sns ul{
	letter-spacing:-0.4em;
	text-align:center;
}

footer[role=contentinfo] .sns ul li{
	display:inline-block;
	letter-spacing:normal;
	width:32px;
	height:auto;
	margin:0 10px;
}

footer[role=contentinfo] .sns ul li a:hover{
	opacity:0.7;
}

footer[role=contentinfo] p.copyright{
	padding:2em 0;
	color:#bdaea5;
	font-size:0.75em;
}

footer[role=contentinfo] .icnDog{
	width:77px;
	height:47px;
	position:absolute;
	top:-40px;
	right:0;
	bottom:0;
	left:0;
	margin:0 auto;
}



/* 10. MEDIAQUERY for HORIZONTALNAVI
-------------------------------------------------------------------- */
@media only screen and (min-width: 481px) {

		nav[role=navigation]{
			width:100%;
			height:100%;
			background:#3b8973;
		}

		nav[role=navigation] ul.global{
			width:100%;
			max-width: 1000px;
			text-align:center;
			font-size:0.85em;
			font-weight: bold;
		}

		nav[role=navigation] > ul.global li{
			width:20%;
			text-align:center;
			letter-spacing: 0.05em;
		}

		nav[role=navigation] ul.global li a{
			padding:1.3em 0;
			color:#f4edda;
		}

		body:not(.touch) nav[role=navigation] > ul.global a:hover{
			color:#f4edda;
			background:#327562;
		}

}



/* 11. MEDIAQUERY for TABLET
-------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {

		nav[role=navigation]{
			display:none;
			margin:0;
			padding:0;
			position:absolute;
			z-index:1000;
			background:none;
		}

		nav[role=navigation] ul.global li{
			margin:0;
			width:100%;
			text-align:left;
			border-top:none;
			border-right:none;
			border-bottom:1px solid #327562;
			border-left:none;
		}

		nav[role=navigation] ul.global li a{
			display:block;
			padding:1.5em;
			color:#f4edda;
			font-size:0.9em;
		}


		body:not(.touch) nav[role=navigation] ul.global a:hover{
			color:#f4edda;
		}

		nav[role=navigation] ul.global > li > a{
			background:#3b8973;
		}

		body:not(.touch) nav[role=navigation] ul.global > li > a:hover{
			background:#327562;
		}


		nav[role=navigation] ul.global > li.current > a{
			color:#f4edda;
			font-weight:bold;
			background:#327562;
		}

		nav[role=navigation] ul.child > li{
			border-top:1px solid #327562;
			background:#327562;
		}

		nav[role=navigation] ul.child li.current > a,
		nav[role=navigation] ul.grandchild li.current > a{
			color:#f4edda;
		}


		nav[role=navigation] ul.grandchild > li{
			border-top:1px solid #245648;
		}

		nav[role=navigation] ul.grandchild > li > a{
			padding:0.5em 1.5em;
			background:#2d6857;
		}

		header[role="banner"] .inner{
			text-align:center;
		}

		.toppage header[role="banner"]{
			border-top:solid 2px #3b8973;
			background-position:left -80px;
			background-size:160% auto;
		}

		nav.breadNav{
			margin:0;
		}


		nav.utility .utilNav.footer li a:hover,
		footer[role=contentinfo] .sns ul li a:hover,
		.contentsArea ul li a:hover img,
		.opArea .link a:hover,
		.subContentsArea .bannerArea ul li a:hover{
			opacity:1;
		}

		nav.utility .utilNav.header li{
			padding:0 0 0 1em;
		}


		.subContentsArea .fb,
		.subContentsArea .bannerArea{
			display:block;
		}

		.subContentsArea .fb{
			width:100%;
			max-width:none;
			margin:0 auto 30px;
			text-align:center;
			padding:0;
			border:none;
		}

		.subContentsArea .bannerArea ul{
			max-width:none;
			padding:0;
			text-align:center;
			border:none;
			letter-spacing:-0.4em;
		}

		.subContentsArea .bannerArea ul li{
			width:49%;
			display:inline-block;
			letter-spacing:normal;
			margin:0 2% 2% 0;
		}

		.subContentsArea .bannerArea ul li:last-child{
			margin:0 2% 2% 0;
		}

		.subContentsArea .bannerArea ul li:nth-child(even){
			margin:0 0 2% 0;
		}

}


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

		header[role="banner"] .inner,
		.wrapper,
		footer[role="contentinfo"] .inner{
			margin:0 auto;
			width:100%;
			max-width:1000px;
		}

		.bgColor{
			padding:50px 30px;
		}

}



/* 12. MEDIAQUERY for BIG SP SMALL TABLET
-------------------------------------------------------------------- */
@media only screen and (min-width: 481px) and (max-width: 767px) {

		header[role="banner"] .inner,
		.wrapper,
		footer[role="contentinfo"] .inner{
			margin:0 auto;
			width:100%;
			max-width:1000px;
		}

		.bgColor{
			padding:50px 30px;
		}

		.contentsArea ul{
			border-top:none;
			max-width:600px;
		}

		.contentsArea ul li{
			width:50%;
			border-top:solid 3px #aea48b;
		}

		.contentsArea ul li:first-child,
		.contentsArea ul li:nth-child(2){
			margin:0 0 30px;
		}


		.opArea .opArea-logo{
			width:100%;
			margin:0 0 5%;
			text-align:center;
		}

		.opArea .opArea-logo img{
			max-width:500px;
		}

		.opArea .text{
			width:100%;
		}

		.opArea .text h2 br{
			display:none;
		}

		article.loop figure{
			display:block;
			width:100%;
			text-align:center;
		}

}



/* 12. MEDIAQUERY for SMARTPHONE
-------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {

		header[role="banner"] .inner,
		.wrapper{
			margin:0 auto;
			width:100%;
		}

		header[role="banner"] .inner{
			padding: 0 20px;
		}

		.container{
			padding: 0 20px 80px;
		}

		footer[role="contentinfo"] .inner{
			margin:0 auto;
			width:100%;
		}

		footer[role=contentinfo]{
			padding-top:10px;
		}

		nav.utility .utilNav li{
			margin:0;
		}

		nav.utility .utilNav.header li{
			font-size:1em;
			font-weight: normal;
			background: url(../img/arrowCream.png) no-repeat left 1em center;
			background-size: 5px 9px;
			padding:0 0 0 2em;
		}

		nav.utility .utilNav.header li a{
			color: #e2dac6;
		}

		nav.utility .utilNav.footer li {
			background: url(../img/arrowCream.png) no-repeat left 1em center;
			background-size: 5px 9px;
			padding:0 0 0 2em;			
		}

		nav.utility li.totop{
			width:56px;
		}

		nav.utility li.totop img{
			width:100%;
			height:auto;
		}

		.second .secondMenu{
			margin:2em 0 60px;
		}

		.second .container{
			padding:10px 20px 0;
		}

		.bgColor{
			padding:40px 20px;
		}

		.contentsArea ul{
			border-top:none;
			max-width:280px;
		}

		.contentsArea ul li{
			width:100%;
			border-top:solid 3px #aea48b;
			margin:0 0 20px;
		}

		.contentsArea ul li:last-child{
			margin:0;
		}

		.contentsArea ul li img{
			max-width:120px;
		}

		.contentsArea ul li p{
			font-size:0.9em;
			padding:1em 0 0;
		}
		
		.opArea .opArea-logo{
			width:100%;
			margin:0 0 5%;
			text-align:center;
		}

		.opArea .text{
			width:100%;
		}

		.opArea h2{
			font-size:1em;
		}
		
		.opArea .text h2 br{
			display:none;
		}

		.opArea .link{
			font-size:0.9em;		
		}

		.subContentsArea .bannerArea ul li{
			width:100%;
			display:block;
			margin:0 0 2% 0;
		}

		.subContentsArea .bannerArea ul li:last-child{
			margin:0 0 2% 0;
		}

		.subContentsArea .bannerArea ul li:nth-child(even){
			margin:0 0 2% 0;
		}

		ul.instaList li{
			width:46%;
			margin:0 2% 4%;
		}

}