@charset "utf-8";
/* ===================================================================

 file name  :common.css

=================================================================== */

/*----------------------------------------------------
	reset
----------------------------------------------------*/
html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, a, em, img,
strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li,
table, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: top;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
img {
	max-width: 100%;
	height: auto;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
strong,b{
    font-weight:bold;}
i{
    vertical-align: baseline;
}
/*----------------------------------------------------
	共通
----------------------------------------------------*/
html {
  font-size: 62.5%;
}
body {
  font-family: 
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Helvetica Neue",
    Arial,
    Meiryo,
    sans-serif;
  font-size: 1.6em;
  color: #333;
  letter-spacing: .05em;
  line-height:150%;
}
a {
  color: #333;
  text-decoration: none;
}
/* fonts */
.mPlus-M,
.mPlus-B,
h2,
h3,
h4,
h5,
#menu-side li a,
#menu-side2 li a,
#menu-side3 li a,
#menu-side4 li a,
#menu-side5 li a{
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
.mPlus-M {
  font-weight: 500;
}
.mPlus-B {
  font-weight: 700;
}
input,textarea,select{
    padding:10px;
}
/* input[readonly] {
    background-color: #ccc !important;
    color: #818181 !important;
  } */
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], select, textarea {
	border:1px solid #CCC;
	background:#fff;
	border-radius:3px;
	padding: 5px 10px;
	letter-spacing:1px;
	width:100%;
	box-sizing:border-box;
	font-size:1.0em;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
	outline: 0;
	border:1px solid #999;
	box-shadow:0 0 5px #6fb1e6;
}
input[type=checkbox]{
    margin-bottom:8px;}
select{
		height: 40px;
		line-height: 40px;
		background:#EEE;
    }
.aligncenter {
    display: block;
    margin: 0 auto 10px auto;
}
.alignright { float: right;
margin:0 0 10px 10px;
}
.alignleft { float: left;
margin:0 10px 10px 0;}
ul.note,
ol.note{
    letter-spacing:0;
    font-size:.9em;
}
.attention{
    color:#da6b57;
    font-weight:bold;
}
.sp{display:none;}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/*セレクトボックスの大きさを変更*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .mac select {
		-webkit-appearance: menulist-button;
		height: 40px;
		line-height: 40px;
		background:#EEE;
	}
}
.center{text-align:center;}
/* コンテンツ */
#wrapper {
}
#header,
#contents,
#footer {
	overflow: hidden;
	clear: both;
}
#contents{
    margin-top:160px;}
