@charset "UTF-8";

/* pottery-festival
---------------------------------------------------------------------------*/
header {
	margin-bottom: 20px;
}

#mainContents {
	max-width: 1440px;
}

#pottery-festivalContents .color,
#pottery-festivalContents .title-line {
	color: #010071;
}

.title-line {
	position: relative;
	margin-bottom: 38px;
}

.title-line:after {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	background-color: #010071;
	width: 100%;
	height: 3px;
	margin-top: -1px;
	z-index: 0;
}

.title-line strong {
	display: inline-block;
	position: relative;
	background-color: #FFFFFF;
	padding-right: 20px;
	font-size: 24px;
	letter-spacing: 0.12em;
	z-index: 1;
}

.title-line.size-s:after {
	height: 2px;
	margin-top: 0;
}

.title-line.size-s strong {
	padding-right: 15px;
	font-size: 15px;
}


/* .sec-top
---------------------------------------------------------------------------*/
.sec-top {
	width: 100%;
	margin: 0 auto;
}

.sec-top .img img {
	width: 100%;
	height: auto;
	-webkit-backface-visibility: hidden;
}

.sec-top .lead {
	position: relative;
	width: 710px;
	margin: -2% auto 100px;
}

.sec-top .lead h1 {
	margin-bottom: 50px;
	text-align: center;
}

.sec-top .lead h1 em {
	display: block;
	margin-bottom: 17px;
}

.sec-top .lead p {
	margin-bottom: 0;
	font-size: 20px;
	line-height: 2;
	letter-spacing: 0.04em;
	text-align: justify;
}


.sec-top .lead .pic1,
.sec-top .lead .pic2 {
	display: block;
	position: absolute;
}

.sec-top .lead .pic1 { top: 90px; left: -155px; }
.sec-top .lead .pic2 { top: 90px; right: -145px; }


/* .sec-rule
---------------------------------------------------------------------------*/
.sec-rule {
	width: 1050px;
	margin: 0 auto 130px;
}

/* .rule-title
------------------------------------*/
.rule-title {
	width: 980px;
	margin: 0 auto 70px;
}

/* .rule-img
------------------------------------*/
.rule-img {
	position: relative;
	margin-bottom: 95px;
}

.rule-img figure {
	position: relative;
}

.rule-img figure .pic {
	display: block;
	position: absolute;
	z-index: 1;
}

.rule-img figure > span {
	position: relative;
	overflow: hidden;
	display: block;
	z-index: 0;
}

.rule-img figure > span:before {
	display: block;
	content: '';
	position: absolute;
	top: -108px;
	background-color: #FFFFFF;
	border-radius: 50%;
	width: 160px;
	height: 160px;
}

.rule-img .img2 > span:before { right: -98px; }
.rule-img .img3 > span:before { left: -91px; }

.rule-img .img1 {
	margin-bottom: 70px;
}

.rule-img .people1 { bottom: -36px; left: 120px; }
.rule-img .people2 { bottom: -46px; right: 12px; }

.rule-img .img2 {
	width: 616px;
}

.rule-img .dish-blue { top: -153px; left: -104px; }
.rule-img .people3 { top: -39px; right: -9px; }

.rule-img .img3 {
	position: absolute;
	bottom: 0;
	right: 0;
}

.rule-img .people4 { top: -38px; left: 23px; }

/* .rule-txt
------------------------------------*/
.rule-txt {
	position: relative;
	padding-left: 66px;
}

.rule-txt .attention {
	position: absolute;
	top: -294px;
	left: -40px;
}

.rule-txt .attention img {
	display: block;
}

.rule-txt .attention .arrow {
	margin: 12px 0 0 12px;
}

.rule-txt h2 {
	position: relative;
	margin: 0 0 20px -6px;
	font-size: 22px;
	letter-spacing: 0.1em;
	white-space: nowrap;
	z-index: 2;
}

.rule-txt h2 em {
	display: inline-block;
	margin-right: 12px;
	background-color: #FFAB9A;
	border-radius: 10px;
	padding: 4px 9px 4px 13px;
	font-size: 20px;
	letter-spacing: 0.06em;
}

.rule-txt h2 strong {
	position: relative;
	display: inline-block;
	padding-bottom: 4px;
}

.rule-txt h2 strong:after {
	display: block;
	content: '';
	position: absolute;
	bottom: 0;
	left: -1px;
	background-color: #FFAB9A;
	width: calc(100%);
	height: 3px;
}

.rule-txt h2 time {
	display: inline-block;
	transform: translateY(-1px);
}

.rule-txt h3 {
	position: relative;
	z-index: 0;
}

