﻿@charset "UTF-8";
/* CSS Document */

/*------------------------------------- */
/* 特別色設定 */
/*------------------------------------- */
/*************固定色****************/
/*白背景用*/
.whiteback{
    background-color: #ffffff !important;
    color:#333333 !important;
}
/*黒背景用*/
.blackback{
	background-color:#222222 !important;
}
/*全体背景…全体の背景色と画像(非表示)*/
.backAllcolor{
	background-color:#ffffff !important;
/*	background-attachment: fixed !important;*/
/*	background: linear-gradient(#000000,#000000,#000000,#000000,#000000,#000000,#000000) !important;*/
}
.textAllcolor{
    color:#555555 !important;
}

/* Googleフォント使用する場合 */
/*
.web-font{
	font-family: 'Montserrat', sans-serif !important;
}
*/

/*------------------------------------- */
/* テナント別色設定 */
/*------------------------------------- */

/* メインカラー */
.keycolor01{
	color:#1560db !important;
}
.keycolor01back{
	background-color:#1560db !important;
	color: #ffffff !important;
}
.keycolor01border{
	border-color:#1560db !important;
}
.keycolor01btn{
	background-color:#1560db !important;
	color: #ffffff !important;
	border:solid 1px #1560db !important;
	transition: 0.3s;
}
.keycolor01:hover{
	color:#1560db !important;
}

.keycolor01before:before{
	color:#1560db !important;
}

.keycolor01after:after{
	color:#1560db !important;
}

.keycolor01borderhover:hover{
	border-color:#1560db !important;
}
.keycolor01btnhover:hover{
	background-color:#ffffff !important;
	color: #1560db !important;
	border:solid 1px #1560db !important;
	background-color:transparent !important;
	}
}
.keycolor01btnhover_02:hover{
	background-color:#1560db !important;
	color: #ffffff !important;
	border:solid 1px #1560db !important;
}
.keycolor01backafter:after{
    background:#1560db !important;
}
.keycolor01backbefore:before{
    background:#1560db !important;
}

/* タイトルの三角色 */
.conttitle-heading:before{
	border-right-color:#1560db !important;
}
.conttitle-heading:after{
	border-left-color:#1560db !important;
}
/* 新着情報のNEWマーク */
.newslist-date.new:before{
	background-color:#1560db !important;
	color: #ffffff !important;
}


/* サブカラー */
.keycolor02{
	color:#000090 !important;
}
.keycolor02back{
	background-color:#000090 !important;
	color: #ffffff !important;
}
.keycolor02border{
	border-color:#000090 !important;
}
.keycolor02btn{
	background-color:#000090 !important;
	color: #ffffff !important;
	border:solid 1px #000090 !important;
	transition: 0.3s;
}
.keycolor02hover:hover{
	color:#000090 !important;
}
.keycolor02borderhover:hover{
	border-color:#000090 !important;
}
.keycolor02btnhover:hover{
	background-color:#000090 !important;
	color: #ffffff !important;
	border:solid 1px #000090 !important;
}
.keycolor02backafter:after{
    background:#000090 !important;
}
.keycolor02backbefore:before{
    background:#000090 !important;
}
.keycolor02borderafter:after{
    border-color:#000090 !important;
}
.keycolor02borderbefore:before{
    border-color:#000090 !important;
}


/* 差し色 カートの数字の部分 現状ピンク*/
.keycolor03{
	color:#1560db !important;
}
.keycolor03back{
	background-color:#1560db !important;
	color: #ffffff !important;
}
.keycolor03border{
	border-color:#1560db !important;
}
.keycolor03btn{
	background-color:#1560db !important;
	color: #ffffff !important;
	border:solid 1px #1560db !important;
	transition: 0.3s;
}
.keycolor03hover:hover{
	color:#1560db !important;
}
.keycolor03borderhover:hover{
	border-color:#1560db !important;
}
.keycolor03btnhover:hover{
	background-color:transparent !important;
	color: #1560db !important;
	border:solid 1px #1560db !important;
}
.keycolor03backafter:after{
    background:#1560db !important;
}
.keycolor03backbefore:before{
    background:#1560db !important;
}

.keycolor03borderafter:after{
    border-color:#1560db !important;
}
.keycolor03borderbefore:before{
    border-color:#1560db !important;
}
/* 逆バージョン */
.keycolor03btnhover-rev:hover{
	background-color:#1560db !important;
	color: #ffffff !important;
	border:solid 1px #1560db !important;
}


