@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap')
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap')


/* ============================================================================================
	variables
============================================================================================= */
*{
	--main-fonts: "Roboto","Kosugi Maru", sans-serif;
	--main-weight:400;
	--main-style:normal;
	--title-fonts:var(--main-fonts);
	--title-fonts:var(--main-weight);
	--title-fonts:var(--main-style);
}


/* =============================================================================================
	CSS reset
============================================================================================= */
* ,*:before ,*:after {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}
.bx-wrapper * {
}
html ,body ,div ,p ,iframe ,a ,img ,
span ,small ,i ,strong ,em ,
h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,
dl ,dt ,dd ,ol ,ul ,li ,
form ,label ,
table ,thead ,tbody ,tfoot ,tr ,th ,td ,
blockquote ,q ,pre ,
header ,footer ,nav ,article ,section ,aside {
	margin:0;
	padding:0;
	border:0 none;
	color:inherit;
	line-height:inherit;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	font-family:inherit;
	text-decoration:inherit;
}
button ,input ,textarea ,select {
	padding:0.3em;
	letter-spacing:1px;
}
input[type="submit"] ,button {
	padding:0.5em 2em;
}

html ,body {
	min-height:100%;
	height:100%;
}
a ,a:before ,a:after {
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
a:hover {
}

img {
	vertical-align:top;
	max-width:100%;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}

ol ,ul ,li {
	list-style:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}

/* =============================================================================================
	common
============================================================================================= */
.off {
	opacity:0;
}

/* ==============================================
	no display
=============================================== */

@media screen and (min-width:1000px) { 
	.dispSP {
		display:none !important;
	}
}
@media screen and (max-width:999px) { 
	.dispPC {
		display:none !important;
	}
}

.noDisp {
	display:none !important;
}

/* ==============================================
common SP
=============================================== */

@media screen and (max-width:999px){
	.tel-link-a{
		pointer-events: auto;
	}

	.sp-LR15 {
		padding-left:15px !important;
		padding-right:15px !important;
	}

	.sp-L15 {
		padding-left:15px !important;
	}
	
	.sp-R15 {
		padding-right:15px !important;
	}
}


/* ==============================================
	position
=============================================== */
.center {
	text-align:center;
}

/* =============================================================================================
	block layout
============================================================================================= */

/* ============================================================================================
	spotlight
============================================================================================= */
body #spotlight .header {
	height:60px;
}
body #spotlight .header div {
	width:80px;
	height:60px;
	font-size: 130%;
	opacity:0.7;
}
body #spotlight .header div.page {
	display:flex;
	align-items:center;
}
body #spotlight .icon {
	background-size:40px;
}

/* ==============================================
	title
=============================================== */
.titleBar {
	text-align:center;
	padding-bottom:3em;
	max-width: 1200px;
    margin: 0 auto;
}
.titleBar .flex {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	letter-spacing:0.05em;
	text-indent:0.05em;
	text-shadow: 1px 1px 0px #fa0, 0 0 5px #fb3, 0 0 5px #fb3;
	border-bottom: solid 1px #fc7;
    padding-bottom: 0.1em;
}
.titleBar .en {
	font-size:300%;
	line-height:1.2;
}
.titleBar .jp {
	font-size:180%;
}

.titleBar .en,
.titleBar .jp{
	font-family: "Merriweather","Noto Serif JP",serif;
	font-weight: 400;
	font-style: normal;
}

.titleImage {
	padding-bottom:3em;
	text-align:center;
}

@media screen and (max-width:999px){
	.titleBar {
		text-align:center;
		padding-bottom:2em;
		max-width: 1200px;
		margin: 0 auto;
		padding-left:15px !important;
		padding-right:15px !important;
	}

	.titleBar .en {
		font-size:250%;
	}
	.titleBar .jp {
		font-size:150%;
	}

}

/* ==============================================
	snsLink
=============================================== */
.snsLink {
	display:flex;
	justify-content:center;
	align-items:center;
}
.snsLink > * {
	padding:0 0.5em
}
.snsLink img {
	height:3em;
}


/* ==============================================
	pagetop button
=============================================== */
#pagetopButton {
	position:fixed;
	right:0.5em;
	bottom:0.5em;
}
#pagetopButton > .anchorLink {
	width:4em;
	aspect-ratio:1/1;
	display:flex;
	justify-content:center;
	align-items:center;
	cursor:pointer;
	background-color: rgb(102, 102, 102,0.8);
	border:1px solid #ccc;
}



