/*-------------------------------------------------
  Nucleus CMS Stylesheet - bundled with version 3.2
  Based on the Stanch skin by Ivan Fong
  Mods by hcgtv and moraes
-------------------------------------------------*/

/*-------------------------------------------------
  General layout
-------------------------------------------------*/



body {
	background: #fff;
	color: #383838;
	/*要変更　基本の文字色　デザイン提案書のカラーに合わせる*/
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
	font-size: 16px;
	padding: 0px 0;
	margin: 0;
	-webkit-text-size-adjust: 100%;

	/*Noto Sans Japanese*/
	font-family: "Noto Sans Japanese";

	/*しっぽり明朝*/
	font-family: 'Shippori Mincho', serif;
	font-weight: 600;
}

.wf-hannari {
	font-family: "Hannari";
}

/*-------------------------------------------------
  追加CSSは以下へ
-------------------------------------------------*/

/* 問合せフォーム　エラーメッセージ */
.formError {
	z-index: 111111111 !important;
}

/*タグリストの仕切り「|」の表示非表示はここでコントロール*/
.tag_divider {
	display: none;
}

.tags a:link, .tags a:visited {
    background: #f7f2e8;
    display: inline-block;
    padding: 0.5% 1%;
    margin: 0.5%;
    border-radius: 5px;
}

.show_footer_contact {
	width: 100%;
	position: relative;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: none;
	filter: alpha(opacity=95);
	-moz-opacity: 0.95;
	opacity: 0.95;
}

.home_pickup {
	padding: 5% 15%;
	box-sizing: border-box;
}

.home_pickup img {
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 750px) {/*スマホサイズ*/
	.home_pickup {
		padding: 5% 5%;
		box-sizing: border-box;
	}
}

.arrow_footer_link {
	display: none;
}

@media screen and (max-width: 750px) {/*スマホサイズ*/
	.arrow_footer_link {
		display: inline;
		margin-right: 5px;
	}
}

/*by T*/

/* PCで非表示 */
@media screen and (min-width: 751px) {
	.is-sp {
		display: none;
	}
}

/* スマホで非表示 */
@media screen and (max-width: 750px) {
	.is-pc {
		display: none;
	}
}

.fade-in {
	opacity: 0; /* 初期状態は透明 */
	animation: fadeIn 1.5s ease-in-out forwards; /* アニメーションの設定 */
  }
  
  @keyframes fadeIn {
	0% {
	  opacity: 0; /* 開始時は透明 */
	}
	100% {
	  opacity: 1; /* 終了時は不透明（フェードイン） */
	}
  }

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

* トップページ

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

/*
  共通クラス
==================================*/
/* フォント*/
.top {
	/*font-size: calc(16vw / 1180 * 100);*/
	color: #383838;
}

@media screen and (min-width: 1180px) {
	.top {
		/*font-size: 16px;*/
	}
}

/* インナー幅 */
.section_inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 0 0 0;
}

@media screen and (max-width: 750px) {
	.section_inner {
		padding: 0 5%;
	}
}

/* セクションタイトル */
.section_title {
	position: relative;
	margin: 5% 0;
	text-align: center;
	color: #0C1939;
}

.section_title::before,
.section_title::after {
	position: absolute;
	content: "";
	display: block;
	width: 200px;
	height: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.section_title::before {
	left: 10%;
	background: url(images/arrow_left.png) no-repeat center center / contain;
}

.section_title::after {
	right: 10%;
	background: url(images/arrow_right.png) no-repeat center center / contain;
}

.info_title {
    margin: 0;
    text-align: left;
    padding-left: 13%;
	box-sizing: border-box;
}

.info_title:before,
.info_title:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #d2ab61;
}

.info_title:before {
    /* margin-right: 0; */
    left: 0;
    width: 10%;
}

.info_title:after {
    margin-left: 0;
    width: 60%;
    right: 0;
}

@media screen and (max-width: 750px) {
	.section_title {
		margin: 5% calc(50% - 50vw);
		width: 100vw;
	}

	.section_title::before,
	.section_title::after {
		width: min(17%, 120px);
	}

	.section_title::before {
		left: 5%;
	}

	.section_title::after {
		right: 5%;
	}

	.info_title {
		width: 100%;
	}

	.info_title:before {
		left: 0;
		width: 8%;
	}
	
	.info_title:after {
		width: 43%;
		right: -11%;
	}

}

.section_title h2 {
	margin-bottom: 0;
	line-height: 1.5;
	font-size: calc(50vw / 1180 * 100);
	font-weight: normal;
}

@media screen and (min-width: 1180px) {
	.section_title h2 {
		font-size: 50px;
	}
}

@media screen and (max-width: 750px) {
	.section_title h2 {
		font-size: calc(58vw / 750 * 100);
	}

	.section_title span {
		font-size: calc(22vw / 750 * 100);
	}
}

/* リード文 */
.lead {
	text-align: center;
	line-height: 2;
	/* font-size: calc(16vw / 1180 * 100); */
	font-size: 16px;
}

@media screen and (min-width: 1180px) {
	.lead {
		font-size: 16px;
	}
}

@media screen and (max-width: 750px) {
	.lead {
		margin-top: 12%;
		font-size: calc(28vw / 750 * 100);
	}
}

/* ボタン */
.link_btn {
	display: block;
	width: 460px;
	margin: 6% auto 0;
	line-height: 45px;
	border-radius: 30px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
}

.link_btn span {
	padding-right: 10px;
}

.link_btn-gray {
	color: #383838;
	background: #fff;
	opacity: 0.7;
}

.link_btn-navy {
	color: #fff !important;
	background: url(images/bg_dot.png),#0C1939;
}

#advantages .link_btn-navy {
	margin: 3% auto 0;
}

#works .link_btn-navy {
	margin: 2% auto 0;
}

.link_btn-underline {
    border-bottom: solid 2px #383838;
    font-weight: bold;
    padding: 1%;
}

@media screen and (max-width: 750px) {
	.link_btn {
		font-size: calc(24vw / 750 * 100);
		/* width: min(90%, 370px); */
		width: auto;
	}

	.link_btn-navy {
		line-height: 60px;
	}

	.link_btn-gray {
		width: min(90%, 370px);
	}
}

/*
Advantages
==================================*/
#advantages {
	padding-bottom: 5%;
	position: relative;
}

#advantages .text+.text {
	margin-top: 65px;
}

#advantages h3 {
	text-align: center;
	/* font-size: calc(25vw / 1180 * 100); */
	font-size: 25px;
	font-weight: 600;
	color: #0c1939;
}

#advantages .link {
	display: block;
	margin-top: 30px;
	text-align: center;
	color: #383838;
}

#advantages .link span {
	padding-right: 10px;
}

@media screen and (min-width: 1180px) {
	#advantages h3 {
		font-size: 25px;
	}
}

@media screen and (max-width: 750px) {/*スマホサイズ*/
	#advantages {
		padding: 5% 0 10% 0;
		box-sizing: border-box;
	}

	#advantages .text+.text {
		margin-top: 18%;
	}

	#advantages h3 {
		margin: 14% 0 5%;
		text-align: center;
		font-size: calc(43vw / 750 * 100);
	}

	#advantages .text .lead {
		margin-top: 8%;
		text-align: left;
	}

	#advantages .link {
		margin-top: 9%;
		font-size: calc(28vw / 750 * 100);
	}
}

/*
award
==================================*/
#award {
	padding: 4.2% 0 6%;
	text-align: center;
	background: url(images/bg_dot.png), url(images/award_bg.jpg) center center / cover;
}

@media screen and (max-width: 750px) {/*スマホサイズ*/
	#award {
		padding: 13% 0 15% 0;
	}
}

#award .title_container {
	width: min(314px, 314vw/1180*100);
	height: 212px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	background: url(images/award-2.png) no-repeat center center / contain;
}

#award h2 {
	font-size: calc(36vw / 1180 * 100);
	color: #dfc06f;
	font-weight: normal;
}

#award h2 span {
	/* font-size: calc(18vw / 1180 * 100); */
	display: block;
	font-size: min(20px, 20vw/1180*100);
}

#award h3 {
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    color: #fff;
    margin: 0 auto 40px;
}

#award .award_lead {
	color: #fff;
}

.award_img {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: wrap;
}

.award_img li img{
	width: min(360px, 360vw/1180*100);
}

.award_logo {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
	padding-top: 40px;
}

.award_logo li {
    display: flex;
    background: #fff;
    border-radius: 3px;
    align-items: center;
}

.award_logo li img{
	width: min(209px, 209vw/1180*100);
}

#award .lead{
	color: #fff;
}

@media screen and (max-width: 750px) {/*スマホサイズ*/

	#award h2 {
		font-size: calc(58vw / 750 * 100);
	}

	#award h2 span {
		font-size: calc(22vw / 750 * 100);
	}

	#award h3 {
		font-size: calc(36vw / 750 * 100);
	}

	#award .lead{
		margin-top: 1em;
		font-size: calc(26vw / 750 * 100);
		text-align: left;
	}

	.award_img {
		gap: 10px;
	}

	.award_img li img {
		width: 75%;
	}
	
	.award_logo {
		gap: 5px;
		padding-top: 8%;
	}

	.award_logo li img {
		width: calc(158vw / 750* 100);
	}

	#award .title_container {
		width: calc(400vw / 750 * 100);
		height: calc(275vw / 750 * 100);
	}
}


