@charset "Utf-8";
@import url("reset.css");
@import url("nav.css");


/* ------------------------------
 Color
------------------------------ */

:root {	
	--color-main: #3c2617;/* メインカラー */
	--color-main-rgb: 60,38,23;

	--color-point1: #f39800;/* サブカラー1　オレンジ */
}



/* ------------------------------
 Layout
------------------------------ */

.wrap,.wrappc{}


ul.sf_contact li a{
	display: block;
	color: #482f33;
	font-size: 10px;
	text-align: center
}

ul.sf_contact li a:before{
	font-size: 20px;
	display: block;
	color: #BD0025
}

a.pagetop{display: block;
	font-size: 9px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center
}

a.pagetop:before{
	font-family: icomoon;
	content: "\e978";
	display: block;
	font-size: 30px;
}


/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



/* 下からフェードイン */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


.fade {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.5s, transform 1s;
}

.fade.active {
	opacity: 1;
	transform: translateY(0px);
}

/*スクロール下からフェードイン  */
.js-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}



@media screen and (max-width: 666px) {
	.wrap{width: 90%;
		margin: 0 auto}
	
	#contents{
	margin: 0 auto;
	padding: 0 0 0;}
	
	body:not(#home) #contents{
		padding: 60px 0 0;
	}
	
	#side_fix{display: none}
		
	
	.sfc_pc{display: none}
	
	br.brpc{display: none}
}	


@media screen and (min-width: 667px){
	
	.wrap,.wrappc{
		width: 94%;
		margin: 0 auto}

	#side_fix{
		width: 60px;background: #EFECE4;
		display: flex;
		top:0;
		right: 0;
		position: fixed;
		flex-direction: column;
		align-items: center;
		height: 100vh
	}
	a.pagetop{height: 100px}
	ul.sf_contact{
		border-bottom: solid 1px #482f33;
		margin: 1.5em auto 1em;
	}
	ul.sf_contact li{margin-bottom: 1.2em}
	#contents{padding: 0 0 0;}
	
	body:not(#home) #contents{
		padding: 80px 0 0;
	}

	br.brsp{display: none}
	ul.sf_contact li.pcbtn{display: none}
}

@media screen and (min-width: 1360px){
	.wrap,.wrappc{
	width: 96%;
	max-width: 1200px;margin: 0 auto}
}



.banners{
	margin: 0 auto
}

.banners ul{
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	margin: 3em auto 0
}

.banners ul li{
	padding: 1em
}


/* ------------------------------
 よく使う
------------------------------ */

.gback{background:var(--color-main);color: #f1eee7}
.gback a{color: #f1eee7}


.gfont{color: var(--color-main)}


ul.hlbox li{
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	margin: 2em 0 0 0
}

ul.hlbox li div:nth-child(1){
	width: 120px
}

ul.hlbox li div:nth-child(2){
	width: calc(100% - 120px);
	padding-left: 1.6em
}

ul.hlbox li .date{display: inline-block;margin-right: 1em}
ul.hlbox li .cat{
	background:#fff;
	font-size: .8em;
	padding: 0 5px
}




/* ------------------------------
 swiper
 ------------------------------ */
.swiper,
.workswiper,
.bannerwiper,
.relatedswiper1,
.relatedswiper{
	overflow: hidden;
	position: relative
}


.banner{
	margin: 0 0 0 5%
}


@media screen and (max-width: 667px) {
	.relatedswiper,
	.relatedswiper1{margin-left: 5%}
}

.bannerwiper{margin-bottom: 5%}

.swiper-slide{ height: auto; }

.swiper-button-next,
.swiper-button-prev {
    --swiper-navigation-color: #000}


.swiper-button-next:after,
.swiper-button-prev:after {font-size: 18px !important;}

@media screen and (max-width: 667px) {
	.swiper-button-next:after,
	.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 13px !important;
    }
}	

@media print, screen and (min-width: 668px) {
	.swiper-button-prev, .swiper-rtl .swiper-button-next{
		left: 0
	}
	.swiper-button-next, .swiper-rtl .swiper-button-prev{
		right: 0
	}
}	

@media print, screen and (min-width: 1000px) {}	




/* ************************************************ 
*	同じグループの関連リンク
* ************************************************ */

#related{margin-top: 8%}
#related h3{
	line-height: 1.1em;
	margin: 2em 0 1.2em 0;
	text-align: center;
	letter-spacing: 1px
}


.relatedswiper ul li{
	position: relative;
	padding: 1em 1em 1em 0
}

.relatedswiper ul li span{
	display: block;
	padding: .6em .8em;
}

.relatedswiper ul li a{
	display: block;
	box-shadow: 1px 1px 6px #ccc;
}

#related ul li img{
}

