@charset "utf-8";

.t-center { text-align: center; }
.t-left { text-align: left; }
.t-right { text-align: right; }

.t-asap { font-family: 'Asap', sans-serif; }
/*.t-fui { font-family: 'myfont'; }*/

.t-note:before { content:'※'; }

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

レイアウト

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* column ////////////////////////////////////////////////////////////////////////////////////////////*/
/*カラムレイアウト*/
.lay-column1 { width: 70%; margin: 0 auto; }
.lay-column2,
.lay-column-max2,
.lay-column3,
.lay-column4,
.lay-column6 { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; }

/*2カラム*/
.lay-column2 > *,
.lay-column-max2 > * { width: 48%; margin-bottom: 1rem; /*margin-bottom: 4%;  IE11でflexbox内で%指定の上下マージンが効かないよう…*/ }
.lay-column2 > *:nth-last-child(-n+2),
.lay-column2-max2 > *:nth-last-child(-n+2) { margin-bottom: 0; }


/*3カラム*/
.lay-column3 > * { width: 30%; margin-bottom: 2rem;/*margin-bottom: 2%; */ }

/*4カラム*/
.lay-column4 > * { width: 22%; margin-right: 2%; margin-bottom: 2rem;/*margin-bottom: 2%; */ }
.lay-column4 > *:last-child { margin-right: auto; }
.lay-column4 > *:nth-child(4n) { margin-right: 0; }

/*6カラム*/
.lay-column6 > * { width:15%; margin-bottom: 2rem;}

.LtoR { -webkit-flex-direction: row; flex-direction: row;}
.RtoL { -webkit-flex-direction: row-reverse; flex-direction: row-reverse;}

.caption{width:100%; text-align:left; font-size:0.85rem; line-height:1.5rem; margin-top:20px; display:block; padding-left:1.5em; position:relative;}
.caption::before{ content:"※"; position:absolute; left:0; top:0;}
.caption + .caption { margin-top: 5px; }

.box-center { display: flex; justify-content: center; align-items: center; }
.conts-img{ position:relative;}
.conts-img img{ width:100%; height:auto;}
@media screen and (max-width: 1000px) {
	.lay-column1 { width: 90%; }
}
@media screen and (max-width: 600px) {
	.lay-column1 { width: 100%; }
	
	.lay-column-max2 > * { width: 100%; }
	
	
	.lay-column3 > * { width: 48%; margin-bottom: 2rem;}
	.lay-column3 > *:first-child{ width:100%;}
	.lay-column3 > *:first-child img{ width:100%;}
	.lay-column3 > *:nth-last-child(-n+3) { margin-bottom: 4%; }
	
	/*4カラム*/
	.lay-column4 > * { width: 48%;  }
	.lay-column4 > *:nth-child(2n) { margin-right: 0; }


}

.box-container { margin-bottom: 100px; }
.box-container-s { margin-bottom: 50px; }



@media screen and (max-width: 1000px) {
	.box-container { margin-bottom: 10vw; }
	.box-container-s { margin-bottom: 5vw; }

}

/* ///////////////   SNSボタン   ///////////////////////*/
/*共通*/
.btn-sns { width: 2rem; height: 2rem; display: inline-block; fill: currentColor; }
.btn-sns svg { width: 100%; height: 100%; display: block; }
@media screen and (max-width: 1000px) {
	.btn-sns { width: 1.5rem; height: 1.5rem; }
}
@media screen and (max-width: 600px) {
	.btn-sns { width: 1rem; height: 1rem; }
}
/*button*/
.btn-round { text-align: center; line-height: 120%; padding: .6em 3em; border-radius: 2rem; display: inline-block; -ms-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }

a.btn-round.white,
.btn-round.white { color: #8BB220; background: #FFF; border: 2px solid #8BB220;}
a.btn-round.white:hover,
.btn-round.white:hover { color: #FFF; background: #8BB220; }

a.btn-round.brown,
.btn-round.brown { color: #FFF; background: #4D4012; border: 2px solid #4D4012;}
a.btn-round.brown:hover,
.btn-round.brown:hover { color: #4D4012; background: none;  }

a.btn-round.green,
.btn-round.green { color: #FFF; background: #8BB220; border: 2px solid #8BB220;}
a.btn-round.green:hover,
.btn-round.green:hover { color: #8BB220; background: #FFF; }


a.btn-round.white-brown,
.btn-round.white-brown { color: #4D4012; background: #FFF; border: 2px solid #4D4012;}
a.btn-round.white-brown:hover,
.btn-round.white-brown:hover { color: #FFF; background: #4D4012; }

/*more*/
.btn-more { text-decoration: underline; display: inline-block; -ms-transform: translateX(-.5rem); -webkit-transform: translateX(-.5rem); transform: translateX(-.5rem); -ms-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }
.btn-more:before { content: ''; width: .4em; height: .4em; display: inline-block; border-top: 1px solid; border-right: 1px solid; -ms-transform: translateY(-2px) rotate(45deg); -webkit-transform: translateY(-2px) rotate(45deg);transform: translateY(-2px) rotate(45deg); margin-right: .5em; -ms-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; opacity: 0; }
.btn-more:hover { -ms-transform: translateX(0); -webkit-transform: translateX(0);  transform: translateX(0); }
.btn-more:hover:before { opacity: 1; }

.btn-prev:before,
.btn-next:before { content:''; width: 1em; height: 1em; display: inline-block; vertical-align: middle; }

.btn-prev:before  { background: url(../img/arrowL.svg) no-repeat center center; background-size: 100% 100%; }
.btn-next:before   { background: url(../img/arrowR.svg) no-repeat center center; background-size: 100% 100%; }
.btn-next:after {-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.iconL { position: relative; padding-left: 1.5rem; }
.iconL:before { position: absolute; top: 0; left: 0; bottom: 0;  margin: auto; }

.iconR { position: relative; padding-right: 1.5rem; }
.iconR:before { position: absolute; top: 0; right: 0; bottom: 0; margin: auto; }

/*見出し*/

.title_lower_main {width: 90%;height: 3rem;text-align: center;margin: -4vw auto 6vw;}
.title_lower_main svg { fill: currentColor; display: inline-block; }

.title-std { font-size: 1.5rem; line-height: 150%; font-weight: bold; margin-bottom: 1em; }
.title-std svg { height: 1em; margin: 0 auto; }
.title-std span { font-size: .8rem; display: block; }

.title-std-s { font-size: 1.1rem; margin-bottom: 1em; font-weight: bold; }

.title-lounge {margin-bottom: 1.5em; }
.title-lounge svg { width: auto; height: 2rem; margin-bottom: .5rem; fill: currentColor; }
.title-lounge span { font-size: .8rem; display: block; line-height: 150%; font-family: 'Asap', sans-serif; }

.title-lounge.relax svg { width: 260px; }
.title-lounge.comic svg { width: 224px; }
.title-lounge.nostalgic svg {  width: 395px; }
.title-lounge.co-working svg {  width: 290px; }

.title-curtain { width: 4rem;  }

.title-icon { width: 80px; height: 80px; display: block; margin: 0 auto 1rem; }


@media screen and (max-width: 1000px) {
	.title_lower_main { height: 2rem; }
	.title-lounge { text-align: center;  }
	.title-lounge svg { height: 1rem; margin: 0 auto;}
	
	.title-curtain { width: 3rem;  }
	
	.deco-lead { padding: 0 10%; }
}
@media screen and (max-width: 600px) {
	.title-icon { width: 45px; height: 45px; display: block; margin: 0 auto 1rem; }
	.title_lower_main { height: 1.5rem; }
	
	.title-lounge svg { height: 1.5rem; }
	
	.title-std { font-size: 1.2rem; }
	
	.title-curtain { width: 8vw;  }

}

.link-arrow { display: inline-block;  position: relative;  }
.link-arrow:before { content:''; width: 1em; height: 1em; display: inline-block; margin-right: .5em; background: url(../img/arrowR.svg) no-repeat center center; background-size: 100% 100%;  vertical-align: middle;  }


.note:before { content:'※'; }

/* //////////////////////////////////////////////////////////////////////////////////////////

 list

 ////////////////////////////////////////////////////////////////////////////////////////////*/
/*ドット付きリスト*/
ul.list-dot > li { padding-left: 1em; text-indent: -1em; }
ul.list-dot > li:before { content:'・'; }

/*数字付きリスト*/
ol.list { counter-reset: listnum; }
ol.list > li { padding-left: 1.5em; }
ol.list > li::before { content: counter(listnum)'.'; counter-increment: listnum; width: 1.5rem; margin-left: -1.5rem; display: inline-block; }

/*チェックマーク付きリスト*/
ul.list-check > li { padding-left: 1.5em; position: relative; margin-bottom: .3em; }
ul.list-check > li:before { content:''; width: .3em; height: .6em; border-right: 1px solid; border-bottom: 1px solid; display: inline-block; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: .4em; top: .3em; margin: auto; z-index: 2; }
ul.list-check > li:after { content:''; width: 1em; height: 1em; border-radius: 1em; background: #EDF2F3; display: inline-block; position: absolute; top: .4em; left: 0; margin: auto; }
/*定義リスト(縦ならび)*/
dl.list-vertical { border-top: 1px solid #CCC; }
dl.list-vertical > dt { font-weight: bold; }
dl.list-vertical > dd { border-bottom: 1px solid #CCC; }

/*定義リスト(横ならび)*/
dl.list-horizontal { display: -webkit-flex; display: flex; flex-flow:row wrap; border-top: 1px solid #CCC; }
dl.list-horizontal > * { padding: 1em 0; border-bottom: 1px solid #CCC; }
dl.list-horizontal > dt { width: 20%; font-weight: bold; }
dl.list-horizontal > dd { width: 80%; padding-left: 5%; }

/*定義リスト(バーティカルバー区切り)*/
dl.list-vbar > * { display: inline; }
dl.list-vbar > dt{ position:relative; padding-right:1em;}
dl.list-vbar > dt:after { content:""; width:1px; height:100%; background:#000000; position:absolute; right:0; top:0; }
dl.list-vbar > dd{ padding-left:1em;}

/*定義リスト(バーティカルバー区切り)*/
dl.list-vbar2 { display: -webkit-flex; display: flex; flex-flow:row wrap; }
dl.list-vbar2 > * { display:inline-block; line-height: 1em; }
dl.list-vbar2 > dt{ position:relative; width:20%;}
dl.list-vbar2 > dt:after { content:""; width:1px; height:100%; background:#000000; position:absolute; right:0; top:0; }
dl.list-vbar2 > dd { width: 80%; padding-left: 5%; }

/*パンくずリスト*/
.breadcrumb > * { display: inline-block; }
.breadcrumb > * + *:before { content:''; width: .5em; height: .5em; display: inline-block; margin-right: .5em; border-top: 1px solid; border-right: 1px solid; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); vertical-align: middle; }


/*カテゴリーリスト*/
.list-cat { font-size: .8rem; text-align: center; margin-bottom: 4rem; }
.list-cat > li { display: inline-block;}
.list-cat > li + li { margin-left: 1rem; }
.list-cat > li a { width: 100%; height: 100%; line-height: 100%; padding: .5rem .8em; border: 1px solid transparent; display: block; -ms-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }
.list-cat > li a.select,
.list-cat > li a:hover { border-color: #113758; }
@media screen and (max-width: 1000px) {
	.list-cat { margin-bottom: 2rem; text-align: left; }
	.list-cat > li + li { margin-left: .5rem; }
}

.list-txt-img > li { margin-bottom: 100px; }
.list-txt-img .conts-txt { text-align: left; width: 43%; max-width: 480px; position:relative; }
.list-txt-img .conts-txt { margin: 0 auto 0 3.5%; }
.list-txt-img .RtoL .conts-txt { margin: 0 3.5% 0 auto; }

@media screen and (max-width: 900px) {
	.list-txt-img > li { margin-bottom: 50px; }
	.list-txt-img .lay-column2 > * { width: 100%; }
	.list-txt-img .conts-txt { margin:1rem auto 0; }
	.list-txt-img .RtoL .conts-txt { margin: 1rem auto 0; }


}

.pager { text-align: center; margin-top: 3rem; }
.pager > ul > li { width: 2.5rem; height: 2.5rem; display: inline-block; border: 1px solid; line-height: 2.5rem; text-align: center; }
.pager > ul > li + li { margin-left: .5rem; }
.pager > ul > li a,
.pager > ul > li span { width: 100%; height: 100%; display: block; -ms-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }
.pager > ul > li span.current,
.pager > ul > li a:hover { color: #FFF; background: #113758; }

.single-pager { width: 100%; position: relative; height: 2.5rem;;}
.single-pager > li { width: 2.5rem; height: 2.5rem; display: inline-block; border: 1px solid; line-height: 2.5rem; text-align: center; }
.single-pager > li.top { width: 12rem;position: absolute; top: 0; left: 0; right: 0; margin: auto; }
.single-pager > li.top a { padding: 0 1em; }

.single-pager > li.prev,
.single-pager > li.next { text-indent: 100%; overflow: hidden; white-space: norwap; position: absolute; margin: auto; }
.single-pager > li.prev { left: 0;  }
.single-pager > li.next { right: 0; }
.single-pager > li.prev a:before,
.single-pager > li.next a:before { content:''; width: .5rem; height: .5rem; display: block; border-style: solid; border-color: #113758; border-width: 1px 1px 0 0;position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; -ms-transition: all .3s; -webkit-transition: all .3s; transition: all .3s;}
.single-pager > li.prev a:before { -ms-transform: translateX(30%) rotate(-135deg); -webkit-transform: translateX(30%) rotate(-135deg); transform: translateX(30%) rotate(-135deg); }
.single-pager > li.next a:before { -ms-transform: translateX(-30%) rotate(45deg); -webkit-transform: translateX(-30%) rotate(45deg); transform: translateX(-30%) rotate(45deg); }


.single-pager > li a { width: 100%; height: 100%; display: block; -ms-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }
.single-pager > li a.active,
.single-pager > li a:hover { color: #FFF; background: #113758; }
.single-pager > li.prev a:hover:before,
.single-pager > li.next a:hover:before { border-color: #FFF; }


@media screen and (max-width: 600px) {
	dl.list-news > * { padding: .5em 0; border-bottom: none; }
	dl.list-news > dt { width: auto; }
	dl.list-news > dt + dd { width: auto; }
	dl.list-news > dd + dd { width: 100%; text-align: left; padding-top: 0; border-bottom: 1px solid #CCC; }
}

/*フロー*/
.list_flow { counter-reset: flownum; }
.list_flow li { display: block; position: relative; }
.list_flow li + li { margin-top: 3rem; }
.list_flow li:before { content:counter(flownum)'.'; counter-increment: flownum; }
.list_flow li + li:after { content:''; width: 0; height: 0; display: block; border-style: solid; border-width: 1rem .7rem 0; border-color: #CCC transparent transparent; position: absolute; top: 0; left: 0; right: 0; margin: -2rem auto 0; }


/* //////////////////////////////////////////////////////////////////////////////////////////

table

////////////////////////////////////////////////////////////////////////////////////////////*/
/*テーブル*/
table.tbl { width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 1px solid #4D4012; border-bottom: 1px solid #4D4012; margin-bottom:25px;  }
table.tbl tr + tr { border-top: 1px solid #4D4012;  }
table.tbl th,
table.tbl td { padding: 10px; }
table.tbl thead tr + tr { border-top: 1px solid #FFF; }
table.tbl thead th { color: #FFF; background: #4D4012; text-align: center; }
table.tbl thead th + th { border-left: 1px solid #FFF; }
table.tbl tbody th { background: rgba(77,64,18,.1); }
table.tbl tbody td { text-align: center; border-left: 1px solid #4D4012; }

@media screen and (max-width: 600px) {
	table.tbl { font-size: .9rem; }
	table.tbl td { padding: 5px; }
}