/*
Customer Reviews
==================================*/

.customer {
    max-width: 1180px;
    display: flex;
    margin: auto;
    padding: 4.5% 0 0;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}

.customer_left {
    width: 50%;
    height: min(380px, 380vw/1180*100);
    background: #0c1939;
    padding: 3% 5% 0;
    color: #fff;
    box-sizing: border-box;
    line-height: 2;
}

.customer_left p {
    font-size: min(16px, 16vw/1180*100);
}

.customer_title {
    position: relative;
    margin: 0;
    text-align: left;
    color: #fff;
	border-bottom: solid 1px #d2ab61;
}

.customer_title h2 {
    font-size: min(40px, 40vw/1180*100);
    margin: 0 0 2%;
    font-weight: normal;
}

.customer_title h2 span {
    font-size: min(22px, 22vw/1180*100);
    display: block;
}

.customer_img {
	width: 50%;
	height: auto;
}

.link_btn-customer {
    background: url(images/bg_dot.png), #6b7384;
    width: min(460px, 460vw/1180*100);
	margin: 6% auto 0 0;
}

@media screen and (max-width: 750px) {/*スマホサイズ*/
	.customer {
		flex-direction: column-reverse;
	}

	.customer_left {
		width: 100%;
		height: 100%;
		padding: 4% 8% 8%;
	}

	.customer_title h2 {
		font-size: calc(58vw / 750 * 100);
	}

	.customer_title h2 span {
		font-size: calc(28vw / 750 * 100);
	}

	.customer_left p {
		font-size: calc(26vw / 750 * 100);
	}
	
	.customer_img {
		width: 100%;
	}

	.link_btn-customer {
		width: auto;
		margin: 6% auto 0;
	}
}

/*
best garden
==================================*/
#best_garden {
	padding: 5% 0;
}

@media screen and (max-width: 750px) {/*スマホサイズ*/
	#best_garden {
		padding: 5% 0 10% 0;
	}
}

#best_garden .card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8%;
}

#best_garden .reverse {
	flex-direction: row-reverse;
}

#best_garden .card+.card {
	margin-top: 6%;
}

#best_garden .card_text {
	width: calc(9.5 / 20 * 100%);
	padding: 0 5%;
}

#best_garden .card_text h3 {
	font-size: calc(25vw / 1180 * 100);
	font-weight: normal;
	color: #0c1939;
}

#best_garden .card_text p {
	width: calc(16 / 17 * 100%);
	line-height: calc(36 / 16);
}

#best_garden .card_img {
	width: calc(10.5 / 20 * 100%);
}

#best_garden .card_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom;
}

@media screen and (min-width: 1180px) {
	#best_garden .card_text h3 {
		font-size: 25px;
	}
}

@media screen and (max-width: 750px) {
	#best_garden .card {
		display: block;
		margin-top: 13%;
	}

	#best_garden .card+.card {
		margin-top: 13%;
	}

	#best_garden .card_text,
	#best_garden .card_img {
		width: 100%;
		padding: 0;
	}

	#best_garden .card_text h3 {
		margin: 12% 0;
		text-align: center;
		font-size: calc(33vw / 750 * 100);
		font-weight: normal;
	}

	#best_garden .card_text p {
		font-size: calc(26vw / 750 * 100);
		width: 100%;
	}
}

/*
service
==================================*/
#service {
	padding: 1% 0 5.5%;
	background: url(images/dot.png) center center;
}

#service .card_container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

#service .card {
	width: 47.5%;
}

#service .card_img-1,
#service .card_img-2 {
	position: relative;
	width: 100%;
	height: 280px;
}

#service .card_img-1 {
	background: url(images/service1-2.jpg) no-repeat center center / cover;
}

#service .card_img-2 {
	background: url(images/service2.jpg) no-repeat center center / cover;
}

#service .card_img-1 a,
#service .card_img-2 a {
	position: absolute;
	display: block;
	width: 100%;
	bottom: 0;
	left: 0;
	line-height: 50px;
	text-align: center;
	text-decoration: none;
	font-size: calc(24vw / 1180 * 100);
	color: #fff;
	background: #041023;
	opacity: 0.8;
}

#service .card a span {
	padding-right: 10px;
}

#service .card p {
	padding: 0 2.5%;
	line-height: calc(36 / 16);
}

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

	#service .card_img-1 a,
	#service .card_img-2 a {
		font-size: 24px;
	}
}

@media screen and (max-width: 750px) {
	#service .card_container {
		display: block;
	}

	#service .card {
		width: 100%;
	}

	#service .card+.card {
		margin-top: 12%;
	}

	#service .card_img-1 a,
	#service .card_img-2 a {
		font-size: calc(27vw / 750 * 100);
	}

	#service .card p {
		padding: 0;
		font-size: calc(26vw / 750 * 100);
	}
}

/*
works
==================================*/
#works {
	padding: 1% 0 4.5%;
}

/*
workshop
==================================*/
#workshop {
	padding: 4.5% 0 5%;
}

#workshop .card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 90%;
	margin: 5% auto 0;
}

#workshop .card li {
	list-style: none;
}

#workshop .card li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom;
}

@media screen and (max-width: 750px) {
	#workshop .card {
		flex-wrap: wrap;
		gap: calc(40vw / 750 * 100);
		width: 100%;
		padding: 0;
	}

	#workshop .card li {
		width: calc((100% - (40vw / 750 * 100)) / 2);
	}
}

/*
area
==================================*/
#area {
	background: url(images/dot.png) center center;
}

#area .container {
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	width: 90%;
	margin: 0 auto;
}

#area .text {
	width: 65%;
	padding: 0 5% 9% 0;
	color: #0C1939;
}

@media screen and (min-width: 1180px) {/*スマホサイズ*/
	#area .text {
		width: 65%;
		padding: 0 5% 40px 0;
		color: #0C1939;
	}
}

#area .text h2 {
	margin-bottom: 0;
	font-size: calc(55vw / 1180 * 100);
	font-weight: normal;
}

@media screen and (min-width: 1180px) {/**/
	#area .text h2 {
		margin: 35px 0 0 0;
	}
}

#area .text span {
	padding-left: 2%;
	font-size: calc(16vw / 1180 * 100);
}

#area .text_inner {
	margin: 4% 0;
	padding: 5% 0 6%;
	border-top: 1px solid #000;
	border-bottom: 1px dashed #000;
}

@media screen and (min-width: 1180px) {/**/
	#area .text_inner {
		margin: 20px 0;
		padding: 15px 0 15px;
		border-top: 1px solid #000;
		border-bottom: 1px dashed #000;
	}
}

#area .text dl {
	display: flex;
	justify-content: flex-start;
	padding: 0 2.5%;
}

@media screen and (max-width: 750px) {/*スマホサイズ*/
	#area .text dl {
		display: flex;
		justify-content: flex-start;
		padding: 0;
	}
}

#area .text dt {
	position: relative;
	padding: 0 5%;
	text-align: left;
	font-size: calc(20vw / 1180 * 100);
}

@media screen and (max-width: 750px) {/*スマホサイズ*/
	#area .text dt {
		position: relative;
		padding: 0 5% 0 0;
		text-align: left;
		font-size: calc(20vw / 750 * 100);
	}
}

#area .text dt::after {
	position: absolute;
	content: "|";
	right: 0;
}

#area .text dd {
	flex: 1;
	margin: 0;
	padding-left: 5%;
	text-align: left;
}

#area .text p {
	font-size: calc(12vw / 1180 * 100);
}

@media screen and (min-width: 1180px) {/**/
	#area .text p {
		font-size: 14px;
	}
}

#area .img {
	width: 40%;
}

#area .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom;
}

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

	/**/
	#area .img img {
		width: 382px;
		height: auto;
	}
}

@media screen and (min-width: 1180px) {
	#area .text h2 {
		font-size: 55px;
	}

	#area .text span {
		padding-left: 25px;
		font-size: 16px;
	}

	#area .text dt {
		font-size: 20px;
	}
}

@media screen and (max-width: 750px) {
	#area {
		padding: 9% 0;
	}

	#area .container {
		width: 100%;
		display: block;
	}

	#area .text {
		padding: 0;
	}

	#area .text.for-sp h2 {
		padding-bottom: 5%;
		text-align: center;
		font-size: calc(58vw / 750 * 100);
		border-bottom: 1px solid #000;
	}

	#area .text.for-sp span {
		font-size: calc(22vw / 750 * 100);
	}

	#area .text {
		width: 100%;
	}

	#area .img {
		width: 100%;
	}

	#area .text_inner {
		border-top: none;
	}

	#area .text dt {
		font-size: calc(28vw / 750 * 100);
	}

	#area .text dd,
	#area .text p {
		font-size: calc(24vw / 750 * 100);
	}
}

/*
footer
==================================*/
#top_footer {
	padding: 7% 0 10%;
	background: url(images/bg_footer_dot.png), url(images/bg_footer.jpg) no-repeat center center / cover;
}