.rule-txt .pic {
	position: absolute;
	bottom: 41px;
	right: 25px;
	z-index: 1;
}

/* .rule-list
------------------------------------*/
.rule-list {
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	transform: translateX(5px);
}

.rule-list .inner {
	position: relative;
	box-sizing: border-box;
	background-color: #D4E3E7;
	border-radius: 10px;
	width: 502px;
	margin-top: 32px;
	padding: 275px 0 40px;
}

.rule-list .inner:nth-of-type(1),
.rule-list .inner:nth-of-type(2) {
	margin-top: 0;
}

.rule-list h3 {
	position: absolute;
	top: 22px;
	left: -19px;
}

.rule-list h3#rule2 {
	margin-top: -40px;
	padding-top: 40px;
}

.rule-list figure {
	position: absolute;
}

.rule-list .rule1 figure {
	top: 40px;
	left: 80px;
	width: 336px;
	height: 177px;
}

.rule-list .rule2 figure {
	top: 50px;
	left: 105px;
	width: 289px;
	height: 183px;
}

.rule-list .rule3 figure {
	top: 60px;
	left: 50px;
	width: 402px;
	height: 199px;
}

.rule-list .rule4 figure {
	top: 70px;
	left: 90px;
	width: 352px;
	height: 165px;
}

.rule-list figure span {
	display: block;
	position: absolute;
}

.rule-list .rule1 .pic2,
.rule-list .rule1 .pic3,
.rule-list .rule1 .pic4,
.rule-list .rule1 .pic5,
.rule-list .rule1 .pic6,
.rule-list .rule2 .pic6,
.rule-list .rule2 .pic7,
.rule-list .rule2 .pic8,
.rule-list .rule2 .pic9,
.rule-list .rule3 .pic6,
.rule-list .rule3 .pic7,
.rule-list .rule3 .pic8,
.rule-list .rule3 .pic9,
.rule-list .rule3 .pic10,
.rule-list .rule3 .pic11,
.rule-list .rule3 .pic12,
.rule-list .rule4 .pic2,
.rule-list .rule4 .pic3,
.rule-list .rule4 .pic4 {
	opacity: 0;
}

.rule-list .rule1 .pic1 { top: 33px; left: 1px; }
.rule-list .rule1 .pic2 { top: 0; left: 186px; transform-origin: center bottom; }
.rule-list .rule1 .pic3 { top: 45px; left: 271px; z-index: 1; }
.rule-list .rule1 .pic4 { top: 98px; left: 225px; z-index: 1; }
.rule-list .rule1 .pic5 { top: 84px; left: 170px; z-index: 2; transform-origin: center bottom; }
.rule-list .rule1 .pic6 { top: 111px; left: 107px; }
.rule-list .rule1 .pic7 { top: 33px; left: 196px; z-index: 0; }

.rule-list .rule2 .pic1 { top: 37px; left: 0px; }
.rule-list .rule2 .pic2 { top: 37px; left: 48px; }
.rule-list .rule2 .pic3 { top: 37px; left: 96px; }
.rule-list .rule2 .pic4 { top: 37px; left: 145px; }
.rule-list .rule2 .pic5 { top: 37px; left: 193px; }
.rule-list .rule2 .pic6 { top: 0px; left: 125px; }
.rule-list .rule2 .pic7 { bottom: -15px; right: -150px; }
.rule-list .rule2 .pic8 { bottom: 44px; right: -67px; }
.rule-list .rule2 .pic9 { top: 66px; left: 248px; }

.rule-list .rule3 .pic1 { top: 0px; left: 94px; }
.rule-list .rule3 .pic2 { top: 20px; left: 71px; }
.rule-list .rule3 .pic3 { top: 20px; left: 281px; }
.rule-list .rule3 .pic4 { top: 33px; left: 6px; }
.rule-list .rule3 .pic5 { top: 36px; left: 312px; }
.rule-list .rule3 .pic6 { top: 54px; left: 0px; }
.rule-list .rule3 .pic7 { top: 60px; left: 3px; }
.rule-list .rule3 .pic8 { top: 62px; left: 43px; }
.rule-list .rule3 .pic9 { top: 73px; left: 134px; }
.rule-list .rule3 .pic10 { top: 67px; left: 264px; }
.rule-list .rule3 .pic11 { top: 54px; left: 352px; }
.rule-list .rule3 .pic12 { top: 58px; left: 355px; }

