/*------全体共通------*/
body {
	color: #555555;
	font-size:16px;
	font-family:"游ゴシック体", "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	line-height:1.5;
	/* number のカウンタを 0 にセット */
	counter-reset: number 0;
}
a {
	color:inherit;
	text-decoration:none;
}
a:hover {
	opacity:0.7;
}

/*画像*/
img{
	margin:0;
	padding:0; 
	vertical-align:bottom; 
	max-width:100%; 
	height:auto;
	image-rendering: -webkit-optimize-contrast;
}


/*コンテンツ背景色*/
.bg_base{background:#f4f4f4;}

/*------全体共通end------*/
/*------レイアウト------*/
.content{
	width:90%;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	padding-top:clamp(30px, 4.4vw, 60px);/*60px~50pxの間で指定*/
	padding-bottom:clamp(30px, 4.4vw, 60px);/*60px~50pxの間で指定*/
}

/*カラム*/
.cards{
	display:flex;
	flex-wrap:wrap;
}

/*2カラム*/
.cards_col2{margin-bottom:-10px;}
.cards_col2 .cards_item{
	width:calc( (100% - 10px) / 2);
	margin-right:10px;
	margin-bottom:10px;
}
.cards_col2 > .cards_item:nth-of-type(2n){margin-right:0;}


/*3カラム*/
.cards_col3{margin-bottom:-40px;}
.cards_col3 .cards_item{
	width:calc( (100% - 60px) / 3);
	margin-right:30px;
	margin-bottom:40px;
}
.cards_col3 > .cards_item:nth-of-type(3n){margin-right:0;}


/*------レイアウト end------*/


/*------ヘッダ------*/
.header{
	background-color:#1a2937;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding-top:20px;
	padding-bottom:20px;
	z-index:3;
	transition:all .8s;
}
.header_inner{
	display:flex;
	justify-content:space-between;
	align-items:center;
}

/*ロゴ*/
.logo{
	line-height:1;
}
.header_logo{
	margin-left:20px;
	margin-right:20px;
}
.header_logo .logo{
	width:230px;
}

/* ナビゲーション */
.header_menu{
	margin-left:auto;
	margin-right:20px;
}
.header_nav{
	display:flex;
	align-items:center;
}
.header_nav > *{
	margin-right:40px;
}

.header_nav > *:last-child{
	margin-right:0;
}
.header_nav a{
	padding-top:10px;
	padding-bottom:10px;
    color: #ffffff;
    font-weight: bold;
}

/* ホバー時 */
.header_nav a:hover,
.header_nav a:focus{
opacity:inherit;
}

/* 下部のバー */
.header_nav a:after{
	content: '';
    display: block;
    width: 100%;
    height:2px;
    background-color:#ffffff;
    transform:scale(0,1) translateY(16px);
    transform-origin: left top;
    transition: transform .3s;
}

.header_nav a:hover:after,
.header_nav a:focus:after{
	transform:scale(1,1) translateY(16px);
}



/* ヘッダーお問い合わせ欄 */
.header_link{
	margin-left:auto;
	margin-right:20px;
}
.header_link_body{
	display:flex;
}

.header_link_body > *{
	margin-right:10px;
}
.header_link_body > *:last-child{
	margin-right:0;
}
.header_link_cta{
	justify-content:space-between;
	align-items:center;
	margin-bottom:10px;
}
.header_link_cta_sns >*{
	margin-right:10px;
}
.header_link_cta_sns img{
	vertical-align:middle;
}


.header_link_tel{
	font-size:1.3em;
    font-weight: 700;
    display: flex;
    align-items: center;
    color: #ffffff;
}
.header_link_tel .fa-phone-alt {
    margin: 0 5px 0 0;
}

.header_link_other >* {
	font-size: 14px;
    color: #ffffff;
    font-weight: bold;
	text-align:center;
    border-radius:18px;
    padding: .3em .8em;
	border:solid 1px rgba(255,255,255,.4);
}
/* スクロールされたときのスタイル */
.scroll-header{
	padding-top:5px;
	padding-bottom:5px;
}

/* スマートフォンナビゲーション */
/* PC時横並び */
.sp-menu{
	display: flex;
	align-items:center;
    width: 100%;
}
.hamburger-menu{
	/* PC時非表示 */
	display:none;
	margin-right:20px;
	padding:10px;
	text-align:center;
	background-color:#1a2937;
	z-index:3;
}
.hamburger-menu span,
.hamburger-menu span:before,
.hamburger-menu span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 30px;/*長さ*/
  border-radius: 3px;
  display: block;
  content: '';
  cursor: pointer;
  transition: all .3s;
  background:#ffffff;
}
.hamburger-menu span:before {
  bottom: -8px;
}
.hamburger-menu span:after {
  bottom: -16px;
}
/*「MENUテキスト」*/
.hamburger-menu-text{
  text-transform:uppercase;
  display:block;
  font-size:10px;
  margin-top:25px;
  line-height:1;
  color:#ffffff;
}


