@charset "utf-8";

/*-------------------------------------------------------------------
 *
 * File Name   : history.css
 *
-------------------------------------------------------------------*/

/*===================================================================
	/history/index.html
===================================================================*/


/*===================================================================
	PC
===================================================================*/
.backgound_inner01{
	background-image: url(/history/images/bg01.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
}
.backgound_inner01_icon{
	background-image: url(/history/images/bg01_icon.png);
	background-repeat: no-repeat;
	background-position: bottom center;
}
.backgound_inner02{
	background: linear-gradient(90deg, #addefb, #e5f7fd, #a9defb);
}
.background_inner05{
	background-image: url(/history/images/bg05.png);
	background-repeat: no-repeat;
    background-position: bottom;
}

/* メインジュアル
-----------------------------------------*/
.mv_area{
	width: 100%;
}
.mv_area .mv_area_innner{
	width: 1000px;
    height: 598px;
	margin: 0 auto;
}
.mv_area .title{
	max-width: 561px;
	width: auto;
	margin: 0 auto;
	padding-top: 48px;
}
.mv_area .title>img{
	width: auto;
}
.mv_area .package{
	max-width: 880px;
	width: auto;
	margin: 0 auto;
	padding-top: 72px;
}
.mv_area .package>img{
	height: auto;
	margin-left: 25px;
}

/* リードテキスト
-----------------------------------------*/
.lead{
	width: 100%;
	padding-top: 158px;
}
.lead .lead_inner{
	width: 1000px;
	margin: 0 auto;
	text-align: center
}
.lead .lead_inner .lead_ttile>h2{
	display: block;
    text-align: center;
    background-color: #f2fbfe;
	padding: 25px 29px;
	transform: skewX(-7deg);
}
.lead .lead_inner .lead_ttile>h2>img{
	transform: skewX(7deg);
}
.lead .lead_inner .lead_txt{
	margin-top: 30px;
	color: #333;
	font-size: 23px;
	line-height: 55px;
	font-weight: normal;
}
.lead .lead_inner .lead_txt>p>span{
	color: #144199;
	font-weight: bold;
}

/* ムービー
-----------------------------------------*/
.movie{
	width: 100%;
	margin-top: 60px;
}
.movie .movie_inner{
	width: 1000px;
	margin: 0 auto;
}
.movie .movie_inner>ul{
	width: 100%;
	text-align: center;
}
.movie .movie_inner>ul>li{
	display: inline-block;
}
.movie .movie_inner>ul>li:nth-child(even){
	margin-left: 13px;
}
.movie .movie_inner>ul>li>.contents_title{
	margin-bottom: 13px;
	display: block;
}
.movie .movie_inner .movie_txt {
	position: relative;
	width: 796px;
	margin: 35px auto 0;
	padding: 20px 0;
	background-color: #fff;
	border-radius: 65px;
}
.movie .movie_inner .movie_txt .lead_research_worker{
	position: absolute;
	left: -32px;
	top: 0;
	bottom: 0;
	height: 136px;
	margin: auto;
}
.movie .movie_inner .movie_txt .lead_research_worker > img{
	max-width: 100%;
	max-height: 100%;
}
.movie .movie_inner .movie_txt .txt {
	font-size: 19px;
	text-align: center;
	line-height: 1.9;
}
.movie .movie_col1 {
	width: 90%;
}
.movie .movie_inner>ul>li.movie_col1 .contents_title {
	margin-bottom: 18px;
}
.movie li.movie_col1 .iframeWrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.movie li.movie_col1 iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

/* 紹介
-----------------------------------------*/
.introduction{
	margin-top: 87px;
	width: 100%;
}
.introduction .introduction_boxbg{
	background-color: #ffffff;
	transform: skewX(-6deg);
	width: 1075px;
	margin: 0 auto;
}
.introduction .introduction_boxbg .introduction_inner{
	width: 1000px;
	transform: skewX(6deg);
	margin: 0 auto;
	padding-bottom: 30px;
}
.introduction .introduction_boxbg .introduction_inner>ul{
	position: relative;
	width: 100%;
	margin: 0 auto;
}
.introduction .introduction_boxbg .introduction_inner>ul>li{
	display: inline-block;
	width: calc(46% - 45px);
	margin-left: 60px;
	padding-bottom: 16%;
	vertical-align: top;
}
.introduction .introduction_boxbg .introduction_inner>ul>li.introduction01{
	margin-left: 50px;
}
.introduction .introduction_boxbg .introduction_inner>ul>li>h3{
	padding: 41px 0 17px;
	text-align: center;
	border-bottom: 3px solid #144199;
}
.introduction .introduction_boxbg .introduction_inner>ul>li.introduction02>h3>img{
	margin-left: 25px;
}
.introduction .introduction_boxbg .introduction_inner>ul>li>p{
	margin: 0 5px;
	padding-top: 20px;
	font-size: 18px;
	line-height: 29px;
}
.introduction .introduction_boxbg .introduction_inner>ul>li>.introduction_img{
	position: absolute;
	bottom: 45px;
}
.introduction .introduction_boxbg .introduction_inner>ul>li.introduction01>.introduction_img{
	left: 135px;
	bottom: 50px;
}
.introduction .introduction_boxbg .introduction_inner>ul>li.introduction02>.introduction_img{
	left: 697px;
	bottom: 16px;
}
.introduction .fs-sm {
	font-size: 14px;
	line-height: 1.5;
	display: block;
}

/* ヒストリー
-----------------------------------------*/
.history_start{
	margin-top: 122px;
}
.history_start .contentsIn{
    padding-bottom: 0;
}
.historyBox{
    background: #75c0f5;
    display: block;
    padding: 75px 125px 33px 45px;
    margin:0 0 28px;
    position: relative;
}
.historyBox:after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -28px;
    background: url(/history/images/bg_line_history_grad.png) 0 0 no-repeat;
    width: 20px;
    height: 28px;
    margin-left: -10px;
}
.historyBox.historyBox.boxAfter.oblique30:after{
    background: url(/history/images/bg_shortline_history_grad.png) 0 0 no-repeat;
}
.historyBox.boxAfter:after{
    height: 96px;
    bottom: -96px;
}
.historyBox.oblique7{
	transform: skewX(-7deg);
}
.historyBoxInner.oblique7{
	transform: skewX(7deg);
}
.historyBox.oblique7:after{
	transform: skewX(7deg);
	left: 52%;
}
.txtStory{
    width: 320px;
    display: block;
	margin: -3px auto;
	position: relative;
}
.txtStory>img.pc{
	position: absolute;
	top: -93px;
	width: 91%;
	margin: 0 auto;
	left: 2%;
	z-index: 1;
}

.bgHistory{
	position: relative;
    margin-top: -73px;
    padding-bottom: 140px;
}
.bgHistory::after {
    min-width: 1000px;
    height: 140px;
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	background: url(/history/images/line_yearnum_finish.png) no-repeat calc(50% + 0.5px) bottom;
}
.historyBox.boxAfter{
    margin:0 auto 145.5px;
    padding: 23px 0 20px;
	text-align: center ;
	width: 770px;
}
.historyBox.boxAfter.oblique30{
	transform: skewX(-10deg);
}
.historyBox.boxAfter p.oblique30{
	transform: skewX(10deg);
}
.historyBox.boxAfter.oblique30:after{
	transform: skewX(10deg);
	left: 52%;
}
.historyBox .titHistoryBox{
    display: block;
    text-align: center;
    position: absolute;
    top: -37px;
    left: 50%;
	margin-left: -255px;
	background-color: #144199;
	padding: 25px 37px;
}
.historyBox .titHistoryBox>img.oblique7{
	transform: skewX(7deg);
}
.historyBox dl{
    background: url(/img/history/img_bifidus.png) left center no-repeat;
    padding-left: 185px;
}
.historyBox dt{
    vertical-align: middle;
    margin-left: -8px;
}
.historyBox dd{
    color: #ffffff;
    font-size: 14px;
    padding: 10px 0;
    margin-top: 7px;
    line-height: 1.75;
    border-top: dotted 2px #ffffff;
		text-align: justify;
}
.titHistory{
    letter-spacing: 1px;
    font-size: 22px;
    color: #ffffff;
    font-weight: bold;
}
.titHistory span{
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
    margin-top: -3px;
}
.boxAfter .titHistory{
    letter-spacing: 2px;
}
.titHistory span img{
    width: 102px;
}
.boxAfter .titHistory span{
    margin-right: 27px;
}
.boxAfter .titHistory span img{
    width: 88px;
}
.research_worker{
	position: relative;
}
.research_worker>img{
	position: absolute;
	bottom: 10px;
	right: -15%;
}

/* listBrandHistory */
.listBrandHistory{
    margin-top: 16px;
    width: 1000px;
    margin: 0 auto;
    padding: 104px 0 72px;
    display: block;
    position: relative;
}
.background_history{
	background-color: #edfafe;
	max-width: 1200px;
	width: 100%;
	margin: 234px auto 0 auto;
}
.background_history .axis{
	position: relative;
	margin: -82px auto 0 auto;
	background: url(/history/images/line_yearnum.png) center 12px no-repeat;
	background-size: auto 100%;
	background-position-y: bottom;
}
.background_history .history_research_worker{
	position: relative;
}
.background_history .history_research_worker>img{
	position: absolute;
}
.background_history .history_research_worker .research_worker01{
	right: 134px;
	top: -4550px;
}
.background_history .history_research_worker .research_worker02{
	right: 234px;
	top: -4550px;
}
.background_history .history_research_worker .research_worker03{
	right: 115px;
	top: -3050px;
}
.listBrandHistory:after{
    content: "";
    clear: both;
    display: block;
}
.listBrandHistory li{
    display: block;
    /* box-shadow */
    -moz-box-shadow:0 0 15px 6px rgba(0,0,0,0.15);
    -webkit-box-shadow:0 0 15px 6px rgba(0,0,0,0.15);
    box-shadow:0 0 15px 6px rgba(0,0,0,0.15);
    border: 13px solid #ffffff;
    width: 382px;
    position: relative;
}
.listBrandHistory li.bYear,
.listBrandHistory li.bCopy{
    background: #fffcf7;
    padding: 10px 25px 15px;
    box-sizing: border-box;
}
.listBrandHistory li.left{
    float: left;
    clear: left;
}
.listBrandHistory li.right{
    float: right;
    clear: right;
}
.listBrandHistory li figure{
    text-align: center;
}
.listBrandHistory li.bYear figcaption{
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 14px;
    color: #666666;
}
.listBrandHistory li:after{
    content: "";
    display: block;
    width: 61px;
    height: 59px;
    margin-left: -30px;
}
.listBrandHistory li:after{
    content: "";
    position: absolute;
    top: -45px;
    left: 50%;
    color: #004d24;
    font-size: 15px;
    text-align: center;
    display: inline-block;
    background: url(/img/history/ico_bifidus01.png) 0 0 no-repeat;
}
.listBrandHistory .catch{
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    color: #9e740e;
    padding-top: 25px;
    box-sizing: border-box;
    letter-spacing: 1px;
}
.listBrandHistory .catch.lg {
		font-size: 20px;
}
.listBrandHistory li.bCopy .copy{
    padding: 33px 0 11px;
    border-bottom: #144199 dotted 2px;
    margin-bottom: 20px;
}
.listBrandHistory li.bCopy .copy.img01,
.listBrandHistory li.bCopy .copy.img02,
.listBrandHistory li.bCopy .copy.img03{
    position: relative;
    padding-top: 25px;
}
.listBrandHistory li.bCopy .copy.img01:after,
.listBrandHistory li.bCopy .copy.img02:after,
.listBrandHistory li.bCopy .copy.img03:after{
    content: "";
    display: block;
    width: 112px;
    height: 112px;
    position: absolute;
}
.listBrandHistory li.bCopy .copy.img01:after{
    background: url(/img/history/img_title01.png) right top no-repeat;
    right: -37px;
    top: -3px;
}
.listBrandHistory li.bCopy .copy.img02:after{
    background: url(/img/history/img_title02.png) right top no-repeat;
    right: -20px;
    top: 0;
}
.listBrandHistory li.bCopy .copy.img03:after{
    background: url(/img/history/img_title03.png) right top no-repeat;
    right: -43px;
    top: -33px; 
    height: 117px;
}
.listBrandHistory li.bCopy .copy small{
    font-size: 12px;
    line-height: 1.2;
}
.listBrandHistory li.bCopy .copyTxt{
    margin-bottom: 4px;
    color: #666666;
    font-size: 14px;
    line-height: 1.75;
}
.listBrandHistory li.bCopy .copyTxt:last-child{
    margin-bottom: 15px;
}
.listBrandHistory li.bCopy .copy p,
.listBrandHistory li.bCopy .copyTit,
.listBrandHistory li.bCopy .copy small{
    color: #154fac;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
}
.listBrandHistory li.bCopy .copyTit{
    text-align: center;
    font-size: 18px;
    padding-top: 14px;
}
.listBrandHistory li.bCopy small.copyNote{
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.6;
}
.listBrandHistory li.bCopy .copy small {
    font-size: 12px;
}
.listBrandHistory li.bCopy .copy p + small{
    padding: 10px 0 9px;
    display: inline-block;
}
.listBrandHistory li.bCopy .ls-sm {
	letter-spacing: -0.05em;
}
.listBrandHistory li.bCopy .copyTit.-lg {
	font-size: 20px;
	text-align: left;
	line-height: 1.5;
	padding-top: 30px;
	padding-bottom: 23px;
}
.listBrandHistory li:nth-child(1){ margin-top: -8px; }
.listBrandHistory li:nth-child(2){ margin-top: 171px; }
.listBrandHistory li:nth-child(3){ margin-top: 70px;  }
.listBrandHistory li:nth-child(4){ margin-top: 64px; }
.listBrandHistory li:nth-child(5){ margin-top: 81px;}
.listBrandHistory li:nth-child(6){ margin-top: 100px; }
.listBrandHistory li:nth-child(7){ margin-top: 110px; }
.listBrandHistory li:nth-child(8){ margin-top: 100px; }
.listBrandHistory li:nth-child(9){ margin-top: 90px; }
.listBrandHistory li:nth-child(10){ margin-top: 343px; }
.listBrandHistory li:nth-child(11){ margin-top: 90px; }
.listBrandHistory li:nth-child(12){ margin-top: 330px; }
.listBrandHistory li:nth-child(13){ margin-top: 100px; }
.listBrandHistory li:nth-child(14){ margin-top: 190px; }
.listBrandHistory li:nth-child(15){ margin-top: 120px; }
.listBrandHistory li:nth-child(16){ margin-top: 78px; }
.listBrandHistory li:nth-child(17){ margin-top: -65px ; }
.listBrandHistory li:nth-child(18){ margin-top: 100px; }
.listBrandHistory li:nth-child(19){ margin-top: 100px; padding: 18px 10px; }
.listBrandHistory li:nth-child(20){ margin-top: 110px; padding: 10px 5px 10px 25px;}
.listBrandHistory li:nth-child(21){ margin-top: 100px;}
.listBrandHistory li:nth-child(22){ margin-top: 164px;}
.listBrandHistory li:nth-child(23){ margin-top: 100px;}
.listBrandHistory li figure img{
    margin: 25px 0 12px 5px;
}
.listBrandHistory li.box_2017 figure img{
    margin: 0 0 12px;
}
.listBrandHistory li:nth-child(1) figure img,
.listBrandHistory li:nth-child(2) figure img{
    margin: 18px 0 12px 5px;
}
.listBrandHistory li:nth-child(9) figure img{
    width: 124px;
    margin: -5px 0 12px 5px;
}
.listBrandHistory li:nth-child(3) figure img,
.listBrandHistory  li:nth-child(7) figure img{
    margin: 40px 0 12px 5px;
}
.listBrandHistory li:nth-child(10) figure img,
.listBrandHistory li:nth-child(11) figure img,
.listBrandHistory li:nth-child(12) figure img,
.listBrandHistory li:nth-child(14) figure img{
    margin: 53px 0 12px;
    
}
.listBrandHistory li:nth-child(15) figure img,
.listBrandHistory li:nth-child(17) figure img{
    margin: 50px 0 12px -10px;
}
.listBrandHistory li:nth-child(16) figure img{
    margin: 7px 0 12px 5px;
    width: 261px;
}
.listBrandHistory li:nth-child(17) figure img{
    margin: 40px 0 12px -10px;
}
/* エンドテキスト
-----------------------------------------*/
.background_inner04{
	background-image: url(/history/images/bg04.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.end_txt{
	width: 100%;
	margin-top: 40px;
	height: 444px;
	text-align: center;
}
.end_txt .end_txt_inner{
	width: 1000px;
	margin: 0 auto;
}
.end_txt_product {
	position: relative;
	display: inline-block;
	text-align: center;
	margin-top: 60px;
}
.end_txt_product::before {
	content: "";
	position: absolute;
	left: -105px;
	bottom: 12px;
	width: 88px;
	padding-top: 169px;
	background: url(/history/images/future_research_worker.png) no-repeat 50% 50%;
	background-size: contain;
}


/* SNSボタン
-----------------------------------------*/
#snsBox .inner {
	padding: 50px 0 144px;
  }
  
  #snsBox .inner ul {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 49px;
  }
  
  #snsBox .inner ul li {
	padding-right:46px;
  }
    

  
  #snsBox .inner ul li a:hover {
	opacity: .8;
  }
  /* ふわっと表示 */