@media screen and (max-width: 750px) {/*スマホサイズ*/
	#top_footer {
		padding: 7% 0 25% 0;
	}
}

#top_footer .inner {
	width: 95%;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}

/* ナビゲーション */
#top_footer .navi_items {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

#top_footer .navi_items li {
	margin-top: 1.5%;
	list-style: none;
	font-size: 14px;
	border-right: 1px solid #fff;
	line-height: 100%;
}

#top_footer .navi_items li a {
	display: inline-block;
	padding: 5px 30px;
	text-decoration: none;
	color: #fff;
}

/* ロゴ・バナー */
#top_footer .footer_logo {
	max-width: 470px;
	margin: 7.5% auto 0;
}

#top_footer .footer_logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	vertical-align: bottom;
}

#top_footer .footer_link {
	width: 37px;
	margin: 0 auto;
}

#top_footer .footer_link img {
	width: 150%;
	height: auto;
	object-fit: contain;
	vertical-align: bottom;
}

/* インフォメーション */
#top_footer .footer_address {
	margin-top: 7.5%;
	line-height: 1.5;
}

#top_footer .footer_info {
	margin: 4% 0;
	line-height: 1.5;
}

@media screen and (max-width: 750px) {
	#top_footer .section_inner {
		width: 100%;
		padding: 0;
	}

	#top_footer .inner {
		width: 100%;
	}

	#top_footer .navi_items {
		align-items: stretch;
		justify-content: left;
	}

	#top_footer .navi_items li {
		display: flex;
		align-items: left;
		text-align: left;
		/*width: calc((100% - 5px) / 5);*/
		width: 50%;
		/*min-width: 90px;*/
		font-size: calc(23vw / 750 *100);
		;
		box-sizing: border-box;
		border: 0px;
	}

	#top_footer .navi_items li a {
		width: 100%;
		padding: 5px 10px;
	}

	#top_footer .footer_link+p,
	#top_footer .footer_address,
	#top_footer .footer_info,
	#top_footer .footer_info p,
	#top_footer .footer_copyright {
		font-size: calc(24vw / 750 * 100);
	}
}

/*↑by T*/

/*-------------------------------------------------
人気記事とかタグ記事表示とか
-------------------------------------------------*/
.pvr {
	display: flex;
	-ms-display: flex;
	-webkit-display: flex;
	flex-wrap: wrap;
}

.popular {
	width: 24%;
	margin: 0.5%;
	padding-bottom: 1%;
	background: #f3f3f3;
	font-size: 15px;
}

.popuimg {
	display: inline-block;
	height: 180px;
}

.popuimg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width:960px) {

	/*スマホサイズ*/
	.popular {
		width: 49%;
		margin: 0.5%;
	}

	.popuimg {
		height: 200px;
	}
}

@media screen and (max-width:560px) {

	/*スマホサイズ*/
	.popuimg {
		height: 150px;
	}
}

/*-------------------------------------------------
  リンク
-------------------------------------------------*/

a:link,
a:visited {
	color: #ba892a;
	/* リンク文字の色 */
	text-decoration: none;
}

a:hover,
a:active {
	color: #ba892a;
	/* リンク文字の色　ホバー時 */
	text-decoration: none;
	opacity: 0.8;
	transition: 0.3s;
}

#header a:link,
#header a:visited {
	color: #fff;
}

#header a:hover,
#header a:active {
	color: #fff;
	/* リンク文字の色　ホバー時 */
	text-decoration: ;
}

/*-------------------------------------------------
  ホームのメイン画像スライダー 画面幅に対して画像サイズがストレッチするタイプ
-------------------------------------------------*/

.slideshow {
	max-width: 2000px;
	width: 100%;
	aspect-ratio: 2000/1000;
	margin: auto;
	overflow: hidden;
	/*.viewerのmargin突き抜け問題対策*/
	/*display: none;*/
	background: #041023;

}

.viewer {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	margin: 0 auto 0 auto;
	/*メニュー帯に隠れないためのpadding*/
}


@media screen and (max-width: 750px) {

	/*スマホサイズ*/

	.slideshow {
		max-width: 750px;
		aspect-ratio: 750/1063;
		margin-top: 75px;
	}

	.viewer {
		margin: 0 auto;
		/*メニュー帯に隠れないためのpadding*/
	}
}

.viewer ul {
	width: 100%;
	overflow: hidden;
	position: relative;
	margin: auto;
}

.viewer ul li {
	top: 0;
	left: 0;
	width: 100%;
	position: absolute;
}

.viewer ul li img {
	width: 100%;
}

/* sideNavi
	------------------------- */
.viewer .btnPrev,
.viewer .btnNext {
	margin-top: -25px;
	top: 50%;
	width: 50px;
	height: 50px;
	position: absolute;
	z-index: 101;
}

.viewer .btnPrev {
	left: 10px;
	background: #ccc url(images/btnPrev.jpg) no-repeat center center;
}

.viewer .btnNext {
	right: 10px;
	background: #ccc url(images/btnNext.jpg) no-repeat center center;
}


/* =======================================
    ClearFixElements
======================================= */
.viewer ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.viewer ul {
	display: inline-block;
	overflow: hidden;
}

/*-------------------------------------------------
  横スライドショー 画面幅に対して画像サイズがストレッチするタイプ
-------------------------------------------------*/

.wideslider {
	width: 100%;
	text-align: left;
	position: relative;
	overflow: hidden;
}

.wideslider ul,
.wideslider ul li {
	float: left;
	display: inline;
	overflow: hidden;
}

.wideslider ul li img {
	width: 100%;
	display: none;
}

.wideslider_base {
	top: 0;
	position: absolute;
}

.wideslider_wrap {
	top: 0;
	position: absolute;
	overflow: hidden;

}

.slider_prev,
.slider_next {
	top: 0;
	overflow: hidden;
	position: absolute;
	z-index: 100;
	cursor: pointer;
}

.slider_prev {
	background: #fff url(homeimg/prev.jpg) no-repeat right center;
}

.slider_next {
	background: #fff url(homeimg/next.jpg) no-repeat left center;
}

.pagination {
	bottom: 10px;
	left: 0;
	width: 100%;
	height: 15px;
	text-align: center;
	position: absolute;
	z-index: 200;
}

.pagination a {
	margin: 0 5px;
	width: 15px;
	height: 15px;
	display: inline-block;
	overflow: hidden;
	background: #333;
}

.pagination a.active {
	filter: alpha(opacity=100) !important;
	-moz-opacity: 1 !important;
	opacity: 1 !important;
}


/* =======================================
		ClearFixElements
	======================================= */
.wideslider ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.wideslider ul {
	display: inline-block;
	overflow: hidden;
}


/*-------------------------------------------------
  トップページコンテンツ
-------------------------------------------------*/

.home_title {
	width: 100%;
	display: table;
	margin: 5% 0 0 0;
}

@media screen and (max-width: 750px) {
	/*スマホサイズ*/

	.home_title {
		margin: 10% 0 0 0;
	}

}

.title_word {
	width: 25%;
	display: table-cell;
	text-align: center;
	font-size: 4vw;
	color: #1F993E;
	/* color: #684928;ベースデザイン2 */
	/* color: #31772A;ベースデザイン3 */
	/* color: #755F5D;ベースデザイン4 */
	/* color: #241E35;ベースデザイン5 */
	vertical-align: middle;
	border-width: 0px 0px 2px 0px;
	border-style: solid;
	border-color: #1F993E;
	/* border-color: #684928;ベースデザイン2 */
	/* border-color: #31772A;ベースデザイン3 */
	/* border-color: #E89B7C;ベースデザイン4 */
	/* border-color: #241E35;ベースデザイン5 */
}

@media screen and (min-width: 1180px) {
	/*PCサイズ1180以上*/

	.title_word {
		font-size: 3em;
	}

}

@media screen and (max-width: 750px) {
	/*スマホサイズ*/

	.title_word {
		width: 50%;
		font-size: 7vw;
	}

}

.desc_word {
	width: 75%;
	display: table-cell;
	padding: 3.75% 0 2% 0;
	box-sizing: border-box;
	border-width: 0px 0px 2px 0px;
	border-style: solid;
	border-color: #9ADBA5;
	/* border-color: #B28F5D;ベースデザイン2 */
	/* border-color: #C0DDBC;ベースデザイン3 */
	/* border-color: #F2D1C7;ベースデザイン4 */
	/* border-color: #9691A8;ベースデザイン5 */
}

@media screen and (max-width: 750px) {

	/*スマホサイズ*/
	.desc_word {
		width: 50%;
		padding: 0% 0 2% 0;
	}
}


/*施工例＆ブログサムネイル*/

.thumbnail {
	width: 100%;
	height: ;
	overflow: hidden;
	background: #f4f4f4 url(images/noimg.png) center no-repeat;
	background-size: 50%;
}

.thumbnail img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.thumbnail:hover img {
	-webkit-transform: scale(1.03);
	transform: scale(1.03);
}

.works_blogs {
	width: 25%;
	float: left;
	padding: 0.5%;
	box-sizing: border-box;
}

.works_blogs_sub

/*施工例ページでは3列*/
	{
	width: 33%;
}

