@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------
	common
	header
	menu
	main
	footer
------------------------------------------------------------------------ */


/* ========================================================================
	common
======================================================================== */
@media print, screen and (min-width:768px){
body{
	min-width:1260px;
}

.sp{
	display:none;
}

.inner{
	position:relative;
	width:1106px;
	margin:0 auto;
}

a img, .fade, .fades a{ transition-duration:0.2s; }
a:hover img, .fade:hover, .fades a:hover{ opacity:0.8; }
.fade:hover img, .fades a:hover img{ opacity:1; }
}

@media screen and (max-width:767px){
body{
	min-width:320px;
}

.pc{
	display:none;
}

.inner{
	position:relative;
	padding:0 20px;
}

iframe{
	width:100%;
}
}


/* ========================================================================
	header
======================================================================== */
header{
	display:flex;
	justify-content:space-between;
	background:#191919;
}
header.fix{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:10;
}

header h1 a,
header > .logo a{
	display:flex;
	align-items:center;
	height:90px;
	padding:0 60px 0 50px;
	background:#000000;
	border-top-right-radius:30px;
}

@media screen and (max-width:767px){
header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:10;
}

header h1 img,
header > .logo img{
	width:auto;
	height:30px;
}

header h1 a,
header > .logo a{
	height:50px;
	padding:0 20px;
	border-top-right-radius:0;
}
}


/* ========================================================================
	menu
======================================================================== */
#menu .btn{
	display:none;
}

@media screen and (max-width:767px){
#menu .btn{
	display:block;
	width:50px;
	height:50px;
	background:#000000;
	cursor:pointer;
}

#menu .btn span{
	display:none;
}

#menu .btn::before,
#menu .btn.close::before,
#menu .btn.close::after{
	content:"";
	display:block;
	position:relative;
	top:50%;
	left:50%;
	width:20px;
	height:1px;
	background:#FFFFFF;
	box-shadow:0 -6px 0 0 #FFFFFF, 0 6px 0 0 #FFFFFF;
	transform:translateX(-50%);
	transition-duration:0.2s;
}
#menu .btn.close::before{
	box-shadow:none;
	transform:translateX(-50%) rotate(45deg);
}
#menu .btn.close::after{
	top:calc(50% - 1px);
	box-shadow:none;
	transform:translateX(-50%) rotate(-45deg);
}
}


/* ----------------------------------------
	menu
---------------------------------------- */
#menu .menu ul{
	display:flex;
	gap:0 36px;
	padding:0 50px 0 0;
	text-align:center;
}

#menu .menu a{
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:8px 0;
	position:relative;
	height:90px;
	color:#FFFFFF;
	line-height:1;
	text-decoration:none;
}

#menu .menu a::before{
	content:"";
	position:absolute;
	bottom:16px;
	left:0;
	width:100%;
	height:1px;
	background:transparent;
	transition-duration:0.2s;
}
#menu .menu a:hover::before{ background:#FFFFFF; }

#menu .menu .ja{
	font-weight:700;
}

#menu .menu .ja span{
	color:#FF921D;
}

#menu .menu .en{
	font-size:1.2rem;
	font-weight:600;
}

@media print, screen and (min-width:768px) and (max-width:1400px){
#menu .menu a{
	font-size:1.4rem;
}
}

@media screen and (max-width:767px){
#menu .menu{
	overflow-y:scroll;
	display:none;
	position:fixed;
	top:50px;
	left:0;
	width:100%;
	height:calc(100% - 50px);
	padding:40px 0;
	background:#191919;
}

#menu .menu ul{
	flex-direction:column;
	gap:40px 0;
	padding:0;
}
#menu .menu a{ height:auto; }
#menu .menu a::before{ content:none; }
}


/* ========================================================================
	main
======================================================================== */
@media screen and (max-width:767px){
main{
	margin:50px 0 0 0;
}
}


/* ----------------------------------------
	h2
---------------------------------------- */
main h2{
	display:flex;
	position:absolute;
	top:0;
	left:-161px;
	z-index:1;
}

main h2 .font_YujiMai{
	font-size:4.8rem;
	line-height:1;
	letter-spacing:0.05em;
	white-space:nowrap;
	writing-mode:vertical-rl;
}

main h2 .font_SansitaSwashed{
	margin:8px 0 0 6px;
	font-size:1.4rem;
	font-weight:600;
	color:#FF921D;
	line-height:1;
	letter-spacing:0.05em;
	writing-mode:vertical-rl;
}

