/*
* YUKOYUKO NET LP
* style.css
*
*/


@font-face {
  font-family: "YuGothic M";
  src: local(Yu Gothic Medium);
}


/* --------------------------------
   □ body
-------------------------------- */

main > section.contents{
	font-size: 19px;
    font-size: 1.9rem;

	font-family: 'Noto Serif JP' , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

	background:#fff 0 0 repeat;

	color:#282828;
	overflow:hidden;
}

.popWindow p,
main > section.contents ul li,
main > section.contents dl dd,
main > section.contents p{
	line-height:1.8;
}

section.contents h1,
section.contents h2,
section.contents h3,
section.contents h4,
section.contents h5,
section.contents h6{
	font-weight:500;
	line-height:1.3;
}

main > section.contents .vertical{
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

main > section.contents span.marker{
	background: linear-gradient(transparent 88%, #FFF000 0%);
}
main > section.contents .vertical span.marker{
	background: linear-gradient(270deg,transparent 88%, #FFF000 0%);
}

main > section.contents em{
	font-style:normal;
}

main > section.contents .gothic{
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "YuGothic M" , "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
}

.popWindow .serif,
main > section.contents .serif{
	font-family: 'Noto Serif JP' , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

main > section.contents .yuserif{
	font-family: "游明朝", YuMincho, 'Noto Serif Japanese' , "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

main > section.contents .en{
	font-family: 'EB Garamond', serif;
}

main > section.contents > section,
main > section.contents > .chapter,
main > section.contents > .wide .container{
	width:1080px;
	margin-left: auto ;
	margin-right: auto ;
	text-align: left;
	box-sizing:border-box;
}

main > section.contents > section.wide,
main > section.contents > .chapter.wide{
	width:100%;
}


main > section.contents section:after,
main > section.contents .chapter:after{
	clear:both;
	display:block;
	content:"";
}

/* --------------------------------
   □ p.text
-------------------------------- */
main > section.contents p.text{
	line-height:1.8;
}

/* --------------------------------
   □ ボタンスタイル
-------------------------------- */
main > section.contents .buttonStyle{
	text-align:center;
}

main > section.contents .buttonStyle a,
main > section.contents .buttonStyle > span{
	position:relative;
	display:inline-block;
	text-decoration:none;
	line-height:1.1;
	padding:25px 15px 25px 48px;
	margin:0 auto;
	color:#fff;
	background:#222222 0 0 no-repeat;
	transition: all 300ms 0s ease;
	font-weight: 400;
	border-radius: 6px;
}

	main > section.contents .buttonStyle a:hover,
	main > section.contents .buttonStyle > span:hover{
		background:#474747;
	}

	main > section.contents .buttonStyle a span,
	main > section.contents .buttonStyle > span span{
		position:relative;
		vertical-align:middle;
		text-align:center;
		font-size:18px;
		font-size:1.8rem;
		line-height:1.1;
		padding-right:38px;
		background:url(https://static.yukoyuko.net/aso/kagoshima-wellness/button-arrow.png) 97% 50% no-repeat;
		transition: all 300ms 0s ease;
	}

	main > section.contents .buttonStyle a:hover span,
	main > section.contents .buttonStyle > span:hover span{
		background-position:99% 50%;
	}

main > section.contents .buttonStyle.white a,
main > section.contents .buttonStyle.white > span{
	color: #333;
	background-color:#fff;
}
	main > section.contents .buttonStyle.white.white a span,
	main > section.contents .buttonStyle > span span{
		background-image:url(https://static.yukoyuko.net/aso/kagoshima-wellness/button-w-arrow.png);
	}


	main > section.contents .buttonStyle.white a:hover,
	main > section.contents .buttonStyle.white > span:hover{
		background-color:#ddd;
	}

/* --------------------------------
   □ accent
-------------------------------- */
main .accent{
	position: relative;
	box-sizing:border-box;
	display:table;
	width:100%;
	height:750px;
}

main .accent:before{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 24px;
	content: "";
}

main .accent h1{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	background: url(https://static.yukoyuko.net/aso/kagoshima-wellness/accent_pc.jpg) 50% 50% no-repeat;
	background-size:cover;
}

main .accent h1 img{
	margin-right: 30%;
	animation:show 2s both;
	animation-delay: 1.2s;
	transition: all 300ms 0s ease;
}

/* --------------------------------
   □ intro
-------------------------------- */
main .intro{
	padding: 91px 0 0 0;
	position:relative;
	background: #dfeaed ;
}

main .intro .leadArea{
	margin-bottom: 102px;
	padding: 0 70px;
}
	main .intro .leadArea h2{
		font-size: 30px;
		font-size: 3.0rem;
		margin-bottom: 28px;
		text-align: center;
		line-height:1.4;
		padding-top: 49px;
		background: url("https://static.yukoyuko.net/aso/kagoshima-wellness/introduction-background.png") 50% 0 no-repeat;

	}

	main .intro .leadArea p.text{
		font-size: 16px;
		font-size: 1.6rem;
		line-height:2;
	}

/* --------------------------------
   □ column
-------------------------------- */
main .intro .column{
	position: relative;
	margin-bottom: 85px;
}

	main .intro .column .explain{
		position: absolute;
		top: 55px;
		background: #fff;
		width:572px;
		padding: 53px 69px;
	}

		main .intro .column .explain .no{
			font-size: 18px;
			font-size: 1.8rem;
			margin-bottom: 15px;
		}
		main .intro .column .explain .no:after{
			display: inline-block;
			content: "";
			width: 136px;
			height: 1px;
			background: #333;
			margin-left: 9px;
			vertical-align: middle;
		}

		main .intro .column .explain h3{
			font-size: 69px;
			font-size: 6.9rem;
			line-height: 1.1;
			margin-bottom: 34px;
			letter-spacing: 0;
		}

		main .intro .column .explain dl dt{
			font-size: 25px;
			font-size: 2.5rem;
			line-height: 1.2;
			margin-bottom: 19px;
		}
		main .intro .column .explain dl dd{
			font-size: 16px;
			font-size: 1.6rem;
			line-height: 2;
		}

		#column1 .explain{
			left: -70px;
		}

		#column1 .image{
			float: right;
			margin-right: -110px;
		}

	#column2 {
		margin-bottom: 122px;
	}

		#column2 .explain{
			top: 35px;
			right: -70px;
		}
		#column2 .image{
			float: left;
		}

/* --------------------------------
   □ aboutKagoshima
-------------------------------- */
#aboutKagoshima{
	background: url("https://static.yukoyuko.net/aso/kagoshima-wellness/about-kagoshima-background.jpg") 50% 50% no-repeat;
	background-size: cover;
	padding: 113px 0 0 0;
}

	#aboutKagoshima .container{
		position: relative;
	}

	#aboutKagoshima .container h3{
		position: absolute;
		right: 0;
		top: 0;
		font-size: 37px;
		font-size: 3.7rem;
		line-height: 1.3;
	}

	#aboutKagoshima p.image{
		margin: 0;
		text-align: right;
	}
	#aboutKagoshima p.image img{
		width: 100%;
		max-width: 80%;
	}