.listBrandHistory li{
    opacity: 0;
    -webkit-transform: translate(0,60px);
    transform: translate(0,60px); 
}
.listBrandHistory li.display{
    opacity: 1.0;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
    -webkit-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}


/*===================================================================
	SP
===================================================================*/
@media screen and (max-width: 768px){
	/* メインビジュアル ============================================================ */
	.backgound_inner01 {
		background-image: url(/history/images/bg01_sp.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: bottom center;
		text-align: center;
	}
	.backgound_inner01_icon{
		background-image: none;
	}
	.mv_area .mv_area_innner {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
	.mv_area .title {
		max-width: none;
		padding-top: 85px;
	}
	.mv_area .title>img {
		width: 78%
	}
	.mv_area .package {
		max-width: none;
		padding-top: 83px;
		margin-bottom: -7%;
	}
	.mv_area .package>img {
		width: 90%;
		margin-left: 2%;
	}

	.backgound_inner02 {
		background: linear-gradient(90deg, #bfecfc, #e5f7fd, #baebfc);
	}
	/* リードテキスト ============================================================ */
	.lead{
		padding-top: 21%;
		background-size: contain;
	}
	.lead .lead_inner {
		width: 100%;
	}
	.lead .lead_inner .lead_ttile>h2 {
		transform: skewX(0deg);
		padding: 12px 63px;
	}
	.lead .lead_inner .lead_ttile>h2>img {
		transform: skewX(0deg);
		width: 100%;
	}
	.lead .lead_inner .lead_txt {
		font-size: 15px;
		line-height: 30px;
		margin-top: 23px;
	}
	.lead .lead_inner .lead_txt>p+p {
		padding-top: 14px;
	}


	/* MOVIE ============================================================ */
	.movie {
		margin-top: 30px;
	}
	.movie .movie_inner {
		width: 90%;
	}
	.movie .movie_inner>ul>li:nth-child(even) {
    margin-left: 0;
		margin-top: 5%;
	}
	.movie .movie_inner>ul>li {
    width: 100%;
	}
	.movie .contents_title img {
		height: 5vw;
		max-height: 24px;
	}
	.movie .iframeWrap {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
	}
	.movie iframe {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}

	/* イントロダクション ============================================================ */
	.introduction{
		margin-top: 13%;
		padding-bottom: 133px;
		background: url(/history/images/bg_introduction_sp.png) no-repeat bottom;
		background-size: 100% auto;
	}
	.introduction .introduction_boxbg {
		transform: skewY(5deg);
		width: 90%;
	}
	.introduction .introduction_boxbg .introduction_inner {
		width: 100%;
		transform: skewY(-5deg);
	}
	.introduction .introduction_boxbg .introduction_inner>ul {
		width: 90%;
		margin: 0 auto;
	}
	.introduction .introduction_boxbg .introduction_inner>ul>li {
		width: 100%;
		margin: 0 auto;
	}
	.introduction .introduction_boxbg .introduction_inner>ul>li.introduction01{
		margin-top: 8%;
		margin-left: auto;
		padding-bottom: 11%;
	}
	.introduction .introduction_boxbg .introduction_inner>ul>li.introduction01>.introduction_img {
		margin-top: 0;
	}
	.introduction .introduction_boxbg .introduction_inner>ul>li.introduction01>.introduction_img>img{
		width: 84%;
    margin: 0 auto;
	}
	.introduction .introduction_boxbg .introduction_inner>ul>li.introduction02>h3>img{
		margin: 0 auto;
	}
	.introduction .introduction_boxbg .introduction_inner>ul>li>h3 {
		padding: 35px 0 14px;
	}
	.introduction .introduction_boxbg .introduction_inner>ul>li>p {
		margin: 0 2%;
		font-size: 15px;
		line-height: 2.0;
    padding-top: 4%;
	}
	.introduction .introduction_boxbg .introduction_inner>ul>li>.introduction_img{
		position: static;
		margin-top: 30px;
		text-align: center;
	}
	.introduction .introduction_boxbg .introduction_inner>ul>li.introduction03>.introduction_img>img{
		max-width: 260px;
		width: 76%;
		margin: 0 auto;
	}
	.introduction .fs-sm {
    font-size: 11px;
	}

	/* ヒストリー ============================================================ */
	.history_start {
		margin-top: 1%;
	}
	.historyBox.historyBox.boxAfter.oblique30:after{
		left: 50%;
		bottom: -60px;
		background: url(/history/images/bg_line_history_grad.png) 0 0 no-repeat;
		width: 20px;
		height: 61px;
		margin-left: -6px;
		-webkit-background-size: 10px auto;
		background-size: 10px auto;
	}
	#contents.history{
		padding-bottom: 0;
	}
	.history .footSns{
		padding-bottom: 20px;
		background: #edf7fc;
	}
	.historyBox .titHistoryBox{
		margin-left: -162px;
		top: -31px;
		transform: skewX(-7deg);
		padding: 19px 12px;
	}
	.historyBox .titHistoryBox img{
		width: 300px;
	}
	.historyBox{
		padding: 40px 25px 20px;
	}
	.historyBox.boxAfter{
		text-align: left;
		padding: 15px 25px;
		margin-bottom: 82px;
	}
	.historyBox.boxAfter:after{
		height: 81px;
		bottom: -81px;
	}
	.titHistory{
		font-size: 15px;
	}
	.boxAfter .titHistory{
		line-height: 1.4;
	}
	.historyBox dl{
		padding-left: 0;
		padding-bottom: 161px;
		-webkit-background-size: 100px auto;
		background-size: 100px auto;
		background-position: center bottom;
	}
	.historyBox dt{
		font-size: 15px;
		margin-left: 0;
		line-height: 1.3;
	}
	.historyBox dt span,
	.titHistory span{
		display: block;
		margin-bottom: 3px;
	}
	.historyBox dt span img,
	.titHistory span img,
	.boxAfter .titHistory span img{
		width: 51px;
	}
	.research_worker>img{
		bottom: -152px;
		right: 14px;
		width: 61px;
	}
	.historyBox dd{
		font-size: 12px;
		line-height: 1.5;
	}
	.bgHistory{
		padding-top: 8px;
		margin-top: -40px;
		padding-bottom: 0;
	}
	.bgHistory::after {
		bottom: -56px;
    height: 97px;
    width: 18px;
    right: -1px;
		background-size: 100% auto;
		min-width: 0;
		transform: translateX(0)
	}
	.txtStory{
		width: 174px;
		height: 89px;
		margin-top: -4px;
	}
	.txtStory img{
		width: 200px;
	}
	.txtStory img.sp{
		position: absolute;
		top: 1px;
		width: 108%;
		margin: 0 auto;
		left: -6%;
	}
	.historyBox:after,
	.historyBox.boxAfter:after{
		-webkit-background-size: 10px auto;
		background-size: 10px auto;
		margin-left: -5px;
	}
	.historyBox.oblique7{
		transform: skewX(0deg);
	}
	.historyBoxInner.oblique7{
		transform: skewX(0deg);
		padding-top: 14px;
	}
	.historyBox.oblique7:after{
		transform: skewX(0deg);
		left: 50%;
	}
	.historyBox.boxAfter{
		width: auto;
	}
	.historyBox.boxAfter.oblique30{
		transform: skewX(0deg);
	}
	.historyBox.boxAfter p.oblique30{
		transform: skewX(0deg);
	}
	.historyBox.boxAfter.oblique30:after{
		transform: skewX(0deg);
		left: 50%;
		height: 49px;
		bottom: -49px;
	}
	.background_history .axis {
		background-image: none;
	}
	.listBrandHistory{
		padding: 137px 0 42px;
		width: 70%;
		min-width: 300px;
		height: auto;
		box-sizing: border-box;
		background: url(/img/history/bg_line_history_sp.png) repeat-y;
		background-position: top 20%  left 50%;
		-webkit-background-size: 10px auto;
		background-size: 10px auto;
		margin-top: 64px;
	}
	.bgHistory .background_history{
		width: 90%;
		margin-top: 0;
	}
	.bgHistory .finish_line>img{
		bottom: -60px;
		left: 47.7%;
		width: 18px;
	}
	.listBrandHistory li.bYear, .listBrandHistory li.bCopy{
		padding: 10px 10px 15px;
	}
	.listBrandHistory li.bCopy .copy p,
	.listBrandHistory .catch,
	.listBrandHistory .catch.lg{
		font-size: 14px;
	}
	.listBrandHistory li.left,
	.listBrandHistory li.right{
		float: none;
	}
	.listBrandHistory li{
		width: 100%;
	}
	.listBrandHistory li:nth-child(1) figure img,
	.listBrandHistory li:nth-child(2) figure img,
	.listBrandHistory li:nth-child(3) figure img,
	.listBrandHistory li:nth-child(4) figure img,
	.listBrandHistory li:nth-child(5) figure img,
	.listBrandHistory li:nth-child(6) figure img,
	.listBrandHistory li:nth-child(7) figure img,
	.listBrandHistory li:nth-child(8) figure img,
	.listBrandHistory li:nth-child(9) figure img,
	.listBrandHistory li:nth-child(10) figure img,
	.listBrandHistory li:nth-child(11) figure img,
	.listBrandHistory li:nth-child(12) figure img,
	.listBrandHistory li:nth-child(13) figure img,
	.listBrandHistory li:nth-child(14) figure img,
	.listBrandHistory li:nth-child(15) figure img,
	.listBrandHistory li:nth-child(16) figure img,
	.listBrandHistory li:nth-child(17) figure img,
	.listBrandHistory li:nth-child(18) figure img,
	.listBrandHistory li:nth-child(19) figure img,
	.listBrandHistory li:nth-child(20) figure img,
	.listBrandHistory li:nth-child(21) figure img,
	.listBrandHistory li:nth-child(22) figure img,
	.listBrandHistory li:nth-child(23) figure img{
		max-width: 80%;
		max-height: 160px;
	}
	.listBrandHistory li:nth-child(3) figure img,
	.listBrandHistory  li:nth-child(7) figure img{
		margin: 25px 0 12px 5px;
	}
	.listBrandHistory li:nth-child(9) figure img,
	.listBrandHistory li:nth-child(10) figure img,
	.listBrandHistory li:nth-child(11) figure img,
	.listBrandHistory li:nth-child(12) figure img,
	.listBrandHistory li:nth-child(14) figure img,
	.listBrandHistory li:nth-child(16) figure img{
		margin: 25px 0 12px;

	}
	.listBrandHistory li:nth-child(15) figure img,
	.listBrandHistory li:nth-child(17) figure img{
		margin: 25px 0 12px -10px;
	}
	.listBrandHistory li:nth-child(1){ margin-top: 0; }
	.listBrandHistory li:nth-child(2),
	.listBrandHistory li:nth-child(3),
	.listBrandHistory li:nth-child(4),
	.listBrandHistory li:nth-child(5),
	.listBrandHistory li:nth-child(6),
	.listBrandHistory li:nth-child(7),
	.listBrandHistory li:nth-child(8),
	.listBrandHistory li:nth-child(9),
	.listBrandHistory li:nth-child(10),
	.listBrandHistory li:nth-child(11),
	.listBrandHistory li:nth-child(12),
	.listBrandHistory li:nth-child(13),
	.listBrandHistory li:nth-child(14),
	.listBrandHistory li:nth-child(15),
	.listBrandHistory li:nth-child(16),
	.listBrandHistory li:nth-child(17),
	.listBrandHistory li:nth-child(18),
	.listBrandHistory li:nth-child(19),
	.listBrandHistory li:nth-child(20),
	.listBrandHistory li:nth-child(21),
	.listBrandHistory li:nth-child(22),
	.listBrandHistory li:nth-child(23){
		margin-top: 80px;
	}
	.listBrandHistory li:before{
		content: "";
		display: block;
		background-repeat: no-repeat;
		-webkit-background-size: auto 40px;
		background-size: auto 40px;
		position: absolute;
		top: -70px;
		left: 50%;
		margin-left: -120px;
		width: 120px;
		height: 40px;
	}
	.listBrandHistory li:nth-child(1):before{ background-image: url(/img/history/txt_year1977.png);}
	.listBrandHistory li:nth-child(2):before{ background-image: url(/img/history/txt_year1978.png);}
	.listBrandHistory li:nth-child(3):before{ background-image: url(/img/history/txt_year1981.png);}
	.listBrandHistory li:nth-child(4):before{ background-image: url(/img/history/txt_year1986.png);}
	.listBrandHistory li:nth-child(5):before{ background-image: url(/img/history/txt_year1987.png);}
	.listBrandHistory li:nth-child(6):before{ background-image: url(/img/history/txt_year1989.png);}
	.listBrandHistory li:nth-child(7):before{ background-image: url(/img/history/txt_year1992.png);}
	.listBrandHistory li:nth-child(8):before{ background-image: url(/img/history/txt_year1994.png);}
	.listBrandHistory li:nth-child(9):before{ background-image: url(/img/history/txt_year1996.png);}
	.listBrandHistory li:nth-child(10):before{ background-image: url(/img/history/txt_year1997.png);}
	.listBrandHistory li:nth-child(11):before{ background-image: url(/img/history/txt_year2000.png);}
	.listBrandHistory li:nth-child(12):before{ background-image: url(/img/history/txt_year2003.png);}
	.listBrandHistory li:nth-child(13):before{ background-image: url(/img/history/txt_year2007.png);}
	.listBrandHistory li:nth-child(14):before{ background-image: url(/img/history/txt_year2009.png);}
	.listBrandHistory li:nth-child(15):before{ background-image: url(/img/history/txt_year2011.png);}
	.listBrandHistory li:nth-child(16):before{ background-image: url(/img/history/txt_year2013.png);}
	.listBrandHistory li:nth-child(17):before{ background-image: url(/img/history/txt_year2013.png);}
	.listBrandHistory li:nth-child(18):before{ background-image: url(/img/history/txt_year2014.png);}
	.listBrandHistory li:nth-child(19):before{ background-image: url(/img/history/txt_year2015.png);}
	.listBrandHistory li:nth-child(20):before{ background-image: url(/img/history/txt_year2020.png);}
	.listBrandHistory li:nth-child(21):before{ background-image: url(/img/history/txt_year2021.png);}
	.listBrandHistory li:nth-child(22):before{ background-image: url(/img/history/txt_year2024.png);}
	.listBrandHistory li:nth-child(23):before{ background-image: url(/img/history/txt_year2025.png);}
	.listBrandHistory li:after{
		-webkit-background-size: auto 35px;
		background-size: auto 35px;
		width: 35px;
		height: 35px;
		margin-left: -17px;
		top: -30px;
	}
	.listBrandHistory li.bYear figcaption{
		font-size: 12px;
		letter-spacing: normal;
	}
	.listBrandHistory li.bCopy .copyTit{
		font-size: 14px;
	}
	.listBrandHistory li.bCopy .copyTit.-lg{
		font-size: 15px;
		letter-spacing: normal;
	}
	.listBrandHistory li.bCopy .copyTxt{
		margin-bottom: 0;
	}
	.listBrandHistory li.bCopy .copy{
    padding: 7px 0 11px;
	}
	.listBrandHistory li.bCopy .copy.img01:after{
		-webkit-background-size: 52px auto;
		background-size: 52px auto;
		right: 0;
		top: -3px;
	}
	.listBrandHistory li.bCopy .copy.img02:after{
		-webkit-background-size: 52px auto;
		background-size: 52px auto;
		right: -10px;
		top: 0;
	}
	.listBrandHistory li.bCopy .copy.img03:after{
		-webkit-background-size: 66px auto;
		background-size: 66px auto;
		right: -20px;
		top: -20px; 
	}
	.listBrandHistory li.bCopy .copy.img01,
	.listBrandHistory li.bCopy .copy.img02,
	.listBrandHistory li.bCopy .copy.img03{
		position: relative;
		padding-top: 5px;
	}
	
	/* エンドテキスト ============================================================ */
	.background_inner04{
		margin-top: -4.5%;
		background-image: url(/history/images/bg04_sp.jpg);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.end_txt {
		width: 100%;
		margin-top: 0px;
		padding-top: 30.5%;
		height: auto;
	}
	.end_txt .end_txt_inner{
		width: 100%;
		margin: 0 auto;
	}
	.end_txt_message {
		max-width: 76%;
		margin: 0 auto;
	}
	.end_txt_message img ,.end_txt_product img {
		max-width: 100%;
	}
	.end_txt_product {
		max-width: 23%;
		margin: 11% auto 0;
	}
	.end_txt_product::before {
		left: -69%;
		bottom: 2px;
		width: 64%;
		padding-top: 125%;
	}
	#snsBox .inner {
		padding: 11.6% 0 20%;
	}
	#snsBox .inner ul {
		margin-left: 22px;
	}
	#snsBox .inner ul li {
		padding-right: 0px;
	}
	#snsBox .inner ul li>a>img {
		width: 67%;
	}
}

/* END */