/* =============================================================================================
	base layout
============================================================================================= */

/* ==============================================
	base
=============================================== */
body {
	font-size:16px;
	line-height:1.8;
	color:#fff;
	background:#000;
	font-family:var(--main-fonts);
	font-weight:var(--main-weight);
	font-style:var(--main-style);
}

.roboto-regular {
	font-family: "Roboto","Kosugi Maru",sans-serif;
	font-weight: 400;
	font-style: normal;
}
  
.roboto-bold {
	font-family: "Roboto","Kosugi Maru",sans-serif;
	font-weight: 700;
	font-style: normal;
}

.merriweather-regular {
	font-family: "Merriweather" ,"Noto Serif JP" ,serif;
	font-weight: 400;
	font-style: normal;
  }
  
.merriweather-bold {
	font-family: "Merriweather" ,"Noto Serif JP" ,serif;
	font-weight: 700;
	font-style: normal;
}

#bgLayer{
	width:100%;
	min-width:1200px;
	max-width:1920px;
	margin:0 auto;
	background: url(images/common/pattern_01.png);
	background-repeat: repeat;
	background-position: 50% 0;
}

section {
	padding:4em 0;
}

section:nth-child(even) {
	background-color: #1119;
}

.innerFrame {
	width:1200px;
	max-width:100%;
	margin:0 auto;
	padding:0 2em;
}
.innerFrame.w1000 {
	width:1000px;
}
.innerFrame.w800 {
	width:800px;
}

.innerFrame-nav {
	width: 100%;
	max-width:1600px;
	margin:0 auto;
}

@media screen and (max-width:999px) {
	
	#bgLayer{
		width:480px;
		min-width:480px;
		max-width:480px;
		margin:0 auto;
	}
	section {
		padding:2.5em 0;
	}
}