/* --------------------------------
   □ access
-------------------------------- */
#access{
	padding: 47px 0;
	background: #6ea9b6 url("https://static.yukoyuko.net/aso/kagoshima-wellness/access-background.jpg") 50% 50% repeat;
}

#access dl{
	display: table;
	width: 100%;
}
	#access dl > *{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	#access dl > dt{
		width:180px;
		text-align: left;
		color: #fff;
	}
	#access dl > dt em{
		display: block;
		text-align: center;
		font-size: 43px;
		font-size: 4.3rem;
		line-height: 1.1;
		margin-bottom: 5px;
	}
	#access dl > dt span{
		display: block;
		text-align: center;
		font-size: 15px;
		font-size: 1.5rem;
	}


/* --------------------------------
   □ courses
-------------------------------- */
main #courses {
	padding: 87px 0 0 0;
	background: #dfeaed ;
}

	main #courses .catch{
		line-height: 1.1;
		text-align: center;
		color: #fff;
		font-size: 89px;
		font-size: 8.9rem;
	}

	main #courses h2{
		text-align: center;
		font-size: 40px;
		font-size: 4.0rem;
		margin-bottom: 66px;
	}
	main #courses h2 span{
		display: block;
		text-align: center;
		font-size: 21px;
		font-size: 2.1rem;
		background: url("https://static.yukoyuko.net/aso/kagoshima-wellness/navigation-title-decoration.png") 50% 50% no-repeat;
	}



/* --------------------------------
   □ .pageNavigation
-------------------------------- */
main #courses .pageNavigation {
	position: relative;
	margin-bottom: 72px;
}

	main #courses .pageNavigation ul{
		border-bottom: 2px solid #242424;
	}
	main #courses .pageNavigation ul:after{
		clear: both;
		content: "";
		display: block;
	}

	main #courses .pageNavigation ul li{
		position: relative;
		box-sizing: border-box;
		width: 287px;
		float: left;
		margin-bottom: -2px;
	}

	main #courses .pageNavigation ul li a{
		position: relative;
		display: block;
		text-decoration: none;
		overflow: hidden;
		padding: 23px 0;
		text-align: center;
		background: #dfeaed;
		box-sizing: border-box;

		border-top:2px solid #dfeaed;
		border-bottom:2px solid #242424;
	}
	main #courses .pageNavigation ul li a:hover{
		color: #58767e;
	}
	/*
	main #courses.day1 .pageNavigation ul li.day1 a,
	main #courses.day2 .pageNavigation ul li.day2 a,
	main #courses.day3 .pageNavigation ul li.day3 a{
	*/
	main #courses .pageNavigation ul li.selected a
	{
		border:2px solid #242424;
		border-bottom:2px solid #dfeaed;
	}


	main #courses .pageNavigation ul li.day1{
		margin-left: 80px;
	}

#courses .course{
	visibility: hidden;
	height: 1px;
	overflow: hidden;
}


#courses .course.is_show{
	height: auto;
	overflow: inherit;
	visibility: visible;
	transition: 0.5s;
	animation:show 1s both;
}


/* --------------------------------
   □ .date
-------------------------------- */
#courses .date{
	margin-bottom: 70px;
	padding: 39px 130px;
	display: table;
	position: relative;
	background:url("https://static.yukoyuko.net/aso/kagoshima-wellness/day-corner1.png") 0 0 no-repeat , url("https://static.yukoyuko.net/aso/kagoshima-wellness/day-corner2.png") 100% 100% no-repeat , #fff;
}

	#courses .date > *{
		display: table-cell;
		vertical-align: middle;
	}
	#courses .date > h3{
		font-size: 54px;
		font-size: 5.4rem;
		width: 4em;
	}
	#courses .date > h3:after{
		display: inline-block;
		margin-left: 5px;
		content: url("https://static.yukoyuko.net/aso/kagoshima-wellness/slash.png");
		vertical-align: middle;
	}
	#courses .date > p{
		font-size: 16px;
		font-size: 1.6rem;
		margin: 0;
	}

/* --------------------------------
   □ .item
-------------------------------- */
#courses .item{
	position: relative;
	margin-bottom: 144px;
}
	#courses .item:before{
		position: absolute;
		top: -79px;
		content: url("https://static.yukoyuko.net/aso/kagoshima-wellness/decoration.png");
	}
	#courses .item.leftStyle:before{
		right: -90px;
	}
	#courses .item.rightStyle:before{
		left: -150px;
	}

