/* CSS Document */
.spOnly{display: none !important;} /** パソコンのみ **/

/*====== Container Box =====*/
#wrapper{min-width: 1300px;}

.main_container{
	width: 1200px; margin: 0 auto; position: relative;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	/*width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;*/
}

.main_box{float: right; width: 880px;}


p.paragraph{
	display: block; font-size: 16px; line-height: 28px; margin-bottom: 55px;
	opacity: .4; -webkit-opacity:.4;
}

/*====== グロナビ =====*/
.glonav{
	display: flex; align-items: center;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}
.glonav a.glonavLink{
	display: block; float: left; font-family: 'Montserrat', sans-serif; font-size: 14px; margin-right: 30px; text-transform: uppercase;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}
.glonav a.instagram{display: block; float: left; width: 24px; height: 24px;}


/*======ヘッダー =====*/

header{width: 100%; position: relative; overflow: hidden;}
#header{position: absolute; width: calc(100% - 160px); height: 80px; z-index: 6; top: 0; left: 0; right: 0; margin: auto;}
#header a.logo{display: block; position: absolute; width: 190px; height: 30px; bottom: 0; left: 0;}
#header .glonav{position: absolute; bottom: 0; right: 0;}

/*====== フッター =====*/
footer{width: 100%; height: 485px; position: relative;}
footer .btnBlog{width:56%; height: 220px; background-color: #2e2929; position: absolute; top: 0; right: 0; z-index: 1; transition: all .3s ease-in;}
footer .btnBlog span{
	display:block; position: absolute; left: 80px; top: 0; bottom: 0; margin: auto;
	font-family: 'Cormorant Infant', serif; font-size: 80px; text-transform: uppercase;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}
footer .btnBlog div{
	display: block; position: absolute; right: 300px; top: 0; bottom: 0; margin: auto;
    width: 20px; height: 20px; transition: all .3s ease-in;
}
footer .btnBlog div path:nth-of-type(1){
	display: block;
    position: absolute;
    right: 0;
    width: 17px;
    height: 17px;
	background: transparent;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}
footer .btnBlog div path:nth-of-type(2){
    display: block;
    position: absolute;
    width: 27px;
    height: 1px;
    top: 10px;
    left: -4px;
    background: #fff;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

footer .btnBlog:hover{background-color: #121111;}
footer .btnBlog:hover div{transform: translate(20px, -20px);}


#footer{width: 100%; height: 425px; position: absolute; bottom: 0; left: 0; background-color: #1f1b1b;}
.footer_main{
	width: 1200px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

.footer_main a.logo{display: block; width: 253px; height: 40px; margin-bottom: 30px;}

.footer_main .copyright{
	position: absolute; right: 0; bottom: 0; font-family: 'Montserrat', sans-serif;
	font-size: 14px; opacity: .4; -webkit-opacity:.4;
}



/*====== アニメーション =====*/
/* scroll-fade anmt_lb2rt anm_delay4 */

.anmt_delay1{transition: all 1.2s ease-in .1s !important;}
.anmt_delay2{transition: all 1.2s ease-in .2s !important;}
.anmt_delay3{transition: all 1.2s ease-in .3s !important;}
.anmt_delay4{transition: all 1.2s ease-in .4s !important;}
.anmt_delay5{transition: all 1.2s ease-in .5s !important;}
.anmt_delay6{transition: all 1.2s ease-in .6s !important;}
.anmt_delay7{transition: all 1.2s ease-in .7s !important;}
.anmt_delay8{transition: all 1.2s ease-in .8s !important;}
.anmt_delay9{transition: all 1.2s ease-in .9s !important;}
.anmt_delay10{transition: all 1.2s ease-in 1.0s !important;}
.anmt_delay11{transition: all 1.2s ease-in 1.1s !important;}
.anmt_delay12{transition: all 1.2s ease-in 1.2s !important;}
.anmt_delay13{transition: all 1.2s ease-in 1.3s !important;}
.anmt_delay14{transition: all 1.2s ease-in 1.4s !important;}
.tranNone{transition: all 0s ease-in 0s !important;}

.anmt_opacity0, .anmt_opacity0_2, .anmt_opacity0_3{ 
	-webkit-opacity: 0; opacity: 0;
}

.anmt_opacity1{
	-webkit-opacity: 1 !important; opacity: 1 !important;
	transition: all .8s ease-in;
}

.anmt_opacity1_2{
	-webkit-opacity: .1 !important; opacity: .1 !important;
	transition: all .8s ease-in;
}

.anmt_opacity1_3{
	-webkit-opacity: .2 !important; opacity: .2 !important;
	transition: all .8s ease-in;
}

.anmt_l2rScale{
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateX(-100%) scale(-1);
	transform:translateX(-100%) scale(-1);		
}

.anmt_l2rScale_trsfrm{
	-webkit-opacity: 1 !important; opacity: 1 !important;
	-webkit-transform:translateX(0) scale(-1) !important;
	transform:translateX(0) scale(-1) !important;
	transition: all .8s ease-in;
}

.anmt_r2lScale{
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateX(100%) scale(1);
	transform:translateX(100%) scale(1);
}

.anmt_r2lScale_trsfrm{
	-webkit-opacity: 1 !important; opacity: 1 !important;
	-webkit-transform:translateX(0) scale(1) !important;
	transform:translateX(0) scale(1) !important;
	transition: all .8s ease-in;
}

.anmt_l2r, .anmt_menu, .anmt_l2r_opa{ /* 左から右に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateX(-100%);
	transform:translateX(-100%);	
}

.anmt_r2l{ /* 右から左に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateX(100%);
	transform:translateX(100%);	
}

.anmt_l2r2l_trsfrm{ /* 左右に動くアニメーション */
	-webkit-opacity: 1 !important; opacity: 1 !important;
	-webkit-transform:translateX(0) !important;
	transform:translateX(0) !important;
	transition: all .8s ease-in;
}

.anmt_l2r_opa_trnsfrm{
	-webkit-opacity: .2 !important; opacity: .2 !important;
	-webkit-transform:translateX(0) !important;
	transform:translateX(0) !important;
	transition: all .8s ease-in;
}

.anmt_t2b{ /* 上から下に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateY(-200px);
	transform:translateY(-200px);	
}

.anmt_b2t{ /* 下から上に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateY(200px);
	transform:translateY(200px);	
}

.anmt_t2b2t_trsfrm{ /* 上下に動くアニメーション */
	-webkit-opacity: 1 !important; opacity: 1 !important;
	-webkit-transform:translateY(0) !important;
	transform:translateY(0) !important;
	transition: all .8s ease-in;
}

.anmt_lb2rt{ /* 左下から右上に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translate(-250px,150px);
	transform:translate(-250px,150px);	
}

.anmt_rb2lt{ /* 右下から左上に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translate(200px,100px);
	transform:translate(200px,100px);	
}

.anmt_lt2rb{ /* 左上から右下に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translate(-250px,100px);
	transform:translate(-250px,100px);	
}

.anmt_rt2lb{ /* 右上から左下に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translate(250px,-100px);
	transform:translate(250px,-100px);	
}

.anmt_angle_trnsfrm, .logo_trnsfrm{ /* 上下左右に動くアニメーション */ /* ロゴを動かさない場合は.logo_trnsfrmを外す */
	-webkit-opacity: 1 !important; opacity: 1 !important;
	-webkit-transform:translate(0px,0px) !important;
	transform:translate(0px,0px) !important;
	transition: all .8s ease-in;
}