@charset "utf-8";

p {
	font-size: 14px;
	line-height: 22px;	
}

.sec01 {
	background: url(../img/terayama/01_bg.jpg) no-repeat;
	background-size: 100%;
	line-height: 0;
}

.sec01 img {
	width: 90%;
	padding: 42vw 0 14.666vw;
}

.sec02 {
	background: url(../img/terayama/02_bg.jpg) no-repeat;
	background-size: cover;
	position: relative;
	padding: 5vw 5vw 6.6vw;
}

.sec02 p {
	color: #333;
}

.sec02 img.ttl {
	width: 33.466%;
	position: absolute;
	right: 0;
	top: -17vw;
}

.sec02 .txt01 {
	width: 61.333%;
}

.sec02 .txt01 img {
	width: 31.521%;
	margin-bottom: 2vw;
}

.item-container {
	text-align: center;
	margin-top: 2vw;
}

.item-container li {
	position: relative;
	width: 28vw;
	height: 28vw;
	display: inline-block;
	overflow: visible;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	border: 7px solid #000;
	border-radius: 50%;

}

.item-container li .item dt,
.item-container li .item dd {
	position: absolute;
	top: 0;
}

.item-container li .item dd a {
	cursor: pointer;
	display: block;
}

.item-container li dl {
-webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
transition: opacity 0.6s, transform 0.6s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.item-container li.action img {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.item img {
	width: 100%;
}

.item dt{
	transition: all 0.4s ease-in-out;
	transform-style: preserve-3d;
	border-radius: 50%;
    z-index: 1;
	backface-visibility: hidden;
}

.item dd{
	transition: all 0.4s ease-in-out;
	transform-style: preserve-3d;
	position: absolute;
    box-sizing: border-box;
}

.item dd img{
	transform: rotate3d(0,1,0,180deg);
}

.item-container li.action dt{
	transform: rotate3d(0,1,0,180deg);
	opacity: 0;
}

.item-container li dd{
	opacity: 0;	
}

.item-container li.action dd{
	transform: rotate3d(0,1,0,-180deg);
	opacity: 1;
}

.popupbg {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 10;
	top: 0;
	left: 0;
	display: none;
}

.item-detail {
	background: #fff;
	width: calc(100% - 10vw);
	margin-bottom: 10vw;
	max-height: calc(100% - 15vw);
	padding: 8vw 5vw 4vw;
	position: fixed;
	top: 5vw;
	left: 5vw;
	z-index: 11;
	text-align: center;
	display: none;
	overflow-y: auto;
}

.item-detail::-webkit-scrollbar
{
        width:3px;
        background:#eee;
}
        .item-detail::-webkit-scrollbar:horizontal
        {
                height:5px;
        }
.item-detail::-webkit-scrollbar-button
{
        width:3px;
        height:3px;
        background:#bbb;
}
.item-detail::-webkit-scrollbar-piece
{
        background:#eee;
}
        .item-detail::-webkit-scrollbar-piece:start
        {
                background:#eee;
        }
.item-detail::-webkit-scrollbar-thumb
{
        background:#bbb;
}
.item-detail::-webkit-scrollbar-corner
{
        background:#bbb;
}

.item-detail .ttl,
.item-detail p {
	text-align: left;
}

.item-detail .ttl {
	color: #ff169b;
    font-family: YuMincho,"Yu Mincho","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    font-size: 18px;
	font-weight: normal;
	letter-spacing: 0;
	margin-bottom: 4%;
}

.item-detail .ttl.sub {
	color: #333;
}

.item-detail img {
	width: 165px;
	margin: 50px 0 30px;
}

.item-detail img.close_btn {
	width: 15px;
	margin: 0;
	margin-top: 10vw;
}

.item-detail span{
	color: #ff169b;
	font-size: 0.8em;
}

.sec03 {
	background: url(../img/terayama/03_bg.jpg) no-repeat bottom , #000;
	background-size: 100%;
	padding: 8vw 5vw;
	text-align: center;
}

.sec03 img {
	width: 47.555%;
}

.sec03 p {
	text-align: left;
	color: #fff;
	margin-top: 6vw;
}

.sec03 a{
	display: block;
    margin: 8vw 0 0;
}

.sec03 a img {
	width: 100%;
}

.sec04 {
	background: #ff169b ;
}