#courses .item .division {
	overflow: hidden;
	position: relative;
}

	#courses .item .division .explain{
		float: left;
	}
	#courses .item .division .image{
		float: right;
	}

	#courses .item.leftStyle .division .explain{
		float: right;
	}
	#courses .item.leftStyle .division .image{
		float: left;
	}

#courses .item .explain.normal{
	position: relative;
	width: 400px;
}

	#courses .item .point{
	}

	#courses .item .point .status p{
		font-size: 18px;
		font-size: 1.8rem;
		line-height: 1.3;
	}
	#courses .item .point .status p.time{
		margin-bottom: 7px;
	}
	#courses .item .point .status p.address:before{
		display: inline-block;
		margin-right: 4px;
	}


	#courses .item .explain.normal .point{
		display: table;
		margin-bottom: 18px;
	}
		#courses .item .explain.normal .point > *{
			display: table-cell;
			vertical-align: middle;
		}
		#courses .item .explain.normal .point > .kind{
			margin: 0;
			width: 102px;
		}

	#courses .item .point.gourmet  p{
		color: #DE8B91;
	}
	#courses .item .point.gourmet .status p.address:before{
		content: url("https://static.yukoyuko.net/aso/kagoshima-wellness/gourmet-pin.png")
	}

	#courses .item .point.fermentation  p{
		color: #E2972A;
	}
	#courses .item .point.fermentation .status p.address:before{
		content: url("https://static.yukoyuko.net/aso/kagoshima-wellness/fermentation-pin.png")
	}

	#courses .item .point.culture  p{
		color: #C0955E;
	}
	#courses .item .point.culture .status p.address:before{
		content: url("https://static.yukoyuko.net/aso/kagoshima-wellness/culture-pin.png")
	}

	#courses .item .point.nature  p{
		color: #A7A548;
	}
	#courses .item .point.nature .status p.address:before{
		content: url("https://static.yukoyuko.net/aso/kagoshima-wellness/nature-pin.png")
	}

#courses .item .name{
}

	#courses .item .name > .no{
		font-size: 89px;
		font-size: 8.9rem;
		line-height: 1.1;
	}
	#courses .item .name h4{
		font-size: 30px;
		font-size: 3.0rem;
		line-height: 1.3;
	}
	#courses .item .name h4 small{
		font-size: 17px;
		font-size: 1.7rem;
	}

#courses .item .explain.normal .name{
	display: table;
	margin-bottom: 29px;
}

	#courses .item .explain.normal .name > *{
		display: table-cell;
		vertical-align: middle;
	}

	#courses .item .explain.normal .name > .no{
		width: 1.2em;
	}


