@charset "UTF-8";


/* ----------------------------reset ---------------------------- */

html, body, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
}
#jbl-content {
	background: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: clamp(13px,1.08vw,16px);
	font-weight: 400;
	line-height: 2;
	letter-spacing: 1px;
	color: #333;
	text-align: left;
	-webkit-text-size-adjust: 100%;
}
#jbl-content h1,
#jbl-content h2,
#jbl-content h3,
#jbl-content h4,
#jbl-content h5,
#jbl-content h6 {
	font-family: 'Noto Sans JP', sans-serif!important; /*overwrite*/
	font-weight: bold;
	line-height: 1.75;
}
#jbl-content li {
	list-style-type: none;
}
#jbl-content a {
	font-family: 'Noto Sans JP', sans-serif; /*overwrite*/
	outline: none;
	text-decoration: none;
}
#jbl-content *:focus {
outline: none;
}
#jbl-content strong{
	font-weight: bold;
}
#jbl-content img {
  width: 100%;
  vertical-align: middle;
}
#jbl-content .cf {
    zoom: 1;
}
#jbl-content .cf:before, #jbl-content .cf:after {
    content: "";
    display: table;
}
#jbl-content .cf:after {
    clear: both;
}

@media only screen and (max-width: 374px) {
#jbl-content {
	font-size: 11px;
	letter-spacing: 0;
}
}



/* ----------------------------common ---------------------------- */

#jbl-content .montserrat{
	font-family: 'Montserrat', sans-serif!important;
}
.history_nobreak {
	display: inline-block;
}
.history_onlysp {
	display: none;
}
.history_inner{
	width: 100%;
    max-width: 1480px;
    padding: 0 clamp(20px,2.7vw,40px);
    margin: 0 auto;
    box-sizing: border-box;
	position: relative;
	z-index: 2;
}


@media only screen and (max-width: 959px) {
.history_onlypc {
	display: none;
}
.history_onlysp {
	display: inline;
}
}

/* ----------------------------history_hero ---------------------------- */

.history_hero{
	padding: min(2.7vw,40px);
	padding-top: 0;
}
.history_hero_inner{
	background: url("../media/hero_pc.webp") no-repeat center center/cover;
	height: 35.4vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 40px;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	border-radius: min(2.7vw,40px);
}
.history_hero_list{
	display: none;
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.history_hero_item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}
.history_hero_item01 {
    background-image: url("../media/hero_sp01.webp");
}
.history_hero_item02 {
    background-image: url("../media/hero_sp02.webp");
	display: none;
}
.history_hero_item03 {
    background-image: url("../media/hero_sp03.webp");
	display: none;
}
.history_hero_item04 {
    background-image: url("../media/hero_sp04.webp");
	display: none;
}


.history_hero_ttl{
	position: relative;
	z-index: 2;
}
.history_hero_primary{
	width: 47.57vw;
	max-width: 704px;
	margin: 0 auto 24px;
}
.history_hero_secondary{
	font-size: min(1.35vw,20px);
	letter-spacing: 1.5px;
}


@media only screen and (max-width: 959px) {
.history_hero{
	padding: 0;
}
.history_hero_inner{
	background: #000;
	border-radius: 0;
	height: 90.66vw;
	padding: 20px;
}
.history_hero_list{
	display: block;
}
.history_hero_primary{
	width: 78.66vw;
}
.history_hero_secondary{
	font-size: 3.47vw;
}

}	


/* ----------------------------history_about ---------------------------- */

.history_about{
	background-image: linear-gradient( 105deg, rgb(82,46,30) 0%, rgb(117,72,50) 20%, rgb(141,90,63) 50%, rgb(117,72,50) 80%, rgb(95,50,29) 100%);
}
.history_about .history_inner{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
.history_about_txt{
	padding: min(5.4vw,80px) 0;
	width: 47%;
	color: #fff;
}
.history_about_ttl{
	margin-bottom: clamp(40px,4.05vw,60px);
}
.history_about_ttl_inner{
	display: block;
	font-size: clamp(22px,2.8vw,42px);
	padding-bottom: clamp(20px,2.7vw,40px);
	position: relative;
}
.history_about_ttl_inner:after {
    position: absolute;
    content: '';
    display: inline-block;
    bottom: 0;
    left: 0;
    width: clamp(36px,4.86vw,72px);
    height: clamp(4px,0.54vw,8px);
    background: url("../media/dot_about.svg") no-repeat center center/contain;
}
.history_about_txt p + p{
	margin-top: clamp(30px,2.7vw,40px);
}
.history_emphasis{
	color: #ff4713;
}

.history_about_img{
	width: 47%;
	position: relative;
	bottom: -40px;
}


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

.history_about .history_inner{
	display: block;
}
.history_about_txt{
	padding: 60px 0 20px;
	width: 100%;
}
.history_about .history_nobreak{
	display: inline;
}
.history_about_img{
	width: 100%;
	bottom: -20px;
}

}