@media screen and (max-width: 667px) {
	.relatedswiper{margin-left: 5%}
	#related h3{margin: 2em 1em 1.2em 1em};
}	

@media print, screen and (min-width: 668px) {
	#related h3{font-size: 1.5em}
	.relatedswiper{margin: 0 auto 2em}
	.relatedswiper ul{
	display: flex;
	flex-wrap:wrap;
	}
	
	.relatedswiper ul li{
	width: calc(( 100% - 50px ) / 3 );
	margin: 0 25px 25px 0;
	}
	
	.relatedswiper ul li span{padding: 1em 1.3em;}
	.relatedswiper ul li:nth-child( 3n ) {margin-right: 0;}
}	

@media print, screen and (min-width: 1024px) {}	


/* ************************************************ 
*	関連する施工例
* ************************************************ */

#reco{
	padding-top: 3em;
	margin-bottom: 2em
}
#reco h3{
	 margin: 0 auto 2em;
	 text-align: center;
	 border-top: solid 2px #c4b9b9;
	 border-bottom: solid 2px #c4b9b9;
	 position: relative;
	 padding: 1.2em .5em;
	 font-size: 1.2em;
	 letter-spacing: 1px
}



	
.reco_works figure img{
	width:100%;
	margin-bottom: .8em;
	object-fit: cover;
	height: 160px;
	border-radius: 5px;
	position: relative;
	}
			
.reco_works figure img:hover{
	opacity: .8
}


.more_reco{
	margin: 2em auto 0;
}

.more_reco a{
	display: block;
	background: #184c28;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 1em 2em;
	max-width: 450px;
	border-radius: 5px;
	position: relative;
	text-decoration: none;
	-webkit-transition: all .3s;
	transition: all .3s;
	margin: 0 auto;
	font-size: 1.1em;
}

.more_reco a:hover{
	background: #177533;
}


@media screen and (max-width: 767px) {
	#reco h3{width: 90%;}
	.reco_works figure{
	padding: 0 1em 0 0
	}
}	

@media print, screen and (min-width: 768px) {
	#reco h3{
		font-size: 1.5em
	}
	.reco_works{}
	
	.reco_works .swiper-wrapper{
		flex-wrap:wrap;
	}
	
	
	}	

@media print, screen and (min-width: 768px) and (max-width: 1859px) {
	.reco_works figure{
		width: calc(( 100% - 90px ) / 4 );
		margin: 0 30px 30px 0;
		font-size: .9em;
		line-height: 1.5em
	}
	
	.reco_works figure:nth-child( 4n ) {margin-right: 0;}
	
	.reco_works figure img{height: 200px;}

}

@media print, screen and  (min-width: 1860px) {
	.reco_works figure{
	width: calc(( 100% - 80px ) / 5 );
	margin: 0 20px 20px 0;
	font-size: .9em;
		    line-height: 1.5em
	}
	
	.reco_works figure:nth-child( 5n ) {margin-right: 0;}
	
	.reco_works figure img{height: 140px;}
}	



/* ************************************************ 
*	テーマ別施工例
* ************************************************ */

#works_theme_list h2,
#works_theme h2,
#tsubo_list h2{
	margin: 1.5em auto 1em;
	text-align: center;
	font-size: 1.5em;
}


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

@media print, screen and (min-width: 768px) {
	#works_theme_list h2,
	#works_theme h2,
	#tsubo_list h2{
		font-size: 1.8em;
	}
}	



#theme_list ul li{
	margin-bottom: 1.5em;
	padding: 1em;
	border-radius: 5px;
	position: relative;
	background: rgba(220, 211, 191, 0.2);
	-webkit-transition: all .3s;
	transition: all .3s;
}

#theme_list ul li img{
	object-fit: cover;
	width: 100%;
	height: 120px;
	border-radius: 5px;
	position: relative;
	
}

#theme_list ul li h3{
	margin-bottom: .6em;
	font-weight: bold
}