@media screen and (max-width: 750px) {
	/*スマホサイズ*/

	.works_blogs {
		width: 50%;
		float: left;
		padding: 0.5%;
		box-sizing: border-box;
	}

}

.works_blogs img {
	width: 100%;
	height: auto;
	display: block;
}

.date {
	display: none;
	width: 25%;
	height: 100px;
	float: left;
	padding: 3%;
	box-sizing: border-box;
	background: #fff;
	/*background: #ededed; ベースデザイン1・5 */
	/* background: #F4E6D4;ベースデザイン2 */
	/* background: #F4EFDC;ベースデザイン3 */
	/* background: #FCEAD9;ベースデザイン4 */
	text-align: center;
}

/*日付ナシ*/
.date_nodate {
	display: none;
}

.title {
	width: 100%;
	height: 100px;
	float: left;
	padding: 5% 8% 10% 8%;
	box-sizing: border-box;
	overflow: hidden;
	font-size: 0.8em;
	background: #fff;
	/*background: #f4f4f4; ベースデザイン1・5 */
	/* background: #F4EEE6;ベースデザイン2 */
	/* background: #FCF8EB;ベースデザイン3 */
	/* background: #FFF6EE;ベースデザイン4 */
}

/*日付ナシ*/
.title_nodate {
	width: 100%;
	height: 100px;
	float: left;
	padding: 5%;
	box-sizing: border-box;
	overflow: hidden;
	font-size: 0.8em;
	background: rgb(255, 255, 255, 0.8);
	/* ベースデザイン1・5 */
	/* background: #F4EEE6;ベースデザイン2 */
	/* background: #FCF8EB;ベースデザイン3 */
	/* background: #FFF6EE;ベースデザイン4 */
}

@media screen and (max-width: 750px) {
	/*スマホサイズ*/

	.date {
		width: 100%;
		height: 100%;
		text-align: left;
	}

	.date br {
		display: none;
	}

	.title {
		width: 100%;
		height: 100px;
	}

}

/*　↑施工例＆ブログサムネイル↑　*/

/*すべての施工例・ブログを見るボタン*/

#viewall {
	width: 24%;
	float: right;
	margin: 0.5% 0.5% 0 0;
}

#viewall a:link,
#viewall a:visited {
	color: #fff;
}

#viewall span:hover {
	text-decoration: none;
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
}

.viewall_word {
	width: 100%;
	height: 55px;
	line-height: 55px;
	vertical-align: middle;
	display: block;
	float: left;
	background: #35A351;
	/* background: #9E7949;ベースデザイン2 */
	/* background: #45843f;ベースデザイン3 */
	/* background: #E5AC7C;ベースデザイン4 */
	/* background: #9691A8;ベースデザイン5 */
	color: #fff;
	text-align: center;
}

.viewall_arrow {
	width: 20%;
	height: 55px;
	line-height: 55px;
	vertical-align: middle;
	display: block;
	float: right;
	background: #1F993E;
	/* background: #684928;ベースデザイン2 */
	/* background: #31772A;ベースデザイン3 */
	/* background: #E89B7C;ベースデザイン4 */
	/* background: #241E35;ベースデザイン5 */
	text-align: center;
}

@media screen and (max-width: 750px) {

	/*スマホサイズ*/
	#viewall {
		width: 99%;
	}

	.viewall_word {
		width: 100%;
	}

	.viewall_arrow {
		width: 10%;
	}

}


/*　↑すべての施工例・ブログを見るボタン↑　*/


/*-------------------------------------------------
  施工例スライドショー
-------------------------------------------------*/


.homecontents {
	width: 100%;
	height: 40%;

}

.homecontents_inner {
	width: 80%;
	margin: auto;
	position: relative;
	z-index: 999;
}

.works_trim2 {
	width: 33.3%;
	height: 100%;
	/*高さはjquery.heightLine.jsで自動で揃います*/
	float: left;
	margin: 20px 6px 20px 7px;
	padding: 0px;
	display: inline;
	background: #efefef url(images/) bottom;
}

.works_trim2_img {
	width: 100%;
	height: auto;
}

@media screen and (max-width: 750px) {
	/*スマホサイズ*/

	.homecontents_inner {
		width: 90%;
	}
}

.works_blogs2 {
	width: 33.3%;
	float: left;
	/* padding: 0.5%; */
	/* box-sizing: border-box; */
}

@media screen and (max-width: 750px) {
	/*スマホサイズ*/

	.works_blogs2 {
		width: 50%;
		float: left;
		padding: 0.5%;
		box-sizing: border-box;
	}

}

.works_blogs2 img {
	width: 100%;
	height: auto;
	display: block;
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
}

/*お知らせ*/
.oshirase {
	width: 100%;
	height: 100%;
	display: block;
	background: #fff;
	/* ベースデザイン1・4・5 */
	/* background: #F4EEE6;ベースデザイン2 */
	/* background: #F4EFDC;ベースデザイン3 */
	padding: 2% 7%;
	margin-bottom: 1px;
	box-sizing: border-box;
	border: 1px solid #3e3a39;
	font-size: 1.05em;
	clear: both;
}

.oshirase_title {
	width: 77%;
	float: left;
	padding-left: 5%;
	box-sizing: border-box;
}

.oshirase_marker_l {
	width: 13%;
	float: left;
	background: #0c1939;
	padding: 0.3%;
	box-sizing: border-box;
	font-size: 0.8em;
	color: #fff;
	text-align: center;
}

.oshirase_marker_r {
	width: 2%;
	display: none;
	float: left;
	background: #FF3939;
	padding: 0.3%;
	box-sizing: border-box;
	margin-right: 7%;
	font-size: 0.8em;
	color: #fff;
	text-align: center;
}

@media screen and (max-width: 750px) {

	/*スマホサイズ*/
	.oshirase {
		width: 95%;
		padding: 2% 4%;
		margin: 0 auto 2px auto;
	}

	.oshirase_title {
		width: 80%;
		float: left;
	}

	.oshirase_marker_l {
		width: 20%;
	}

	.oshirase_marker_r {
		width: 5%;
		margin-right: 3%;
	}

}

/*-------------------------------------------------
  お知らせ カテゴリ付き
-------------------------------------------------*/
.bg_news {

	width: 100%;
	background: #DBDBDB;
}

.news_news {

	width: 80%;
	max-width: 1600px;
	padding: 4.25% 0 7.5% 0;
	margin: auto;
}

.news_title {

	width: 100%;
	margin: 2.8% 0 4.2% 0;
	text-align: center;
}

.nt_b {

	padding: 1.6% 0;
	font-size: 3.6vw;
	line-height: 3.6vw;
	font-family: 'Kozuka Mincho Pro', serif;
	font-weight: 400;
}

.subject {

	display: flex;
	width: 100%;
	margin: auto;
	padding: 0.35% 0;
	border-bottom: 1px solid #FFFFFF;
	font-size: 1.2vw;
}

.news_date {

	width: 25%;
	text-align: center;
}

.news_text {

	/* width: 65%; */

}

.news_cat {

	width: 105px;
	margin: 6px 0 6px auto;
	font-size: 12px;
	text-align: center;
	color: #FFFFFF;
	background: #7E962C;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (min-width: 2000px) {
	/*PCサイズ*/

	.subject {

		font-size: 24px;
	}

	.news_cat {

		font-size: 12px;
	}
}

@media screen and (max-width: 1450px) {
	/*PCサイズ*/

	.subject {

		font-size: 16px;
	}

	.news_cat {

		width: 85px;
		min-width: 85px;
		max-height: 15px;
		margin: 6px 0 6px auto;
		font-size: 10px;
	}
}


@media screen and (max-width: 750px) {
	/*スマホサイズ*/

	.news_news {

		padding: 12% 0 12.6% 0;

	}

	.subject {

		display: flex;
		flex-wrap: wrap;
		padding: 0.35% 0;
		font-size: 18px;
		margin-bottom: 15px;
	}

	.news_date {

		width: 50%;
		font-size: 18px;
		text-align: left;
		order: 1;
	}

	.news_title {

		width: 100%;
		margin: 0;
		padding-bottom: 12%;
		text-align: center;
	}

	.news_text {

		width: 100%;
		order: 3;
	}

	.news_cat {

		/* width: auto; */
		width: 100px;
		min-width: none;
		height: 24px;
		max-height: none;
		/* padding: 0 8px; */
		padding: 0;
		margin: 0px 0 0px auto;
		font-size: 12px;
		text-align: center;
		color: #FFFFFF;
		background: #7E962C;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		order: 2;
	}

	.nt_b {

		padding: 0;
		font-size: 8vw;
		line-height: 8vw;
	}

}

/*ボックス全体*/
.accbox {
	margin: 0 0;
	padding: 0;
	max-width: 1152px;
	/*最大幅*/
}

/*ラベル*/
.accbox label {
	display: block;
	width: 100%;
	cursor: pointer;
}

/*ラベルホバー時*/
.accbox label:hover {
	background: #;
}

/*チェックは隠す*/
.accbox input {
	display: none;
	transition: 0;
}

/*中身を非表示にしておく*/
.accbox .accshow {
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
}

.accshow img {
	max-width: 100%;
	height: auto;
}

