@charset "utf-8";


/* ==========================================================================
	header派生用
========================================================================== */
#header {
	background:rgba(0, 0, 0, 0.3);
}


.login_btn{
	background:rgba(255,255, 255, .8);
	color:#333;
    background-size: 200% 100%;
    background-image: linear-gradient(to right, transparent 50%, rgba(255, 255, 255, 1) 50%);
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .3s ease 0s, background-color .3s ease;
	}
.shop_btn{
	background:rgba(157,16, 10, .8);
    background-size: 200% 100%;
    background-image: linear-gradient(to right, transparent 50%, rgba(255, 255, 255, 1) 50%);
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .3s ease 0s, background-color .3s ease;
	}

.fixed .login_btn{

	color:#fff;
}

/* ==========================================================================
	main
========================================================================== */
#hasei_main{
	width:100%;
	height:640px;
	position:relative;
	box-sizing:border-box;
	padding-top:302px;
	background-size:cover;
	background-position:center center;
	text-align:center;
	background-repeat: no-repeat;
	}
#hasei_main h1{
	font-size:72px;
	color:#fff;
	letter-spacing:0.05em;
	}
.member h1{
    -webkit-text-shadow: 0px 2px 6px #949494;
    -moz-text-shadow: 0px 2px 6px #949494;
    text-shadow: 0px 2px 6px #949494;
	}
#hasei_main h2{
	font-size:20px;
	color:#fff;
	letter-spacing:0.15em;
	margin-top:23px;
    -webkit-text-shadow: 0px 2px 6px #949494;
    -moz-text-shadow: 0px 2px 6px #949494;
    text-shadow: 0px 2px 6px #949494;
	}

@media screen and ( max-width: 950px ) {
	#hasei_main{
		padding-top:277px;
		}

	}
@media screen and ( max-width: 720px ) {
	#hasei_main{
	height:420px;
	padding-top:205px;

}
	#hasei_main h1{
	font-size:40px;
}
	#hasei_main h2{
	font-size:12px;
	margin-top:16px;
}
	}
@media screen and ( max-width: 403px ) {
	#hasei_main{
	padding-top:182px;
	}

	}

/* ==========================================================================
	story
========================================================================== */
#story{
	width:100%;
	background:url(../image/story_bg.png) bottom center no-repeat;
	background-size:cover;
	position:relative;
	padding:160px 0 310px;
	box-sizing:border-box;
	}
#story h1{
	width:536px;
	margin:0 auto 45px;
	}
#story h2{
	font-size:16px;
	font-weight:400;
	color:#9d100a;
	position:relative;
	text-align:center;
	letter-spacing:0.1em;
	}
#story h2:after{
	content:"";
	display:block;
	width:60px;
	height:1px;
	background:#9d100a;
	margin:57px auto 45px;
	}

#story p{
	text-algin:center;
	font-size:16px;
	line-height:34px;
	text-align:center;
	letter-spacing:0.1em;
	}

#story h3{
	width:100%;
	text-align:center;
	position:absolute;
	bottom:60px;
	font-size:18px;
	color:#fff;
	font-weight:400;
	letter-spacing:0.05em;
	font-style: italic
}
.scroll{
	display:block;
	position:absolute;
	left: 0;
	right: 0;
	margin:auto;
	bottom: 126px;
	width:5px;
	height:5px;
	background:#fff;
	border-radius: 50%;        /* CSS3草案 */
    -webkit-border-radius: 50%;    /* Safari,Google Chrome用 */
    -moz-border-radius: 50%;   /* Firefox用 */
	box-sizing:border-box;
	z-index:9997;
    -webkit-animation: drop 3s infinite;
    -ms-animation: drop 3s infinite;
    -o-animation: drop 3s infinite;
    animation: drop 3s infinite;
	}
