/*
Theme Name:　event_template_white
Theme URL: https://chara-art.online/event/
Description: Wordpress sample theme for training.
Author: miki sakasai
Version: 1
*/

* {
    margin: 0;
    padding: 0;
}
html {
  font-size: 62.5%;
}

body {
	font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 1.4em;
	line-height:1.5em;
}

img{
	object-fit: cover;
	max-width:100%;
	vertical-align:middle;}


	  
a {
	transition:0.3s;
	-webkit-transition:0.3s;
 　 -moz-transition:0.3s;
 　 -o-transition:0.3s;
	color:#707070;
	outline:none;
    border: medium none;
    cursor: pointer;
	}
a:hover {
	color:#AFAFAF;
	border: medium none;
	}
a:visited{outline:none;}	
a img {border: medium none;}
a.hover_bt:hover img,
a.hover_bt:focus img,
a.hover_bt:active img {
    opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: “alpha( opacity=70 )”;
}

li{list-style:none;}

.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {min-height: 1px;}
* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

.txt_18{font-size:1.8rem;}
.txt_12{font-size:1.2rem;}
.txt_10{font-size:1rem;}
.txt_c{text-align:center;}
.txt_r{text-align:right;}
.txt_b{font-weight: bold;}
.wp-block-columns{margin-bottom:0 !important;}
.wp-block-image{width: 100%;}
/*///////////////////////////////////////////////
見出し
///////////////////////////////////////////////*/
h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
}
h2{
	text-align: center;
	font-size: 3rem;
	margin: 0 0 40px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	color: #fff;
}

h3{
	font-size: 2rem;
	line-height: 2.5rem;
	font-weight: normal;
	margin: 30px 0 5px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

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

header{
	max-width: 1200px;
	margin: 0 auto;
	background: #fff
}
header img{width:100%;}

/*///////////////////////////////////////////////
メニュー
///////////////////////////////////////////////*/

nav{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	text-align: center;
	padding: 15px 0;
}
nav li{
	display: inline-block;
	text-align: center;
	padding: 0 3%;
}
nav li a{
	color: #fff;
	text-decoration: none;
}

nav li a:hover {
	color:#a0a0a0;
}

/*///////////////////////////////////////////////
新着情報
///////////////////////////////////////////////*/
#main_box{
	max-width: 1200px;
	margin: 0 auto;
}
section.w_60{
	width: 60%;
	margin: 0 auto;
	padding-top: 70px;
}

.news_box{
	background: #fff;
	padding: 25px;
	box-sizing: border-box;
	margin-bottom: 30px;
}


dl.news dt{
	width: 25%;
	float: left;
	font-weight: bold;
}
dl.news dd{
	width: 75%;
	display: inline-block;
}
dl.news div{
	padding: 10px 5px;
}

/*///////////////////////////////////////////////
開催概要
///////////////////////////////////////////////*/


table.outline_table{
	width: 100%;
}

table.outline_table tr{
	margin: 2px 0;
}
table.outline_table th{
	color: #fff;
	text-align: left;
	padding: 10px 5px;
	width: 25%;
	box-sizing: border-box;
	vertical-align: top;
}

table.outline_table td{
	background: #fff;
	padding: 10px 5px;
	width: 75%;
	box-sizing: border-box;
	vertical-align: top;
}

p.kome{
	font-size: 1rem;
	line-height: 1.2rem;
}

/*///////////////////////////////////////////////
みどころ
///////////////////////////////////////////////*/
section.w_90{
	width: 90%;
	margin: 0 auto;
	padding-top: 70px;
}
.highlight_box{
	background: #fff;
	padding: 25px;
	box-sizing: border-box;
	margin-bottom: 25px;
}

#highlight h3{
	margin: 0 0 20px;
}
#highlight p{
	line-height: 1.8em;
}

/*///////////////////////////////////////////////
グッズ
///////////////////////////////////////////////*/
ul.item_list{
	display: flow-root;
}
ul.item_list li{
	width: 24%;
	float: left;
	margin: 0 1.3% 20px 0;
	box-sizing: border-box;
	vertical-align: top;
	color: #fff;
}

ul.item_list li:nth-child(4n) {
    margin: 0 0 20px 0;
}

ul.item_list li:nth-child(4n+1) {
    clear: both;
}

