@charset "utf-8";
/* CSS Document */

body, div, iframe, img {
	max-width: 100%;
}

body {
	padding: 90px 0 30px; /* ヘッダーの後ろに要素が隠れないようにするため */
}
body > .wrapper > * {
  max-width: 1200px;
  margin: 0 auto;
}

@media only screen and (max-width: 1199px) {
	body > .wrapper > * {
	max-width:100%;
	margin: 0 auto;
	}
}	
		
body > .hd-body > * {
  max-width: 1200px;
  margin: 0 auto;
}

* {
  box-sizing: border-box;
}

a{
	text-decoration:  none !important;
	transition: all 0.3s;
}

a:link{
    color:inherit;
}

a:visited{
    color:inherit;
}

a:hover{
    color:inherit;
}


*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

/*PC・タブレット用*/
.wrapper{
	width: 1200px;
	margin:0 auto;
	box-sizing: content-box;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	font-size:16px;
	color:#464646;
	font-feature-settings: "palt";
	letter-spacing:0.05em;
	line-height:1.5;
}
	
/*スマホ用*/
@media screen and (max-width: 768px) {
	.wrapper{
		max-width:100%;
		padding: 0 5px 0 5px;
		font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
		font-size: 15px;
		letter-spacing:0.5px; 
		line-height:1.5em;
		min-height: 100vh;
		position: relative;/*←相対位置*/
		box-sizing: border-box;/*←全て含めてmin-height:100vhに*/	
	}	
}


/* ==============================
ヘッダー
============================== */

header{
	display:flex;
	justify-content:space-between;
	position: fixed; /* ウィンドウを基準に画面に固定 */
	box-sizing: border-box; /* padding分を含んで幅を100%にするため */
	top: 0; /* 上下の固定位置を上から0pxにする */
	width:1200px;
	max-width:100%;
	margin:0 auto;
	background-color:#fff;
	z-index:5000;
}

#logo {
width:260px;
height:30px;
display:flex;
align-items:center;
justify-content:space-between;
margin:0 auto;
}

@media screen and (min-width: 768px) {
#logo {
padding:0 0 0 10px;
}
}

#logo .r-logo{
width:24px;
}

#logo .albiot-logo{
width:220px;
}

nav{
width: 100%;
max-width:1200px;
height: 80px;
position: relative;
background: #fff;
align-items: center;
margin: 0 auto;
}

.drawer{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
height: 70px;
}

/*ナビゲーション部分*/

.menu ul li a {
font-size: 14px;
font-family: "century gothic", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
color: #464646;
line-height: 2;
letter-spacing: 0.1em;
text-decoration:none;
}


.menu ul li a:hover{
color:#969696;
}

.menu ul li .logo{
    width: 24px;
    height: 24px;
}
.menu{
	position:fixed;
	overflow-y: auto;
	height: 100%;
	width: 85%;
	padding: 0 10px 80px 10px;
	text-align:center;
	background-color:#fff;
transition: .5s ease;/*滑らかに表示*/
-webkit-transform: translateX(-105%);
	transform: translateX(-105%);/*左に隠しておく*/
	z-index:10000;
}

.menu .banner{
	width:100%;
	margin:10px 0 0;
	padding:0 5px;
}

.hd-form{
	position:relative;
	width:85%;
    max-width:460px;
    height:35px;
    font-size:16px;
    font-weight:bold;
    letter-spacing:0.2em;
    color:#bbbbbb;
    box-sizing: border-box;
}
.src-icon {
    position: absolute;
    right: 5px;
    width: 30px;
    height: 30px;
    margin: 2px 0 2px 0;
}

@media screen and (max-width: 768px) {
	.src-icon{
    right: 20px;
	}	
}

/*OPEN時の動き*/
.menu.open {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
}

/*トグルボタンのスタイルを指定*/
.Toggle {
display: block;
position: fixed;    /* bodyに対しての絶対位置指定 */
width: 28px;
height: 28px;
cursor: pointer;
z-index: 3;
left:15px;
}
 
.Toggle span {
display: block;
position: absolute;
width: 28px;
border-bottom: solid 2px #333;
-webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
-moz-transition: .35s ease-in-out;    /*変化の速度を指定*/
transition: .35s ease-in-out;     /*変化の速度を指定*/
}
 
.Toggle span:nth-child(1) {
top:4px;
}
 
.Toggle span:nth-child(2) {
top: 12px;
}
 
.Toggle span:nth-child(3) {
top: 20px;
}

.Toggle.active span:nth-child(1) {
top: 14px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
top: 14px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}