/* ==============================================
	header
=============================================== */
@media screen and (min-width:1000px) { 
	header {
		position:sticky;
		top:0;
		left:0;
		right:0;
		display:block;
		width:100%;
		background:rgba(0,0,0,0.8);
		border-bottom: 1px solid #666;
		z-index:100;
	}

	header .navList0-cover {
		position: relative;
		z-index: 10;
		background: rgba(0,0,0,0.5);
		border-bottom: 1px solid #666;
	}
	
	header .navList0{
		padding: 0.3em 1em;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	header .logo{
		width: 240px;
	}

	header .info{
		display: flex;
		justify-content: center;
		align-items:baseline;
	}

	header .time{
		font-size: 130%;
	}

	header .tel{
		font-size: 230%;
		padding-left: 0.5em;
	}

	header .navList {
		position:relative;
		max-width:1600px;
		margin:0 auto;
		padding-left:1px;
		display:flex;
		justify-content:center;
		align-items:center;
	}

	header .navList > li {
		flex-grow:1;
	}

	.navList .navCell {
		position:relative;
		flex-grow:1;
		padding-right:1px;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	.navList:before ,
	.navList .navCell:after {
		content:"";
		position:absolute;
		top:1em;
		bottom:1em;
		display:block;
		width:1px;
		background:#666;
	}
	.navList:before {
		left:0;
	}
	.navList .navCell:after {
		right:0;
	}

	.navList .aLink {
		width:100%;
		padding:0.5em 0.5em;
		line-height:1.4;
		color:#eee;
		display:flex;
		justify-content:center;
		align-items:center;
		flex-direction:column;
	}
	
	.navList > li.spIcon {
		display:none;
	}
	.navList .logo img {
		height:4em;
	}

	.navList .en {
		font-size:150%;
	}

	.aLink:after {
		content: "";
		position: absolute;
		bottom: 0.3em;
		left: 1em;
		right: 1em;
		display: block;
		height: 2px;
		background: linear-gradient(90deg,#fc63,#fc6f,#fc63);
		-webkit-transform: scaleX(0%);
		transform: scaleX(0%);
		transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
	}
	
	a.aLink:hover:after {
		-webkit-transform: scaleX(100%);
		transform: scaleX(100%);
	}
}

@media screen and (max-width:999px) {
	#headerFixedMenu {
		position:fixed;
		top:0;
		left:0;
		right:0;
		height:70px;
		display:block;
		z-index:99;
		background:rgba(0,0,0,0.8);
		border-bottom:1px solid #666;
	}
	#headerFixedMenu li.logo {
		position:fixed;
		top:5px;
		left:10px;
		display:block;
		width:180px;
		z-index:100;
	}

	#headerFixedMenu .spTel {
		position:fixed;
		top:10px;
		right:70px;
		display:block;
		width:50px;
		height:50px;
		border-radius:50%;
		overflow:hidden;
		z-index:100;
		cursor:pointer;
	}
	#headerFixedMenu .spTel a {
		position:relative;
		display:block;
		border-radius:50%;
		overflow:hidden;
	}
	#headerFixedMenu .spTel a:before {
		content:"";
		position:absolute;
		top:2px;
		bottom:2px;
		left:2px;
		right:2px;
		display:block;
		border-radius:50%;
		background:#fff;
	}
	#headerFixedMenu .spTel img {
		filter:brightness(0.25);
	}

	#headerFixedMenu .spMenu {
		position:fixed;
		top:10px;
		right:10px;
		display:block;
		width:50px;
		height:50px;
		background:#444;
		border-radius:50%;
		z-index:100;
		cursor:pointer;
	}
	#headerFixedMenu .spMenu span ,
	#headerFixedMenu .spMenu:before ,
	#headerFixedMenu .spMenu:after {
		position:absolute;
		top:calc(50% - 1px);
		left:20%;
		right:20%;
		display:block;
		height:2px;
		background:#fff;
		transition:all 0.3s ease;
		-webkit-transition:all 0.3s ease;
	}
	#headerFixedMenu .spMenu:before ,
	#headerFixedMenu .spMenu:after {
		content:"";
	}
	#headerFixedMenu .spMenu span {
	}
	#headerFixedMenu .spMenu:before {
		transform:translateY(-10px);
	}
	#headerFixedMenu .spMenu:after {
		transform:translateY(10px);
	}

	.menuOn #headerFixedMenu .spMenu span {
		opacity:0;
	}
	.menuOn #headerFixedMenu .spMenu:before {
		transform:rotate(45deg);
	}
	.menuOn #headerFixedMenu .spMenu:after {
		transform:rotate(-45deg);
	}


	body.menuOn {
		overflow:hidden;
    }

	#headerFixedMenu .navList {
		position:fixed;
		top:0;
		bottom:0;
		right:-110%;
		display:block;
		width:100%;
		height:100%;
		padding:100px 2em 0;
		z-index:98;
		background:rgba(0,0,0,0.8);
		transition:all 0.3s ease;
		-webkit-transition:all 0.3s ease;
	}
	.menuOn #headerFixedMenu .navList {
		right:0%;
	}

	#headerFixedMenu .navCell.id2 {
		border-top: 1px solid #999;
	}
	#headerFixedMenu .navCell {
		border-bottom:1px solid #999;
	}
	#headerFixedMenu .navCell a {
		padding:0.6em 1.2em;
		display:flex;
		align-items:baseline;
	}
	#headerFixedMenu .navCell .en {
		font-size:150%;
	}
	#headerFixedMenu .navCell .jp {
		padding-left:1em;
		font-size:90%;
	}
	#headerFixedMenu .navCell a:after {
		content:"";
		align-self:center;
		margin-left:auto;
		width:2em;
		height:2em;
		background:url(images/icons/arrow.png) 50% 50% no-repeat;
	}

	#headerFixedMenu .shopInfo {
		text-align:center;
	}
}

/* ===============================================================
	main
================================================================== */


/* ==============================================
	footer
=============================================== */
footer {
	padding:1em 0;
	background-color: rgb(102, 102, 102,0.8);
	box-shadow:0 -1px 0.3em #ccc;
	text-align:center;
}

.shopInfo .flex {
	display: flex;
	justify-content: center;
	align-items:center;
}
.shopInfo .flex > * {
	padding: 0 1em;
}
.shopInfo .logo img {
	height: 130px;
}
.shopInfo .snsLink {
	padding: 0.5em 0 1em;
}

#copyright {
	font-size:80%;
}

@media screen and (max-width:999px) { 
	.shopInfo .flex {
		justify-content:space-evenly
	}
	.shopInfo .flex > * {
		padding: 0 ;
	}
	.shopInfo .flex > .logo {
		padding: 1.5em 0;
	}
	.shopInfo .logo img {
		height: 90px;
	}
	footer .info {
		white-space:nowrap;
	}

}


/* =============================================================================================
contents layout
============================================================================================= */