#theme_list ul li p{line-height: 1.6em;}
#theme_list ul li div:nth-child(2){padding: 1em .5em 0}
#theme_list ul li a{
	text-decoration: none
}

#theme_list ul li:hover{
	background: rgba(220, 211, 191, 0.6)
}

#works_theme .relatedswiper{
	margin: 0
}

@media screen and (max-width: 767px) {
	#theme_list ul li p{font-size: .9em}
}	

@media print, screen and (min-width: 768px) {
	#theme_list ul{
	margin: 0 0 2em 0;
	display: flex;
	flex-wrap:wrap;
	}
	#theme_list ul li{
	width: calc(( 100% - 60px ) / 3 );
	margin: 0 30px 30px 0;
	}
	
	#theme_list ul li:nth-child( 3n ) {margin-right: 0;}
	#theme_list ul li img{height: 160px}

}	

@media print, screen and (min-width: 1240px) {
	#theme_list ul li img{height: 200px}
}	





/* ------------------------------
 sns
------------------------------ */

@media print, screen and (min-width: 1000px) {}	

#snslink ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	font-family: serif
}

#snslink li{margin: 0 1em}

#snslink a{color: #fff;text-decoration: none;font-size: 1.2em}

a.ig:before{
	font-family: sns;
	content: "\e903";
	padding-right: .3em
}

a.fb:before{
	font-family: sns;
	content: "\e90d";
	padding-right: .3em
}


a.tw:before{
	font-family: sns;
	content: "\e611";
	padding-right: .3em
}

a.line:before{
	font-family: sns;
	content: "\e009";
	padding-right: .3em
}

a.pinta:before{
	font-family: sns;
	content: "\e63a";
	padding-right: .3em
}

a.plane:before{
	font-family: sns;
	content: "\e900";
	padding-right: .3em
}

a.yt:before{
	font-family: icomoon;
	content: "\e912";
	padding-right: .3em
}

a.ns:before{
	font-family: sns;
	content: "\e902";
	padding-right: .3em
}

a.map:before{
	font-family: icomoon;
	content: "\e9ee";
	margin-right: .3em
}


a.hp:before{
	font-family: icomoon;
	content: "\ea73";
	margin-right: .3em
}

a.call:before{
	font-family: icomoon;
	content: "\e905";
	margin-right: .3em
}

a.home:before{
	font-family: icomoon;
	content: "\e908";
}

a.event:before{font-family: icomoon;content: "\e9b5";}
a.sodan:before{font-family: sns;content: "\e90f";}
a.contact:before{font-family: sns;content: "\e900";}

a.works:before{
	font-family: icomoon;
	content: "\e9d6";
}

a.madori:before{
	font-family: icomoon;
	content: "\ea30";
}



/* ------------------------------
 ページコンテンツ共通スタイル
------------------------------ */

#page_header{
	text-align: left;
	margin:5% auto 8%;
}

#page_header h1{font-size:20px;
	font-family:'Zen Old Mincho', serif;
	border-left: solid 3px var(--color-main);
	padding:3px 0 3px 5%;}
	
#page_header h1 span{display: block;
	font-size: 1.5em;padding: 10px 0 0 0;color: var(--color-main)}


.ctitle{
	text-align:center;
	background: url(../img/h3ctitle_bg.png) center top repeat-x,url(../img/h3ctitle_bg.png) center bottom repeat-x;
	color: #300;
	padding: .8em 1em;
	letter-spacing: 2px;
	margin: 10% auto 5%;
	font-size: 1.3em
}



@media screen and (max-width: 667px) {
	#page_header p{
		margin-top: 1em
	}
}	

@media print, screen and (min-width: 668px) {
	#page_header{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	#page_header h1{
		font-size:24px;
		padding-left: 3%;
		border-left: solid 3px var(--color-main)
	}
	.ctitle{font-size: 20px;margin: 8% auto 3%;}
}	

@media print, screen and (min-width: 1024px) {
	#page_header h1{font-size:30px}
	.ctitle{font-size: 26px}
}	



.read{
	margin: .8em auto 0;
}

@media screen and (max-width: 767px) {
	.read{width: 95%;}
}	

@media print, screen and (min-width: 768px) {
	#header_l2{padding: 3em 2em;}
	#header_l2 h1 span{font-size: 38px;margin-bottom: 20px;}
}	