@media screen and (min-width: 769px) {
header::after{
display:none;
} 
nav{
display: flex;
border-bottom:solid 1px #f9f9f9;
witdh:100%;
}
.Toggle{
display: none;
}
.menu{
width: 100%;
background-color: transparent;
margin-top:0;
-webkit-transform: translateX(0);
transform: translateX(0);
position:relative;
padding:0 20px 0 0;
}
.menu ul{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.menu ul li a{
padding: 0 1em;
border-bottom: none;
}
.menu ul li a:hover
{
background-color:transparent;
}
}

.hd-sp input.textArea {
	box-sizing: border-box;
	color: #111111;
	background-color: #fff;
	width: 100%;
	height: 32px;
	border: 1px #969696 solid;
	padding-left: 0.5em;
	padding-top: 1px;
	position: relative;
}
.hd-pc .search-btn {
	position: absolute;
	width: 24px;
	height: 24px;
	background: url(https://shopping.geocities.jp/albiot-shop/images/header/h-search.jpg);
	background-size: cover;
	right: 4px;
	top: 4px;
	z-index: 3;
}
.hd-sp .search-btn {
	position: absolute;
	width: 24px;
	height: 24px;
	background: url(https://shopping.geocities.jp/albiot-shop/images/header/h-search.jpg);
	background-size: cover;
	right: 12px;
	top: 18px;
	z-index: 3;
}

.cateblock {
	display: flex;
	justify-content:flex-start;
	align-items: center;
	width: 100%;
	height: 60px;
	color: #464646;
	background-color: #fff;
	font-size: 16px;
	letter-spacing: 0.1em;
	vertical-align: middle;
	border-top: solid 1px #969696;
	border-collapse: collapse;
}
.navi-wrapper.left-navi .menu-block .cateblock {
	display: flex;
	align-items: center;
	width: 100%;
	height: 60px;
	color: #464646;
	background-color: #fff;
	font-size: 16px;
	letter-spacing: 0.1em;
	vertical-align: middle;
	border-top: solid 1px #969696;
	border-collapse: collapse;
}

.cate-icon{
	width: 60px;
	height: auto;
	margin: 0 auto;
	padding: 12px;
	vertical-align: middle;
}
.cate-title {
	margin: 0 auto;
	padding: 22px 0 20px 0;
	letter-spacing: 0.2em;
	vertical-align: middle;
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
	.pc { display: none !important; }
	.tab { display: none !important; }
    .sp { display: block !important; }

/* タブレットで見たときは"tab"のclassがついた画像が表示される */
@media only screen and (min-width: 769px) {
	.pc { display: none !important; }
	.tab { display: block !important; }
    .sp { display: none !important; }
}

/* PCで見たときは"pc"のclassがついた画像が表示される */
@media only screen and (min-width: 1081px) {
	.pc { display: block !important; }
	.tab { display: none !important; }
    .sp { display: none !important; }
}
}

pc-sp{
	display:block;
}
@media only screen and (min-width: 1081px) {
	pc-sp{
		display:none;
	}
}
@media only screen and (min-width: 769px) {
	pc-sp{
		display:block;
	}
}

/* ヘッダー用設定 */
.hd-pc { display: none !important; }
.hd-tab { display: none !important; }
.hd-sp { display: block !important; }

/* タブレットで見たときは"hd-sp"のclassがついた画像が表示される */
@media only screen and (min-width: 769px) {
	.hd-pc { display: block !important; }
    .hd-sp { display: none !important; }
}

/* トップページ・フッター用設定 */
.ft-pc { display: none !important; }
.ft-tab { display: none !important; }
.ft-sp { display: block !important; }

/* タブレットで見たときは"ft-sp"のclassがついた画像が表示される */
@media only screen and (min-width: 769px) {
	.ft-pc { display: block !important; }
    .ft-sp { display: none !important; }
}


body > .wrapper > * {
  max-width: 1200px;
  margin: 0 auto;
}

@media only screen and (max-width: 1199px) {
	body > .wrapper > * {
	max-width:100%;
	margin: 0 auto;
	}
}	
		
body > .hd-body > * {
  max-width: 1200px;
  margin: 0 auto;
}


* {
  box-sizing: border-box;
}

a{
	text-decoration:  none !important;
	transition: all 0.3s;
}

a:link{
    color:inherit;
}

a:visited{
    color:inherit;
}

a:hover{
    color:inherit;
}


*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}


.fb{
    display:flex;
    width: 100%;
    height:auto;
    justify-content:space-between;
}

/*---------------------------------
header
---------------------------------*/
/* Normal header style */
.header_bg {
  background: #fff;
  width: 100%;
  height: 80px;
}

.header_contents {
  width: 100%;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header_contents h1 {
  margin: 0 0 0 20px;
}
.header_nav_lists {
  display: flex;
}

.header_nav_lists li {
  margin: 0 40px 0 0;
}

.nav_link {
	font-size: 14px;
	font-family: "century gothic", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	color:#6e6e6e;
	line-height:2;
	letter-spacing:0.1em;
}
/* Responsive menu button */
.responsive_btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 40px 0 0;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.menu_line {
  background: #969696;
  border-radius: 5px;
  width: 100%;
  height: 5px;
  margin: 4px 0;
}
/* Responsive style */
@media screen and (max-width: 768px) {
  .responsive_btn {
    display: flex;
  }

  .header_bg {
    position: relative;
  }

  .header_nav {
    background: #fff;
    width: 100%;
    height: 100vh;
    padding: 80px 0 0 0;
    position: fixed;
    top: 0;
    right: -100%;
    transition: .5s;
  }

  .header_nav_lists {
    display: block;
    text-align: center;
  }

  .header_nav_lists li {
    margin: 0 0 40px;
    text-align: center;
  }

  .nav_link {
    font-size: 20px;
  }
}
/* js function "menuToggle" starting only */
.menu_active {
  right: 0;
}



/* ==============================
レフトナビ
============================== */

#sidebar {
	width: 250px;
	float: left;
	box-sizing: content-box;
}

/*スマホ用*/
@media screen and (max-width: 479px) {
	#sidebar {
		display:none;
	}
}
	
/* clearfix */
.clearfix:after {
  clear: both;
  content: '';
  display: block;
}	

/*　ホバー　*/
.hover-exp {
  transition: all 0.6s ease 0s;
}
.hover-exp:hover {
  cursor: pointer;
  transform: scale(1.3, 1.3); /*画像を拡大表示*/
}




/* ==============================
トップへ戻るボタン
============================== */
@media ( min-width : 800px ){
	#pagetop {
    position: fixed;
    bottom: 65px;
    right: 65px;
    z-index:3000;
	}
}	

@media ( max-width : 799px ){
	#pagetop {
    position: fixed;
    bottom: 55px;
    right: 55px;
    z-index:3000;
	}
}	

@media ( max-width : 449px ){
	#pagetop {
    position: fixed;
    bottom: 30px;
    right: 20px;
    z-index:3000;
	}
}	

/* ==============================
重要なお知らせ
============================== */

.info-wrapper{
    width:100%;
    height:auto;
}


@media screen and (max-width: 1081px) {
.cl-info-container{
    min-width:1080px; 
	font-size:13px;
	}
}

@media screen and (max-width: 1025px) {
.cl-info-container{
    min-width:1024px; 
	font-size:13px;
	}
}