/* スマートフォンナビゲーション end */



/*------メイン------*/
.content_main{
	margin-bottom:60px;
}
.content_side{
	margin-bottom:60px;
}

/*------メインend------*/

/*トップへボタン*/
.to-top{
	position:fixed;
	right:20px;
	bottom:10%;
	width:80px;
	display:none;
	z-index:1;
}
.to-top a{
	display:block;
	background-color:#fff;
	border-radius:50%;
}
/*------フッター------*/
.sp_footer_body{display:none;}

.footer{
	border-top:solid 2px #9b322d;
}
.footer_inner{
	width:90%;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	padding-top:20px;
	padding-bottom:20px;
}
/* フッターナビゲーション */
.footer-menu{
	max-width:1050px;
}
.footer_nav{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
.footer_nav > * {
	margin-right:20px;
	margin-bottom:10px;
}
.footer_nav > * :last-child{
	margin-right:0;
}
.footer_nav a{
	font-size:1.125em;
	font-weight:bold;
}

/* 住所、ロゴなど */
.footer_address{
	text-align:center;
}
.footer_address >* {
	margin-bottom:5px;
	font-size:1.125em;
}
.footer_logo{
	margin-bottom:30px;
}
.footer_address .tel{
	font-size:1.3em;
	font-weight:bold;
}
.footer_sns_links{
	margin-top:20px;
	margin-bottom:20px;
}
.footer_sns_links >*{
	margin-right:15px;
}
.footer_sns_links >*:last-child{
	margin-right:0;
}

.footer_copyright{
	background: #e8e4d6;
    text-align: center;
}
/* コピーライト表記 */
.footer_copyright small,
.footer_copyright small a{
    color: #1a2937;
}

/*------フッター end------*/

/* 画面右のボタン */
.side-btn{
	position:fixed;
	right:0;
	top:20%;
	z-index:2;
}


.side-btns >*{
	-ms-writing-mode: tb-rl;
  	writing-mode: vertical-rl;
	margin-bottom:10px;
}
.side-btns > * :last-child{
	margin-bottom:0;
}
.side-btn a{
	display:block;
	padding:60px 15px 20px;
	color:#ffffff;
	font-weight:bold;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
	text-align:center;
	position:relative;
	line-height:1.2;
}
.side-btn a:before{
	display:inline-block;
	margin-bottom:10px;
	position:absolute;
	top:25px;
	left:50%;
	transform:translateX( -50% );
}

.side-btn .btn-event:before{
	content:url(../images/event02.png);
}

.side-btns .btn-pk:focus,
.side-btns .btn-pk:hover{
		background-color:#f75cbc;
		color:#ffffff;
		opacity:.7;
}

.side-btns .btn-bordeaux:focus,
.side-btns .btn-bordeaux:hover{
		background-color:#9b322d;
		color:#ffffff;
		opacity:.7;
}