@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------

	HOME							[ / ]
	お問い合わせ					[ /contact/ ]

------------------------------------------------------------------------ */

/* ========================================================================
	HOME							[ / ]
======================================================================== */
#home{
	margin:-90px 0 0 0;
}

#home h2{
	margin:0 0 100px 0;
	line-height:1;
}

#home h2 span{
	display:block;
}

#home h2 .ja{
	display:block;
	position:relative;
	padding:0 0 12px 6px;
	font-weight:700;
}

#home h2 .en{
	display:block;
	font-size:8.2rem;
	line-height:7.2rem;
}

@media screen and (max-width:767px){
#home{
	margin:0;
}

#home h2{
	margin:0 0 30px 0;
}

#home h2 .ja{
	padding-bottom:10px;
}

#home h2 .en{
	font-size:5.0rem;
	line-height:1;
}
}


/* ----------------------------------------
	hero
---------------------------------------- */
#home .hero{
	position:relative;
	height:840px;
	background:url(../../img/home/bg_hero.jpg) no-repeat center;
	background-size:cover;
	border:1px solid #707070;
}

#home .hero h1{
	position:absolute;
	bottom:22px;
	left:50px;
}

#home .hero p{
	position:absolute;
	top:164px;
	right:100px;
}

@media screen and (max-width:767px){
#home .hero{
	height:420px;
}

#home .hero h1{
	bottom:20px;
	left:0;
	max-width:400px;
	margin:0 20px;
}

#home .hero p{
	top:90px;
	right:20px;
	width:106px;
}
}


/* ----------------------------------------
	consider
---------------------------------------- */
#home .consider{
	padding:168px 0 160px 0;
}

#home .consider .inner{
	padding:25px 0 309px 0;
	background:url(../../img/common/Illust_02.png) no-repeat center bottom;
	background-size:977px 309px;
	text-align:center;
}

#home .consider h2{
	margin:0 0 20px 0;
	font-weight:700;
	line-height:1;
}

#home .consider p{
	margin:0 0 44px 0;
	line-height:4.5rem;
}

#home .consider p.lead{
	margin:0 0 30px 0;
	font-size:4.5rem;
	font-weight:700;
	line-height:1;
}

@media screen and (max-width:767px){
#home .consider{
	padding:60px 0;
}

#home .consider .inner{
	padding:25px 20px 154px;
	background-size:auto 154px;
}

#home .consider p{
	margin:0 0 30px 0;
	line-height:3.5rem;
}

#home .consider p.lead{
	margin:0 0 30px 0;
	font-size:2.4rem;
	line-height:3.4rem;
}
}


/* widget_btn
---------------------------------------- */
#home .consider .widget_btn{
	margin-bottom:60px;
}

@media screen and (max-width:767px){
#home .consider .widget_btn{
	margin-bottom:25px;
}
}


/* animation
---------------------------------------- */
@keyframes animation_txt{
	100%{ transform:translateX(-100%); }
}

@keyframes animation_img{
	0%  { transform:translateX(calc(-50% - 40px / 2)); }
	100%{ transform:translateX(0); }
}

#home .consider .animation{
	overflow:hidden;
	position:relative;
}

#home .consider .animation ul{
	animation:animation_img 20s linear infinite;
	display:flex;
	gap:0 40px;
	position:absolute;
	top:0;
	left:0;
	width:max-content; /* position を使用するなら必要ない */
}

#home .consider .animation ul li{
	width:379px;
}

@media screen and (max-width:767px){
#home .consider .animation ul{
	gap:0 20px;
}

#home .consider .animation ul li{
	width:189px;
}
}


/* ---------- txt ---------- */
#home .consider .animation .txt{
	animation:animation_txt 20s linear infinite;
	transform:translateX(100%);
	padding:205px 0 124px 0;
	font-size:8.2rem;
	color:#BEBEBE;
	line-height:1;
	white-space:nowrap;
}

@media screen and (max-width:767px){
#home .consider .animation .txt{
	padding:95px 0 60px 0;
	font-size:5.0rem;
}
}


/* ----------------------------------------
	brand
---------------------------------------- */
#home .brand{
	padding:150px 0 100px 0;
	background:#F7F7F7;
}

#home .brand p{
	margin:0 0 50px 0;
	text-align:center;
	line-height:3.5rem;
}

#home .brand p.lead{
	position:absolute;
	top:28px;
	right:0;
	margin:0;
	text-align:left;
	font-size:3.3rem;
	font-weight:700;
	line-height:4.2rem;
}

#home .brand p.lead span{
	display:block;
	margin:6px 0 0 0;
	font-size:2.0rem;
	line-height:2.6rem;
}

@media screen and (max-width:767px){
#home .brand{
	padding:60px 0 20px 0;
}

#home .brand p{
	margin:0 0 30px 0;
}

#home .brand p.lead{
	position:static;
	margin:0 0 40px 0;
	font-size:2.4rem;
	line-height:3.4rem;
}

#home .brand p.lead span{
	font-size:1.8rem;
	line-height:2.4rem;
}
}