@media screen and (max-width: 835px) {
.cl-info-container{
    min-width:834px; 
	font-size:12px;
	}
}

@media screen and (max-width: 811px) {
.cl-info-container{
    min-width:810px; 
	font-size:12px;
	}
}

@media screen and (max-width: 769px) {
.cl-info-container{
    min-width:768px; 
	font-size:12px;
	}
}


.cl-info-content{
	grid-column: 1/2;
	width: 780px;
	height:70px;
    box-sizing: border-box;
    border: solid 1px #c80000;
	background-color:#ffffff;
	color:#c80000;
	padding: 22.5px 10px 22.5px 20px;
}	

.txac {
    display:inline-block;
}

.cl-info-content a:hover {
	color:#ffaabb;
	font-weight:bold;
}

.cl-info-title{
	grid-column: 2/3;
	width:420px;
	margin:auto;
}	


/* 重要なお知らせ */
.info-container{
	max-width: 1200px;
	width:100%;
	height:70px;
    display: flex;
    justify-content: space-between;
	vertical-align:middle;
	align-items:center;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	line-height:1.2;
	background: #fff;
	color: #fff;
    box-sizing: border-box;
    border: solid 1px #464646;
}			

.info-title{
	width:250px;
	padding: 0 30px 0 30px;
	margin:auto;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	letter-spacing:0.2em;
	color:#464646;
	border-right: 1px solid #464646;
	line-height: 68px;
	display:flex;
	align-items: center;
}	

.info-content{
	width: 940px;
	height:70px;
    box-sizing: border-box;
	margin:auto;
	font-size:14px;
	letter-spacing:0.1em;
	line-height:2;
	color:#1e1e1e;
	padding: 0 30px 0 20px;
	display:flex;
	align-items: center;
}	


@media screen and (max-width: 579px) {
.info-container{
	max-width: 579px;
	width:100%;
	}	
}
@media screen and (max-width: 579px) {
.info-title{
	width:30%;
	max-width:200px;
	padding: 0 10px;
	margin:auto;
	text-align:center;
	font-size:13px;
	letter-spacing:0.1em;
	line-height:2;
	}	
}	

@media screen and (max-width: 579px) {
	.info-content{
	width: 70%;
	font-size:13px;
	line-height:1.8;
	letter-spacing:0.1em;
	padding: 0 20px 0 10px;
	}	
}

.info-content a:hover {
	color:#464646;
	font-weight:bold;
}



.wrapper-content{
	width: 900px;
	margin-left:20px;
	float: right;
	box-sizing: content-box;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	font-size:12px;
	font-feature-settings: "palt";
	line-height:1.5;
}		
		
	
#sidebar {
	width: 230px;
	float: left;
	box-sizing: content-box;
}
	
/* clearfix */
.clearfix:after {
  clear: both;
  content: '';
  display: block;
}	
	

/* ==============================
タイトル
============================== */
.titlebn{
    width:100%;
	height:30px;
	display:flex;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items: center;
	border-bottom: solid #c2c2c2 1px;
}

.titlebn-l{
	width:78%;
    font-size:16px;
    letter-spacing:0.2em;
}
@media screen and (max-width: 768px) {
.titlebn-l{
    font-size:13px;
    letter-spacing:0.2em;
	margin:0 0 0 10px;
	}
}
.titlebn-r{
	width:20%;
    font-family:Century Gothic;
    font-size:14px;
    text-align:right;
}
@media screen and (max-width: 768px) {
.titlebn-r{
    font-family:Century Gothic;
    font-size:12px;
		text-align:right;
		margin:0 10px 0 0;
	}
}
.titlebn-line{
    margin:10px 0 30px 0;
    border-bottom: solid #c2c2c2 1px;
}

/* タイトル */
.title {
	display: flex;
	align-items: center;
	padding: 0 55px;
	font-variant-ligatures: none;
	letter-spacing: 1.5em;
	font-size: 26px;  
}

.title:before, .title:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #444;
	display: block;
}

.title:before {
	margin-right: .4em;
}
.title:after {
	margin-left: .4em;
}




/* 新着情報 */

.new-item {
	width:100%;
	font-size:14px;
	line-height: 1.5;
	color: #464646;
	margin-bottom: 5px;
	vertical-align: middle;
}		

.new-item .date {
	width: 10%;
}

.new-item .name {
	width: 80%;
	letter-spacing:0.2em;
	line-height:1.5;
	padding-left:20px;	
}


.new-item a:hover {
	color:#ffaabb;
}

/* 新着情報 */

.info-wrapper{
	width:100%;
	max-height:600px;
}

.info-block{
	width:100%;
	overflow-x:hidden;
	overflow-y:scroll;
	margin-top:30px;
	max-height:270px;
}

.new-info {
	display:flex;	
	width:100%;
	align-items: center;
	justify-content:flex-start;
	color: #464646;
	margin: 15px 0 20px;
}		

.new-info .date {
	width: 15%;
	font-size:15px;
	line-height: 1.5;
}

.new-info .info-name {
	width: 80%;
	letter-spacing:0.2em;
	font-size:15px;
	line-height: 1.5;
	padding-left:20px;	
}

@media screen and (max-width: 768px) {
	.new-info .date {
	width: 20%;
	font-size:12px;
	}
}
@media screen and (max-width: 768px) {
.new-info .info-name {
	width: 75%;
	font-size:12px;
	padding-left:10px;
	}
}
.new-info:hover {
	color:#7593cb;
}

.icon-list{
	display: flex;
	width:100%;
	font-family:Century Gothic;
	font-size:12px;
	justify-content:flex-end;
	vertical-align: middle;
}

.icon-list .ic{
	display:flex;
	width:20%; 
	margin-left:5px;
	justify-content:space-evenly;
	vertical-align: middle;
}

.icon-list .ic img{
	width:25px;
	height:25px;
	vertical-align: middle;
}

.icon-list .ic-title{
	vertical-align: middle;
}