.rule-list .rule4 .pic1 { top: 0px; left: 0px; transform: translateX(50px); }
.rule-list .rule4 .pic2 { top: 71px; left: 110px; }
.rule-list .rule4 .pic3 { top: 47px; left: 159px; opacity: 1; overflow: hidden; /* width: 102px; */width: 0; height: 86px; }
.rule-list .rule4 .pic3 img { position: absolute; top: 0; left: 0; }
.rule-list .rule4 .pic4 { top: 32px; left: 247px; }

.rule-list h4 {
	margin-bottom: 16px;
	line-height: 2.8;
	text-align: center;
}

.rule-list h4 span {
	display: inline-block;
	background-color: #010071;
	padding: 4px 5px 5px 8px;
	color: #FFFFFF;
	font-size: 24px;
	letter-spacing: 0.1em;
	line-height: 1;
	white-space: nowrap;
}

.rule-list p {
	margin-bottom: 0;
	padding: 0 45px;
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.02em;
	text-align: justify;
}


/* .sec-flow
---------------------------------------------------------------------------*/
.sec-flow {
	box-sizing: border-box;
	width: 1080px;
	margin: 0 auto 75px;
	padding-left: 8px;
}

.sec-flow dl {
	display: -webkit-box;
	display: flex;
	justify-content: space-between;
}

.sec-flow dl > div {
	position: relative;
	width: 230px;
}

.sec-flow dl > div:after {
	display: block;
	content: '';
	position: absolute;
	top: 10px;
	right: -19px;
	background: url(../img/pottery-festival/ico-arrow-dot.svg) no-repeat;
	width: 21px;
	height: 37px;
}

.sec-flow dl > div:last-of-type:after {
	display: none;
}

.sec-flow dt {
	margin-bottom: 15px;
	line-height: 2.3;
}

.sec-flow dt span {
	display: inline-block;
	background-color: #010071;
	padding: 5px 5px 6px 7px;
	color: #FFFFFF;
	font-size: 18px;
	letter-spacing: 0.12em;
	line-height: 1;
	white-space: nowrap;
}

.sec-flow dd p {
	margin-bottom: 0;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.06em;
	text-align: justify;
}


/* .sec-store
---------------------------------------------------------------------------*/
.sec-store {
	box-sizing: border-box;
	width: 1080px;
	margin: 0 auto 140px;
	padding-left: 8px;
}

.sec-store h2 {
	margin-bottom: 55px;
}

.sec-store h2 .pic1 {
	position: absolute;
	top: -118px;
	right: 12px;
	z-index: 2;
}

.sec-store h2 .pic2 {
	position: absolute;
	top: -29px;
	left: 536px;
	z-index: 2;
}

.sec-store-inner {
	padding-right: 10px;
}

.sec-store-inner .inner {
	display: -webkit-box;
	display: flex;
	justify-content: space-between;
}

.sec-store-inner figure {
	position: relative;
	width: 648px;
	min-width: 648px;
	z-index: 1;
}

.sec-store-inner figure .pic {
	display: block;
	position: absolute;
}

.sec-store-inner .inner figure .pic {
	top: -37px;
	left: 210px;
}

.sec-store-inner .txt {
	position: relative;
	align-self: flex-end;
	padding: 0 0 0 60px;
}

.sec-store-inner .logo {
	margin-bottom: 25px;
}

.sec-store-inner h3 {
	position: absolute;
	top: 0;
	left: 204px;
	letter-spacing: 0.1em;
}

.sec-store-inner h3 em {
	display: block;
	margin: 0 0 8px 1px;
	font-size: 14px;
}

.sec-store-inner h3 strong {
	font-size: 23px;
}

.sec-store-inner a {
	display: inline-block;
	position: absolute;
	top: 60px;
	left: 204px;
	font-size: 16px;
}

.sec-store-inner a i {
	display: inline-block;
	margin: 0 10px 0 1px;
	font-size: 14px;
	letter-spacing: 0.04em;
	transform: translateY(3px);
}

.sec-store-inner p {
	font-size: 14px;
	line-height: 1.95;
	letter-spacing: 0.02em;
	text-align: justify;
}

.sec-store-inner p:last-of-type {
	margin-bottom: 0;
}


/* .sec-access
---------------------------------------------------------------------------*/
.sec-access {
	display: -webkit-box;
	display: flex;
	justify-content: space-between;
	width: 1084px;
	margin: 0 auto 120px;
	transform: translateX(-4px);
}

.sec-access iframe {
	border: 2px solid #010071 !important;
	width: 700px;
	height: 400px;
}

.sec-access .txt {
	position: relative;
	width: 315px;
	padding-top: 6px;
	white-space: nowrap;
}

.sec-access .txt .pic1 {
	position: absolute;
	top: -18px;
	right: 24px;
	z-index: 1;
}