@media print, screen and (min-width: 1024px) {
	#header_l3 h1{font-size: 2em}
	.read{
		text-align: center;
		margin:0 auto;
		max-width: 1000px
	}
}	


a.btag{}

a.btag:before{
	font-family: icomoon;
	content: "#";
}



a.kw_tag{display: block;background: #666;color: #fff;padding: .4em 1em;
	border-radius: 50px;
	position: relative;
	font-size: .9em;
	line-height: 1em}	

a.kw_tag:before{
	font-family: icomoon;
	content: "\ea1a";
	padding-right: .5em;
	color: rgba(255, 255, 255, 0.8)
}

a.kw_tag:hover{
	background: #007fa8
}


a.cat {
	display: block;
    background: #fff;
    text-align: center;
    color: #007fa8!important;
    border: solid 1px #007fa8;
    text-decoration: none;
    border-radius: 50px;
    padding: 2px .6em;
    font-size: .8em;
    line-height: 1em
}

/* ------------------------------
 INDEX
------------------------------ */

ul.newsList > li{}
ul.newsList > li .date{display: inline-block;margin-right: 1em}
ul.newsList > li .cat{
	background:#f3f3e6;
	font-size: .8em;
	padding: 0 5px
}

ul.newsList > li h3{
	font-size: 1.1em;margin-top: .5em
}

ul.newsList > li img{
	width: 100%;
	object-fit: cover;
}

ul.newsList > li div:nth-child(2){padding: 1em 0;}

ul.newsList > li .new{color: #ff1d1d;padding-right: 1em}

.hlbox_thumb{position: relative}

.es{}

.es.upcoming{
	display: none
}

.closed{
 color: #ff3800
}

@media screen and (max-width: 667px) {
	ul.newsList{max-width: 270px;margin: 0 auto}
	ul.newsList > li{margin-bottom: 2em}
}	

@media print, screen and (min-width: 668px) {
	ul.newsList{
	display: flex;
	flex-wrap:wrap;
	}
	
	ul.newsList > li{
	width: calc(( 100% - 80px ) / 3 );
	margin: 0 40px 40px 0;
	position: relative;
	}
	
	ul.newsList > li img{}
	
	ul.newsList li:nth-child( 3n ) {margin-right: 0;}
	
}	

@media print, screen and (min-width: 1024px) {
	ul.newsList{padding: 0 5%}
	ul.newsList > li{
	width: calc(( 100% - 120px ) / 3 );
	margin: 0 60px 50px 0;
	position: relative;
	}
}

/* ------------------------------
 pageList
------------------------------ */

ul.pageList li{box-shadow: 1px 1px 6px #ccc;border-radius: 6px;}

ul.pageList li h3{
	font-size: 1.3em;
}

ul.pageList li h3 a{display: block;padding: 1.5em;
	position: relative
}

ul.pageList li h3:after{
	
}


ul.pageList li h3 a{
	color: #174c28;
  position: relative;
    transition: all .2s linear;
}


/*矢印と下線の形状*/
ul.pageList li h3 a::before{
  content:"";
  position: absolute;
  bottom:20px;
  right:26px;
  width:40px;
  height:1px;
  background:#174c28;
    transition: all .2s linear;
}

ul.pageList li h3 a::after{
  content:"";
  position: absolute;
  bottom:20px;
  right: 30px;
  width:1px;
  height:10px;
  background:#174c28;
    transform:skewX(45deg);
    /*アニメーションの指定*/
    transition: all .2s linear;
}

/*hoverした際の移動*/
ul.pageList li:hover h3 a::before{
  right:14px;
}

ul.pageList li:hover h3 a::after{
  right:18px;
}




ul.pageList li img{
	border-radius: 6px 6px 0px 0px;
	width: 100%;
	object-fit: cover;
}

ul.pageList li div:nth-child(2){padding: 1em}


@media screen and (max-width: 767px) {
	ul.pageList li{margin-bottom: 2em}
}	

@media print, screen and (min-width: 768px) {
	ul.pageList{
	display: flex;
	flex-wrap:wrap;
	align-items: center;
	}
	
	ul.pageList li{
	width: calc(( 100% - 30px ) / 2 );
	margin: 0 30px 30px 0;
	position: relative;
	}
	
	ul.pageList li img{
		height: 280px;
	}
	
	
	ul.pageList li:nth-child( 2n ) {margin-right: 0;}
	
}	

@media print, screen and (min-width: 1024px) {
	
}	



/* ------------------------------
 #headline
------------------------------ */

#headline{
	margin-top: 5%
}

#headline h2{font-size: 18px;
	border-bottom: solid 1px #ccc;
	padding-bottom: .8em
}