/* うすいグレー ヘッダーバックやフッターバック 戻るボタン ヘッダーメニューなど*/
.subcolor01{
	color:#f3f3f3 !important;
}
.subcolor01back{
	background-color:#f3f3f3 !important;
	color: #333333 !important;
}
.subcolor01border{
	border-color:#f3f3f3 !important;
}
.subcolor01btn{
	background-color:#f3f3f3 !important;
	color: #333333 !important;
	border:solid 1px #d0d0d0 !important;
	transition: 0.3s;
}
.subcolor01hover:hover{
	color:#f3f3f3 !important;
}
.subcolor01borderhover:hover{
	border-color:#f3f3f3 !important;
}
.subcolor01btnhover:hover{
	background-color:#cccccc !important;
	color: #333333 !important;
	border:solid 1px #bbbbbb !important;
}
.subcolor01backafter:after{
    background:#f3f3f3 !important;
}
.subcolor01backbefore:before{
    background:#f3f3f3 !important;
}
.subcolor01backhover:hover{
    background:#f3f3f3 !important;
}

/* keycolor03の逆パターン 文字色、枠線あり　白背景のボタン  */
.subcolor02{
	color:#1560db !important;
}
.subcolor02back{
	background-color:#1560db !important;
	color: #ffffff !important;
}
.subcolor02border{
	border:solid 1px #1560db !important;
}
.subcolor02btn{
	background-color:transparent !important;
	color: #555555 !important;
	border:solid 1px #555555 !important;
	transition: 0.3s;
}
.subcolor02hover:hover{
	color:#1560db !important;
}
.subcolor02borderhover:hover{
	border-color:#1560db !important;
}
.subcolor02btn:hover{
	background-color:#555555 !important;
	color: #ffffff !important;
	border:solid 1px #555555 !important;
}
.subcolor02backafter:after{
    background:#dedede !important;
}
.subcolor02backbefore:before{
    background:#dedede !important;
}

.subBackcolor, .circle-list h2:before, .circle-list li:hover h2:before {
    background-color:#f3f3f3 !important;
    color: #1560db !important;
}


/* 見出しタイトル文字色 */
.titlecolor01{
/*
color:#1560db !important;
*/
}
.conttitle-heading02 .titlecolor01{
color:#555555;
}


/* View Morevボタン */

.contpage-linkbtn{
color:#1560db !important;
border-color:#1560db !important;
}
.contpage-linkbtn:hover{
color:#ffffff !important;
background-color:#1560db !important;
border-color:#1560db !important;
}




/*------------------------------------- */
/* fixed sidemenu */
/*------------------------------------- */
.fixed-sidemenu-backcolor{
	background-color:#1560db !important;
}

.fixed-sidemenu-fontcolor{
	color:#dddddd !important;
}

/*------------------------------------- */
/* slider */
/*------------------------------------- */
.img-mask{
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("./usrimg/dot01.png");
/* 
	background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
	background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
 */
}

.slider-caption-color{
	color:#ffffff !important;
}

.slider-btn-fontcolor{
	color:#ffffff !important;
}

.slider-btn-bordercolor{
	border-color:#ffffff !important;
}

.slider-btn-bordercolor:hover{
	border-color:#1560db !important;
}

.slider-btn:hover {
	color: #ffffff !important;
}

.slider-btn::before {
	background: #1560db !important;
}

/*------------------------------------- */
/* fullwidth contents design */
/*------------------------------------- */


/*------------------------------------- */
/* 下層ページアイキャッチ */
/*------------------------------------- */
.eyecatcharea:before{
	background-image:url('./usrimg/eyecatch0001.jpg');
	background-position: center center !important;
}


.eyecatcharea-mask{
	background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),url("./usrimg/dot01.png") !important;
}


.page-title-area .page-title{
	color:#555555 !important;
	border-bottom: 1px solid #1560db;
}



/*------------------
ハック
------------------ */
.movie_select_imgarea.sp {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    display: block;
    vertical-align: top;
    height: 100%;
    position: relative;
    padding-top: 100%;
}

/*------------------------------------- */
/*　POST機能用 */
/*------------------------------------- */
.enqtext{
	border: #cccccc solid 1px;
}
.enqradio:checked + .enqtext{
	background: #1560db;
	color: #FFF;
	border: #cccccc solid 1px;
}