.sec-access .txt .pic2 {
	position: absolute;
	top: 100px;
	right: 90px;
	z-index: 1;
}

.sec-access .txt h2 {
	margin-bottom: 24px;
	z-index: 0;
}

.sec-access .txt .logo {
	margin: 0 0 24px -2px;
}

.sec-access .txt .logo img {
	width: 148px;
	height: auto;
}

.sec-access .txt address {
	display: block;
	margin-bottom: 26px;
	font-size: 21px;
	line-height: 1.5;
	letter-spacing: 0.1em;
	font-style: normal;
}

.sec-access .txt address span {
	display: block;
	margin: 0 0 5px 1px;
	font-size: 15px;
	letter-spacing: 0.08em;
}

.sec-access .txt .btn-map {
	margin: 0 0 22px -2px;
}

.sec-access .txt .btn-map a {
	display: inline-block;
	background-color: #F38D79;
	border-radius: 5px;
	padding: 12px 12px 12px 15px;
	color: #FFFFFF;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-align: center;
}

.sec-access .txt p {
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: 0.1em;
}

.sec-access .txt p:last-of-type {
	margin-bottom: 0;
}

.sec-access .txt p span {
	font-size: 13px;
}


/* .sec-attention
---------------------------------------------------------------------------*/
.sec-attention {
	position: relative;
	box-sizing: border-box;
	background-color: #F0F5F6;
	border-radius: 4px;
	width: 1110px;
	margin: 0 auto;
	padding: 80px 75px 50px;
}

.sec-attention .pic {
	display: block;
	position: absolute;
	z-index: 1;
}

.sec-attention .car {
	top: -47px;
	left: -37px;
}

.sec-attention .people5 {
	top: -126px;
	right: -25px;
}

.sec-attention h2 {
	margin-bottom: 30px;
	font-size: 18px;
	letter-spacing: 0.15em;
}

.sec-attention h2 i {
	display: inline-block;
	transform: translateY(-2px);
	margin-right: 2px;
}

.attention-list li {
	position: relative;
	margin-bottom: 18px;
	padding-left: 20px;
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: 0.07em;
}

.attention-list li:last-of-type {
	margin-bottom: 0;
}

.attention-list li:before {
	display: block;
	content: '※';
	position: absolute;
	top: 0;
	left: 0;
}

.btn-check {
	position: relative;
	box-sizing: border-box;
	background-color: #ABC5CB;
	box-sizing: border-box;
	margin: 70px -5px 0;
	padding: 32px 0;
	color: #FFFFFF;
	font-size: 18px;
	letter-spacing: 0.15em;
	text-align: center;
	cursor: pointer;
	transition: .2s ease-out;
}

.btn-check:hover {
	background-color: #F38D79;
	opacity: 1;
}

.btn-check span {
	display: block;
}

.btn-check span .pic {
	display: inline-block;
	position: inherit;
	margin: -90px -8px -4px 2px;
}

.btn-check input {
	-webkit-appearance: checkbox;
	margin-right: 22px;
	transform: scale(1.8);
	pointer-events: none;
}

.sec-attention .people6 {
	top: -23px;
	left: 82px;
}

.sec-attention .people7 {
	bottom: -74px;
	left: 84px;
}

.sec-attention .people8 {
	top: -49px;
	right: 158px;
}

.sec-attention .people9 {
	bottom: -50px;
	right: 97px;
}


/* .sec-cart
---------------------------------------------------------------------------*/
.sec-cart-wrap {
	display: none;
}

.sec-cart {
	width: 1130px;
	margin: 0 auto 100px;
	padding-top: 200px;
	white-space: nowrap;
}

.sec-cart .hidden {
	display: none;
}

.table-cart {
	position: relative;
	display: -webkit-box;
	display: flex;
	justify-content: space-between;
}

.table-cart .time {
	width: 140px;
	margin-top: 38px;
}

.table-cart .time li,
.day-wrap .cart-wrap li {
	box-sizing: border-box;
	height: 91px;
	margin-bottom: 7px;
}

.table-cart .time li:last-of-type,
.day-wrap .cart-wrap li:last-of-type {
	margin-bottom: 0;
}

.table-cart .time li {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: end;
	justify-content: flex-end;
	-webkit-box-align: center;
	align-items: center;
	padding-right: 13px;
	font-size: 18px;
	letter-spacing: 0.06em;
	text-align: right;
}

.table-cart .time li i {
	display: inline-block;
	padding: 0 3px 0 2px;
}