/* ==============================================
fv
=============================================== */
section#fv {
	padding:0;
	max-width:100%;
}
section#fv .flex{
	display:flex;
	justify-content:center;
	overflow:hidden;
}
section#fv .fv-image{
	width: 1920px;
	max-width: none;
	object-fit: cover;
}

@media screen and (max-width:999px) { 
	section#fv {
		padding-top:70px;
	}
	section#fv .fv-image{
		width:100%;
	}
}

/* ==============================================
concept
=============================================== */
.conceptText .caption {
	text-align: center;
	font-size: 150%;
}

.conceptText .contents-outer{
	margin: 0 auto;
	width: 1000px;
}

.conceptText .contents-wrapper {
    padding-top: 6em;
}

.conceptText .contents-cover {
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: 38% auto;
    width: 100%;
}

.conceptText .contents-wrapper:nth-child(1) .contents-cover {
    background-image: url(images/common/concept1.webp);
}

.conceptText .contents-wrapper:nth-child(2) .contents-cover {
    background-image: url(images/common/concept2.webp);
}

.conceptText .contents-wrapper:nth-child(3) .contents-cover {
    background-image: url(images/common/concept3.webp);
}

.conceptText .contents {
    width: 65%;
    padding-bottom: 1em;
    margin-left: auto;
}

.conceptText .circle {
    padding: 0.5em 0.3em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom:1px solid #999;
}

.conceptText .circle1 {
	display: block;
    width: 1em;
    height: 1em;
    margin: 0 2px;
    border-radius: 50%;
    border: 2px solid #ccc;
}

.conceptText .circle2 {
	font-size: 150%;
	line-height: 1;
}

.conceptText .text-cover{
	padding-top:0.3em;
}

.conceptText .text {
    color: #fff;
    padding: 0.5em 1em;
    margin: 0;
	line-height: 1.6;
    background: rgb(0, 0, 0,0.7);
}

.conceptText .contents-wrapper:nth-child(2n) .contents {
	margin-left: 0;
    margin-right: auto;
}

.conceptText .contents-wrapper:nth-child(2n) .circle {
    justify-content: flex-start;
}

.conceptText .contents-wrapper:nth-child(2n) .contents-cover {
    background-position: 100% 0;
}

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

	.conceptText .caption {
		text-align: center;
		font-size: 130%;
	}

	.conceptText .contents-outer{
		width: auto;
	}

	.conceptText .contents-wrapper {
		padding-top: 3em;
	}

	.conceptText .contents-cover {
	    background-position: 100% 100% !important;
		background-size: 50% auto !important;
	}

	.conceptText .contents {
		margin: auto !important;
		width: 100%;
	}
	.conceptText .circle {
		justify-content:flex-start;
	}
	.conceptText .circle2 {
		font-size: 130%;
	}

	.conceptText .text-cover {
		padding-top: 0.5em;
	}

	.conceptText .text {
		font-size: 90%;
	}
}


/* ==============================================
concept renewal
=============================================== */
#concept {
	font-family:"Noto Serif JP",serif;
}
.conceptText .caption-cover{
	padding-bottom:3em;
}
.concept-flex-cover {
	background:url(images/common/1200_650_2.jpg) 0 0 no-repeat;
}
.concept-flex {
	padding:3em 8em 0 4em;
	display:flex;
	justify-content:flex-end;
	background:url(images/common/txt_concept2b.png) 15% 70% no-repeat;
	background-size:30%;
}
.concept-flex > .concept-flex-text {
	margin-top:2em;
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	flex-direction:column;
}
.concept-flex > .concept-flex-text .text {
	font-size:120%;
	white-space:nowrap;
	box-shadow:-1px 1px 3px #cba;
}
.concept-flex > .concept-flex-text .text.text-B {
	margin-top:1.5em;
}
.concept-flex-cover .shop-name {
	text-align:right;
}
@media screen and (max-width:999px) {
	#concept .innerFrame {
		padding:0;
	}

	.concept-flex-cover {
		background-size:cover;
	}
	.concept-flex {
		padding:15em 1em 0;
		background-position:80% 1em;
		background-size:60%;
	}
	.concept-flex > .concept-flex-text .text {
		padding:0.5em;
		max-width:100%;
		font-size:100%;
	}
	.concept-flex > .concept-flex-text .text.text-B {
		margin-top:1.5em;
		white-space:normal;
	}

}


/* ==============================================
system
=============================================== */

.systemList-cover{
	display:flex;
}

.systemList {
	text-align:center;
	--text-color:#fff;
	--border-color:#999;
	display: flex;
}