@media screen and (max-width: 768px) {
.icon-list .ic{
	display:flex;
	width:25%; 
	margin-left:5px;
	justify-content:space-evenly;
	vertical-align: middle;
	}
}	
@media screen and (max-width: 768px) {
.icon-list{
	font-size:10px;
	}
}
@media screen and (max-width: 768px) {
.icon-list .ic img{
		width:20px;	
		height:20px;
	}
}





/* ピックアップアイテム */

.pickup-item-container{
	display: flex; 
	align-items:stretch;
	justify-content:space-between;
	flex-direction:row;
	flex-wrap: wrap;            /* 折り返し指定 */
    align-content:stretch;      /* 折り返し時の配置指定 */ 
}

.pickup-item {
	position: relative;
	display: inline-block;
	overflow:hidden;	
	width: 290px;
	height: 290px;
	margin-bottom: 5px;
	border-radius: 2px;
	background-color: #fff
	vertical-align: middle;
}		

.pickup-item .image {
	display: block;
	width: 100%;
	box-sizing:border-box;
}

.pickup-item .slideup{
	width: 290px;
	height: 290px;
	background:rgba(70,70,70,0.6);
	position:absolute;
	box-sizing:border-box;
	top:220px;
	left:0;
	color:#fff;
	-webkit-transition: 0.5s;
	-moz-transition:  0.5s;
	-ms-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.pickup-item .slideup:hover {
	top:0;
	background:rgba(70,70,70,0.4);
}

.pickup-item .slideup span {
	margin:23px 20px 23px 20px;
	font-weight:bold;
	display:block;
}

.slideup_content {
	color:#fff;
}

.slideup-title {
	font-size:16px;
	letter-spacing:0.2em;
}

.slideup_content .description {
	font-size:14px;
	margin: 0 20px 10px 20px;
	line-height: 2;
	letter-spacing:0.05em;
}



/* インスタグラム掲載 */

.insta-container{
	padding: 10px;
	display: flex; 
	align-items:stretch;
	justify-content:space-around;
	flex-direction:row;
	flex-wrap: wrap;            /* 折り返し指定 */
    align-content:stretch;      /* 折り返し時の配置指定 */ 
}


.insta-item {
	position: relative;
	display: inline-block;
	width: 280px;
	height: 380px;
	margin-bottom: 5px;
	padding: 8px;
	border-radius: 2px;
	background-color: #fff
	vertical-align: middle;
}		

.insta-item .image {
	display: block;
	width: 100%;
	border: solid 1px #f0f0f0;
}

.insta-item .date {
	margin: 10px 10px 0px 10px;
	font-size:8px;
	color: #aaa;
	letter-spacing:0.05em;
}

.insta-item .name {
	font-size:12px;
	margin: 10px;
	line-height: 1.5;
	letter-spacing:0.05em;
	color:#000;
}

.insta-item .description {
	font-size:12px;
	margin: 10px;
	line-height: 1.5;
	color:#000;
}

.insta-item > a {
	display: block;
	text-decoration: none;
	margin: -8px -8px -11px;
	padding: 8px 8px 11px;
	border-radius: inherit;
	color: #777;
	transition: all 0.3s;
}

.insta-item a:hover {
	background-color: #F0F0F0;
	opacity: 0.8;
}

.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
}
.cp_box label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 200px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
.cp_box input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box label:after {
	line-height: 2rem;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 50%;
	width: 8rem;
	content: 'もっと見る';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #ffffff;
	border-radius: 3px;
	background-color:#ff6347;
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	overflow: hidden;
	height: 350px; /* 開く前に見えている部分の高さ */
	transition: all 1s;
}
.cp_box input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box input:checked + label:after {
	content: '閉じる';
}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
	transition: all 1s;
}