#courses .item .sentence h5{
	font-size: 23px;
	font-size: 2.3rem;
	line-height: 1.4;
	margin-bottom: 10px;
}
	#courses .item .sentence p{
		font-size: 16px;
		font-size: 1.6rem;
		line-height: 2;
	}

	#courses .item .column{
		overflow: hidden;
		position: relative;
		background: #fff;
		margin-top: 58px;
		padding: 42px 64px;
	}
		#courses .item .column:before,
		#courses .item .column:after{
			position: absolute;
			left: -1px;
			width: 1082px;
			height: 21px;
			background: 0 0 no-repeat;
			content: "";
		}

		#courses .item .column:before{
			top:-1px;
			background-image:url("https://static.yukoyuko.net/aso/kagoshima-wellness/column-corner1.png");
		}
		#courses .item .column:after{
			bottom:-1px;
			background-image:url("https://static.yukoyuko.net/aso/kagoshima-wellness/column-corner2.png");
			background-position: 100% 100%;
		}

	#courses .item .column .explain{
		float: right;
		width: 580px;
	}
		#courses .item .column .explain h5{
			font-size: 23px;
			font-size: 2.3rem;
			line-height: 1.4;
			background: url("https://static.yukoyuko.net/aso/kagoshima-wellness/column-decoration.png") 100% 50% no-repeat;
			min-height: 75px;
			padding-top: 29px;
			margin-bottom: 11px;
		}
		#courses .item .column .explain p{
			font-size: 16px;
			font-size: 1.6rem;
			line-height: 2;
			margin: 0;
		}
	#courses .item .column .image{
		float: left;
	}



	/* --------------------------------
	   □ .pickup
	-------------------------------- */
	#courses .item.pickup .division{
		margin-bottom: 67px;
	}

		#courses .item.pickup .headline .explain{
			width: 150px;
		}
		#courses .item.pickup .headline .image{

		}
		#courses .item.pickup .headline .name{
			margin-bottom: 25px;
		}

		#courses .item.pickup .headline .name > p.no{
			text-align: center;
		}
		#courses .item.pickup .headline .name .title{
			position: relative;
		}
		#courses .item.pickup .headline .name .title h4{
			position: absolute;
			left: 50%;
			margin-left:-0.6em;
			height: 250px;
		}

		#courses .item.pickup .headline .name .title h4.line2{
			margin-left:-1.2em;
		}
		#courses .item.pickup .headline .name .title h4.line3{
			margin-left:-1.8em;
		}


	#courses .item.pickup .headline .point{
		margin-bottom: 25px;
	}
		#courses .item.pickup .headline .point > *{
			text-align: center;
		}
		#courses .item.pickup .headline .point > .kind{
		margin-bottom: 15px;
		}

	#courses .item.pickup > section{
		position: relative;
		margin-bottom: 65px;
	}
	#courses .item.pickup > section:last-child{
		margin-bottom: 0;
	}

	#courses .item.pickup .sentence{
	}
	#courses .item.pickup .sentence:after{
		clear: both;
		display: block;
		content: "";
	}
	#courses .item.pickup .sentence .explain{
		width: 462px;
		float: left;
	}
	#courses .item.pickup .sentence .image{
		float: right;
		margin-top: -160px;
		padding-right: 43px;
	}

	#courses .item.pickup.leftStyle .sentence .explain{
		float: right;
	}
	#courses .item.pickup.leftStyle .sentence .image{
		float: left;
		padding-right: 0;
		padding-left: 33px;
	}


	#courses .item.pickup .column{
		margin-top: 0;
	}



	/* --------------------------------
	   □ #item9
	-------------------------------- */
	#courses #item9{
		position: relative;
		background: #fff;
        padding: 50px 50px;
        margin-left: -50px;
        width: calc(100% + 100px);
    }

	#courses #item9:before{
		content: none;
	}

	/* --------------------------------
	   □ #item11
	-------------------------------- */

	#courses #item11:before{
		left: 30%;
	}

	#courses #item11 .division{
		position: relative;
		text-align: center;
		margin-bottom: 37px;
	}

		#courses #item11 .division:before,
		#courses #item11 .division:after{
			position: absolute;
			bottom:23px;
		}

		#courses #item11 .division:before{
			left: 80px;
			content: url("https://static.yukoyuko.net/aso/kagoshima-wellness_d3/item11-decoration1.png");
		}
		#courses #item11 .division:after{
			right: 80px;
			content: url("https://static.yukoyuko.net/aso/kagoshima-wellness_d3/item11-decoration2.png");
		}

	#courses #item11 .division p.address{
		margin: 25px 0 0 0;
		font-size: 18px;
		font-size: 1.8rem;
		color: #c05340;
	}

	#courses #item11 .division p.address:before {
		content: url("https://static.yukoyuko.net/aso/kagoshima-wellness/pref-pin.png");
		display: inline-block;
		margin-right: 4px;
	}

	#courses #item11 .shop h5{
		text-align: center;
		font-size: 23px;
		font-size: 2.3rem;
		margin-bottom: 40px;
		background: url("https://static.yukoyuko.net/aso/kagoshima-wellness_d3/item11-title-decoration.png") 50% 50% no-repeat;
	}

	#courses #item11 .shop ul.list{
		overflow: hidden;
		margin-left: -45px;
	}
	#courses #item11 .shop ul.list li{
		float: left;
		width: 330px;
		margin-left: 45px;
	}

	#courses #item11 .shop ul.list li img{
		width: 100%;
	}
	#courses #item11 .shop ul.list li dl dt span{
		display: block;
		margin-top: 4px;
		text-align: center;
		font-size: 20px;
		font-size: 2.0rem;
		font-weight: 600;
		margin-bottom: 25px;
	}
	#courses #item11 .shop ul.list li dl dt span.no{
		margin-top: 10px;
		font-size: 49px;
		font-size: 4.9rem;
		margin-bottom: 0;
		font-weight: 500;
		line-height: 1.1;
	}
	#courses #item11 .shop ul.list li dl dd{
		font-size: 16px;
		font-size: 1.6rem;
		line-height: 2;
	}


	/* --------------------------------
	   □ #item13
	-------------------------------- */

	#courses #item13{
		margin-bottom: 83px;
	}

/* ◇ message
-------------------------------- */

#courses .message{
	position: relative;
	text-align: center;
	margin-bottom: 76px;
	padding-bottom: 113px;
	font-size: 30px;
	font-size: 3.0rem;
	line-height: 2;
	background: url("https://static.yukoyuko.net/aso/kagoshima-wellness/arrow-head.png") 50% 100% no-repeat;
}
	#courses .message:before{
		display: block;
		text-align: center;
		content: url("https://static.yukoyuko.net/aso/kagoshima-wellness/arrow-tail.png");
		margin-bottom: 10px;
	}

#courses .message span.no{
	display: block;
	text-align: center;
	font-size: 89px;
	font-size: 8.9rem;
	line-height: 1.1;
}

/* ◇ message
-------------------------------- */

#courses .lastmessage{
	padding-top: 126px;
	background: url("https://static.yukoyuko.net/aso/kagoshima-wellness/arrow-head.png") 50% 0% no-repeat;
	color: #1a1a1a;
	margin-bottom: 100px;
}

	#courses .lastmessage dt{
		font-size: 30px;
		font-size: 3.0rem;
		line-height: 1.1;
		text-align: center;
		margin-bottom: 28px;
	}

	#courses .lastmessage dt:before{
		display:block;
		margin: 0 auto 23px auto;
		content: url("https://static.yukoyuko.net/aso/kagoshima-wellness/home.png");
	}

	#courses .lastmessage dd{
		text-align: center;
		font-size: 20px;
		font-size: 2.0rem;
		line-height: 1.8;
	}


/* ◇ coursemap
-------------------------------- */

#courses .coursemap h5{
	text-align: center;
	background: url("https://static.yukoyuko.net/aso/kagoshima-wellness/map-line.png") 50% 60% repeat-x;
	margin-bottom: 46px;
}

	#courses .coursemap h5 em{
		display: inline-block;
		background: #dfeaed;
		padding: 0 31px;
		font-size: 28px;
		font-size: 2.8rem;
	}
	#courses .coursemap h5 em:before{
		display: block;
		margin: 0 auto;
		content: url("https://static.yukoyuko.net/aso/kagoshima-wellness/course-icon.png");
		margin-bottom: 8px;
	}

	#courses .coursemap h5 span.en{
		display: block;
		text-align: center;
		font-size: 20px;
		font-size: 2.0rem;
		margin-top: 9px;
	}
	#courses .coursemap .map{
		border: 5px solid #fff;
		margin-bottom: 70px;
	}
	#courses .coursemap .map iframe{
		border: 0;
	}