/*クリックで中身表示*/
.cssacc:checked+.accshow {
	position: absolute;
	width: 100%;
	top: 40px;
	left: 0;
	height: auto;
	padding: 5%;
	box-sizing: border-box;
	background: #fff;
	opacity: 1;
	transition: 0.2s;
	z-index: 8888;
	text-align: left;
	/* box-shadow */
	box-shadow: 0px 0px 5px 1px #dbdbdb;
}







/*About us*/
.aboutus {
	padding: 7% 14%;
	border-width: 0px 2px 2px 2px;
	border-style: solid;
	border-color: #EEEEEE;
}

@media screen and (max-width: 750px) {
	/*スマホサイズ*/

	.aboutus {
		padding: 7% 2.5% 14% 2.5%;
	}

}

.aboutus img {
	max-width: 100%;
	height: auto;
}

/*-------------------------------------------------
  ボディー　body部の囲い
-------------------------------------------------*/

#mainwrapper {
	width: 100%;
	background: #fff url(images/) repeat-y;
	border-width: 0px 0px 0px 0px;
	border-style: solid;
	border-color: #E0E0E0;
	padding: 0px 0px 0px 0px;
	margin: auto;
}

#wrapper {
	/* max-width: 1180px; */
	padding: 0px 0px 0px 0px;
	margin: auto;
}

#sub_wrapper {
	max-width: 1180px;
	margin: auto;
}

.box1180 {
	max-width: 1180px;
	margin: auto;
}

.back {
	width: 100%;
	background: #fff;
}

/*-------------------------------------------------
  サブページ　ボディー　body内部
-------------------------------------------------*/
#container

/*にわ・なび表示用*/
	{
	width: 944px;
	height: 1%;
	overflow: visible;
	/*にわ・なびの記事幅表示と合わせるために以下はすべて0にすること。paddingは.contentで入力*/
	padding: 0;
	box-sizing: border-box;
}

#container_site

/*実サイト表示用*/
	{
	width: 80%;
	max-width: 944px;
	height: 1%;
	overflow: visible;
	float: left;
	padding: 0;
	box-sizing: border-box;
}

.content {
	padding: 4%;
	margin: 0;
}

@media screen and (max-width: 750px) {
	/*スマホサイズ*/

	#container_site

	/*実サイト表示用*/
		{
		width: 100%;
		height: 1%;
		overflow: visible;
		float: left;
		padding: 0;
		box-sizing: border-box;
	}

	.content {
		padding: 0;
	}

}


/*-------------------------------------------------
  サブページ　記事の表示
-------------------------------------------------*/

.contenttitle h2 {
	height: 100%;
	clear: both;
	background: #f4f4f4;
	font-size: 1.3em;
	padding: 1.5%;
	box-sizing: border-box;
	margin: 0;
	font-weight: normal;
}

.contentbody {
	/*↓にわ・なびでレイアウトを崩さないためにはwidthを指定しておく必要がある*/
	width: 100%;
	/*----------------------*/
	background: #ffffff url(images/);
	text-align: justify;
	padding: 3.5%;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #E0E0E0;
	/*↓Indexテンプレートのコメントが消えないためのcss*/
	line-height: 20px;
	font-size: 15px;
}

.contentbody table tr td {
	font-size: 15px;
	text-align: justify;
	line-height: 23px;

}

.contentbody img {
	max-width: 100%;
	margin: 0px;

}

.contentbody2

/*記事の囲い*/
	{
	background: #ffffff url(images/);
	text-align: justify;
	padding: 4%;
	border-width: 0;
	border-style: solid;
	border-color: #E0E0E0;
	text-align: justify;
	margin: 0px 0px 0px 0px;
	/*font-size:15px;*/
	line-height: 1.7;
}

.contentbody2 .o7comstyle1 {
    font-size: 1rem;
}

.contentbody2 img {
	max-width: 100%;
	height: auto;
}

.contentbody2 table.style {
	border-collapse: collapse;

}

.contentbody2 a:link,
.contentbody2 a:visited {
	/*color: #12ae05;*/
	text-decoration: none;
}

.contentbody2 a:hover,
.contentbody2 a:active {
	/*color: #a0c148;*/
	text-decoration: underline;
}



/*-------------------------------------------------
  下層ページ　庭木の剪定LP
-------------------------------------------------*/

.niwaki_lp_h2 {
    font-size: 1.3em;
	font-family: 'Shippori Mincho', serif;
    font-weight: bold;
    padding: 1rem;
    box-sizing: border-box;
    margin: 3% 0 0;
    border-left: 8px solid #005744;
}

.example-box {
    border: 1px solid #548e82;
    padding: 4%;
	margin: 0 0 5px 0;
    box-sizing: border-box;
	min-height: 123px;
}

.example-label {
    color: #548e82;
    letter-spacing: 1.5px;
	font-family: 'Shippori Mincho', serif;
    font-weight: 700;
}

.example-text{
	line-height: 1.3;
}

@media screen and (max-width: 750px) {

	.example-box {
		margin: 10px 10px 0px;
	}

}

.worry-list {
    list-style: none;
    margin: 5% auto;
    max-width: 700px;
    width: 90%;
    font-family: 'Shippori Mincho',serif;
    font-weight: bold;
    font-size: 1.1rem;
    background: #e9f4f1;
    padding: 3%;
    box-sizing: border-box;
    border-radius: 15px;
}

.worry-list li {
    display: flex;
    align-items: center;
    margin-bottom: 1.3rem;
}

.worry-list li:last-child {
  margin-bottom: 0;
}

.worry-label-area {
    display: flex;
    align-items: center;
}

.worry-icon {
    color: #007c36;
    font-size: 2.5rem;
    margin-right: 10px;
}

.worry-label {
    font-weight: bold;
    font-size: 1em;
    white-space: nowrap;
    display: flex;
    align-items: center;
    margin-right: 40px;
}

.worry-text {
    margin: 0;
    line-height: 1.3;
}

/* スマホ時の改行対応 */
.sp-only {
  display: none;
}

.niwaki_voice_box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.niwaki_lp_voice_label{
	font-size: 1.3em;
	color: #005744; 
	line-height: 160%; 
	font-weight: 400;
}

.niwaki_voice_box img{
	height: auto;
	margin: 3%;
}

.hr_dotted {
    background-color: white;
    border: none;
    border-bottom: 1px dotted #555555;
}

@media screen and (max-width: 750px) {
  
	.worry-list{
		font-size: 1rem;
	}
	
	.worry-list li {
    flex-direction: column;
    align-items: flex-start;
  }

  .worry-icon {
    font-size: 2rem;
}

  .worry-label-area {
    margin-bottom: 0.3em;
  }

  .worry-text {
    margin-left: 40px;
}

  .sp-only {
    display: inline;
  }

  .niwaki_lp_voice_label {
    font-size: 1.1rem;
}

.niwaki_voice_box img{
	width: 20% !important;
}
}

/*-------------------------------------------------
  下層ページ　選ばれる理由とこだわり advantages
-------------------------------------------------*/

.contentbody2 .section_title::before,
.contentbody2 .section_title::after {
    width: 25%;
}

.contentbody2 .section_title::before {
	left: 0%;
}

.contentbody2 .section_title::after {
	right: 0%;
}

.sub_adv_title{
	font-size: 25px;
	font-weight: 600;
    color: #0c1939;
}

@media screen and (max-width: 750px) {

	.contentbody2 .section_title::before, .contentbody2 .section_title::after {
		width: min(17%, 120px);
	}

	.sub_advantages{
		text-align: left;
	}

	.sub_adv_title {
		font-size: 1.3em;
	}

}

/*-------------------------------------------------
  パンくずリスト
-------------------------------------------------*/

.catdesc

/*パンくずリストの囲い*/
	{
	font-size: 16px;
	width: ;
	height: ;
	background: url(images/);
	padding: 20px 0px 20px 0px;
}

.pankuzu {
	padding-left: 0;
	margin-left: 0;
}

.pankuzu li {
	display: inline;
	/*横に並ぶように*/
	list-style: none;
}

.pankuzu li:after {
	/* >を表示*/
	content: '>';
	padding: 0 1.8%;
	color: #aaa;
}

.pankuzu li:last-child:after {
	content: '';
}

.pankuzu li a {
	text-decoration: none;
}

.pankuzu li a:hover {
	text-decoration: underline;
}


/*-------------------------------------------------
  施工例カテゴリ分けボタン表示枠
-------------------------------------------------*/

.works_index {
	background: #ffffff url(images/);
	padding: 0;
	margin: 0px 0px 30px 0px;
	filter: alpha(opacity=95);
	-moz-opacity: 0.95;
	opacity: 0.95;
}

.works_index a {
	width: 32%;
	float: left;
	background: #efefef;
	padding: 1%;
	box-sizing: border-box;
	margin: 0.5% 0.5%;
	text-align: center;
	border-radius: 3px;
	color: #ba892a;
}

@media screen and (max-width: 750px) {
	/*スマホサイズ*/

	.works_index a {
		width: 99%;
	}

}

/*-------------------------------------------------
  施工例目次表示　1施工例分の囲い
-------------------------------------------------*/