/*グラデーションを掛けたい <img> を囲う外枠*/
.gradient{
position: relative;
display: block;
}
/* グラデーション */
.gradient:after{
content: "";
position: absolute; left: 0px; top: 0px;
display: block;
background: repeating-linear-gradient(to bottom, rgba(255,255,255,0), #fff 100%);
}
/* 縦横を外枠に合わせる */
.gradient img, .gradient:after{
width: 100%;
height: 100%;
}



/* 取扱ブランド */
.brand-container{
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 15px;
	grid-gap: 15px;
	margin: 0 0 50px 0;
}

@media screen and (max-width: 768px) {
.brand-container{
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	grid-gap: 15px;
	}		
}

.brand {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	grid-gap: 15px;
	border:solid 1px #f0f0f0;
	padding:5px;
}
	
@media screen and (max-width: 768px) {
.brand {
	gap: 10px;
	grid-gap: 10px;
	}		
}


.brand:hover {
	opacity: 0.6;
	transition: all 0.3s;
}


/* ==============================
本文
============================== */

.main-section{
	max-width:1200px;
	display:flex;
}

	
.main-part{
	width:900px;
	margin:40px auto 0;
}

/*スマホ用*/
@media screen and (max-width: 768px) {
	.main-part{
		max-width:100%;
		margin:20px 0 0;
	}
}

.top-main-content{
	max-width:900px;
	width:100%;
	margin:0 0 0 20px;
}

/*スマホ用*/
@media screen and (max-width: 768px) {
	.top-main-content{
		width:100%;
		margin:0 auto;
	}
}

.main-content{
	max-width:800px;
	width:100%;
	margin:0 auto 20px;
}

/*スマホ用*/
@media screen and (max-width: 768px) {
	.main-content{
		width:100%;
		margin:0 auto;
	}
}


.main-subject{
font-size:22px;
color:#453600;
letter-spacing:0.1em;
line-height:2.2em;
}

/*スマホ用*/
@media screen and (max-width: 479px) {
	.main-subject{
		font-size:18px;
		color:#453600;
		letter-spacing:0.1em;
		line-height:2.2em;
	}
}

.caption{
font-size:16px;
color:#453600;
letter-spacing:0.1em;
line-height:2;
margin:20px 0 5px;
}

/*スマホ用*/
@media screen and (max-width: 479px) {
	.caption{
		font-size:16px;
		color:#453600;
		letter-spacing:0.1em;
		line-height:2;
		margin:20px 0 5px;
	}
}
	

/*　カテゴリーページなどのタイトル　*/
@media ( min-width : 800px ){
	.list-title {
	width: 100%;
	font-size:16px;
	letter-spacing:0.25em;
	font-weight:bold;
	border-bottom:solid 1px #969696;
	}
}

@media ( max-width : 799px ){
	.list-title {
	width: 100%;
	font-size:15px;
	letter-spacing:0.2em;
	font-weight:bold;
	border-bottom:solid 1px #969696;
	}
}	

@media ( max-width : 449px ){
	.list-title {
	width: 100%;
	font-size:14px;
	letter-spacing:0.2em;
	font-weight:bold;
	border-bottom:solid 1px #969696;
	}
}	

@media ( min-width : 800px ){
	.item-container {
	width:800px;
	margin: 20px auto;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content:space-between;
	}
	.item {
	width: 33%;
	}
	.item-container::after {
	display: block;
	content:"";
	width: 250px;
	}
}

@media ( max-width : 799px ){
	.item-container {
	width:100%;
	display: -webkit-flex;
	display: flex;
	 -webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content:space-between;
	}
  .item {
    width: 33%;
  }
	.item-container::after {
	display: block;
	content:"";
    width: 33%;
	}
}


@media ( max-width : 449px ){
.item-container {
	width:100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content:space-between;
	}
	.item {
	width: 50%;
	}
	.item-container::after {
	display: block;
	content:"";
    width: 50%;
	}
}

@media ( min-width : 750px ){
	.item-container .item{
	width: 250px;
	height: 550px;
	padding:1%;
	border-radius: 2px;
	background-color: #fff;
	vertical-align: middle;
	font-size:14px;
	letter-spacing:0.1em;
	line-height:1.55;
	}		
}

@media ( max-width : 749px ){
.item-container .item{
	width: 200px;
	height: 500px;
	padding:1%;
	border-radius: 2px;
	background-color: #fff;
	vertical-align: middle;
	font-size:13px;
	letter-spacing:0.1em;
	line-height:1.55;		
}
}

@media ( max-width : 599px ){
.item-container .item{
	width: 180px;
	height: 460px;
	padding:1%;
	border-radius: 2px;
	background-color: #fff;
	vertical-align: middle;
	font-size:12px;
	letter-spacing:0.1em;
	line-height:1.55;		
}
}

.item .image {
    width: 100%;
    display: block;
}

.item .name {
	margin: 10px 0 0;
	font-weight:bold;
}

.item .desc {
	margin: 10px 0 0;
}

@media ( min-width : 750px ){
.item > a {
	display: block;
	text-decoration: none;
	height:550px;
	border-radius: inherit;
	color: #777;
	transition: all 0.3s;
	padding:10px;
}
}

@media ( max-width : 749px ){
.item > a {
	display: block;
	text-decoration: none;
	height:500px;
	border-radius: inherit;
	color: #777;
	transition: all 0.3s;
	padding:10px;
}
}

@media ( max-width : 599px ){
.item > a {
	display: block;
	text-decoration: none;
	height:460px;
	border-radius: inherit;
	color: #777;
	transition: all 0.3s;
	padding:10px;
}
}

.item a:hover {
	background-color: #F0F0F0;
	opacity: 0.8;
}

/* 問題があり一旦保留
a.anchor{
	display: block;
	padding-top: 250px;
	margin-top: -250px;
}
*/


iframe#parentframe { 
  min-width: 1200px;
}

p {
	font-size: 16px; 
	letter-spacing: 0.1em; 
	line-height: 2;
}
@media screen and (max-width: 799px) {
	p {
	font-size: 15px; 
	letter-spacing: 0.1em; 
	line-height: 2;
	}
}
@media screen and (max-width: 479px) {
	p {
	font-size: 14px; 
	letter-spacing: 0.1em; 
	line-height: 2;
	}
}

.cate-box{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	flex-direction: row;  
	flex-wrap: wrap;
	align-content: flex-start;
}

.cate-box .cate-item {
    height: 40px;
    width: 185px;
    padding: 0 5px 0 5px;
    margin:5px;
    border: 1px solid #969696;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 12px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'Noto Sans JP' , sans-serif;
	font-weight:bold;
    letter-spacing: 0.1em;
    color: #464646;
    text-align: center;
    line-height: 40px;
    transition: all 0.3s ease;
}

/*
.cate-item:nth-child(4n) {
    margin-right: 0;
}
*/

@media ( max-width : 799px ){
	.cate-box .cate-item{
    height: 40px;
    width: 166px;
    font-size: 11px;
	}
}

@media ( max-width : 479px ){
	.cate-box .cate-item{
    height: 30px;
    width: 180px;
    line-height: 30px;
    font-size: 12px;
	}
}

@media ( max-width : 376px ){
	.cate-box .cate-item{
    height: 30px;
    width: 170px;
    line-height: 30px;
    font-size: 11px;
	}
}
.cate-box .cate-item a:hover {
    color: #969696;
}

/*
.cate-box .cate-item:after {
    content: "";
    display: block;
    height: 40px;
    width: 185px;
}

@media ( max-width : 799px ){
	.cate-box .cate-item:after {
    content: "";
    display: block;
    height: 40px;
    width: 166px;
	}
}

@media ( max-width : 479px ){
	.cate-box .cate-item:after {
    content: "";
    display: block;
    height: 30px;
    width: 185px;
	}
}

@media ( max-width : 376px ){
	.cate-box .cate-item:after {
    content: "";
    display: block;
    height: 30px;
    width: 170px;
	}
}


.cate-box .cate-item:before {
    content: "";
    display: block;
    height: 40px;
	width: 185px;
	order: 1;
}

@media ( max-width : 799px ){
	.cate-box .cate-item:before {
    content: "";
    display: block;
    height: 40px;
    width: 166px;
	order: 1;
	}
}
@media ( max-width : 479px ){
	.cate-box .cate-item:before {
    content: "";
    display: block;
    height: 30px;
    width: 185px;
	order: 1;
	}
}
@media ( max-width : 376px ){
	.cate-box .cate-item:before {
    content: "";
    display: block;
    height: 30px;
	width: 170px;
	order: 1;
	}
}
*/