/*++*************
　hoverエフェクト
*++*************/
/* 画像：拡大 */
.hoverImg {
  overflow: hidden;
}
.hoverImg img {
  width: 238px;
  height: 179px;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: -webkit-transform .3s linear;
  -o-transition: -o-transform .3s linear;
  transition: -webkit-transform .3s linear;
  -o-transition: transform .3s linear;
  transition: transform .3s linear;
  transition: transform .3s linear, -webkit-transform .3s linear;
}
a:hover .hoverImg img {
  -webkit-transform: scale(1.06);
  -ms-transform: scale(1.06);
  transform: scale(1.06);
}
/* テキスト：アンダーライン */
.hoverTxt {
  display: inline;
  background-image: linear-gradient(180deg, transparent 80%, #19A0D7 0);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: 1s;
}
.hoverTxt:hover {
  transition: 1s;
  background-size: 100% 100%;
}


/*----------------------------------------------------
	header
----------------------------------------------------*/
header {
  padding: 0;
  top:0;
    position: fixed;
    z-index: 100;
    width: 100%;
    background:#FFF;
}
header .top {
  width: 1000px;
  margin:0 auto;
  padding:10px 0;
}
header .top .inner{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto;
    width:100%;
}
header .top .right{
  display: flex;
}
header .top .left{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.logo {
  display: inline-block;
  margin: 0 16px 0 0;
}
.logo img {
  width: 134px;
  height: 60px;
}
.txtCopy {
  display: inline-block;
  width: 210px;
}
header .menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}
header .top .navi a {
  display: block;
  height: 42px;
  line-height: 42px;
  font-weight: bold;
  text-align: center;
  border-radius: 21px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.iconCart a,
.iconLogin a,
.iconMypage a  {
  margin: 0 10px 0 0;
  color: #19A0D7;
  border: 1px solid #19A0D7;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.iconCart a:hover,
.iconLogin a:hover,
.iconMypage a:hover {
  color: #fff;
  background: #19A0D7;
}
.iconCart a::before,
.iconLogin a::before,
.iconMypage a::before,
.iconEntry a::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    margin-right: 8px;
    font-size:20px;
}
.iconCart a:hover::before,
.iconLogin a:hover::before,
.iconMypage a:hover::before,
.iconEntry a:before {
    color:#FFF;
}
.iconCart a {
  width: 160px;
  letter-spacing: 0;
}
.iconCart a::before {
    content: "\f07a";
  color: #19A0D7;
}
.iconMypage a {
  width: 160px;
  letter-spacing: 0;
}
.iconMypage a::before {
    content: "\f4ff";
  color: #19A0D7;
}
.iconLogin a {
  width: 140px;
  letter-spacing: 0;
}
.iconLogin a::before {
    content: "\f2f6";
  color: #19A0D7;
}
.iconEntry a {
  width: 180px;
  color: #fff;
  background-color: #27559A;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.iconEntry a::before {
    content: "\f007";
}
.iconEntry a:hover {
  background-color: #da6b57;
}

/*----------------------------------------------------
	nav
----------------------------------------------------*/
nav.bottom .navi{
  margin: 0 auto;
  height: 50px;
  line-height: 50px;
  background: -o-linear-gradient(top, #54BDEB, #0095D3);
  background: -webkit-gradient(linear, left top, left bottom, from(#54BDEB), to(#0095D3));
  background: linear-gradient(to bottom, #54BDEB, #0095D3);
}
nav.bottom #menu-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  width: 1000px;
  font-weight: 700;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
#menu-header li {
  width: 16.6%;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#menu-header li:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#menu-header li a {
  position: relative;
  display: block;
	text-align: center;
  color: #fff;
  z-index: 0;
  font-size:90%;
}
#menu-header li a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  z-index: -1;
  left: 0;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  background: -o-linear-gradient(top, #54BDEB, #0095D3);
  background: -webkit-gradient(linear, left top, left bottom, from(#54BDEB), to(#0095D3));
  background: linear-gradient(to bottom, #54BDEB, #0095D3);
}
#menu-header li a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  z-index: -2;
  left: 0;
  background: -o-linear-gradient(top, #4dc9ff, #04aaf1);
  background: -webkit-gradient(linear, left top, left bottom, from(#4dc9ff), to(#04aaf1));
  background: linear-gradient(to bottom, #4dc9ff, #04aaf1);
}
#menu-header li a:hover::before {
  opacity: 0;
}

/* -------------- */
/* 重要なお知らせ */
/* -------------- */
header .notice {
    position: relative;
    overflow: hidden;
}
header #notice_box
 {
     background:#dc9800;
     top:0;
     width:100%;
     min-width:1000px;
    text-align: center;
    z-index:100;
    padding: 10px 0;
}
header .notice .title {
    color: #ffffff;
    font-weight:bold;
    display:inline;
    padding:5px 30px;
    border:3px double #FFF;
    margin-right:20px;
}
header .notice .link {
    display:inline;
    color: #FFF;
    font-size:0.9em;
}
header .notice .more {
    display: inline-block;
    color: #FFF;
    margin: 0 0 0 10px;
}
header .notice .info {
    display:inline;
    color: #FFF;
    padding-top:10px;
}
header .notice .btn {
    position: absolute;
    top: 10px;
    right: 10px;
}
header .notice .btn i:after{
    content: " close";
    font-size:0.7em;
    font-weight:bold;
}
header .notice .btn i {
    color: #FFF;
    font-size: 20px;
}
/*----------------------------------------------------
	コンテンツ
----------------------------------------------------*/
#main{
  margin: 0 auto;
  width: 1000px;
}
.contentsWrap{
  /*display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;*/
  margin: 20px auto 0px;
}
.contentsWrap #content,
.page.products{
    /*-webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;*/
    width: 75%;
    float:right;
}
.thecontent #secoundContents{
    width: 75%;
    float:right;
}
/* タイトルバー */
/* h3.titleContents,
.thecontent h2.titleContents,*/
section.news .title,
h3.headline,
.page .headline,
.system .headline{
  margin: 0 0 20px;
  padding: 5px 20px 5px 20px;
  line-height: 150%;
  color: #fff;
  background: -o-linear-gradient(top, #54BDEB, #0095D3);
  background: -webkit-gradient(linear, left top, left bottom, from(#54BDEB), to(#0095D3));
  background: linear-gradient(to bottom, #54BDEB, #0095D3);
  border-radius: 20px;
}
.more,
.linkList {
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  color: #fff;
}
.more::after,
.linkList::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  display: block;
  width: 14px;
  height: 14px;
  background: url(../img/common/iconArrowRound.svg) center no-repeat;
  background-size: contain;
  -webkit-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
      transform: translate(0,-50%);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.more:hover::after,
.linkList:hover::after {
  right: 15px;
}
.more span,
.linkList span {
  position: relative;
  top: 0;
  right: 0;
  color: #fff;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.more:hover span,
.linkList:hover span {
  top: 0;
  right: -5px;
}
/*----------------------------------------------------
	サイドナビ
----------------------------------------------------*/
#aside {
 /* -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;*/
  width: 22%;
}
.navAside {
  margin: 0 auto 28px;
  padding: 0 10px 15px;
	background-color: #b3e4f2;
}
.navAsideTitle {
  padding: 20px 0 10px;
  font-size: 1.8rem;
  text-align: center;
}
.navAside h5{
    margin-bottom:5px;
}
#menu-side li,
#menu-side2 li,
#menu-side3 li,
#menu-side4 li,
#menu-side5 li{
  position: relative;
}
#menu-side li a,
#menu-side2 li a,
#menu-side3 li a,
#menu-side4 li a,
#menu-side5 li a{
  display: block;
    padding: 3px 5px 3px 24px;
  color: #333;
  background-color: #fff;
  border-radius: 4px;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  font-size:90%;
}
#menu-side li a::before,
#menu-side2 li a::before,
#menu-side3 li a::before,
#menu-side4 li a::before,
#menu-side5 li a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10px;
  display: block;
  width: 6px;
  height: 7px;
  background: url(../img/common/iconArrow.svg) center no-repeat;
  background-size: contain;
  -webkit-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
      transform: translate(0,-50%);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
#menu-side2,
#menu-side4,
#menu-side5 {
    margin-top: 20px;
}
#menu-side5 {
    margin-bottom: 20px;
}
#menu-side li a:hover::before, 
#menu-side2 li a:hover::before, 
#menu-side3 li a:hover::before, 
#menu-side4 li a:hover::before, 
#menu-side5 li a:hover::before {
  left: 15px;
}
#menu-side li:not(:last-child),
#menu-side2 li:not(:last-child),
#menu-side3 li:not(:last-child) ,
#menu-side4 li:not(:last-child) ,
#menu-side5 li:not(:last-child)  {
  margin: 0 0 4px;
}
.bannerAside li {
  margin: 0 0 18px;
  text-align:center;
}


/*----------------------------------------------------
	フッター
----------------------------------------------------*/
footer {
    clear:both;
  text-align: center;
  padding-top:60px;
}
/* pagetop */
.pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 90;
}
.pagetop a{
    text-align: center;
    background: #999999;
    display: block;
	width:50px;
	height:30px;
	padding:12px 0 0;
}
.navFooter {
  font-size: 1.4rem;
  background: #F1F1F1;
}
#menu-footer {
  margin: 0 auto;
  padding: 20px 0;
  text-align:center;
}
#menu-footer li{
    display:inline;
}
#menu-footer li:not(:last-child) {
  margin: 0 40px 0 0;
}
#menu-footer a {
  color: #333;
}
#menu-footer a:hover{
  color: #999;
}
.copyright {
  height: 60px;
  line-height: 60px;
  font-size: 1.2rem;
}
#cookie_privacy_id{
    display:none;}