#headline h2 span{
	font-size: 1.3em;
	padding-right: .8em
}

ul.hlbox > li{
	display: flex;
	justify-content: flex-start;
	flex-wrap:wrap;
	margin: 2em 0 0 0;
}

ul.hlbox > li div:nth-child(1){
	width: 80px;
	overflow: hidden;
}
ul.hlbox > li div:nth-child(1) img{
	display: block;
    height: 80px;
    object-fit: cover;
    width: auto;
}
ul.hlbox > li div:nth-child(2){
	width: calc(100% - 80px);
	padding-left: 1.6em
}

ul.hlbox > li .date{display: inline-block;margin-right: .5em}
ul.hlbox li .new{
	font-size: .8em;
	color: red;
	margin-right: 1em
}
ul.hlbox li .cat{
	background:#fff;
	font-size: .8em;
	padding: 0 5px
}

ul.hlbox li h3{
	font-family: sans-serif;
	font-size: .9em
}

ul.hlbox ul.favorites_count{
	display: none
}


@media screen and (max-width: 767px) {
	#headline >div{
		background: #f6f6f6;
		padding: 6% 5% 5%;
		margin-bottom: .5em
	}
	#hl_news{margin-bottom: 3em;}
}	

@media print, screen and (min-width: 768px) {
	#headline{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
		background: #f6f6f6;
		padding: 5%
	}
	#headline > div{width: 48%}
}	

@media print, screen and (min-width: 1024px) {
	ul.hlbox li h3{font-size: 1em}
}	


/* ------------------------------
 .kibako_ban
------------------------------ */
.kibako_ban_sub{
margin:2em auto;
padding: 3%;
text-align: center;
background: #f9f7e7
}

.kibako_ban_sub p{
	margin-bottom: 15px;
	font-size: 1.2em;
	text-decoration: underline
}

.kibako_ban_sub p a{
	text-decoration: underline;
	color: #d05d18
	}

@media screen and (max-width: 767px) {
	.kibako_ban_sub{padding: 5px}
}	




@media print, screen and (min-width: 768px) {
	.kibako_ban_sub p br{display: none}
}




/* ************************************************ 
*	CTA
* ************************************************ */


#cta{
	text-align: center;
	margin: 0 auto 1em;
	padding: 6% 5%;
	background: rgba(240, 240, 224, 0.8)
}
#cta h4{
	font-size: 1.2em;
	margin-bottom: 1em;
	line-height: 1.6em;
}

#cta h4 br,#cta p br{display: none}

#cta p{margin-bottom: 1em;font-size: 1.1em}

ul#cta_contact{width: 90%;margin: 0 auto}

ul#cta_contact li{letter-spacing: .1em;
	font-size: 1.3em;
	text-align: center
}

ul#cta_contact li a,
ul#cta_contact li.cta-tel-pc span{
	display: block;
	border: solid 2px #301816;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: relative;
	padding: .8em .5em;
	text-decoration: none;
	color: #fff;
	background: #301816;
	font-weight: bold
}




ul#cta_contact li a:hover{
	background: #fff;
	color: #301816
}

ul#cta_contact li.cta-tel a:before,
ul#cta_contact li.cta-tel-pc span:before{
	font-family: icomoon;
	content: "\e905";
	margin-right: .5em
}

ul#cta_contact li.cta-tel-pc a:hover{}

ul#cta_contact li.cta-form a:before{
	font-family: icomoon;
	content: "\e904";
	margin-right: .5em
}

@media screen and (max-width: 667px) {
	ul#cta_contact li:first-child{
		margin-bottom: 1em
	}
}	

@media print, screen and (min-width: 668px) {
	#cta{}
	#cta h4{font-size: 1.4em;}
	ul#cta_contact li.cta-tel,
	ul#cta_contact li.cta-tel-pc{
		float: left;
		width: 48%
	}
	ul#cta_contact li.cta-form{
		float: right;
		width: 48%;
	}

}	