.sub-cate {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	flex-direction: row;  
	flex-wrap: wrap;
	align-content: flex-start;
}

.sub-link{
width:150px;
height:30px;
font-size:12px;
font-weight:bold;
color:#464646;
text-align: center;
letter-spacing:0.05em;
line-height:30px;
padding:0 5px 0 5px;
margin:10px 5px 0 5px;
box-sizing:border-box;
text-decoration: none;
}

@media ( max-width : 799px ){
	.sub-link{
	width:140px;
	height:30px;
	}
}

@media ( max-width : 479px ){
	.sub-link{
	width:122px;
	height:30px;
	font-size:11px;
	margin:10px 5px 0 5px;
	}
}

.sub-link a:hover {
color:#fff;
background-color: #777777;
}




/* ==============================
フッター
============================== */

.footer-wrapper{
	width:100%;
}

@media screen and (min-width : 768px) { /* デスクトップ用CSS */
.footer-wrapper{
	width:100%;
	max-width:1200px;
	}
}

.f-menu {
	width:100%;
	margin:10px 0 0 0;
	padding: 10px;
	background: #f9f9f9;
	box-sizing: border-box;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	font-size:14px;
	font-feature-settings: "palt";
	letter-spacing:0.1em;
	line-height:1.5;
}

@media screen and (max-width: 768px) {
.f-menu {
	font-size:11px;
	}
}
.footer-wrapper ul.list{
	width:100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	list-style: none;
	padding:10px 30px 10px 30px;
}

@media ( max-width : 768px ){
.footer-wrapper ul.list{
	padding:10px 10px 10px 10px;
	}
}

.footer-wrapper li {
	display: inline;
	width:16.6%;
	padding: 0 5px;
	margin:5px 0;
	text-align: center;
	 color: #464646;
	border-right: #464646 1px solid;
}

@media ( max-width : 768px ){
	.footer-wrapper li {
		width:33.3%;
	}
}

@media ( max-width : 600px ){
	.footer-wrapper li {
		font-size:10px;
	}
}
@media ( max-width : 321px ){
	.footer-wrapper li {
		font-size:8px;
	}
}
.footer-wrapper li:first-child {
  border-left: #464646 1px solid;
}

.footer-wrapper li:hover{
    background-color:#f0f0f0;
	opacity: 0.8;
}


.footer-content{
	width:100%;
	padding:30px 0 30px 0;
	display: flex;
	flex-direction: column;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	font-size:12px;
	line-height:1.5;
	background: #f9f9f9;
	color: #464646;	
}	
.footer-block{
	max-width:400px;
	width:100%;
	margin:20px auto 0;
	padding: 0 10px 5px;
	font-size:12px;
	letter-spacing:0.05em;
	line-height: 1.5;
}	

@media screen and (min-width : 769px) { /* デスクトップ用CSS */
	.footer-content{
		width:100%;
		display: flex;
		flex-direction: row;
	}
	.footer-block{
		margin: 5px;
		width: calc( 50% - 10px);
	}
}


@media screen and (min-width : 1081px) { /* デスクトップ用CSS */
	.footer-content{
		max-width:1200px;
		flex-direction: row;
	}
	.footer-block{
		margin: 5px;
		width: calc( 33.3% - 10px);
	}
}


.footer-1{
	width:100%;
	height:240px;
	margin: 0 20px 5px;
	font-size:12px;
	letter-spacing:0.05em;
	line-height: 1.5;
}	

.footer-1 img{
    width:270px;
    height:70px;
}

.footer-block .footer-title{
	font-size:12px;
	font-weight:bold;
	letter-spacing:0.05em;
    line-height:2;
}


.footer-1 .ft1-cont{
    font-size:12px;
    letter-spacing:0.05em;
    line-height:2;
}


.footer-2{
	max-width:300px;
	height:240px;
	margin-bottom: 5px;
	margin: 0 20px 0 20px;
}		

.footer-block .inq{
    margin-top:20px;
    text-align:center;
    font-size:15px;
    letter-spacing:0.05em;
}   

.footer-block .tel{
    margin-top:16px;
	font-size: 24px;
	color: #464646;
	font-weight:bold;
	letter-spacing:0.3em;
	text-align:center;
}

.footer-block .time{
    margin-top:15px;
	font-size: 13px;
	color: #464646;
	letter-spacing:0.05em;
	text-align:center;
}

.footer-block .ml{
    display:flex;
    text-align:center;
    justify-content:space-between;
    width:260px;
	height:46px;
	margin:30px auto 0;
    box-sizing:border-box;
	background-color:#fff;
	border: solid #004793 1px;
	border-radius:10px;
    vertical-align:middle;
}

.footer-block .ml img{
    width:30px;
    height:30px;
    margin: 8px 8px 8px 8px;
	vertical-align: middle;
    box-sizing:border-box;
}

.footer-block .ml .txt{
    font-size: 13px;
	font-weight:bold;
	letter-spacing:0.12em;
	color: #004793;
	vertical-align: middle;
}


.footer-block .qa{
    display:flex;
    text-align:center;
    justify-content:space-between;
    width:260px;
    height:46px;
    box-sizing:border-box;
	background-color:#fff;
	border: solid #b8ab8f 1px;
	border-radius:10px;
    vertical-align:middle;
}

.footer-block .qa box{
}

.footer-block .qa img{
    width:30px;
    height:30px;
    margin: 8px 8px 8px 8px;
	vertical-align: middle;
    box-sizing:border-box;
}

