@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');

/* =============== */
h2{
	font-family: "Sawarabi Mincho";
	font-size: max(2vw, 1.6rem);
	font-weight: 600;
	padding-top: 100px;
	padding-bottom: 40px;
	text-align: center;
	line-height: 1.3em;
}
h2 span{
	font-size: 1rem;
	font-weight: 500;
}
h2 .br{
	display: none;
}
@media screen and (max-width: 760px) {
	h2{
        padding-top: 70px;
        padding-bottom: 30px;
        text-align: center;
    }
	h2 .br{
		display: block;
	}
}


/* =============== */
.bottom_in_box{
	margin-bottom: 180px;
}
@media screen and (max-width: 980px) {
	.bottom_in_box{
		margin-bottom: 150px; }
}

@media screen and (max-width: 760px) {
	.bottom_in_box{
		margin-bottom: 120px; }
}


/* ===============
▼ 背景設定 */
.index_bk{
	width: 100%; height: 100vh;
	background-size:cover;
}
.index_b{
	color: #fff;
	background-image: url("../img/index_b_bg.jpg");
	background-size: cover;
    background-repeat: no-repeat;
	background-position: center bottom;
}
.index_d{
	color: #fff;
	background-image: url("../img/index_d_bg.jpg");
	background-size: cover;
    background-repeat: no-repeat;
	background-position: center top;
}
@media screen and (max-width: 760px) {
.index_bk{
	width: 100%; height: 100vh;
	background: url("../img/index_a0_bk.jpg") no-repeat center center;
	background-size:cover;
}
	.index_d{		
	background-position: center;
	}
}
.filter {
  width: 100%; height: auto;
  background-color: rgba(73,73,73,0.8);
}

/* ===============
▼ button */
.btn01 {
    position: relative;
    display: inline-block;
    width:100%;
    max-width: 300px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    outline: none;
	margin: 60px 0 100px;
}

.btn01 span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid #aaa;
    transform-style: preserve-3d;
    transition: 0.5s;
}

.rotateback span:nth-child(1) {
    background: #aaa;
    color: #000;
    transform: rotateX(0deg);
    transform-origin: 0 50%  -25px;
}

.rotateback:hover span:nth-child(1) {
    transform: rotateX(90deg);
}

.rotateback span:nth-child(2) {
    border: 3px solid #222;
    background: #222;
    color: #fff;
    transform: rotateX(-90deg);
    transform-origin: 0 50%  -25px;
}

.rotateback:hover span:nth-child(2) {
    transform: rotateX(0deg);
}