.sp_hide,
#show,
#hide {
  display: none;
}
/*----------------------------------------------------
	投稿関連のページング
----------------------------------------------------*/
.nav-below{
	clear:both;
	overflow:hidden;
	margin:30px 0 20px;
	padding:20px 0;
	border-top:2px solid #EEE;
}
.nav-below i{
	color:#CCC;
	font-size:1.2em;
	display:inline-block;
}
.thecontent .nav-below a{
	color:#333;
}

.nav-below .current{
	background:#0085e1;
	color:#fff;
}
.nav-below a:hover{
	opacity:0.8;
}
.nav-below .link{
	display:block;
	width:50%;
	line-height:1.2em;
}
.nav-previous{
	border-right:1px dotted #ccc;
	float:left;
	margin:0 -1px 0 0;
}
.nav-previous i,.nav-previous a{}
.nav-previous a{
	padding:0 0 0 20px;
}
.nav-next{
	float:right;
	text-align:right;
}
.nav-next a{
	text-align:right;
	padding:0 20px 0 0;
}
.nav-next a span{
	text-align:right;
	width:100%;
}
.nav-next i,.nav-next a{}


/*----------------------------------------------------
	ページング
----------------------------------------------------*/
.wp-pagenavi {
	clear: both;
	text-align: center;
	padding: 15px;
	margin-bottom: 40px;
}
.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none!important;
	color: #fff!important;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 12px;
	padding-left: 12px;
	background-color: #000;
	margin-top: 5px;
	margin-right: 3px;
	margin-bottom: 5px;
	margin-left: 3px;
}
.wp-pagenavi .pages{
	background:#eee;
	color:#333!important;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	color: #FFFFFF!important;
	background-color: #C03061;
	text-decoration: none;
}