.systemList .contents-l,
.systemList .contents-r {
	padding:0 2em 2em;
	width: 50%;
	
}
.systemList .contents-l ul{
	padding:0.5em 1em;
}
#system .systemList .contents-l ul{
	border:1px solid #ccc;
	border-radius:1em;
}
.systemList .contents-l ul + ul{
	margin-top:2em;
}
.systemList .contents-r {
	display: flex;
	justify-content: center;
	align-items: center;
}

.systemList .c2 {
	--text-color:#fc6;
	--border-color:#c93;
}

.systemList li {
	color:var(--text-color);
}
.systemList .body + .head {
	padding-top:1em;
}

.systemList .head {
	font-size:160%;
	border-bottom:1px solid var(--border-color);
}
.systemList .sub {
	padding-top:0.5em;
	font-size:150%;
}
.systemList .body {
	padding-top:0.5em;
	display:flex;
	justify-content:center;
	align-items: center;
	flex-wrap:wrap;
}

.systemList .body > * {
	width:50%;
	padding:0 1em;
	font-size:140%;
	text-align:center;
}

.systemList .text1{
	font-size: 140%;
}

.systemList .text2-cover{
	padding-top: 1em;
}

.systemList .text2{
	font-size: 120%;
}

.systemList .text3{
	font-size: 100%;
}
.text4{
	color:#eee;
	text-align:center;
}
ul .text4{
	font-size:140%;
}

@media screen and (max-width:999px) {
	.systemList {
		flex-direction: column;
	}

	.systemList .contents-l,
	.systemList .contents-r {
		padding:0;
		width: 100%;
	}
	#system .systemList .contents-l{
		padding-bottom: 2em;
	}

	.systemList .contents-r {
		padding-top: 1.5em;
	}

}

/* ==============================================
menu list
=============================================== */
#menu .systemList ul {
	font-size:75%;
}

.menuList {
	text-align:center;
}

.menuList .contents-cover{
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.menuList .contents{
	padding:0 1em;
	width: 50%;
}
.menuList .img-cover{
	padding:0 2em;
}
.menuList .text-cover{
	border: 1px solid #ccc;
	background: rgb(0, 0, 0, 0.85);
	box-shadow: 0px 0px 10px #fff;
	border-radius: 10px;
	padding: 1em 0;
}

.menuList p span {
	padding:0 0.5em;
	white-space:nowrap;
}

.menuList .table-cover{
	padding-top: 1em;
}

.menuList table{
	width: 100%;
	font-size:120%;
	font-family:'Noto Serif JP',serif;
}

.menuList th,
.menuListl td{
	vertical-align: middle;
	width: 50%;	
}

.menuList th > div,
.menuList td > div{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	line-height: 1.3;
}

.menuList th > div{
	padding: 1em 0;
	color: #fff;
	font-size: 150%;
}

.menuList td > div{
	min-height: 135px;
	font-size: 130%;
}

@media screen and (max-width:999px){
	.menuList {
		font-size:130%;
	}

	.menuList .contents-cover {
		flex-direction: column-reverse;
	}

	.menuList .contents {
		padding: 0 1em;
		width: 100%;
	}

	.menuList .table-cover{
		padding-top: 0;
	}

	.menuList table{
		font-size: 100%;
	}

	.menuList th > div {
		font-size: 120%;
	}

	.menuList td > div{
		min-height: 70px;
	}

	.menuList .img-cover {
		padding: 1em 1em 0;
	}
}

/* ==============================================
　sns instagram
=============================================== */

.instagram{
	padding-top: 2em;
}

.instagram{
	width: 750px;
}

.instagram-a-cover{
	padding: 0.1em;
}

.instagram-a-cover a > img{
	width: 250px;
	aspect-ratio:1 / 1;
	object-fit:cover;
}

@media screen and (max-width:799px){
	.contents {
		flex-direction: column;
	}

	.instagram{
		width: auto;
	}
}

/* ==============================================
	access map
=============================================== */
#access iframe {
	width:100%;
	max-height:60vh;
}

/* ==============================================
shop table
=============================================== */

.information-contents .contents-cover{
	display: flex;
	justify-content: center;
	align-items:center;
	flex-direction: row-reverse;
}

.information-contents .contents{
	width: 50%;
}

.information-contents .shopTable {
	margin:0 auto;
	font-size:130%;
}

.information-contents .shopTable th {
	padding:0.3em 0.5em;
	text-align:right;
	vertical-align:top;
}