@media screen and (max-width:767px){
main h2{
	flex-direction:column;
	position:static;
	margin:0 0 40px 0;
}

main h2 .font_YujiMai{
	font-size:2.4rem;
	white-space:normal;
	writing-mode:horizontal-tb;
}

main h2 .font_SansitaSwashed{
	margin-left:2px;
	font-size:1.2rem;
	writing-mode:horizontal-tb;
}
}


/* ----------------------------------------
	h3 / lead
---------------------------------------- */
main h3,
main p.lead{
	overflow:hidden;
	margin:0 0 30px 0;
	font-size:2.5rem;
	font-weight:700;
	line-height:5.0rem;
	letter-spacing:0.05em;
}

main h3 img,
main p.lead img{
	float:left;
	margin:8px 16px 0 0;
}

main h3 span,
main p.lead span{
	color:#FF921D;
}

@media screen and (max-width:767px){
main h3,
main p.lead{
	position:relative;
	padding:0 0 0 56px;
	font-size:2.0rem;
	line-height:4.0rem;
}

main h3 img,
main p.lead img{
	position:absolute;
	top:0;
	left:0;
	width:40px;
	margin:0;
}
}


/* ----------------------------------------
	btn
---------------------------------------- */
main .btn{
	display:flex;
	flex-wrap:wrap;
	gap:0 40px;
}

main .btn a,
main .btn button{
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	min-width:226px;
	min-height:70px;
	padding:0 43px;
	background:#777674;
	border-radius:35px;
	font-weight:500;
	color:#ffffff;
	line-height:3.4rem;
	text-decoration:none;
	transition-duration:0.2s;
}

main .btn a::before,
main .btn button::before{
	content:"＞";
	position:absolute;
	top:50%;
	right:20px;
	font-size:1.3rem;
	font-weight:700;
	transform:translateY(-50%);
}

@media screen and (max-width:767px){
main .btn{
	justify-content:center;
	gap:20px;
}

main .btn a,
main .btn button{
	min-height:60px;
}
}


/* ========================================================================
	footer
======================================================================== */
footer{
	position:relative;
	padding:362px 0 0 0;
	background:#191919;
	color:#FFFFFF;
}

footer::before{
	content:"";
	position:absolute;
	top:3px;
	left:50%;
	width:1224px;
	height:342px;
	margin:0 0 0 -683px;
	background:url(../../img/common/bg_footer.png) no-repeat center;
}

footer .inner{
	display:flex;
	justify-content:space-between;
}

@media screen and (max-width:767px){
footer{
	padding:20px;
}

footer::before{
	display:block;
	position:static;
	width:100%;
	height:auto;
	aspect-ratio:612/171;
	margin:0;
	padding:0 0 20px 0;
	background:url(../../img/common/bg_footer.png) no-repeat center top;
	background-size:100% auto;
}

footer .inner{
	justify-content:center;
	padding:0;
}

footer small{
	display:flex;
	justify-content:center;
	gap:0 10px;
	font-size:1.1rem;
	color:#FFFFFF;
	line-height:1;
}
}


/* ----------------------------------------
	company
---------------------------------------- */
footer .company{
	padding:10px 0 68px 0;
}

footer .company .logo{
	margin:0 0 32px 0;
	font-size:2.0rem;
	font-weight:700;
	line-height:1;
}

footer .company .logo img{
	margin:0 0 18px 0;
}

footer .company dl dt{
	margin:0 0 16px 0;
	font-weight:700;
	line-height:1;
	letter-spacing:0.05em;
}

footer .company dl dd{
	font-size:1.5rem;
	line-height:1;
}

@media screen and (max-width:767px){
footer .company{
	padding:0 0 40px 0;
}
}

/* ----------------------------------------
	menu
---------------------------------------- */
footer .menu{
	display:flex;
	gap:0 48px;
	padding:0 0 46px 0;
}

footer .menu a{
	display:inline-block;
	position:relative;
	margin:0 0 12px 0;
	vertical-align:bottom;
	color:#FFFFFF;
	line-height:3.6rem;
	text-decoration:none;
}

footer .menu a::before{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	background:transparent;
	transition-duration:0.2s;
}
footer .menu a:hover::before{ background:#FFFFFF; }

footer .menu .ja{
	margin:0 12px 0 0;
	font-weight:700;
	line-height:1;
}

footer .menu .ja span{
	color:#FF921D;
}

footer .menu .en{
	font-size:1.2rem;
	font-weight:600;
	line-height:1;
}

@media screen and (max-width:767px){
footer .menu{
	display:none;
}
}