.scroll2{
	display:block;
	position:absolute;
	left: 0;
	right: 0;
	margin:auto;
	bottom: 126px;
	width:5px;
	height:5px;
	background:#fff;
	border-radius: 50%;        /* CSS3草案 */
    -webkit-border-radius: 50%;    /* Safari,Google Chrome用 */
    -moz-border-radius: 50%;   /* Firefox用 */
	box-sizing:border-box;
	z-index:9997;
    -webkit-animation: drop2 3s infinite;
    -ms-animation: drop2 3s infinite;
    -o-animation: drop2 3s infinite;
    animation: drop2 3s infinite;
	}
.scroll3{
	display:block;
	position:absolute;
	left: 0;
	right: 0;
	margin:auto;
	bottom: 126px;
	width:5px;
	height:5px;
	background:#fff;
	border-radius: 50%;        /* CSS3草案 */
    -webkit-border-radius: 50%;    /* Safari,Google Chrome用 */
    -moz-border-radius: 50%;   /* Firefox用 */
	box-sizing:border-box;
	z-index:9997;
    -webkit-animation: drop3 3s infinite;
    -ms-animation: drop3 3s infinite;
    -o-animation: drop3 3s infinite;
    animation: drop3 3s infinite;
	}


@-moz-keyframes drop {
    0% { bottom:116px; opacity:0;}
    20% { bottom:93px; opacity:1;}
    40% { bottom:93px; opacity:1;}
    50% { bottom:93px; opacity:1;}
    70% { bottom:80px; opacity:0;}
    100% { bottom:80px; opacity:0;}
}
@-webkit-keyframes drop {
    0% { bottom:116px; opacity:0;}
    20% { bottom:93px; opacity:1;}
    40% { bottom:93px; opacity:1;}
    50% { bottom:93px; opacity:1;}
    70% { bottom:80px; opacity:0;}
    100% { bottom:80px; opacity:0;}
}
@-o-keyframes drop {
    0% { bottom:116px; opacity:0;}
    20% { bottom:93px; opacity:1;}
    40% { bottom:93px; opacity:1;}
    50% { bottom:93px; opacity:1;}
    70% { bottom:80px; opacity:0;}
    100% { bottom:80px; opacity:0;}
}
@-ms-keyframes drop {
    0% { bottom:116px; opacity:0;}
    20% { bottom:93px; opacity:1;}
    40% { bottom:93px; opacity:1;}
    50% { bottom:93px; opacity:1;}
    70% { bottom:80px; opacity:0;}
    100% { bottom:80px; opacity:0;}
}
@keyframes drop {
    0% { bottom:116px; opacity:0;}
    20% { bottom:93px; opacity:1;}
    40% { bottom:93px; opacity:1;}
    50% { bottom:93px; opacity:1;}
    70% { bottom:80px; opacity:0;}
    100% { bottom:80px; opacity:0;}
}


@-moz-keyframes drop2 {
    0% { bottom:126px; opacity:0;}
    10% { bottom:126px; opacity:0;}
    30% { bottom:103px; opacity:1;}
    60% { bottom:103px; opacity:1;}
    80% { bottom:90px; opacity:0;}
    100% { bottom:90px; opacity:0;}
}
@-webkit-keyframes drop2 {
    0% { bottom:126px; opacity:0;}
    10% { bottom:126px; opacity:0;}
    30% { bottom:103px; opacity:1;}
    60% { bottom:103px; opacity:1;}
    80% { bottom:90px; opacity:0;}
    100% { bottom:90px; opacity:0;}
}
@-o-keyframes drop2 {
    0% { bottom:126px; opacity:0;}
    10% { bottom:126px; opacity:0;}
    30% { bottom:103px; opacity:1;}
    60% { bottom:103px; opacity:1;}
    80% { bottom:90px; opacity:0;}
    100% { bottom:90px; opacity:0;}
}
@-ms-keyframes drop2 {
    0% { bottom:126px; opacity:0;}
    10% { bottom:126px; opacity:0;}
    30% { bottom:103px; opacity:1;}
    60% { bottom:103px; opacity:1;}
    80% { bottom:90px; opacity:0;}
    100% { bottom:90px; opacity:0;}
}
@keyframes drop2 {
    0% { bottom:126px; opacity:0;}
    10% { bottom:126px; opacity:0;}
    30% { bottom:103px; opacity:1;}
    60% { bottom:103px; opacity:1;}
    80% { bottom:90px; opacity:0;}
    100% { bottom:90px; opacity:0;}
}




