@charset "UTF-8";
/* CSS Document */

/*-------------------------
Base
-------------------------*/
html{
	font-size: 62.5%;/*16pxx62.5%=10px*/
}

body{
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	color: #2e2e2e;
	font-feature-settings: "palt";
	font-size: 1.5rem;
	line-height: 1.7em;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
img{
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
a{
	text-decoration: none;
	color: #2e2e2e;
	display: block;

}
.text-center{
	text-align: center;
}

/*-------------------------
contents
-------------------------*/
.bg{
	background-image: url("../img/bg.png");
}
.img_sp{
	display: none;
}
.greeting{
	padding-top: 100px;
	max-width: 1300px;
	margin: 0 auto;
}
.bg2{
	background-image: url("../img/bg2_pc.png");
	background-size: cover;
	max-width: 1290px;
	margin: 0 auto;
	position: relative;
	height: 3730px;
}
.ema1{
	position: absolute;
	left: 95px;
	top:148px;
}

.ema2{
	position: absolute;
	right: 95px;
	top: 570px;
}

.ema3{
	position: absolute;
	left: 95px;
	top:960px;
}

.ema4{
	position: absolute;
	right: 95px;
	top: 1395px;
}

.ema5{
	position: absolute;
	left: 95px;
	top: 1819px;
}

.ema6{
	position: absolute;
	right: 95px;
	top: 2234px;
}
.ema7{
	position: absolute;
	left: 95px;
	top: 2694px;
}

.ema8{
	position: absolute;
	right: 95px;
	top: 3091px;
}

.card a {
    display: block;
}
.card_reverse {
    position: absolute;
    top: 0;
    left: 0;
}


/* 表面の表示 */
.card_surface {
    opacity: 1;
    transform: rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
}
.card_reverse {
    opacity: 0;
    transform: rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;
}
 
/* 裏面の表示 */
a:hover .card_surface {
    opacity: 0;
    transform:rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;
}
a:hover .card_reverse {
    opacity: 1;
    transform:rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
}



/*-------------------------
SP
-------------------------*/
@media screen and (max-width: 480px) { 
	.img_pc{
		display: none;
	}

	.img_sp{
		display: block;
	}
	.greeting{
	padding-top: 60px;
}

.sp_box{
	margin-left: 5px;
	margin-right: 5px;
	padding-bottom: 60px;
}


}