.footer-block .qa .txt{
    font-size: 13px;
	font-weight:bold;
	letter-spacing:0.12em;
	color: #b8ab8f;
	vertical-align: middle;
}

/*  営業日カレンダー  */

.ft-cal{
	display:block;
}
@media screen and (min-width: 769px) {
	.ft-cal{
	display:none;
}
}
@media screen and (min-width: 1081px) {
	.ft-cal{
	display:block;
}
}	
.calender{
	margin:10px auto 10px;
	max-width: 400px;
	width:100%;
	height:auto;
    border:1px solid #fff;
    background-color: #fff;
	font-size: 12px;
	box-sizing: border-box;
}

.calbase_albiot{
    display:flex;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    background-color: #fff;
	max-width: 400px;
	width:100%;
   	box-sizing: border-box;
    border-collapse: collapse;
    box-sizing:border-box;
    padding: 0px 0px 10px 0px;
}
@media screen and (max-width: 321px) {
.calbase_albiot{
    display:flex;
	flex-direction:column;
	}
}

table.calframe_albiot{
    font-size:12px;
    color:#464646;
    border-collapse: collapse;
    table-layout: fixed;
	width:  calc( 50% - 5px);
	margin:5px auto 0;
}


@media screen and (max-width: 321px) {
table.calframe_albiot{
	justify-content: center;
		width:  100%;
		margin:10px 0 10px;
  }
}   

table.calframe_albiot th{
	text-align: center;
	vertical-align:top;
    padding: 0px 0px 3px 0px;
}


table.calframe_albiot td{
    border:5px solid #FFFFFF;
   	box-sizing: border-box;    
    background-color: #FFFFFF;
    width:25px;
    height:25px;
	text-align: center;
	vertical-align:top;
    }
tr.weektitle_albiot td{
    background-color: #FFFFFF;
    }
td.event1day_albiot{
	background-color: #ffc100 !important;    
    }
font.event1day_albiot{
    color: #464646;
    }
td.event2day_albiot{
    background-color: #ffc100 !important;
    }
font.event2day_albiot{
    color: #464646;
    }
td.event3day_albiot{
    background-color: #9bc7a8 !important;
    }
font.event3day_albiot    {
    color: #464646;
    }
    
div.event_albiot{
    font-size:12px;
    text-align: left;
    word-break: break-all;
    margin: 7px 10px 7px 10px;
    border-collapse: collapse;
    line-height:120%;
    table-layout: fixed;
    width: 200px;
}

span.event1day_albiot{
	color: #ffc100 !important;    
    }

span.event3day_albiot{
    color: #ffc100 !important;
    }

@media screen and (max-width: 768px) {
.copy-right1{
    font-size:10px;
    text-align:center;
    letter-spacing:0.2em;
	line-height:1.5;
	}
}  
								
@media screen and (max-width: 768px) {
.copy-right2{
    font: 10px "Helvetica Neue",Helvetica,Arial,sans-serif;
    text-align:center;
    letter-spacing:0.2em;
	line-height:1.5;
	}
}

@media screen and (max-width: 768px) {
.copy-right_area {
	bottom: 0; /* 一番下に表示 */
	left:0;
	width: 100%; /* 中央に表示 */
	z-index:1000;
	}
}
										
@media screen and (max-width: 768px) {
.copy-right_block {
  background: #fff;
	}
}
											
@media screen and (max-width: 768px) {
.copy-right_box {
  width: 100%;
  margin: 0 auto;
	}
}
												
@media screen and (max-width: 768px) {
.copy-right_box p {
	margin: 0;
	padding: 20px 0;
	font-size: 10px;
	line-height: 1.5;
	text-align: center;
	}
}


@media screen and (max-width: 768px) {
.copy-right1{
    font-size:10px;
    text-align:center;
    letter-spacing:0.2em;
	line-height:1.5;
	}
}
																		
@media screen and (max-width: 768px) {
.copy-right2{
    font: 10px "Helvetica Neue",Helvetica,Arial,sans-serif;
    text-align:center;
    letter-spacing:0.2em;
	line-height:1.5;
	}
}   
																			
@media screen and (max-width: 768px) {
.copy-right_area {
	bottom: 0; /* 一番下に表示 */
	left:0;
	width: 100%; /* 中央に表示 */
	z-index:1000;
	}
}
																				
@media screen and (max-width: 768px) {
.copy-right_block {
  background: #fff;
	}
}
																					
@media screen and (max-width: 768px) {
.copy-right_box {
  width: 100%;
  margin: 0 auto;
	}
}
																						
@media screen and (max-width: 768px) {
	.copy-right_box p {
	margin: 0;
	padding: 20px 0;
	font-size: 10px;
	line-height: 1.5;
	text-align: center;
	}
}


.copy-right1{
    font-size:12px;
    text-align:center;
    letter-spacing:0.2em;
	line-height:1.5;

}    

.copy-right2{
    font: 12px "Helvetica Neue",Helvetica,Arial,sans-serif;
    text-align:center;
    letter-spacing:0.2em;
	line-height:1.5;
}    

/* スマホ用フッター */
@media screen and (max-width: 768px) {
.footer-wrapper3{
	width: 100%;
	background: #f9f9f9;
	padding:10px 25px 10px 25px;
	font-size:12px;	
	letter-spacing:0.05em;
	line-height:2;
	}
}
	
@media screen and (max-width: 768px) {
.footer-wrapper3 .comp-nm{
	font-weight:bold;
	}
}
	
@media screen and (max-width: 768px) {
.footer-wrapper3 .f-menu {
	width: 100%;
	margin:0;
	box-sizing: border-box;
	font-size:10px;
	font-feature-settings: "palt";
	line-height:1.5;
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: center;
	align-items: center;
	list-style: none;
	padding:10px 0 10px 0;
	}
}
			
@media screen and (max-width: 768px) {
	.footer-wrapper3 .list{
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content: center;
		align-items: center;
		list-style: none;
		padding:10px 0 10px 0;
	}
}