.information-contents .shopTable td {
	padding:0.3em 0.5em;
}

.information-contents .gallery-outer{
	padding-top: 4em;
}

.information-contents .gallery-text {
    text-align: center;
	font-size: 200%;
	font-weight: bold;
	font-family:'Noto Serif JP',serif;
}

.information-contents .gallery-wrapper{
	padding-top: 0.5em;
	display: flex;
	justify-content: center;
	align-items: center;
}

.information-contents .gallery-cover{
	padding: 0 0.5em;
}

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

	.information-contents .shopTable {
		font-size: 130%;
	}

	.information-contents .contents-cover {
		flex-direction: column;
	}

	.information-contents .contents {
		width: 100%;
	}

	.information-contents .gallery-wrapper{
		flex-wrap:wrap;
	}

	.information-contents .gallery-cover {
		padding: 0.5em;
		width: 50%;
	}
}

/* ==============================================
	contact
=============================================== */

.contactList {
	padding-top:2em;
	display:flex;
	justify-content:center;
	align-items:center;
}

.contactList > .contactButton {
	padding:0 1em;
}
.contactButton a {
	position:relative;
	width:29em;
	max-width:100%;
	height:7em;
	padding:0.5em 1em;
	display:flex;
	justify-content:center;
	align-items:center;
}
.contactButton a > * {
	position:relative;
	z-index:2;
}
.contactButton a > .icon {
	padding-right:2em;
}
.contactButton a > .icon img {
	width:4.5em;
	aspect-ratio:1/1;
	border-radius:0.5em;
}
.contactButton a > .text {
	font-size:120%;
	line-height:1.4;
}
.contactButton a > .text em {
	font-size:180%;
	line-height:1.2;
}

.contactButton a:before {
	content:"";
	position:absolute;
	z-index:1;
	bottom:50%;
	left:0;
	right:0;
	display:block;
	width:100%;
	height:0%;
}

.contactButton a.line:before {
	background-color:#00902f;
}

.contactButton a.tel:before {
	background-color:#d8490d;
}

.contactButton a:hover:before {
	bottom:0%;
	height:100%;
}

.contactButton a.line{
	background-color: #03c757;
}

.contactButton a.tel{
	background-color:#c90;
}

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

	.contactList {
		flex-direction: column;
	}

	.tel-line-cover.flex {
		flex-direction: column;
	}

	.line-cover{
		padding:1.5em 0 0;
	}

	.tel:active,
	.line:active{
		transform: translateY(8px);
	}

	.tel:active {
		box-shadow: 0 0 0 0 #d8490d;
	}

	.line:active {
		box-shadow:0 0 0 0 #06aa49;
	}

	.contactButton + .contactButton {
		padding-top:2em;
	}
	.contactButton a {
		width:100%;
	}
}

/* ==============================================
faq news list
=============================================== */

.faqList li:not(:last-child) {
	padding-bottom:3em;
}

.faqList .q {
	font-size:180%;
	padding:0 0.5em 0.1em;
	background:#333;
}
.faqList .q p {
	display:flex;
	justify-content:flex-start;
	align-items:center;
	line-height:1.3;
}
.faqList .q .number{
	color:#ff9;
	font-size:180%;
	line-height:1;
	padding-right:0.2em;
}
.faqList .q .date{
	color:#ff9;
	line-height:1;
	padding-right:0.2em;
}

.faqList .a {
	padding:1.5em;
	font-size:150%;
}

#news .faqList li:not(:last-child) {
	padding-bottom:0.2em;
}
#news .faqList .q {
	font-size:130%;
	padding:0.4em 0.8em 0.3em;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	cursor:pointer;
}
#news .faqList .q p {
	flex-direction:column;
	align-items:flex-start;
}
#news .faqList .q .number {
	font-size:80%;
	padding-bottom:0.2em;
}
#news .faqList .toggle {
	margin-left:auto;
	font-size:60%;
}

#news .faqList .a {
	display:none;
	width:100% !important;
	padding:1em;
	padding-left:1em !important;
	padding-right:1em !important;
	font-size:110%;
}

#news .q .toggle {
	white-space:nowrap;
}
#news .q:not(.open) .toggle > :nth-child(2) {
	display:none;
}
#news .q.open .toggle > :nth-child(1) {
	display:none;
}

@media screen and (max-width:999px){
	#news .faqList .q {
		font-size:120%;
	}
	#news .faqList .a {
		font-size:100%;
	}
}