@-moz-keyframes drop3 {
    0% { bottom:136px; opacity:0;}
    20% { bottom:136px; opacity:0;}
    40% { bottom:113px; opacity:1;}
    70% { bottom:113px; opacity:1;}
    90% { bottom:100px; opacity:0;}
    100% { bottom:100px; opacity:0;}
}
@-webkit-keyframes drop3 {
    0% { bottom:136px; opacity:0;}
    20% { bottom:136px; opacity:0;}
    40% { bottom:113px; opacity:1;}
    70% { bottom:113px; opacity:1;}
    90% { bottom:100px; opacity:0;}
    100% { bottom:100px; opacity:0;}
	}
@-o-keyframes drop3 {
    0% { bottom:136px; opacity:0;}
    20% { bottom:136px; opacity:0;}
    40% { bottom:113px; opacity:1;}
    70% { bottom:113px; opacity:1;}
    90% { bottom:100px; opacity:0;}
    100% { bottom:100px; opacity:0;}
}
@-ms-keyframes drop3 {
    0% { bottom:136px; opacity:0;}
    20% { bottom:136px; opacity:0;}
    40% { bottom:113px; opacity:1;}
    70% { bottom:113px; opacity:1;}
    90% { bottom:100px; opacity:0;}
    100% { bottom:100px; opacity:0;}
}
@keyframes drop3 {
    0% { bottom:136px; opacity:0;}
    20% { bottom:136px; opacity:0;}
    40% { bottom:113px; opacity:1;}
    70% { bottom:113px; opacity:1;}
    90% { bottom:100px; opacity:0;}
    100% { bottom:100px; opacity:0;}
	}


@media screen and ( max-width: 720px ) {

#story{
	width : 100%;
   padding:76px 15px 175px;
	box-sizing:border-box;

	}
#story h1{
	width:100%;
	max-width:536px;
	margin:0 auto 22px;
	}
#story h2{
	font-size:11px;
}
#story h2:after{
	content:"";
	display:block;
	width:35px;
	height:1px;
	background:#9d100a;
	margin:32px auto 30px;
	}

#story p{
	text-algin:center;
	font-size:11px;
	line-height:20px;
	text-align:center;
	letter-spacing:0.1em;
	}


#story h3{
	width:200px;
	left:0;
	right:0;
	bottom:60px;
	margin:auto;
	font-size:12px;
}

	}
/* ==========================================================================
	story_con
========================================================================== */
#story_con{
	width:1100px;
	margin:120px auto;
	}

#story_con .text_box h1{
	font-size:32px;
	font-weight:400;
	letter-spacing:0.06em;
	margin-bottom:27px;
	line-height:40px;
	}
#story_con .text_box p{
	font-size:15px;
	line-height:34px;
	letter-spacing:0.11em;
	}

/*box1*/
#story_con .box1{
	width:100%;
	position:relative;
	}

#story_con .box1 .img_box{
	width:59%;
	position:absolute;
	left:0;
	top:-60px;
	background-size:cover;
	background-position:center center;
	}
#story_con .box1 .img_box:before{
	content:"";
	display:block;
	padding-top:97%;
	}
#story_con .box1 .text_box{
	float:right;
	background:#f2f8f0;
	width:50%;
	padding:60px 4.5% 62px 14.5%;
	box-sizing:border-box;
	}


/*box2*/
#story_con .box2{
	width:100%;
	position:relative;
	margin:12.7% auto;
	}

#story_con .box2 .img_box{
	width:59%;
	position:absolute;
	right:0;
	top:-60px;
	background-size:cover;
	background-position:center center;
	}
#story_con .box2 .img_box:before{
	content:"";
	display:block;
	padding-top:82.7%;
	}
#story_con .box2 .text_box{
	background:#f6f6e7;
	width:50%;
	padding:65px 14.5% 62px 4.5%;
	box-sizing:border-box;
	}


/*box3*/
#story_con .box3{
	width:100%;
	position:relative;
	}