@media screen and (max-width: 768px) {
.sp-footer li {
		display: inline;
		width:33%;
		padding: 0 5px;
		margin:5px 0 5px;
		text-align: center;
		color: #464646;
		border-right: #464646 1px solid;
	}
}
					
@media screen and (max-width: 768px) {
.sp-footer li:first-child {
  border-left: #464646 1px solid;
	}
}
						
@media screen and (max-width: 768px) {
.sp-footer li:hover{
    background-color:#f0f0f0;
	opacity: 0.8;
	}
}


.footer-wrapper1 {
	width: 100%;
	background-size: 10px;
	background-repeat: repeat;
	padding: 5px;
}

.ac-a .content {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'Noto Sans JP' , sans-serif;
	padding: 0 0 8px;
}
.sub-ttl {
	font-size:16px;
	font-weight: bold;
	padding:0 15px;
}

.cl-nv {
	color: rgb(97, 148, 202);
}
.cl-or {
	color: rgb(255, 127, 80);
}
.cl-red {
	color: rgb(200, 0, 0);
}

.footer-wrapper-box {
	width: 100%;
	background-color: #fff;
	text-align: center;
	letter-spacing: 0.05em;
	line-height: 1.4;
}
.footer-wrapper-box .inq {
	padding: 20px 0 0 0;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.2em;
	text-align: center;
}
.footer-wrapper-box .tel {
	padding: 20px 0 0 0;
	font-size: 24px;
	color: #464646;
	font-weight: bold;
	letter-spacing: 0.15em;
	text-align: center;
}
.footer-wrapper-box .time {
	padding: 20px 0 0 0;
	font-size: 14px;
	color: #464646;
	letter-spacing: 0.05em;
	text-align: center;
}

.footer-wrapper-box .ml {
	display: flex;
	margin: 20px auto 0;
	justify-content: space-between;
	width: 80%;
	height: 46px;
	box-sizing: border-box;
	background-color: #fff;
	border: solid #004793 1px;
	border-radius: 10px;
	vertical-align: middle;
}
.footer-wrapper-box .ml img {
	width: 30px;
	height: 30px;
	margin: 6px 12px 6px 6px;
	vertical-align: middle;
	box-sizing: border-box;
}
.footer-wrapper-box .ml .txt {
	font-size: 16px;
	font-weight: bold;
	margin: 15px 0;
	letter-spacing: 0.12em;
	color: #004793;
	vertical-align: middle;
}

.footer-wrapper-box .qa {
	display: flex;
	margin: 10px auto 0;
	justify-content: space-between;
	width: 80%;
	height: 46px;
	box-sizing: border-box;
	background-color: #fff;
	border: solid #b8ab8f 1px;
	border-radius: 10px;
	vertical-align: middle;
}
.footer-wrapper-box .qa img {
	width: 30px;
	height: 30px;
	margin: 6px 12px 6px 6px;
	vertical-align: middle;
	box-sizing: border-box;
}
.footer-wrapper-box .qa .txt {
	font-size: 16px;
	font-weight: bold;
	margin: 15px 0;
	letter-spacing: 0.12em;
	color: #b8ab8f;
	vertical-align: middle;
}

.footer-wrapper2{
	width: 100%;
	background: #f9f9f9;
	padding: 25px 25px 10px 25px;
	font-size: 12px;
	letter-spacing: 0.05em;
	line-height: 2;
}

/*　ホバー　*/
.hover-exp {
  transition: all 0.6s ease 0s;
}
.hover-exp:hover {
  cursor: pointer;
  transform: scale(1.5, 1.5); /*画像を拡大表示*/
}

a.hover_img{
    background-color:#fff; /*背景に白を設定*/
    display:block; /*ブロック化重要！*/
    }
a.hover_img img{
    transition:all 0.5s ease;
    }
a:hover.hover_img img{
    opacity: 0.7;
    filter: alpha(opacity=70);
    }



/*　マージン・パディング　*/

.ml20 {margin-left: 20px;}
.ml40 {margin-left: 40px;}
.pl20 {padding-left: 20px;}
.pl40 {padding-left: 40px;}

.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mt60 {margin-top: 60px;}
.mt80 {margin-top: 80px;}
.mt100 {margin-top: 100px;}

.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.mb60 {margin-bottom: 60px;}
.mb80 {margin-bottom: 80px;}
.mb100 {margin-bottom: 100px;}





.feature {
  font-size:1.0em;
  color:#464646; 
  font-weight:bold;
}

.points {
  font-size:1.0em;
  color:#464646; 
  padding-left: 1.5em;
}

.notes{
  font-size:0.9em;
  padding:0 0 0 8px;
}


.kanban{
  text-align: center;
}
.kanban a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

.bld{
	font-weight:bold;
}

.c-rd{
	color:#c80000;
}

/* リスト表示 */
ul.cp_list {
	position: relative;
	padding: 0 0.5em;
	margin-top: 2em;
	list-style-type: none;
	border: solid 2px #f0f0f0;
	font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
}
ul.cp_list::after {
	position: absolute;
	content:attr(title);
	padding: 1px 7px;
	letter-spacing: 0.05em;
	font-weight: bold;
	font-size: .8em;
	background: #f0f0f0;
	color: #464646;
	bottom: 100%;
	left: -2px;
	border-radius: 4px 4px 0px 0px;
}
ul.cp_list li {
	line-height: 1.5;
	padding: 0.5em 0 0.5em 0.5em;
	border-bottom: 1px dashed #464646;
}
ul.cp_list li::before {
	position: absolute;
	content: "ul.cp_list {
position: relative;
padding: 0 0.5em;
margin-top: 2em;
list-style-type: none;
border: solid 2px #464646;
}
ul.cp_list::after {
position: absolute;
content:attr(title);
padding: 1px 7px;
letter-spacing: 0.05em;
font-weight: bold;
font-size: .8em;
background: #f0f0f0;
color: #464646;
bottom: 100%;
left: -2px;
border-radius: 4px 4px 0px 0px;
		}