/*----------------------history_chrono----------------------------*/


.history_chrono_wrap{
	padding: min(9.46vw,140px) 0 clamp(160px,13.51vw,200px);
}
.history_chrono_wrap .history_inner{
	padding-top: 60px;
	display: flex;
	justify-content: space-between;
	position: relative;
}
.history_nav{
	width: 140px;
	position: absolute;
	left: min(2.7vw,40px);
	top: 60px;
}
@media only screen and (max-height: 670px) {
.history_nav{
	transform: scale(0.85);
	transform-origin: top left;
}
}
.history_nav_item{
	position: relative;
	z-index: 2;
}
.history_nav_item + .history_nav_item{
	margin-top: 30px;
}
.history_nav_item + .history_nav_item:before{
    content: '';
    display: inline-block;
    width: 2px;
    height: 20px;
    background: #b2a29a;
	position: absolute;
	left: 5px;
	top: -25px;
}


.history_nav_item a{
	font-size: 16px;
    color: #b2a29a;
	line-height: 1;
	display: block;
	transition: all 0.3s;
}
.history_nav_item.current a,
.history_nav_item a:hover{
    color: #ff4713;
}
.history_nav_item a:before{
    content: '';
    display: inline-block;
	margin: 0 auto;
    width: 12px;
    height: 12px;
    border: 2px solid #b2a29a;
	box-sizing: border-box;
	border-radius: 50%;
	margin-right: 15px;
	transition: all 0.3s;
}
.history_nav_item.current a:before,
.history_nav_item a:hover:before{
    border: 2px solid #ff4713;
	background: #ff4713;
}
.history_chrono{
	width: calc(100% - 200px);
	position: relative;
	margin-left: 200px;
}
.history_chrono_item{
	padding-top: 60px;
	margin-top: -60px;
	width: 92%;
	position: relative;
}
.history_chrono_item + .history_chrono_item{
	margin-top: 100px;
}
.history_chrono_item:nth-of-type(even){
	margin-left: 8%;
}
.history_chrono_item_line{
    display: inline-block;
    width: min(0.8vw,12px);
    height: 130px;
    background: #ff4713;
    position: absolute;
    left: 0;
	right: 0;
    top: -85px;
	margin: 0 auto;
	border-radius: 9999px;
}

.history_chrono_item_inner{
	padding: min(4.73vw,70px);
	position: relative;
	display: flex;
	justify-content: space-between;
	border: min(0.8vw,12px) solid #ff4713;
	border-radius: min(2.7vw,40px);
	box-sizing: border-box;
}

.history_chrono_head{
	display: flex;
	align-items: center;
	position: absolute;
	font-size: min(3.65vw,54px);
	letter-spacing: 0;
	color: #fff;
	background: #ff4713;
	line-height: 1;
	top: max(-3.72vw,-55px);
	left: max(-2.97vw,-44px);
	padding: min(0.68vw,10px)  min(1.62vw,24px);
	border-radius: min(1.49vw,22px);
	border: min(0.8vw,12px) solid #fff;
}
.history_chrono_head:before{
    content: '';
    display: inline-block;
    width: min(1.22vw,18px);
    height: min(2.3vw,34px);
    background: url("../media/ico_exclamation.svg") no-repeat center center/contain;
	margin-right:  min(1.62vw,24px);
}
.history_chrono_img{
	width: 34%;
}
.history_chrono_img figure{
	border-radius: min(1.35vw,20px);
	overflow: hidden;
}
.history_chrono_img figure + figure{
	margin-top: 20px;
}
.history_chrono_txt{
	width: 60%;
}
.history_chrono_ttl{
	margin-bottom: clamp(40px,4.05vw,60px);
}
.history_chrono_ttl_inner{
	display: block;
	font-size: clamp(16px,1.62vw,24px);
	padding-bottom: clamp(20px,2.7vw,40px);
	position: relative;
}
.history_chrono_ttl_inner:after {
    position: absolute;
    content: '';
    display: inline-block;
    bottom: 0;
    left: 0;
    width: clamp(36px,4.86vw,72px);
    height: clamp(4px,0.54vw,8px);
    background: url("../media/dot_chrono.svg") no-repeat center center/contain;
}