#story_con .box3 .img_box{
	width:59%;
	position:absolute;
	left:0;
	top:-60px;
	background-size:cover;
	background-position:center center;
	}
#story_con .box3 .img_box:before{
	content:"";
	display:block;
	padding-top:86%;
	}
#story_con .box3 .text_box{
	float:right;
	background:#f9f1e9;
	width:50%;
	padding:60px 4.5% 62px 14.5%;
	box-sizing:border-box;
	}


/*box4*/
#story_con .box4{
	width:100%;
	position:relative;
	margin:12.7% auto 0;
	}

#story_con .box4 .img_box{
	width:59%;
	position:absolute;
	right:0;
	top:-60px;
	background-size:cover;
	background-position:center center;
	}
#story_con .box4 .img_box:before{
	content:"";
	display:block;
	padding-top:92%;
	}
#story_con .box4 .text_box{
	background:#f8ecec;
	width:50%;
	padding:65px 14.5% 62px 4.5%;
	box-sizing:border-box;
	}
@media screen and ( max-width: 1130px ) {
#story_con{
	width : 95% ;
   width : -webkit-calc(100% - 30px) ;
   width : calc(100% - 30px) ;

	}

	}

@media screen and ( max-width: 850px ) {


#story_con .box1 .img_box,
#story_con .box2 .img_box,
#story_con .box3 .img_box,
#story_con .box4 .img_box{
	width:100%;
	position:relative;
	left:0;
	top:0;
	background-size:cover;
	background-position:center center;
	}
#story_con .box1 .img_box:before,
#story_con .box2 .img_box:before,
#story_con .box3 .img_box:before,
#story_con .box4 .img_box:before{
	content:"";
	display:block;
	padding-top:100%;
	}
#story_con .box1 .text_box,
#story_con .box2 .text_box,
#story_con .box3 .text_box,
#story_con .box4 .text_box{
	float:none;
	width:100%;
	padding:50px 4.5% 50px 4.5%;
	box-sizing:border-box;
	}
#story_con .text_box h1{
	text-align:center;
	}
}

@media screen and ( max-width: 720px ) {
#story_con{
	margin:54px auto 10px;
	}
#story_con .box1 .text_box,
#story_con .box2 .text_box,
#story_con .box3 .text_box,
#story_con .box4 .text_box{
	padding:28px 0 40px;
	box-sizing:border-box;
	background:none;
	}
#story_con .text_box h1{
	font-size:19px;
margin-bottom:20px;
line-height:22px;
	}
#story_con .text_box p{
	font-size:12px;
	line-height:26px;
	letter-spacing:0.11em;
	}
#story_con .box2,
#story_con .box4{
	width:100%;
	position:relative;
	margin:0 auto;
	}
}
/* ==========================================================================
	sacrafamilia
========================================================================== */
#sacrafamilia{
	width:100%;
	background:url(../image/sacrafamilia_bg.jpg) top center no-repeat;
	background-size:cover;
	padding:95px 15px 100px;
	text-align:center;
	box-sizing:border-box;
	float:left;
	}
#sacrafamilia h1{
	font-size:52px;
	color:#fff;
	}
#sacrafamilia h2{
	font-size:13px;
	color:#fff;
	margin:30px auto 68px;
	}

#sacrafamilia p{
	font-size:15px;
	line-height:34px;
	color:#fff;
	letter-spacing:0.11em;
	}
#sacrafamilia .cate_2{
	display:none;
	}
#sacrafamilia .link_btn{
	margin:75px auto 0;
	border-color:#fff;
	}

#sacrafamilia .btn1,
#sacrafamilia .btn2{
	color:#fff;
	background-image: linear-gradient(to right, transparent 50%, rgba(255, 255, 255, 1) 50%);

	}
#sacrafamilia .btn1:before{
	content:"";
	display:block;
	width:13px;
	height:8px;
	position:absolute;
	top:20px;
	right:30px;
	background:url(../image/btn_ar.png) no-repeat;
	background-size:cover;
	transition:all 0.3s ease;
	}