.works_trim {
	width: 200px;
	height: 100%;
	/*高さはjquery.heightLine.jsで自動で揃います*/
	float: left;
	margin: 20px 6px 20px 7px;
	padding: 0px;
	display: inline;
	background: #efefef url(images/) bottom;
}

.works_trim_img {
	width: 100%;
	height: auto;
}

.works_trim_title {
	width: 100%;
	float: left;
	margin: auto;
	padding: 10px 10px 10px 10px;
	font-size: 16px;
	line-height: 130%;
	box-sizing: border-box;
}

.works_trim_desc {
	width: 100%;
	float: left;
	margin: auto;
	padding: 10px 10px 10px 10px;
	font-size: 14px;
	line-height: 130%;
	box-sizing: border-box;
}

/*-------------------------------------------------
  施工例画像hoverでタイトルが出る
-------------------------------------------------*/

.rect {
	width: 49%;
	float: left;
	overflow: hidden;
	border-width: 0px 0px 0px 0px;
	border-style: solid;
	border-color: #f6f6ea;
	box-sizing: border-box;
	margin: 1px;
}

.works_content {
	position: relative;
	margin: 0px auto;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.inner {
	padding: 0px;
}

.caption1 {
	position: absolute;
	left: 0;
	top: 0px;
	background-color: rgba(0, 0, 0, 0.6);
	color: #efefef;
	padding: 10px;
	width: 100%;
	height: 100%;
	font-size: 12px;
}

.caption2 {
	position: absolute;
	left: 0;
	bottom: 0;
	display: none;
	background-color: rgba(0, 0, 0, 0.6);
	color: #efefef;
	padding: 10px;
	width: 100%;
	height: 40%;
	text-align: left;
	box-sizing: border-box;
	font-size: 12px;
}


/*-------------------------------------------------
  次の記事へ　前の記事へ　ボタン
-------------------------------------------------*/

.nextlink {
	width: 49%;
	height: 100%;
	float: left;
	padding: 0px 0px 0px 0px;
	background: url(images/prevs.png) left no-repeat;
	display: box;
	font-size: 13px;
	text-align: right;
	border-width: 0px 0px 0px 0px;
	border-style: solid;
	border-color: #E0E0E0;
}

.prevlink {
	width: 50%;
	height: 100%;
	float: right;
	padding: 0px 0px 0px 0px;
	background: url(images/nexts.png) right no-repeat;
	display: box;
	font-size: 13px;
	text-align: left;
	border-width: 0px 0px 0px 1px;
	border-style: solid;
	border-color: #E0E0E0;
}

/*-------------------------------------------------
  Q&Aの表示
-------------------------------------------------*/

.QA-Abox01 {
	background: #ffffff;
	/*font-family:"メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro";*/
	font-size: 16px;
	/*Aのフォントサイズ*/
	padding: 10px 10px 10px 10px;
	margin: 0px 0px 3% 7%;
	: #000000;
	text-indent: 1em;
	line-height: 2em;
	border-width: 0px 0px 0px 0px;
	border-style: dotted;
	border-color: #2b6d0e;
}

.QA-Abox01 img {
	max-width: 100%;
	height: auto;
}

.QA-textcolor {
	color: #704d2a;
}

/*-------------------------------------------------
  お問合せフォーム関連
-------------------------------------------------*/

.inq {
	width: 100%;
	border: 1px solid #aaaaaa;
	border-collapse: collapse;
	border-spacing: 0;
}

.inq td,
th {
	padding: 15px;
	width: 30px;
	height: 25px;
	font-size: 18px;
}

.inq th {
	width: 22%;
	background: #efefef;
	text-align: center;
	font-size: 18px;
}

.inq td {
	width: 78%;
	background: #ffffff;
	font-size: 18px;
}

.formtext {
	-moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
	height: 2.3em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 18px;
}

/*-------------------------------------------------
  サイドバー sidebar
-------------------------------------------------*/

#sidebarcontainer {
	float: right;
	width: 20%;
	padding: 5% 0px 0px 0px;
}

@media screen and (max-width: 750px) {
	/*スマホサイズ*/

	#sidebarcontainer {
		display: none;
	}
}

#sidebarcontainer img {
	max-width: 100%;
	height: auto;
}

.sidebar {}

/* NP_List 今いるページのメニュー項目文字色*/
.current {
	color: #042b59;
	/*要変更　カレント文字の色*/
	/*background: #ffffff;*/
	/*font-weight: bold;*/
	padding: 0px;
	border-width: 0px 0px 0px 0px;
	border-style: solid;
	border-color: #888888;
	text-decoration: none;
}


/*-------------------------------------------------
  ブログカレンダー
-------------------------------------------------*/

table.calendar {
	width: 100%;
	background-color: #fff;
	border-collapse: collapse;
	font-family: sans-serif;
	border: 1px solid #ddd;
	font-size: 0.85em;
}

table.calendar caption {
	color: #aaa;
	letter-spacing: 2px;
	padding: 4px;
}

table.calendar th,
table.calendar td {
	border: 1px solid #ddd;
	padding: 2px 4px;
	font-weight: normal;
}

table.calendar th {
	text-align: center;
}

table.calendar td {
	text-align: right;
	color: #999;
	letter-spacing: 1px;
}

tr.calendardateheaders {
	background-color: #ccc;
	color: #fff;
}

td.blank {
	background-color: #f5f5f5;
}

td.saturday {
	background-color: #f7f9fd;
}

td.sunday {
	background-color: #fff3ee;
}

td.holiday {
	background-color: #fff3ee;
}

td.today {
	background-color: #ffffcc;
}

/*以下、defaultスキン用 */
table.calendar a:link,
table.calendar a:visited {
	background: none;
	padding: 0;
}

table.calendar {
	margin: 0 auto;
}

/*-------------------------------------------------
  フッター　Footer
-------------------------------------------------*/
#footer {
	width: 100%;
	height: 100%;
	background: #fff url(images/) no-repeat;
	padding: 0px 0px 0px 0px;
	border-width: 0px 0px 0px 0px;
	border-style: solid;
	border-color: #DDDDDD;
	margin: 0 auto 0 auto;
}

#copyrights {
	max-width: 1180px;
	margin: auto;
	padding: 0px 0px 0px 0px;
}

.footermenu {
	width: 90%;
	margin: auto;
	display: block;
	font-size: 0.8em;
}

#footer #menubutton {
	display: block;
	width: 14.285%;
	height: ;
	background: url(images/) no-repeat;
	height: ;
	line-height: ;
	vertical-align: middle;
	text-decoration: none;
	text-align: center;
	float: left;
	padding: 0.2% 0 0.2% 0;
	box-sizing: border-box;
	border-width: 0px 1px 0px 0px;
	border-style: solid;
	border-color: #E0E0E0;
	margin: 1% 0 0 0;
	font-size: 0.95em;
	overflow: hidden;
	white-space: nowrap;
}

@media screen and (max-width: 750px) {
	/*スマホサイズ*/

	.footermenu {
		width: 100%;
		margin: auto;
		display: block;
		font-size: 1em;
	}

	#footer #menubutton {
		display: block;
		width: 33.3%;
		height: ;
		background: url(images/) no-repeat;
		height: ;
		line-height: ;
		vertical-align: middle;
		text-decoration: none;
		text-align: center;
		float: left;
		padding: 0.2% 0 0.2% 0;
		box-sizing: border-box;
		border-width: 0px 1px 0px 0px;
		border-style: solid;
		border-color: #E0E0E0;
		margin: 3% 0 0 0;
		font-size: 3vw;
		overflow: hidden;
		white-space: nowrap;
	}

	#footer .menutextcolor {
		color: #383838;
	}
}


.copyrights_l {
	width: 100%;
}

.copyrights_r {
	width: 100%;
}

.copyrights_r img {
	max-width: 50%;
	height: auto;
}

@media screen and (max-width: 750px) {

	/*スマホサイズ*/
	#copyrights {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
		-ms-grid-columns: 1fr;
		/*ie*/
		-ms-grid-rows: 1fr 1fr;
		/*ie*/
	}

	.copyrights_r {
		grid-column: 1/1;
		grid-row: 2/2;
		-ms-grid-column: 1;
		/*ie*/
		-ms-grid-row: 2;
		/*ie*/
		width: 100%;
	}

	.copyrights_l {
		grid-column: 1/1;
		grid-row: 1/1;
		-ms-grid-column: 1;
		/*ie*/
		-ms-grid-row: 1;
		/*ie*/
		width: 100%;
	}

}

#copyrights a:link,
#copyrights a:visited {
	color: #383838;
	/* フッター内のリンク文字の色 */
}

#copyrights a:hover,
#copyrights a:active {
	color: #383838;
	/* フッター内のリンク文字の色 ホバー時*/
}

#bg_footer_contact {
	display: grid;
	display: -ms-grid;
	/*ie*/
	grid-gap: 0px;
	grid-template-columns: 3fr 2fr 1fr;
	-ms-grid-columns: 3fr 2fr 1fr;
	/*ie*/
	width: 100%;
	position: fixed;
	bottom: 0;
	z-index: 9000;
	background: #fff;
	/* box-shadow */
	box-shadow: 0px 2px 13px -3px #000000;
	padding: 1px 0 0 0;
}

#bg_footer_contact a {
	color: #383838;
}