#courses .buttonStyle{
	margin-bottom: 27px;
}


	#courses .buttonStyle a{
		display: table;
		width: 920px;
		height: 106px;
		background-image: url("https://static.yukoyuko.net/aso/kagoshima-wellness/button-wrap.png");
		font-size: 22px;
		font-size: 2.2rem;
	}

	#courses .buttonStyle a span{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}

#courses .pager{
	margin-top: 60px;
	margin-bottom: 92px;
	border-top:#242424 2px solid;
	padding-top: 32px;
}

	#courses .pager li{
		display: inline-block;
	}

	#courses .pager li a{
		display: block;
		background: 0 50% no-repeat;
		min-height: 41px;
		padding-top: 9px;
		line-height: 1.1;
		font-size: 20px;
		font-size: 2.0rem;
		text-decoration: none;
	}

	#courses .pager li a:hover{
		opacity: 0.7;
	}


	#courses .pager li.prev{
		float: left;
	}
	#courses .pager li.next{
		float: right;
	}


	#courses .pager li.prev a{
		padding-left: 47px;
		background-image:url("https://static.yukoyuko.net/aso/kagoshima-wellness/arrow-prev.png");
	}
	#courses .pager li.next a{
		padding-right: 47px;
		background-image:url("https://static.yukoyuko.net/aso/kagoshima-wellness/arrow-next.png");
		background-position: 100% 50%;
	}

/* ◇ #social
-------------------------------- */
main #social{
	padding: 77px 0;
	background: #fff;
}

main #social .column{
	width: 379px;
	float: left;
	margin-left: 33px;
}
main #social .column:first-child{
	margin-left: 0;
}

main #social .column.twitter > div{
	height: 500px;
	overflow: auto;
}

main #social .column.banners{
	width: 235px;
}
main #social .column.banners p{
	margin-bottom: 20px;
	text-align: center;
}
main #social .column.banners p a{
	transition: 0.3s;
}
main #social .column.banners p a:hover{
	opacity: 0.8;
}


/* ◇ #instagram
-------------------------------- */
main #instagram{
	padding: 55px 0;
	background: #edeae3;
}

main #instagram h3{
	font-size:26px;
	font-size:2.6rem;
	text-align: center;
	margin-bottom: 11px;
}
main #instagram h3:before{
	display: block;
	content: url("https://static.yukoyuko.net/aso/kagoshima-wellness/instagram.png");
	margin: 0 auto 15px auto;
}

main #instagram p.hash{
	text-align: center;
	margin-bottom: 29px;
	font-size:16px;
	font-size:1.6rem;
	color: #535353;
}

main #instagram ul.lists{
	overflow: hidden;
	margin-left: -2%;
	margin-bottom: 22px;
}
main #instagram ul.lists li{
	float: left;
	width: 31%;
	margin-left: 2%;
	margin-bottom: 26px;
	text-align: center;
}
main #instagram ul.lists li img{
	max-width: 100%;
}

/* 1280px以上
-------------------------------------------- */
@media only screen and (min-width: 1280px) {

main .accent-box #youtubeWrap video{
	height: auto!important;
}


}

/* 1480px以上
-------------------------------------------- */
@media only screen and (min-width: 1480px) {


main .accent-box #youtubeWrap video{
	height: auto;
}

}

/* --------------------------------
   □ スマートフォン用の記述
-------------------------------- */
.pc{
}
.sp,
span.textized,
br.spOnly{
	display:none;
}

/* SP用
-------------------------------------------- */
@media only screen and
(max-width : 767px) {

/* =================================
   ■ 共通指定
================================== */

body {
	min-width: auto;
}

img{
	max-width:100%;
	height:auto;
}

body .pc{
	display:none;
}
.sp{
	display:block;
}

span.textized{
	display:inline;
}

br.spOnly{
	display:inline-block;
}
br.pcOnly{
	display:none;
}


.txtimg{
	display:none;
}

main > section.contents .vertical{
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
}

main > section.contents .vertical span.marker{
	background: linear-gradient(transparent 88%, #FFF000 0%);
}


/* --------------------------------
   □ 大枠
-------------------------------- */
main > section.contents{
	overflow:hidden;
	padding:0;
}

main > section.contents > section,
main > section.contents > .chapter,
main > section.contents > .wide .container{
	font-size:100%;
	width:auto;
}

main > section.contents > section.wide,
main > section.contents > .chapter.wide{
	width:auto;
}


/* --------------------------------
   □ ボタンスタイル
-------------------------------- */
main > section.contents .buttonStyle a,
main > section.contents .buttonStyle > span{
	position:relative;
 	width:100%;
	padding:12px 10px;
}


	main > section.contents .buttonStyle a span,
	main > section.contents .buttonStyle > span span{
		display:block;
		font-size:1.6rem;
		font-size:16px;
		background-size: auto 1em;
	}


/* --------------------------------
   □ accent
-------------------------------- */
main .accent{
	width:100%;
	height:350px;
}

main .accent h1{
	background-size:cover;
}

main .accent h1 img{
	width:70%;
	margin-right: 10%;
	margin-bottom:2%;
}
/* --------------------------------
   □ intro
-------------------------------- */
main .intro{
	padding: 10% 0 0 0;
	position:relative;
	background: #dfeaed ;
}

main .intro .leadArea{
	margin-bottom: 12%;
	padding: 0 4%;
}
	main .intro .leadArea h2{
		font-size: 20px;
		font-size: 2.0rem;
		margin-bottom: 4%;
		padding-top: 49px;
		background: url("https://static.yukoyuko.net/aso/kagoshima-wellness/introduction-background.png") 50% 0 no-repeat;
		background-size: 90% auto;

	}

	main .intro .leadArea p.text{
		font-size: 16px;
		font-size: 1.6rem;
		line-height:2;
	}

/* --------------------------------
   □ column
-------------------------------- */
main .intro .column{
	position: relative;
	margin: 0 4% 9%;
}

	main .intro .column .explain{
		position: static;
		width:auto;
		padding: 4%;
	}

		main .intro .column .explain .no{
			font-size: 16px;
			font-size: 1.6rem;
			margin-bottom: 4%;
		}

		main .intro .column .explain h3{
			font-size: 30px;
			font-size: 3.0rem;
			margin-bottom: 5%;
		}

		main .intro .column .explain dl dt{
			font-size: 20px;
			font-size: 2.0rem;
			margin-bottom: 3%;
		}
		main .intro .column .explain dl dd{
			font-size: 16px;
			font-size: 1.6rem;
			line-height: 2;
		}

		#column1 .explain{
			left: 0;
		}

		#column1 .image{
			float: none;
			margin-right: 0;
		}

	#column2 {
		margin-bottom: 14%;
	}

		#column2 .explain{
			right: 0;
		}
		#column2 .image{
			float: none;
		}