#sacrafamilia .btn2:before{
	content:"";
	display:block;
	width:13px;
	height:8px;
	position:absolute;
	top:18px;
	right:30px;
	background:url(../image/btn_ar3.png) no-repeat;
	background-size:cover;
	transition:all 0.3s ease;
	}
#sacrafamilia .btn1:hover,
#sacrafamilia .btn2:hover{
	color:#4b6d75;
	background:#fff;
	}
#sacrafamilia .btn1:hover:before{
	top:22px;
	background:url(../image/btn_ar2.png) no-repeat;
	background-size:cover;
	}

#sacrafamilia .btn2:hover:before{
	top:16px;
	background:url(../image/btn_ar4.png) no-repeat;
	background-size:cover;
	}


#sacrafamilia .btn1,
#sacrafamilia .btn2{
	display:none;
	}
#sacrafamilia .active{
	display:block !important;
	}



@media screen and ( max-width: 720px ) {
#sacrafamilia{
	padding:63px 15px 68px;
	text-align:center;
	box-sizing:border-box;
	width:100%;
	clear:both;
	}
#sacrafamilia h1{
	font-size:24px;
	}
#sacrafamilia h2{
	font-size:10px;
	margin:15px auto 50px;
	}
#sacrafamilia p{
	font-size:12px;
	line-height:26px;
}
#sacrafamilia .link_btn{
	margin:28px auto 0;
	border-color:#fff;
	}
#sacrafamilia .btn1:before{
	width:10px;
	height:6px;
	top:16px;
	right:17px;
}
#sacrafamilia .btn2:before{
	width:10px;
	height:6px;
	top:16px;
	right:17px;
	}
#sacrafamilia .btn1:hover:before{
	top:18px;
	}

#sacrafamilia .btn2:hover:before{
	top:14px;
	}

	}

/* ==========================================================================
	アクセスマップ
========================================================================== */
#map{
	width:100%;
	/*max-width:1100px;*/
	margin: auto;
	position:relative;
	float:right;
}


#access-map{
	position:relative;
	width:100%;
	height:653px;
}
#map .en{
	display:block;
	z-index:9996;
	width:260px;
	height:60px;
	position:absolute;
	right:0;
	top:40px;
	background:rgba(0,0,0, .8);
	color:#fff;
	font-size:16px;
	font-weight:700;
	padding:21px 0 0 59px;
	box-sizing:border-box;
	letter-spacing:0.08em;
	border-radius: 60px 0 0 60px / 60px 0 0 60px;
	-webkit-border-radius: 60px 0 0 60px / 60px 0 0 60px;
	-moz-border-radius: 60px 0 0 60px / 60px 0 0 60px;
	}
#map .en:before{
	content:"";
	display:block;
	width:18px;
	height:6px;
	position:absolute;
	top:24px;
	right:40px;
	background:url(./static/image/link_ar_af.png) no-repeat;
	background-size:cover;
	transition:all 0.3s ease;

	}
#map .en:hover:before{
	right:35px;

	}
@media screen and ( max-width: 720px ) {

	}
@media screen and ( max-width: 720px ) {

#map{
	margin:0 auto;
	width:100%;
	clear:both;
	}

#access-map{
	position:relative;
	width:100%;
	height:280px;
}
#map .en{
	width:160px;
	height:34px;
	position:absolute;
	right:0;
	top:22px;
	font-size:11px;
	padding:11px 0 0 33px;
	box-sizing:border-box;
	letter-spacing:0.08em;
	border-radius: 34px 0 0 34px / 34px 0 0 34px;
	-webkit-border-radius: 34px 0 0 34px / 34px 0 0 34px;
	-moz-border-radius: 34px 0 0 34px / 34px 0 0 34px;
	}
.Android #map .en,
.iPhone #map .en{
	padding-top:12px;
	}
#map .en:before{
	width:15px;
	height:5px;
	top:13px;
	right:15px;

	}
#map .en:hover:before{
	right:12px;

	}
	}

.gmap {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 35%;
	overflow: hidden;
}
.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}
@media screen and ( max-width: 720px ) {
	.gmap {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 65%;
		overflow: hidden;
	}
	}