.footer_tel {
	display: block;
	grid-column: 1/2;
	-ms-grid-column: 1;
	/*ie*/
	width: 100%;
	background: #fff;
	text-align: center;
	height: 45px;
	line-height: 45px;
	vertical-align: middle;
	font-size: 1.3em;
}

.footer_mail {
	display: block;
	grid-column: 2/3;
	-ms-grid-column: 2;
	/*ie*/
	width: 100%;
	background: #fff;
	text-align: center;
	height: 45px;
	line-height: 45px;
	vertical-align: middle;
}

@media screen and (max-width: 750px) {/*スマホサイズ*/
	.footer_mail {
		font-size: 0.9em;
	}

	.footer_mail span {
		display: none;
	}
}

.footer_gototop {
	grid-column: 3/4;
	-ms-grid-column: 3;
	/*ie*/
	width: 100%;
	background: #fff;
	text-align: center;
}

/*-------------------------------------------------
 end of @media only screen and (max-width: 1180px)
-------------------------------------------------*/


/*-------------------------------------------------
  このページのトップへボタン
-------------------------------------------------*/

.pagetop {
	width: 100%;
	position: relative;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: none;
	filter: alpha(opacity=95);
	-moz-opacity: 0.95;
	opacity: 0.95;
}

.pagetop a {
	height: 45px;
	line-height: 45px;
	vertical-align: middle;
	display: block;
	color: #ffffff;
	padding: ;
	margin: 0;
	background: #042b59 url(images/);
	/*「このページのトップへ」ボタンの背景色*/
	text-decoration: none;
	font-weight: normal;
	font-size: 1.3em;
}

.pagetop a:hover {
	background: #042b59 url(images/bg_gototop.png);
	/*「このページのトップへ」ボタンの背景色*/
	color: #FFFFFF;
}

/*-------------------------------------------------
  スマートフォンサイト切替えボタン
-------------------------------------------------*/
.viewchange_button {
	width: 100%;
	height: 100px;
	background: #000000;
	text-align: center;
	font-size: 50px;
	padding-top: 20px;
	/*position: fixed;*/
	z-index: 1000;
	color: #ffffff;
}

/*-------------------------------------------------
  ついてくるお問合せ
-------------------------------------------------*/

#rightbox {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 220px;
	height: 150px;
	padding: 0px 0px 0px 0px;
	z-index: 1000;
}

.contactbox {
	position: relative;
	right: 0px;
	top: 0px;
	width: 220px;
	height: 80px;
	background: #cfcfcf;
	margin: 0px 0px 0px 0px;
	z-index: 1000;
}

/*-------------------------------------------------
 　基本（編集する必要はほぼなし）
-------------------------------------------------*/

img {
	border: 0;
	vertical-align: bottom;
}

form {
	margin: 0;
}

/* Lists */
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

li {
	background: url(images/arrow.gif) left 5px no-repeat;
	padding: 0px;
	margin: 0px;
}

.hidden {
	display: none;
}

.centerize {
	text-align: center;
}

.clearing {
	height: 0px;
	width: 100px;
	clear: both;
	line-height: 0px;
	zoom: 1;
	display: hidden;
	font-size: 0px;
}

/*-------------------------------------------------
  改行
-------------------------------------------------*/

.c_line {
	clear: both;
	height: 0px;
}

.c_line5 {
	clear: both;
	height: 5px;
}

.c_line10 {
	clear: both;
	height: 10px;
}

.c_line15 {
	clear: both;
	height: 15px;
}

.c_line20 {
	clear: both;
	height: 20px;
}

.c_line25 {
	clear: both;
	height: 25px;
}

.c_line30 {
	clear: both;
	height: 30px;
}

.c_line35 {
	clear: both;
	height: 35px;
}

.c_line40 {
	clear: both;
	height: 40px;
}

.c_line45 {
	clear: both;
	height: 45px;
}

.c_line50 {
	clear: both;
	height: 50px;
}

.c_line55 {
	clear: both;
	height: 55px;
}

.c_line60 {
	clear: both;
	height: 60px;
}

.c_line65 {
	clear: both;
	height: 65px;
}

.c_line70 {
	clear: both;
	height: 70px;
}

.c_line75 {
	clear: both;
	height: 75px;
}

.c_line80 {
	clear: both;
	height: 80px;
}

.c_line85 {
	clear: both;
	height: 85px;
}

.c_line90 {
	clear: both;
	height: 90px;
}

/*-------------------------------------------------
  Forms
-------------------------------------------------*/
.loginform,
.searchform {
	margin: 5px 0;
}

.commentform,
.mailform {
	margin-top: 0px;
	margin-left: 0px;

	padding: 0px;
	background: #EEEEEE;
	/* Rounded borders, for Mozilla browsers */
	/* -moz-border-radius: 10px; */
}

.commentform img {
	margin: 5px 0 0 0;
}

.formfield {
	font-size: 11px;
	background: white;
	color: #494949;
	border-top: 1px solid #868686;
	border-left: 1px solid #868686;
	border-bottom: 1px solid #D4D2CF;
	border-right: 1px solid #D4D2CF;
	margin: 1px 0 0 0;
}

.formbutton {
	font-size: 11px;
	background: white;
	color: #494949;
	border-top: 1px solid #D4D2CF;
	border-left: 1px solid #D4D2CF;
	border-bottom: 1px solid #868686;
	border-right: 1px solid #868686;
	margin: 1px 0 0 0;
}

.searchform .formfield {
	width: 168px;
	font-family: Arial, Tahoma, Trebuchet MS, Verdana, sans-serif;
	padding: 2px 0;
	margin: 0 2px 2px 0;
}

.searchform .formbutton {
	width: 60px;
	font-family: Tahoma, Arial, Trebuchet MS, Verdana, sans-serif;
	padding: 2px 2px;
}

.loginform .formfield {
	width: 130px;
	font-family: Arial, Tahoma, Trebuchet MS, Verdana, sans-serif;
	padding: 2px 0;
	margin: 0 2px 2px 0;
}

.loginform .formbutton {
	width: 60px;
	font-family: Tahoma, Arial, Trebuchet MS, Verdana, sans-serif;
	padding: 2px 2px;
}

.mainform .formfield {
	width: 280px;
	font-family: Arial, Tahoma, Trebuchet MS, Verdana, sans-serif;
	padding: 2px 0;
	margin: 0 2px 2px 0;
}

.mailform .formbutton {
	width: 100px;
	font-family: Tahoma, Arial, Trebuchet MS, Verdana, sans-serif;
	padding: 2px 2px;
}

#nucleus_cf_name,
#nucleus_cf_mail {
	width: 540px;
	margin-right: 0px;
	font-family: Arial, Trebuchet MS, Verdana, sans-serif;
}

.commentform textarea,
.commentform .formfield,
.mailform textarea,
.mailform .formfield {
	width: 545px;
	margin-left: 0px;
}

.commentform .formbutton {
	width: 100px;
	height: 22px;
	font-family: Tahoma, Arial, Trebuchet MS, Verdana, sans-serif;
}

.error {
	color: red;
	font-weight: bold;
}


/*-------------------------------------------------
  Miscelaneous
-------------------------------------------------*/
/* VBlog image onion skin shadow - From AListApart.com*/
.wrap1,
.wrap2,
.wrap3 {
	display: inline-table;
	/* \*/
	display: block;
	/**/
}

.wrap1 {
	float: left;
	background: url(images/shadow.gif) right bottom no-repeat;
	margin: 0 5px 3px 0;
}

.wrap2 {
	background: url(images/corner_br.gif) left bottom no-repeat;
}

.wrap3 {
	background: url(images/corner_tr.gif) right top no-repeat;
	padding: 0 5px 5px 0;
}

.wrap3 img {
	display: block;
	border: 3px solid white;
}

/* Search highlight color */
.highlight {
	background: #DEFFA9;
}

/* Leftbox and Rightbox toolbar buttons */
.leftbox,
.rightbox {
	margin: 3px;
	padding: 10px;
	/*3px;*/
	#: larger;
}

.leftbox {
	float: left;
	width: 50%;
	/*45%;*/
	border-right: 1px dashed #ddd;
}

.rightbox {
	float: right;
	width: 50%;
	/*45%;*/
	/*	border-left: 1px dashed #ddd;*/
}

/*
div.leftbox10 {
	float: left;
	width: 10%;
}
div.leftbox20 {
	float: left;
	width: 20%;
}
div.leftbox30 {
	float: left;
	width: 160px;
}
div.leftbox40 {
	float: left;
	width: 40%;
}
div.leftbox45 {
	float: left;
	width: 45%;
}
div.leftbox55 {
	float: left;
	width: 55%;
}
div.leftbox60 {
	float: left;
	width: 60%;
}
div.leftbox65 {
	float: left;
	width: 65%;
}
div.leftbox70 {
	float: left;
	width: 70%;
}
div.leftbox75 {
	float: left;
	width: 75%;
}
div.leftbox80 {
	float: left;
	width: 80%;
}

div.leftbox100px {
	float: left;
	width: 105px;
}

div.leftbox150px {
	float: left;
	width: 155px;
}

div.leftbox200px {
	float: left;
	width: 205px;
}

div.leftbox250px {
	float: left;
	width: 255px;
}

div.leftbox300px {
	float: left;
	width: 305px;
}

div.leftbox350px {
	float: left;
	width: 355px;
}
div.leftbox400px {
	float: left;
	width: 405px;
}

div.leftbox450px {
	float: left;
	width: 455px;
}
div.leftbox500px {
	float: left;
	width: 505px;
}

div.leftbox550px {
	float: left;
	width: 555px;
}
div.leftbox600px {
	float: left;
	width: 605px;
}

div.leftbox650px {
	float: left;
	width: 655px;
}
div.leftbox700px {
	float: left;
	width: 705px;
}

div.leftbox750px {
	float: left;
	width: 755px;
}

div.leftbox800px {
	float: left;
	width: 805px;
}
*/