.wp-pagenavi span.current {
	font-weight: bold;
	color: #FFF;
}
#pagenavi_box{
	text-align: center;
}

/*----------------------------------------------------
	ページング(オリジナル)
----------------------------------------------------*/
div.pageing span {
	text-align: left;
	display: inline-block;
}
div.pageing {
	clear:both;
	position:relative;
	font-size:11px;
	line-height:13px ;
	background:none;
	vertical-align: middle;
}
div.pageing p {
    margin: 0;
}
div.pageing ul {
	overflow: hidden;
    padding: 0;
}
div.pageing ul li {
	float: left;
}
div.pageing a {
	display:block;
	float:left ;
	margin: 2px 2px 2px 0 ;
	padding: 15px;
	text-decoration:none;
	width:auto ;
	color:#fff ;
	background: #666 ;
}
div.pageing a:hover{
	color:#fff ;
	background: #fdcd1a;
}
div.pageing a.disabled {
	background: #ccc;
	color:#fff;
	cursor: default;
}
div.pageing .active a {
	background: #27559A;
	color:#fff ;
}

/*----------------------------------------------------
	テーブル
----------------------------------------------------*/
table{
	width:100%;
	margin: 15px 0;
}
table th{
	padding: 10px;
	background:#dceff7;
	border:1px solid #c1c0c0;
	font-weight:700;
	text-align:left;
}
table td{
	padding: 10px;
	border:1px solid #c1c0c0;
}
/* テンプレート */
.temp {
	width:90%;
	margin: 15px auto;
}
.temp th {
    background: #EEE;
    width:70%;
}
.temp th a{
    color:#333;
}
.temp th img{
    display:inline !important;
    vertical-align:middle;
    margin-right:20px;
    width:100px;
}
.temp td {
    padding: 10px;
    text-align: center;
    width:20%;
    vertical-align: middle;
}
/* お名前2列 */
table td.harf input{
	width:49%;
}

.th_tc th {
	text-align: center;
}
.th_tr th {
	text-align: right;
}

.sshort{width:30px;}
.short{width:60px;}
.mid{width:120px;}
.midiu{width:150px;}
.table_money{width:170px;}
.midium{width:200px;}
.col2hd{width:250px;}
.large{width:300px;}
.largest{width:350px;}
textarea.bikou{
	height:100px;
}
table td a{color:#088cd3;}
/* テーブル周り調整 */
.pc_tr{text-align:right;}
.pc_tc{text-align:center;}
.pc_tl{text-align:left;}
.pc_fr{float:right;}
.pc_fl{float:left;}
/*----------------------------------------------------
	カレンダー
----------------------------------------------------*/
.calendar .box{
    width:49%;
    display:inline-block;
}
.calendar_ttl{
	background:#fff;
	padding:5px;
	margin:0 0 10px ;
}
.title_date{
	display:block;
	border-left:1px solid #ccc;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	background:#fff;
	padding:5px 10px;
	font-weight:700;
}
table.in2cart_calendar{
	background:#fff;
	margin:0 0 15px;
}
table.in2cart_calendar th,
table.in2cart_calendar td{
	border:1px solid #ccc;
	text-align:center;
	padding:0px;
}
th.sunday{color:#e7141a;}
td.sunday{background:#fce6f0;}

th.saturday{color:#592cff;}
td.saturday{background:#DDDCFE;}

.holiday{background:#ed95bd !important;}
.today{border:3px solid #222 !important;}

.calendar_readme{
   	overflow:hidden;
}
.calendar_readme ul {
	overflow:hidden;
    float: right;
}
.calendar_readme ul li {
	float:left;
	margin:0 5px 0 0;
}
.calendar_readme ul li:nth-child(2) {
    margin: 0 30px 0 0;
}
.calendar_readme ul li .today{
    width: 17px;
    height: 17px;
    display: block;
    border: 1px solid #222 !important;
    position: relative;
    top: 3px;
}
.calendar_readme ul li .holiday {
    width: 17px;
    height: 17px;
    display: block;
    border: 1px solid #ed95bd !important;
    background-color: #ed95bd !important;
    position: relative;
    top: 3px;
}