/* splide
---------------------------------------- */
#home .brand .splide{
	margin:0 -22px 120px;
}

#home .brand .splide__arrows{
	display:flex;
	justify-content:space-between;
	position:absolute;
	bottom:-200px;
	right:-48px;
	width:186px;
}

#home .brand .splide__arrow{
	position:static;
	width:84px;
	height:84px;
	background:url(../../img/home/arrow_brand.png) no-repeat center;
	background-size:84px;
	border-radius:0;
	transform:none;
	transition-duration:0.2s;
	opacity:1;
}
#home .brand .splide__arrow--prev{ transform:scaleX(-1); }
#home .brand .splide__arrow:hover:not(:disabled){ opacity:0.8; }
#home .brand .splide__arrow svg{ display:none; }

@media print, screen and (min-width:768px) and (max-width:1400px){
#home .brand .splide__arrows{
	right:5px;
}
}

@media screen and (max-width:767px){
#home .brand .splide{
	margin:0 -20px 82px;
}

#home .brand .splide__slide img{
	width:100%;
}

#home .brand .splide__arrows{
	bottom:-62px;
	right:20px;
	width:100px;
}

#home .brand .splide__arrow{
	width:42px;
	height:42px;
	background-size:42px;
}
}


/* ----------------------------------------
	owner
---------------------------------------- */
#home .owner{
	padding:150px 0 40px 0;
}

#home .owner p.lead{
	position:absolute;
	top:20px;
	right:-80px;
	font-size:3.3rem;
	font-weight:700;
	line-height:5.7rem;
	writing-mode:vertical-rl;
	z-index:1;
}

@media print, screen and (min-width:768px) and (max-width:1400px){
#home .owner p.lead{
	top:-10px;
	right:-30px;
}
}

@media screen and (max-width:767px){
#home .owner{
	padding:60px 0 20px 0;
}

#home .owner p.lead{
	position:static;
	margin:0 0 30px 0;
	font-size:2.4rem;
	line-height:3.4rem;
	writing-mode:horizontal-tb;
}
}


/* navi
---------------------------------------- */
#home .owner .navi{
	display:flex;
	gap:0 40px;
	position:absolute;
	top:116px;
	left:486px;
}

#home .owner .navi a{
	display:block;
	min-width:124px;
	padding:0 30px 0 0;
	background:url(../../img/home/arrow_owner.png) no-repeat right 2px center;
	background-size:18px 22px;
	border-bottom:1px solid #262626;
	font-size:1.8rem;
	font-weight:700;
	line-height:4.6rem;
	text-decoration:none;
}

#home .owner .navi a:hover{
	border-color:transparent;
}

@media screen and (max-width:767px){
#home .owner .navi{
	flex-wrap:wrap;
	justify-content:center;
	gap:20px 30px;
	position:static;
	margin:0 0 40px 0;
}

#home .owner .navi a:hover{
	border-color:#262626;
}
}


/* section
---------------------------------------- */
#home .owner .section{
	position:relative;
	min-height:435px;
	margin:0 0 160px 0;
	padding:42px 0 32px 397px;
	background:#F7F7F7;
}

#home .owner .section::before{
	content:"";
	position:absolute;
	top:0;
	left:-100vw;
	width:100vw;
	height:100%;
	background:#F7F7F7;
}

#home .owner .section > img{
	position:absolute;
	top:50%;
	left:70px;
	transform:translateY(-50%);
}

#home .owner .section h3{
	margin:0 60px 10px 0;
	font-size:2.8rem;
	font-weight:700;
	line-height:3.8rem;
}

#home .owner .section h3 span{
	display:block;
	margin:0 0 10px 0;
	font-size:1.6rem;
	line-height:1;
}

#home .owner .section ul{
	display:flex;
	gap:0 22px;
	margin:0 76px 46px 0;
}

#home .owner .section ul li{
	font-size:1.4rem;
	line-height:1;
}
#home .owner .section ul li:first-child{ margin-right:16px; }
#home .owner .section ul li span{ font-weight:700; }

#home .owner .section p{
	overflow:hidden;
	margin:0 76px 0 0;
	line-height:3.5rem;
}

#home .owner .section p img{
	float:right;
	margin:0 0 10px 50px;
}

@media screen and (max-width:767px){
#home .owner .section{
	min-height:auto;
	margin:0 0 40px 0;
	padding:30px 20px 30px 0;
}

#home .owner .section > img{
	display:block;
	position:static;
	width:200px;
	margin:0 auto 20px;
	transform:none;
}

#home .owner .section h3{
	margin:0 0 20px 0;
	font-size:2.4rem;
	line-height:3.4rem;
}

#home .owner .section ul{
	display:block;
	margin:0 0 15px 0;
}

#home .owner .section ul li{
	padding:0 0 10px 0;
}
#home .owner .section ul li:first-child{ margin-right:0; }

#home .owner .section p{
	margin:0;
}

#home .owner .section p img{
	display:block;
	float:none;
	margin:0 auto 15px;
}
}


/* ========================================================================
	お問い合わせ					[ /contact/ ]
======================================================================== */