.leftbox10 {
	float: left;
	width: 10%;
}

.leftbox20 {
	float: left;
	width: 20%;
}

.leftbox30 {
	float: left;
	width: 160px;
}

.leftbox40 {
	float: left;
	width: 40%;
}

.leftbox45 {
	float: left;
	width: 45%;
}

.leftbox55 {
	float: left;
	width: 55%;
}

.leftbox60 {
	float: left;
	width: 60%;
}

.leftbox65 {
	float: left;
	width: 65%;
}

.leftbox70 {
	float: left;
	width: 70%;
}

.leftbox75 {
	float: left;
	width: 75%;
}

.leftbox80 {
	float: left;
	width: 80%;
}

.leftbox100px {
	float: left;
	width: 105px;
}

.leftbox150px {
	float: left;
	width: 155px;
}

.leftbox200px {
	float: left;
	width: 205px;
}

.leftbox250px {
	float: left;
	width: 255px;
}

.leftbox300px {
	float: left;
	width: 305px;
}

.leftbox350px {
	float: left;
	width: 355px;
}

.leftbox400px {
	float: left;
	width: 405px;
}

.leftbox450px {
	float: left;
	width: 455px;
}

.leftbox500px {
	float: left;
	width: 505px;
}

.leftbox550px {
	float: left;
	width: 555px;
}

.leftbox600px {
	float: left;
	width: 605px;
}

.leftbox650px {
	float: left;
	width: 655px;
}

.leftbox700px {
	float: left;
	width: 705px;
}

.leftbox750px {
	float: left;
	width: 755px;
}

.leftbox800px {
	float: left;
	width: 805px;
}

/*-------------------------------------------------
  Item info
-------------------------------------------------*/
.contentitemcategory {
	background: url(images/bgcategory.gif) center left no-repeat;
	font-size: 10px;
	line-height: 12px;
	padding: 0 10px 0 14px;
}

.contentitempostedby {
	background: url(images/bgpostedby.gif) center left no-repeat;
	font-size: 10px;
	line-height: 12px;
	padding: 0 10px 0 12px;
}

.contentitemcomments {
	background: url(images/bgcomment.gif) center left no-repeat;
	font-size: 10px;
	line-height: 12px;
	padding: 0 10px 0 13px;
}

.contentitemedit {
	background: url(images/bgedit.gif) center left no-repeat;
	font-size: 10px;
	line-height: 12px;
	padding: 0 10px 0 11px;
}

.contentitem {
	padding: 3px 0 0 0;
	margin: 0 0 16px 0;
	text-align: right;
}

.contentitem1 {
	display: inline;
}

.contentitem2 {
	display: inline;
	background: url(images/dotv.gif) left repeat-y;
	padding: 0 0 0 10px;
}

.contentitem3 {
	display: inline;
	background: url(images/dotv.gif) left repeat-y;
	padding: 0 0 0 10px;
}

.contentitem4 {
	display: inline;
	padding: 0 0 0 10px;
	background: url(images/dotv.gif) left repeat-y;
}

/*-------------------------------------------------
  Comments
-------------------------------------------------*/
.itemcomment {
	background: url(images/commentquote01.gif) no-repeat;
	background-position: 6px 9px;
	padding: 6px 42px;
	border: 1px solid white;
	margin: 10px 0 0 0;
}

.itemcomment:hover {
	background: #F9F9F9 url(images/commentquote02.gif) no-repeat;
	background-position: 6px 9px;
	border: 1px solid #CCCCCC;
}

.id1

/*This is to give the admin a special comment style, to distinguish him/her from the rest of the commentors*/
	{
	background: #F9F9F9 url(images/commentquote02.gif) no-repeat;
	background-position: 6px 9px;
	border: 1px solid #B3C492;
}

.id1:hover {
	background: #F9F9F9 url(images/commentquote02.gif) no-repeat;
	background-position: 6px 9px;
	border: 1px solid #B3C492;
}

.itemcomment h3 {
	font-size: 12px;
}

/*-------------------------------------------------
  table
-------------------------------------------------*/

table#table-01 {
	background: #f5f5f5;
	width: 620px;
	border: 0px #E3E3E3 solid;
	/*border-collapse: collapse;*/
	/*  border-collapse: 5px;*/
	border-spacing: 4px;
}

table#table-01 th {
	width: 110px;
	color: #ffffff;
	padding: 5px;
	border: #E3E3E3 solid;
	border-width: 0 1px 1px 0px;
	background: #72ad06;
	font-weight: bold;
	line-height: 120%;
	text-align: center;
	white-space: nowrap;
}

table#table-01 td {
	/*width: 500px;*/
	background: #ffffff;
	padding: 5px;
	border: 1px #E3E3E3 solid;
	border-width: 0 1px 1px 0px;
	text-align: left;
	white-space: nowrap;

}

table#table-02 {
	background: #f5f5f5;
	/*width: 625px;*/
	border: 0px #E3E3E3 solid;
	/*border-collapse: collapse;*/
	/*  border-collapse: 5px;*/
	border-spacing: 4px;
}

table#table-02 th {
	width: 300px;
	color: #e5f4bb;
	padding: 5px;
	border: #E3E3E3 solid;
	border-width: 0 1px 1px 0px;
	background: #72ad06;
	font-weight: bold;
	line-height: 120%;
	text-align: center;
	white-space: nowrap;
}

table#table-02 td {
	width: 340px;
	background: #ffffff;
	padding: 5px;
	border: 1px #E3E3E3 solid;
	border-width: 0 1px 1px 0px;
	text-align: left;
	white-space: nowrap;

}

/*-------------------------------------------------
instagram api
-------------------------------------------------*/

.instagram-container {
	display: flex;
	flex-wrap: wrap;
	/* margin: 0 -1px; */
}

.instagram-item {
	width: 50%;
	/* padding: 1px; */
}

@media screen and (min-width: 768px) {
	.instagram-item {
		width: 25%;
	}
}

a.instagram-card {
	display: block;
	position: relative;
	/* margin-bottom: 16px; */
	/* background-color:#000; */
	color: #000;
}

.instagram-card__img {

	width: calc(500vw / 2000 * 100);
	height: calc(500vw / 2000 * 100);
}

@media screen and (max-width: 750px) {

	.instagram-card__img {

		width: calc(375vw / 750 * 100);
		height: calc(375vw / 750 * 100);
	}
}

/* いいね数、コメント数 */
.instagram-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	display: flex;
	align-items: center;
	line-height: 1;
	font-size: 14px;
	color: #ffffff;
}

/* /いいねアイコン、コメントアイコン */
.instagram-icon {
	display: block;
	width: 20px;
	height: 20px;
}

/* コメント */
.instagram-card__comment {
	padding-left: 8px;
	padding-right: 8px;
	font-size: 1.2rem;
	overflow: hidden;
	text-overflow: ellipsis;
	/* white-space: nowrap; */
	/* 文章1行 */
}

.instagram-item:hover img {
	opacity: 0.6;
	transition-duration: 0.3s;
}


.instagram-item .caption {

	font-size: 400%;
	text-align: center;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.instagram-item .mask {
	/* width:			100%; */
	/* height:			100%; */
	font-size: 50%;
	text-align: center;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.4);
	position: absolute;
	top: 90%;
	left: 90%;
	transform: translate(-50%, -50%);
	-webkit-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

.instagram-item:hover .mask {

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: scale(4);
	/* 4倍に拡大 */
	transform: scale(4);
}

/*-------------------------------------------------
youtube レスポンシブ化
-------------------------------------------------*/
.youtube {
	position: relative;
	padding-bottom: 56.25%;
	/*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
}


.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.youtube_play {
	position: relative;
	padding-bottom: 56.25%;
	/*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
}


.youtube_play img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.youtube_play:hover {
	cursor: pointer;
}

.youtube .youtube_btn {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;

}

.youtube .youtube_btn:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	background: url("images/y_icon.png") center center no-repeat;
	background-size: 96px 96px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.youtube .youtube_btn:hover:after {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	background: url("images/y_icon.png") center center no-repeat;
	background-size: 96px 96px;
}


.youthumbnail {
	position: relative;
	padding-bottom: 49.8%;
	/*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
}

.youthumbnail-s {
	position: relative;
	padding-bottom: 100%;
	/*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
}

.youthumbnail {
	position: relative;
	padding-bottom: 49.8%;
	/*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
}

.youthumbnail-s {
	position: relative;
	padding-bottom: 100%;
	/*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
}