/* --------------------------------
   □ aboutKagoshima
-------------------------------- */
#aboutKagoshima{
	background: url("https://static.yukoyuko.net/aso/kagoshima-wellness/about-kagoshima-background_sp.jpg") 50% 50% no-repeat;
	background-size: cover;
	padding: 10% 0 0 0;
}


	#aboutKagoshima .container h3{
		position: static;
		font-size: 24px;
		font-size: 2.4rem;
		color: #fff;
		margin-bottom: 5%;
		line-height: 1.3;
		text-align: center;
	}

	#aboutKagoshima p.image{
		margin: 0;
		padding-left: 4%;
		text-align: right;
	}
	#aboutKagoshima p.image img{
		width: 100%;
		max-width: 100%;
	}

/* --------------------------------
   □ access
-------------------------------- */
#access{
	padding: 6% 4%;
	background: #6ea9b6 url("https://static.yukoyuko.net/aso/kagoshima-wellness/access-background.jpg") 50% 50% repeat;
}

#access dl{
	display: block;
	width: auto;
}
	#access dl > *{
		display: block;
		text-align: center;
	}
	#access dl > dt{
		width:auto;
		text-align: center;
		margin-bottom: 7%;
	}
	#access dl > dt em{
		font-size: 26px;
		font-size: 2.6rem;
		margin-bottom: 5px;
	}
	#access dl > dt span{
		font-size: 15px;
		font-size: 1.5rem;
	}


/* --------------------------------
   □ courses
-------------------------------- */
main #courses {
	padding: 10% 0 0 0;
}

	main #courses .catch{
		font-size: 39px;
		font-size: 3.9rem;
		margin-bottom: 4%;
	}

	main #courses h2{
		text-align: center;
		font-size: 23px;
		font-size: 2.3rem;
		margin-bottom: 8%;
	}
	main #courses h2 span{
		display: block;
		text-align: center;
		font-size: 16px;
		font-size: 1.6rem;
		margin-bottom: 1%;
		background-size: 50% auto;
	}



/* --------------------------------
   □ .pageNavigation
-------------------------------- */
main #courses .pageNavigation {
	position: relative;
	margin-bottom: 9%;
}

	main #courses .pageNavigation ul li{
		width: 30%;
	}

	main #courses .pageNavigation ul li a{

		overflow: hidden;
		padding: 13px 0;
	}

	main #courses .pageNavigation ul li.day1{
		margin-left: 4%;
	}

/* --------------------------------
   □ .date
-------------------------------- */
#courses .date{
	margin: 0 4%;
	margin-bottom: 8%;
	padding: 4%;
	display: block;
}

	#courses .date > *{
		display: block;
		vertical-align: middle;
	}
	#courses .date > h3{
		font-size: 34px;
		font-size: 3.4rem;
		width: auto;
		margin-bottom: 2%;
	}
	#courses .date > h3:after{
		zoom:0.7;
	}
	#courses .date > p{
		font-size: 16px;
		font-size: 1.6rem;
		margin: 0;
	}

/* --------------------------------
   □ .item
-------------------------------- */
#courses .item{
	position: relative;
	margin: 0 4%;
	margin-bottom: 16%;
}
	#courses .item:before{
		top: -59px;
		zoom:0.7;
	}
	#courses .item.leftStyle:before{
		right: -90px;
	}
	#courses .item.rightStyle:before{
		left: -80px;
	}

#courses .item .division {
}

	#courses .item .division .explain{
		float: none;
	}
	#courses .item .division .image{
		float: none;
	}

	#courses .item.leftStyle .division .explain{
		float: none;
	}
	#courses .item.leftStyle .division .image{
		float: none;
	}

#courses .item .explain.normal{
	width: auto;
}

	#courses .item .point{
		display: table;
		width:100%;
		margin-bottom: 2%;
	}
	#courses .item .point > *{
		display: table-cell;
		vertical-align: middle;
	}

	#courses .item .point > .kind{
		margin: 0;
		width: 30%;
	}

	#courses .item .point .status{
		padding-left: 0.8em;
	}

	#courses .item .explain.normal .point{
		margin-bottom: 2%;
	}
		#courses .item .explain.normal .point > .kind{
			width: 25%;
		}

#courses .item .name{
}

	#courses .item .name > .no{
		font-size: 49px;
		font-size: 4.9rem;
	}
	#courses .item .name h4{
		font-size: 24px;
		font-size: 2.4rem;
		line-height: 1.3;
	}
	#courses .item .name h4 small{
		font-size: 13px;
		font-size: 1.3rem;
	}