.history_chrono_txt p + p{
	margin-top: clamp(30px,2.7vw,40px);
}



@media only screen and (max-width: 959px) {
.history_chrono_wrap{
	padding: 80px 0;
}
.history_chrono_wrap .history_inner{
	padding-top: 0;
	display: block;
}
.history_nav{
	display: none;
}
.history_chrono{
	width: 100%;
	margin-left: 0;
}
.history_chrono_item{
	padding-top: 0;
	margin-top: 0;
	width: 88%;
}
.history_chrono_item + .history_chrono_item{
	margin-top: 80px;
}
.history_chrono_item:nth-of-type(even){
	margin-left: 12%;
}
.history_chrono_item_line {
    width: 6px;
    height: 64px;
    top: -72px;
}
.history_chrono_item_inner{
	padding: 40px 20px;
	display: block;
	border: 6px solid #ff4713;
	border-radius: 20px;
}
.history_chrono_head{
	font-size: 27px;
	top: -30px;
	left: -22px;
	padding: 8px 12px;
	border-radius: 11px;
	border: 6px solid #fff;
}
.history_chrono_head:before{
    width: 9px;
    height: 17px;
	margin-right: 12px;
}
	
.history_chrono_img{
	width: 100%;
}
.history_chrono_img figure{
	border-radius: 10px;
}
.history_chrono_img figure + figure{
	margin-top: 10px;
}
.history_chrono_txt{
	margin-top: 40px;
	width: 100%;
}


}


/* ----------------------------fade ---------------------------- */

.--fade {
  opacity: 0;
  transition: all 0.6s ease;
  transform: translate3d(0, 25px, 0);
}
.--fade.fade_delay{
  transition-delay: 0.4s;
}
.--fade.--show {
  opacity: 1;
  transform: none;
}
.fade_txt,
.fade_txt_item{
    opacity: 0;
	overflow: hidden;
}
.--fade.--show .fade_txt{
	animation-name:slideTextX100;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
}
.--fade.--show .fade_txt_item{
	display: block;
	animation-name:slideTextX-100;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
}
.--fade.--show .fade_txt:nth-of-type(2),
.--fade.--show .fade_txt:nth-of-type(2) .fade_txt_item{
	animation-delay: 0.8s;
}
.--fade.--show .fade_txt:nth-of-type(3),
.--fade.--show .fade_txt:nth-of-type(3) .fade_txt_item{
	animation-delay: 1.2s;
}
@keyframes slideTextX100 {
0% {
	transform: translateX(-100%);
    opacity: 0;
    }
100% {
	transform: translateX(0);
    opacity: 1;
    }
}

@keyframes slideTextX-100 {
0% {
	transform: translateX(100%);
    opacity: 0;
    }
100% {
	transform: translateX(0);
    opacity: 1;
    }
}



/* ----------------------------history_product ---------------------------- */

.history_product{
	padding: min(11.43vw,160px) 0;
	background: #f6f6f6;
}
.history_product_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.history_product_item{
	width: 32.38%;
}
.history_product_item:nth-child(n+4){
	margin-top: 1.43%;
}
.history_product_btn{
	background: #ff4713;
	color: #fff;
	font-weight: bold;
	width: 100%;
	height: 80px;
	padding: 10px 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 40px;
	position: relative;
	transition: all 0.2s;
	border: 4px solid #ff4713;
	box-sizing: border-box;
	line-height: 1.5;
}
.history_product_btn:after{
	width: 32px;
	height: 32px;
	content: "";
    display: inline-block;
	border-radius: 16px;
	background: url("../media/arrow_btn_o.svg") #fff no-repeat center center/18px auto;
    position: absolute;
	top: 0;
	bottom: 0;
	right: 20px;
	margin: auto 0;
    z-index: 1;
}
@media only screen and (min-width: 960px) {
.history_product_btn:hover{
	background: #fff;
	color: #ff4713;
}
.history_product_btn:hover:after{
	background: url("../media/arrow_btn_w.svg") #ff4713 no-repeat center center/18px auto;
}

}
@media only screen and (max-width: 959px) {
.history_product{
	padding: 80px 0;
}
.history_product_item{
	width: 100%;
}
.history_product_item:nth-child(n+2){
	margin-top: 10px;
}
.history_product_btn{
	height: 60px;
	border-radius: 30px;
	padding: 10px 55px;
}
.history_product_btn:after{
	width: 22px;
	height: 22px;
	border-radius: 11px;
	background-size: 12px auto;
	right: 15px;
}
.history_product_btn:hover{
	color: #fff!important;  /*overwrite*/
}


}