@media print, screen and (min-width: 1024px) {
	ul#cta_contact{width: 80%}
}	


/* ************************************************ 
*	お気に入りボタン
* ************************************************ */



.heart-full,
.heart-empty{
	display: block;
	font-style: normal;
	line-height: 1em
}

.heart-full::before{
	font-family: icomoon;
	font-size: 30px;
	content: "\e9d0";
}

.heart-empty::before{
	font-family: icomoon;
	font-size: 30px;
	content: "\e9cf";
}


.favoritelist{
	position: fixed;
	top:180px;
	right: 30px;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	background: #fff;
	box-shadow: 1px 1px 6px #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100
}
.favoritelist a{
	display: block
}

.favoritelist a::before{
	position: absolute;
	left: 10px;
	top: 15px;
	font-family: icomoon;
	font-size: 30px;
	content: "\e9d0";
	color: #d7d7d7;
	display: block;
}

ul.favorites_count{
	display: flex;
	justify-content: flex-end;
	align-items: center
}


ul.favorites_count li .heart-empty::before,
ul.favorites_count li .heart-full::before{
	font-size: 20px;
}

ul.favorites_count li.f_count{padding: 0 5px;}




/* ************************************************ 
*	.bread_crumb
* ************************************************ */

#bread{padding: 1.5em 1em 1em;}

#bread a{text-decoration: none;color: #444}

ul.bread_crumb{}
	
ul.bread_crumb li{display: inline-block;
	font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem)
}

ul.bread_crumb li br{display: none}

ul.bread_crumb li + li:before {
	margin: 0 .6em;
	font-size: 1.1em;
	color: #999;
	font-family: icomoon;
	content: "\e977";
}

@media screen and (max-width: 667px) {	
	ul.bread_crumb li{}
}	

@media print, screen and (min-width: 668px) {
	#bread{padding: 1.5em;}
}

/* ************************************************ 
*	prevnext
* ************************************************ */

.pagenav{
	max-width: 1240px;
	margin: 3% auto;
}

.pagenav li {
	margin:0 0 .6em;
	font-size: .8em
}

.pagenav li a{
	display: block;
	text-decoration: none;
	padding: .3em .8em;
	position: relative;
	color: #444;
	-webkit-transition: all .3s;
	transition: all .3s;
	}

	
.pagenav li a:hover{color: #510000}	
.pagenav li.prev{text-align: left;}

.pagenav li.prev a{}

.pagenav li.prev a:before{
		font-family: icomoon;
		content: "\e973";
		padding-right: .5em}
	
.pagenav li.next{text-align: right;}

.pagenav li.next a:after{
	font-family: icomoon;
	content: "\e974";
	padding-left: .5em}

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

@media print, screen and (min-width: 668px) {
	.pagenav{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
	}
	.pagenav li{width: 45%}
}	
	


.pageback {display: block;
	margin: 0 auto;
	background: #007fa8;
	color: #fff;
	padding: .6em 1em;
	text-align: center;
	max-width: 400px;
}

.pageback:before{
	font-family: icomoon;
	content: "\e973";
	padding-right: 5px
}



/* ************************************************ 
*	Pager
* ************************************************ */

#pager{overflow: hidden;
    position: relative;}
    
    
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2em 0 3em;
    position: relative;
}

.pagination span, .pagination a {
    display: block;
    width: auto;
    margin: 4px 6px;
    padding: 8px;
    color: #000;
    background-color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 16px;
    position: relative;
    border-bottom: solid 3px #FFF
}



/* ページ番号 */
.pagination .pager{
    width: 32px;
}

/* ホバー時 & 現在のページ */
.pagination a:hover,
.pagination .current  {
    border-bottom: solid 3px #000
}

/* 前へ */
.pagination a.before {
    margin-right: 16px;
}
/* 次へ */
.pagination a.next {
    margin-left: 16px;
}
/* 最初へ */
.pagination a.first {}
/* 最後へ */
.pagination a.last {}

/* Page x / y */
.pagination span.page_num {
    display: none;
}



/* ------------------------------
 #contact_book
------------------------------ */


#contact_book {
    width: 245px;
    position: fixed;
    bottom: 24px;
    left: -250px;
    z-index: 100;
    -webkit-transition: all .3s;
    transition: all .3s;
}

#contact_book:hover img{
	opacity: 1;
	transform: scale(1.15,1.15);
}