#courses .item .explain.normal .name{
	display: table;
	margin-bottom: 6%;
}

	#courses .item .explain.normal .name > *{
		display: table-cell;
		vertical-align: middle;
	}

	#courses .item .explain.normal .name > .no{
		width: 1.2em;
	}


#courses .item .sentence h5{
	font-size: 20px;
	font-size: 2.0rem;
	margin-bottom: 10px;
}
	#courses .item .sentence p{
		font-size: 16px;
		font-size: 1.6rem;
		margin-bottom: 4%;
	}

	#courses .item .column{
		margin-top: 8%;
		padding: 6%;
	}
		#courses .item .column:before,
		#courses .item .column:after{
			left: -1px;
			width: calc(100% + 2px);
		}

	#courses .item .column .explain{
		float: none;
		width: auto;
	}
		#courses .item .column .explain h5{
			font-size: 20px;
			font-size: 2.0rem;
			line-height: 1.4;

			background: url("https://static.yukoyuko.net/aso/kagoshima-wellness/column-decoration.png") 100% 50% no-repeat;
			background-size: 60% auto;
			min-height:inherit;
			padding-top: 19px;
			margin-bottom: 5%;
		}
		#courses .item .column .explain p{
			font-size: 16px;
			font-size: 1.6rem;
			line-height: 2;
			margin: 0;
		}
	#courses .item .column .image{
		float: none;
		text-align: center;
		margin-top: 4%;
	}



	/* --------------------------------
	   □ .pickup
	-------------------------------- */
	#courses .item.pickup .division{
		margin-bottom: 8%;
	}

		#courses .item.pickup .headline .explain{
			width: auto;
		}
		#courses .item.pickup .headline .image{

		}
		#courses .item.pickup .headline .name{
			margin-bottom: 6%;
		}

		#courses .item.pickup .headline .name{
			display: table;
			margin-bottom: 6%;
		}

			#courses .item.pickup .headline .name > *{
				display: table-cell;
				vertical-align: middle;
			}

			#courses .item.pickup .headline .name > .no{
				width: 1.2em;
			}

		#courses .item.pickup .headline .name > p.no{
			text-align: left;
		}
		#courses .item.pickup .headline .name .title{
			position: relative;
		}
		#courses .item.pickup .headline .name .title h4{
			position: static;
			margin-left:0;
			height: auto;
		}

		#courses .item.pickup .headline .name .title h4.line2{
			margin-left:0;
		}
		#courses .item.pickup .headline .name .title h4.line3{
			margin-left:0;
		}


	#courses .item.pickup .headline .point{
		margin-bottom: 2%;
	}
		#courses .item.pickup .headline .point > *{
			text-align: left;
		}
		#courses .item.pickup .headline .point > .kind{
			margin-bottom: 0;
			width: 25%;
		}

	#courses .item.pickup > section{
		position: relative;
		margin-bottom: 6%;
	}
	#courses .item.pickup > section:last-child{
		margin-bottom: 0;
	}

	#courses .item.pickup .sentence{
	}

	#courses .item.pickup .sentence .explain{
		width: auto;
		float: none;
	}
	#courses .item.pickup .sentence .image{
		float: none;
		margin-top: 0;
		padding-right: 0;
		text-align: center;
	}

	#courses .item.pickup.leftStyle .sentence .explain{
		float: none;
	}
	#courses .item.pickup.leftStyle .sentence .image{
		float: none;
		padding-right: 0;
		padding-left: 0;
	}


	#courses .item.pickup .column{
		margin-top: 0;
	}

	/* --------------------------------
	   □ #item9
	-------------------------------- */
	#courses #item9{
		position: relative;
        padding: 8% 6%;
        margin-left: 4%;
        width: auto;
	}

	#courses #item9:before{
		display: none;
	}

	/* --------------------------------
	   □ #item11
	-------------------------------- */

	#courses #item11:before{
	}

	#courses #item11 .division{
		margin-bottom: 6%;
	}

		#courses #item11 .division:before,
		#courses #item11 .division:after{
			position: absolute;
			bottom:10px;
		}

		#courses #item11 .division:before{
			left: 4%;
			content: url("https://static.yukoyuko.net/aso/kagoshima-wellness_d3/item11-decoration1_sp.png");
			zoom:0.5;
		}
		#courses #item11 .division:after{
			right: 4%;
			content: url("https://static.yukoyuko.net/aso/kagoshima-wellness_d3/item11-decoration2_sp.png");
			zoom:0.5;
		}

	#courses #item11 .division p.address{
		margin: 4% 0 0 0;
	}

	#courses #item11 .shop h5{
		text-align: center;
		font-size: 19px;
		font-size: 1.9rem;
		margin-bottom: 6%;
		padding: 0 10%;
		background-size: 90% auto;
	}

	#courses #item11 .shop ul.list{
		overflow: hidden;
		margin-left: 0;
		padding: 0 6%;
	}
	#courses #item11 .shop ul.list li{
		float: none;
		width: auto;
		margin-left: 0;
		margin-bottom: 6%;
	}

	#courses #item11 .shop ul.list li dl dt span{
		font-size: 18px;
		font-size: 1.8rem;
		margin-bottom: 3%;
	}

	#courses #item11 .shop ul.list li dl dt span.no{
		font-size: 29px;
		font-size: 2.9rem;
	}

	#courses #item11 .shop ul.list li dl dd{
		font-size: 16px;
		font-size: 1.6rem;
	}


	/* --------------------------------
	   □ #item13
	-------------------------------- */

	#courses #item13{
		margin-bottom: 12%;
	}