/*------------------------------------- */
/* css対応 */
/*------------------------------------- */
.conttitlearea02{
	width: 100%;
	position: relative;
	margin: 0 auto;
	padding: 0.5rem 0;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.conttitle-heading02{
	display: flex;
	align-items: center;
	width: 100%;
	font-size:1.6rem;
	font-weight:bold;
}
.conttitle-heading02::after{
	content: '';
	height: 1px;
	width: 80%;
	background-color:#1560db;
	position: absolute;
	right: 0;
}

.notice-div{
	margin:1rem 0 0 15%;
	padding:0 0 0 1.5rem;
	width:80%;
}

.producteventhover{
	width:100%;
	height:100%;
	visibility: hidden;
	opacity: 0;
	position:absolute;
	z-index:2;
	transition: all 0.2s linear;
	background-color:RGBA(0,0,0,0.75);
}

.producteventhover div{
	width:100%;
	position:absolute;
	top:50%;
	left:50%;
	text-align:center;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	padding:15%;
	color:#ffffff;
	font-size:1.0rem;
	word-break: break-word;
	line-height:1.4rem;
}

.producteventhover div span{
	color:#cccccc;
}


a:hover .producteventhover{
	visibility: visible;
	opacity: 1;
}
.firsthover{
	height: 15% !important;
	bottom: 0 !important;
}

.firsthovertxt{
	padding:0.5rem 1rem !important;
	text-align:left !important;
	font-size:1rem !important;
}

.sub-block{
	background-color:#f5fffd;
}

.sub-block-left{
	width:56%;
	height:510px;
	display:inline-block;
	vertical-align: middle;
	background-image: url("./usrimg/picture02.jpg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}

.sub-block-right{
	width:43%;
	display:inline-block;
	vertical-align: middle;
	padding-left:7rem;
	max-width:600px;
}
.sub-block-text{
	line-height:2.0rem;
}
.subbtn{
	font-size: 1.2rem;
	display: inline-block;
	text-align: center;
	padding: 0.5rem 2.0rem;
	border: 1px solid #222222;
	margin: 1rem 0 1rem 0;
	transition: 0.2s;
	position: relative;
}
.prf-right-block-subtitle{
	font-size:1.0rem !important;
	letter-spacing:0.2rem !important;
}
.product-limittag-index{
	position:absolute;
	font-size: 0.8rem;
	padding: 0.25rem 0.5rem;
	top: 5%;
	right: 5%;
}
.producteventarea .productevent:nth-child(3n + 1){
	margin: 0 !important;
}

.photoeffect{
	background: linear-gradient(rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 1)), center center no-repeat;
}

.goods-block-left{
	width:49%;
	display: inline-block;
	vertical-align:top;
}
.goods-block-right{
	width:49%;
	display: inline-block;
	vertical-align:top;
}
.works-block-left{
	width:40%;
	display: inline-block;
	vertical-align:top;
}
.works-block-right{
	width:59%;
	display: inline-block;
	vertical-align:top;
}
.goods-block-title{
	margin-top:3rem;
}
.goods-block-sub{
	margin-top:1rem;
}
.goods-block-text1{
	margin-top:5rem;
	font-size:1.4rem;
}
.goods-block-text2{
	width:70%;
	margin:0 auto;
	margin-top:1rem;
	margin-bottom:3rem;
	text-align:center;
}
.contents-block-sns{
	padding:5rem 0;
}
.productimg i{
	position: absolute;
	font-size: 3rem;
	color: RGBA(0,0,0,0.6);
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.movie2add{
	width: 49.5% !important;
}

.worksright{
	padding:0 0 0 5%;
}

.worksrigthtimg{
	width: 31% !important;
	margin: 0 0 9% 2% !important;
}
.youtubeif{
	width:100%;
	height:551.25px;
}
.contacttxt{
	line-height:2.0rem;
}
hr.profarea{
	height: 1px;
	background-image: -webkit-gradient(linear, left top, right top, from(#f1f1f1), color-stop(#ccc), to(#f1f1f1));
	background-image: linear-gradient(to right, #f1f1f1, #ccc, #f1f1f1);
	border:none;
}

.radio-inline__input:checked + .radio-inline__label{
	background: #1560db !important;
	color: #fff;
	text-shadow: 0 0 1px rgb(0 0 0 / 70%);
}

/*-----------------------------
	header
------------------------------*/
.fun-header{
	border-bottom: 2px solid #1560db;
}
.header-menubar-menu a:hover{
	border-bottom: 1px solid #1560db !important;
}

.main_submenu_link .upgrade.keycolor01{
	background: #ffffff;
	margin: 0 0 0 1.0rem;
	padding: 0.25rem 1.0rem !important;
	font-weight: bold;
	color: #1560db !important;
}
/*------------------------------------- */
/* fixed sidemenu */
/*------------------------------------- */
.fixed-sidemenu-fontcolor{
	color:#1560db !important;
}