.table-cart > h2 {
	position: absolute;
	top: -82px;
	padding-bottom: 18px;
	border-bottom: 1px solid #F38D79;
	text-align: center;
}

.table-cart > h2:nth-of-type(1) { left: 143px; width: 277px; }
.table-cart > h2:nth-of-type(2) { right: 0; width: 702px; }

.table-cart > h2:before,
.table-cart > h2:after {
	display: block;
	content: '';
	position: absolute;
	bottom: -5px;
	background-color: #F38D79;
	width: 1px;
	height: 9px;
}

.table-cart > h2:before { left: 0; }
.table-cart > h2:after { right: 0; }

.table-cart > h2 strong {
	font-size: 22px;
	letter-spacing: 0.1em;
}

.table-cart > h2 em {
	padding-left: 8px;
	color: #BE403A;
	font-size: 15px;
	letter-spacing: 0.1em;
}

.day-wrap {
	width: 135px;
	min-width: 135px;
	margin-left: 7px;
}

.day-wrap .day {
	height: 38px;
	padding-left: 8px;
	font-size: 20px;
	letter-spacing: 0.12em;
	text-align: center;
}

.day-wrap .cart-wrap {
	border-radius: 2px;
}

.day-wrap .cart-wrap li {
	background-color: #F6FAFB;
	border-radius: 2px;
	padding: 22px 10px 0;
}

.day-wrap .cart-wrap li time {
	display: block;
	margin-bottom: 10px;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-align: center;
}

.day-wrap .cart-wrap li time span {
	display: inline-block;
	font-size: 10px;
	transform-origin: left bottom;
	transform: scale(0.9);
}

.day-wrap .cart-wrap li time i {
	display: inline-block;
	margin: 0 1px 0 2px;
}

.cartjs_product_table {
	display: inline-block;
	margin-right: 16px;
}

.cartjs_product_num th {
	display: none !important;
}

.cartjs_product_num input {
	position: relative;
	box-sizing: border-box;
	border: 1px solid #010071;
	border-radius: 3px;
	width: 21px !important;
	height: 19px !important;
	padding: 1px 1px 2px 2px;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-align: center;
}

.cartjs_product_num td {
	position: relative;
	padding: 0 !important;
}

.cartjs_product_num td:after {
	display: block;
	content: '枚';
	position: absolute;
	top: 8px;
	left: 24px;
	font-size: 10px;
	transform-origin: left bottom;
	transform: scale(0.9);
	z-index: 2;
}

.cartjs_cart_in,
.soldout-btn {
	display: inline-block;
	position: relative;
	background: #010071;
	border-radius: 3px;
	width: 77px;
	height: 24px;
	transition: .15s linear;
}

.cartjs_cart_in:hover {
	opacity: 0.5;
}

.cartjs_cart_in:after,
.soldout-btn:after {
	display: block;
	content: 'チケット購入';
	position: absolute;
	top: 5px;
	left: 50%;
	margin: 0 0 0 1px;
	color: #FFFFFF;
	font-size: 12px;
	letter-spacing: 0.06em;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 1;
}

.cartjs_cart_in input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 2;
}

/* .sold
------------------------------------*/
.day-wrap .cart-wrap li {
	position: relative;
}

.cart-wrap li.sold {
	color: #8A8A96;
}

.cart-wrap .soldout {
	display: none;
}

.cart-wrap li.sold .soldout {
	display: block;
}

.cart-wrap li.sold:before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.1);
	width: 100%;
	height: 100%;
	z-index: 10;
}

.cart-wrap li.sold .label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 11;
}

.cart-wrap li.sold .cartjs_box {
	display: none !important;
}

.cart-wrap li.sold .cartjs_product_table {
	margin-right: 12px;
}

.cart-wrap li.sold .cartjs_product_num input {
	border-color: #8A8A96;
}

.cart-wrap li.sold .soldout-btn {
	background-color: #8A8A96;
}


/* .bnr-attention
---------------------------------------------------------------------------*/
.bnr-attention {
	position: fixed;
	bottom: -10px;
	right: 25px;
	z-index: 100;
	transition: .15s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	visibility: hidden;
	opacity: 0;
}

.bnr-attention.active {
	bottom: 25px;
	transition: .35s cubic-bezier(0.165, 0.84, 0.44, 1);
	visibility: visible;
	opacity: 1;
}

.bnr-attention a {
	display: block;
	background-color: #F8F4D4;
	border-radius: 50%;
}

.bnr-attention a:hover {
	opacity: 1;
}

.bnr-attention a img {
	transition: .15s ease-out;
}

.bnr-attention a:hover img {
	opacity: 0.6;
}