/* ◇ message
-------------------------------- */

#courses .message span.no{
	font-size: 49px;
    font-size: 4.9rem;
}

#courses .message{
	margin-bottom: 8%;
	padding-bottom: 93px;
	font-size: 20px;
	font-size: 2.0rem;
	line-height: 1.4;
}
	#courses .message:before{
		margin-bottom: 5px;
		vertical-align: bottom;
	}

/* ◇ message
-------------------------------- */

#courses .lastmessage{
	padding-top: 100px;
	background: url("https://static.yukoyuko.net/aso/kagoshima-wellness/arrow-head.png") 50% 0% no-repeat;
	color: #1a1a1a;
	margin: 0 4%;
	margin-bottom: 10%;
}

	#courses .lastmessage dt{
		font-size: 20px;
		font-size: 2.0rem;
		margin-bottom: 4%;
	}

	#courses .lastmessage dt:before{
		display:block;
		margin: 0 auto 8px auto;
		content: url("https://static.yukoyuko.net/aso/kagoshima-wellness/home.png");
	}

	#courses .lastmessage dd{
		text-align: center;
		font-size: 16px;
		font-size: 1.6rem;
		line-height: 1.8;
	}


/* ◇ coursemap
-------------------------------- */
#courses .coursemap{
	margin: 0 4%;
}

#courses .coursemap h5{
	margin-bottom: 6%;
}

	#courses .coursemap h5 em{
		padding: 0 11px;
		font-size: 20px;
		font-size: 2.0rem;
	}
	#courses .coursemap h5 em:before{
		zoom:0.7;
		margin-bottom: 8px;
	}

	#courses .coursemap h5 span.en{
		display: block;
		font-size: 16px;
		font-size: 1.6rem;
		margin-top: 9px;
	}
	#courses .coursemap .map{
		border: 5px solid #fff;
		margin-bottom: 8%;
	}
	#courses .coursemap .map iframe{
		height: 400px;
	}

#courses .buttonStyle{
	margin: 0 4%;
	margin-bottom: 4%;
}


	#courses .buttonStyle a{
		width: 100%;
		height: 66px;
		background-image: none;
		font-size: 20px;
		font-size: 2.0rem;
	}

#courses .pager{
	overflow: hidden;
	margin-top: 7%;
	margin-bottom: 10%;
	padding: 4% 4% 0 4%;
}


	#courses .pager li a{
		background: 0 50% no-repeat;
		min-height: 41px;
		padding-top: 11px;
		line-height: 1.1;
		font-size: 16px;
		font-size: 1.6rem;
		text-decoration: none;
	}

	#courses .pager li.prev a{
		padding-left: 35px;
		background-image:url("https://static.yukoyuko.net/aso/kagoshima-wellness/arrow-prev.png");
		background-size:30px auto;
	}
	#courses .pager li.next a{
		padding-right: 35px;
		background-image:url("https://static.yukoyuko.net/aso/kagoshima-wellness/arrow-next.png");
		background-size:30px auto;
	}


/* ◇ #social
-------------------------------- */
main #social{
	padding: 8% 0;
}

main #social .column{
	width: auto;
	float: none;
	margin:0 6% 8%;
}
main #social .column:first-child{
	margin-left: 6%;
}

main #social .column.twitter > div{
	height: 500px;
	overflow: auto;
}

main #social .column.banners{
	width: auto;
}
main #social .column.banners p{
	margin-bottom: 2%;
	text-align: center;
}

/* ◇ #instagram
-------------------------------- */
main #instagram{
	padding: 5% 4%;
	background: #edeae3;
}

main #instagram h3{
	font-size:22px;
	font-size:2.2rem;
	margin-bottom: 11px;
}
main #instagram h3:before{
	display: block;
	content: url("https://static.yukoyuko.net/aso/kagoshima-wellness/instagram.png");
	margin: 0 auto 5px auto;
}

main #instagram p.hash{
	margin-bottom: 4%;
	font-size:15px;
	font-size:1.5rem;
}

main #instagram ul.lists{
	overflow: hidden;
	margin-left: -2%;
	margin-bottom: 4%;
}
main #instagram ul.lists li{
	float: left;
	width: 48%;
	margin-left: 2%;
	margin-bottom: 3%;
	text-align: center;
}
main #instagram ul.lists li img{
	max-width: 100%;animation:
}


}


/* --------------------------------
   □ loader
-------------------------------- */
#loader {
    opacity: 1;
    position: fixed;
    z-index: 100000;
    width: 100%;
    height: 100%;
    background: #EBE9E1;
    top: 0;
    left: 0;
}


.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px
}
.spinnerText {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    width: 18em;
    height: 40px;
	color:#A5A5A2;
    text-align: center;
    font-size: 10px;
}

.spinner>div {
    background-color: #A62126;
    height: 100%;
    width: 6px;
	border-radius:2px;
    display: inline-block;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s
}

.spinner .rect3 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

.spinner .rect4 {
    -webkit-animation-delay: -.9s;
    animation-delay: -.9s
}

.spinner .rect5 {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s
}



@keyframes show {
	0% {
		opacity:0;
		transform:translate(0,15px);
	}
	100% {
		opacity:1;
		transform:translate(0,0);
	}
}

@keyframes animation-left {
	0% {
		opacity:0;
		transform: translateX(150%);
	}
	100% {
		opacity:1;
		transform: translateX(0%);
	}
}

@keyframes headshow {
	0% {
		opacity:0;
		transform:translate(0,-15px);
	}
	100% {
		opacity:1;
		transform:translate(0,0);
	}
}
/* --------------------------------
   □ Yuko
-------------------------------- */
.g-breadcrumb{
  display: none;
}