.item_img{
	background: #fff;
	padding: 5px;
	
}
ul.item_list li img{
	width: 100%;
	height: 100%;
}
.item_disc{
	vertical-align: bottom;
}
ul.item_list li p{
	margin-top: 10px;
}
ul.item_list li p.item_name{
	font-weight: bold;
	letter-spacing: 0.05rem;
	line-height: 1.5rem
}
ul.item_list li p.item_price{
	text-align: right;
}
ul.item_list li p.item_price span{
	font-size: 1.2rem;
}
body.lb-disable-scrolling {
  overflow: hidden;
}

.item_subimg{
	display: none;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
  outline: none;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(https://chara-art.online/carart/worldpress/images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(https://chara-art.online/carart/worldpress/images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(https://chara-art.online/carart/worldpress/images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 10px 0;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
	display: block !important;
  line-height: 1.5em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(https://chara-art.online/carart/worldpress/images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.cart_bt{
	margin: 10px 0;
	color: #fff;
	border-radius: 12px;
	border: 0;
	padding: 12px;
	display: block;
	text-align: center;
}

.cart_bt:hover{
	color:fff;
	opacity: 0.7;
}

.ec_bt{
	display: block;
	width: 60%;
	margin: 30px auto; 
	padding: 20px 0;
	font-size: 2rem;
	text-align: center;
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
}

.ec_bt:hover{
	color: #fff;
	opacity: 0.8;
}

#goods button{
        border: none;
        cursor: pointer;
        outline: none;
        appearance: none;
}

.infinite-scroll-request{
	text-align: center;
	margin: 20px;
}
/*///////////////////////////////////////////////
トピックス
///////////////////////////////////////////////*/
.topics_date{}
.topics_title{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: bold;
	font-size: 2rem;
	line-height: 2.5rem;
	margin: 5px 0; 
}
.topics_box{
	background: #fff;
	padding: 25px 25px 0;
	box-sizing: border-box;
	margin-bottom: 40px;
}

.topics_title{ color:#fff;}

.topics_box img{
	width: 100%;
	height: 100%;
}
.topics_box p {
    line-height: 1.8em;
}

.more_bt{
	display: block;
	width: 60%;
	margin: 10px auto 40px;
	padding: 20px 0;
	font-size: 2rem;
	text-align: center;
	color: #fff;
	border-radius: 4px;
}

.more_bt:hover{
	color: #fff;
	opacity: 0.8;
}
.more_bt img{
	width: 15px;
	margin: -5px 0 0 10px;
}

/*///////////////////////////////////////////////
注意事項
///////////////////////////////////////////////*/

.precaution_box{
	background: #fff;
	padding: 25px;
	box-sizing: border-box;
}

/*///////////////////////////////////////////////
フッター
///////////////////////////////////////////////*/
footer{
	margin-top: 70px;
	color: #fff;
	text-align: center;
	padding: 0 0 20px 0;
}
footer a{
	color: #fff;
}
footer a:hover{
	color: #CCCCCC;
}
.for_top_bt{
	display: block;
	background: #646464;
	padding: 10px 0;
	text-decoration: none;
}
.for_top_bt:hover{
	opacity: 0.8;
	color: #fff;
}
.for_top_bt img{
	width: 15px;
}
.share_bt{
	margin: 20px 0;
}
.footer_bt{
	margin: 10px 0;
}
.footer_bt li{
	display: inline-block;
	text-align: center;
	margin: 10px 0;
}

.share {
    margin-top: 30px;
}

.share ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
	text-align: center;
}

.share ul:after {
    display: block;
    clear: both;
    content: '';
}

.share li {
    display: inline-block;
    margin: 0;
	padding: 10px;
	text-align: center;
}

.share li a {
    display: block;
    text-align: center;
	font-size: 1.5em;
}

.share li a:hover {
    opacity: .8;
}
.share li.facebooklink img{height: 100%;}
.share li.tweet .xicon{padding-top: 3px}
.share li.line img{height: 100%;}
address{
	font-size: 0.8rem;
	font-style: normal;
}

/*===============================================
● 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
	
/*///////////////////////////////////////////////
メニュー
///////////////////////////////////////////////*/
nav li{
	padding: 0 1%;
}

/*///////////////////////////////////////////////
新着情報
///////////////////////////////////////////////*/
section.w_60{
	width: 90%;
}

dl.news dt{
	width: 100%;
	float: none;
}
dl.news dd{
	width: 100%;
}

/*///////////////////////////////////////////////
グッズ
///////////////////////////////////////////////*/

ul.item_list li{
	width: 49%;
	margin: 0 2% 20px 0;
}
ul.item_list li:nth-child(2n) {
    margin: 0 0 20px 0;
}

ul.item_list li:nth-child(2n+1) {
    clear: both;
}
	

}