/* ------------------------------
 #sitemap
------------------------------ */

#sitemap{}


dl.sitemap_add{text-align: center;
	margin: 2em 0
}

dl.sitemap_add dt{margin-bottom: 10px}

.sitemap_list{
		display: flex;
		flex-wrap:wrap;
		justify-content: center;
		gap:2em
	}
  
.sitemap_list dl{flex: 1}
.sitemap_list dt{
	font-size: clamp(0.938rem, 0.915rem + 0.11vw, 1rem);
	font-weight: bold;
	padding-bottom: .5em;
	margin-bottom: .5em;
	border-bottom: solid 1px rgba(72, 46, 51, 0.6);
}
.sitemap_list dd{
	font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem)
}

@media screen and (max-width: 767px) {
	#sitemap{width: 90%;margin: 0 auto}
	.sitemap_list{}
	.sitemap_list dl{
		box-sizing: border-box;
	}
		
	/* 上段：A を横幅いっぱい */
	.sitemap_list dl.fnav_kibako {
	  flex: 0 0 100%;    /* 1行を全部使う */
	}
	
	/* 下段：B と C を2分割 */
	.sitemap_list dl.fvav_official,
	.sitemap_list dl.fvav_official {
	  flex: 1 1 calc(50% - 30px); /* 2カラム（gap 分少し引く） */
	}
	

}	


@media print, screen and (min-width: 768px) {
	
	
	.sitemap_list dl{margin: 0 0 30px 0;}
	
	.sitemap_list dl:nth-child( 4n ) {margin-right: 0;}
}	


@media print, screen and (min-width: 1025px) {
	dl.sitemap_add{padding: 5em 0 0;
		margin-bottom: 4em;
	}
	.sitemap_list{
		width: 90%;
	}
	.sitemap_list dl{
		margin: 0 0 50px 0;
	}

}	



/* ------------------------------
 footer
------------------------------ */

#footer{
	margin: 0 auto;
	text-align: center;
	position: relative;
	color: #f1eee7
}

.footer_cta{
	margin: 0 auto
}


.cta_form ul{}

/* .cta_form ul li{width: 48%} */
.cta_form ul li a{
	display: block;
	background: #fff;
	color: var(--color-main);
	padding: 1em 0;
	line-height: 1em;
	font-size: 1.1em;
	font-weight: bold
}

.cta_form ul li a:before{
	padding-right: 1em
}

.cta_form .to_ob{text-align: left;padding-top: .7em}
.cta_form .to_ob:before{
	font-family: icomoon;
	content: "\e977";
}

@media screen and (max-width: 768px) {
	#footer{padding: 5% 6% 55px;}
	.cta_daial{margin-bottom: 2em}
}	

@media print, screen and (min-width: 768px) {
	.footer_cta{width: 90%;padding: 3em 0 2em;}
}	

@media print, screen and (min-width: 769px) {

	.footer_cta{
	display: flex;
	justify-content: center;
	gap:20px;
	flex-wrap:wrap;
	align-items: center;}
	.cta_daial{width: 40%}
	.cta_form{min-width: 40%}
}	



@media print, screen and (min-width: 1200px){
	.cta_form{padding-left: 40px;}
	.cta_form ul li{}
}




.iemori119{}


.iemori119 dl{margin-bottom: 2em;}
.iemori119 dl dd{text-align: left;font-size: .9em}


.iemori119 ul{
	display: flex;
	flex-wrap:wrap;
	margin: 0 auto 1em;
	font-size: .9em;
}

.iemori119 ul li:not(:last-child):after{
	content: "｜"
}

@media screen and (max-width: 768px) {
	.iemori119 dl dt{text-align: center;margin: 2em auto 1em}
}

@media print, screen and (min-width: 667px) {
	.iemori119 dl{
		display: flex;
		justify-content: center;
		align-items: center;}
		
	.iemori119 dl dt{padding-right: 2em}
}

@media print, screen and (min-width: 1025px) {

	.iemori119 ul{max-width: 1000px;margin: 0 auto 2em;}

}	

.cr{
	padding: 1.5em;
	font-size: .8em;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, 0.6)
}




@media print{
	#footer{display: none}
}



/* ------------------------------
 Youtube
------------------------------ */	

.video-container {
   position: relative;
     padding-bottom: 56.25%;
     height: 0;}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}