@charset "utf-8";
/*=================================
stories.css
@media only screen and (max-width: 767px)
clearfix
================================ */

/* common 
-------------------------------- */
/* backGround */
.stories-backGround #topicPath > ol > li > a,
.stories-backGround #topicPath > ol > li > span {
	color: #fff;
}
.stories-backGround #topicPath > ol > li > a::before {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
.stories-backGround #topicPath > ol > li:first-child > a::before {
	border: none;
}
/* backGround */
.stories-backGround {
	background: -webkit-linear-gradient(top, rgba(83,185,108,1) 200px,rgba(190,229,190,1) 400px,rgba(255,255,255,1) 600px);
	background: linear-gradient(to bottom, rgba(83,185,108,1) 200px,rgba(190,229,190,1) 400px,rgba(255,255,255,1) 600px);
}
.stories-backGround.is-fixed {
	background: -webkit-linear-gradient(top, rgba(84,185,108,1) 0%,rgba(255,255,255,1) 200px);
	background: linear-gradient(to bottom, rgba(84,185,108,1) 0%,rgba(255,255,255,1) 200px);
	background-attachment: fixed;
}
/* stories-heading-column */
.storiesArea .stories-heading-column {
	color: #fff;
}
.storiesArea .stories-heading-column > .heading1 span {
	color: #fff;
}
.storiesArea .stories-heading-column > p {
	margin-top: 2em !important;
	font-size: 1.6rem;
}
/* storiesContents-layout */
.storiesArea .storiesContents-layout {
	position: relative;
}
.storiesArea .storiesContents-layout .stories-column {
	position: relative;
	display: flex;
	align-items: center;
	height: 150vh;
	z-index: 1;
}
.storiesArea .storiesContents-layout .stories-column:first-child {
	height: 65vh;
}
.storiesArea .storiesContents-layout .stories-column.is-last {
	/*padding-top: 340px;*/
	height: auto;
	align-items: flex-start;
}
.storiesArea .storiesContents-layout .stories-column .stories-column-wrap {
	width: 100%;
}
.storiesArea .storiesContents-layout .stories-column .stories-column-last {
	margin-top: 170px;
	text-align: center;
}
.storiesArea .storiesContents-layout .stories-column .stories-column-last .stories-last-lead .sub {
	display: block;
	font-size: 2.0rem;
	font-weight: bold;
}
.storiesArea .storiesContents-layout .stories-column .stories-column-last .stories-last-lead .title {
	display: block;
	margin-top: 1em;
	font-size: 1.6rem;
	font-weight: bold;
}
.storiesArea .storiesContents-layout .stories-column .stories-last-data {
	margin-right: 30px;
	text-align: right;
}
.storiesArea .storiesContents-layout .stories-column .stories-linkList {
	margin-top: 2.5em;
}
.storiesArea .storiesContents-layout .stories-column .stories-linkList li > a {
	width: 490px;
}
.storiesArea .storiesContents-layout .stories-column .stories-linkList li > a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 210px;
	height: 100%;
}
.storiesArea .storiesContents-layout .stories-column .stories-linkList li.is-globalization > a::before {
	background: url(https://www.otsuka.co.jp/philosophy/img/index_im06.jpg) no-repeat;
}
.storiesArea .storiesContents-layout .stories-column .stories-linkList li.is-big-venture-company > a::before {
	background: url(https://www.otsuka.co.jp/philosophy/img/index_im07.jpg) no-repeat;
}
.storiesArea .storiesContents-layout .stories-column .stories-linkList li > a > span {
	padding: 2em 1.5em 2em 10em;
}
.storiesArea .storiesContents-layout .stories-column .stories-linkList li > a > span:after {
	width: 18px;
	height: 13px;
	margin-top: -7px;
	background: url(https://www.otsuka.co.jp/common/img/com_sprite01.png) no-repeat -201px -3px;
}

/* storiesContents-backGround */
.storiesContents-backGround {
	position: absolute;
	width: 1000px;
	height: 574px;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.storiesContents-backGround.is-fixed {
	position: fixed;
	width: 1000px;
	height: 574px;
	top: 70px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}
.storiesContents-backGround.is-last {
	position: absolute;
	top: auto;
	bottom: 380px;
}
.storiesContents-backGround > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 1000px;
	text-align: right;
	opacity: 0;
}
.storiesArea .storiesContents-layout .stories-column .stories-text {
	margin-top: 0;
	font-size: 1.6rem;
	font-weight: bold;
}
.storiesArea .storiesContents-layout .stories-column .stories-text + .stories-text {
	margin-top: 1.8em;
}
/* modalContents */
.modalContents .modalLayout.movieModal {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 50;
}
.modalContents .modalLayout.movieModal .modalWrap {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 804px;
	height: 400px;
	margin: -200px 0 0 -401px;
	padding: 30px 100px;
	background-color: #fff;
}
.modalContents .modalLayout.movieModal iframe {
	width: 604px;
	height: 340px;
}
.modalContents .modalLayout.movieModal .close {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	margin-top: 0;
}
.modalContents .modalLayout.movieModal .close > a {
	display: inline-block;
	width: 60px;
	height: 60px;
	background-color: #999;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
.modalContents .modalLayout.movieModal .close > a:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 15px;
	border: none;  
	background: url(https://www.otsuka.co.jp/common/img/com_sprite01.png) no-repeat -120px -20px;
	-webkit-transform: rotate(0deg); 
	transform: rotate(0deg);
}

@media only screen and (max-width: 767px){
	/* common 
	-------------------------------- */
	/* stories-backGround */
	.stories-backGround {
		position: relative;
		background: none;
	}
	.stories-backGround.is-fixed {
		background: none;
	}
	.stories-backGround.is-fixed:before{
		content:"";
		display:block;
		position:fixed;
		top:0;
		left:0;
		z-index: -1;
		width: 100vw;
		height: 130px;
		background: -webkit-linear-gradient(top, rgba(190,229,190,1) 0%,rgba(255,255,255,1) 130px);
		background: linear-gradient(to bottom, rgba(190,229,190,1) 0%,rgba(255,255,255,1) 130px);
		background-size:cover;
	}
	/* stories-heading-column */
	#container,
	#topicPath + #container {
		margin-top: 0;
	}
	.storiesArea .stories-heading-column {
		position: relative;
		z-index: -2;
		margin: 0 -15px;
		padding: 75px 15px 70px;
		min-height: 292px;
		background: -webkit-linear-gradient(top, rgba(83,185,108,1) 47.3333%,rgba(190,229,190,1) 80.6666%,rgba(255,255,255,1) 97.3333%);
		background: linear-gradient(to bottom, rgba(83,185,108,1) 47.3333%,rgba(190,229,190,1) 80.6666%,rgba(255,255,255,1) 97.3333%);
	}
	.storiesArea .stories-heading-column > .heading1 {
		margin-top: 0.5em;
		text-align: center;
	}
	.storiesArea .stories-heading-column > .heading1 .sub {
		font-size: 1.3rem;
	}
	.storiesArea .stories-heading-column > .heading1 .title {
		font-size: 2.4rem;
	}
	.storiesArea .stories-heading-column > p {
		font-size: 1.4rem;
	}
	/* storiesContents-layout */
	.storiesArea .storiesContents-layout {
		position: relative;
		padding-top: 230px;
	}
	.storiesArea .storiesContents-layout .stories-column {
		height: auto;
		padding-top: 60vh;
		padding-bottom: 20vh;
	}
	.storiesArea .storiesContents-layout .stories-column:first-child {
		height: auto;
		margin-top: 0;
		padding-top: 0;
	}
	.storiesArea .storiesContents-layout .stories-column.is-last {
		height: auto;
		padding-bottom: 0;
		margin-bottom: 0;
		align-items: flex-start;
	}
	.storiesArea .storiesContents-layout .stories-column .stories-column-wrap {
		width: 100%;
	}
	.storiesArea .storiesContents-layout .stories-column .stories-column-last {
		margin-top: 15px;
	}
	.storiesArea .storiesContents-layout .stories-column .stories-column-last .stories-last-lead {
		margin: 0 15px;
	}
	.storiesArea .storiesContents-layout .stories-column .stories-column-last .stories-last-lead .sub {
		font-size: 1.75rem;
	}
	.storiesArea .storiesContents-layout .stories-column .stories-column-last .stories-last-lead .title {
		font-size: 1.4rem;
	}
	.storiesArea .storiesContents-layout .stories-column .stories-last-data {
		margin-right: 0;
		font-size: 1.1rem;
		text-align: right;
	}
	.storiesArea .storiesContents-layout .stories-column .stories-linkList {
		margin-top: 1em;
	}
	.storiesArea .storiesContents-layout .stories-column .stories-linkList li > a {
		width: 100%;
	}
	.storiesArea .storiesContents-layout .stories-column .stories-linkList li > a::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 210px;
		height: 100%;
	}
	.storiesArea .storiesContents-layout .stories-column .stories-linkList li.is-globalization > a::before {
		background: url(https://www.otsuka.co.jp/philosophy/img/index_im06.jpg) no-repeat;
		background-size: cover;
	}
	.storiesArea .storiesContents-layout .stories-column .stories-linkList li.is-big-venture-company > a::before {
		background: url(https://www.otsuka.co.jp/philosophy/img/index_im07.jpg) no-repeat;
		background-size: cover;
	}
	.storiesArea .storiesContents-layout .stories-column .stories-linkList li > a > span {
		padding: 2em 1.5em 2em 9em;
		text-shadow:#ffffff 1px 1px 0, #ffffff -1px -1px 0,#ffffff -1px 1px 0, #ffffff 1px -1px 0,#ffffff 0px 1px 0, #ffffff  0-1px 0,#ffffff -1px 0 0, #ffffff 1px 0 0;
	}
	.storiesArea .storiesContents-layout .stories-column .stories-linkList li > a > span:after {
		width: 18px;
		height: 13px;
		margin-top: -7px;
		background: url(https://www.otsuka.co.jp/common/img/com_sprite01.png) no-repeat -201px -3px;
	}
	/* storiesContents-backGround */
	.storiesContents-backGround {
		position: absolute;
		width: auto;
		height: auto;
		top: -70px;
		left: 0;
		right: 0;
		margin: 0 -15px;
		transform: translate3d(0, 0, 0);
	}
	.storiesContents-backGround.is-fixed {
		position: fixed;
		width: auto;
		height: auto;
		top: 53px;
		bottom: auto;
		right: 0;
		left: 0;
		max-width: 384px;
		margin: auto;
	}
	.storiesContents-backGround.is-last {
		position: absolute;
		top: auto;
		bottom: auto;
		z-index: 1;
	}
	.stories-column.stories.is-last + .storiesContents-backGround.is-last {
		bottom: 5%;
	}
	.storiesContents-backGround > div {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		max-width: 384px;
		width: auto;
		margin-right: auto;
		margin-left: auto;
		text-align: right;
		opacity: 0;
	}
	.storiesContents-backGround > div:first-child {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
	}
	.storiesContents-backGround > div.prev-on-text {
		opacity: 0 !important;
	}
	.storiesContents-backGround > div.on-text {
		opacity: 0.3 !important;
	}
	.storiesContents-backGround {
		opacity: 1;
		-webkit-transition: opacity 0.2s ease-out;
		-moz-transition: opacity 0.2s ease-out;
		-ms-transition: opacity 0.2s ease-out;
		transition: opacity 0.2s ease-out;
	}
	.storiesContents-backGround.on-text {
		opacity: 0.3;
	}
	/* storiesContents-layout */
	.storiesArea .storiesContents-layout .stories-column .stories-text {
		margin: 0 15px;
		font-size: 1.4rem;
	}
	.storiesArea .storiesContents-layout .stories-column .stories-text + .stories-text {
		margin-top: 2em;
	}
	.storiesArea .storiesContents-layout .stories-column .stories-textLink {
		margin-right: 15px;
		margin-left: 15px;
	}
	.stories-videoColumn {
		-webkit-flex-flow: column wrap;
		flex-flow: column wrap;
	}
	.stories-videoColumn > .column {
		width: 100%;
		margin-left: 0;
	}
	.stories-arrowHeading {
		font-size: 2rem;
		text-align: left;
	}
	.stories-arrowHeading > span {
		display: block;
	}
	.stories-videoColumn .stories-video {
		text-align: center;
	}
	.stories-videoColumn .stories-video figure {
		display: inline-block;
	}
	.stories-videoColumn .stories-video figure img {
		width: 100%;
		height: auto;
	}
	.stories-videoGlobal {
		display: block;
		margin-top: 15px;
		padding: 0;
		text-align: center;
	}
	.stories-videoGlobal > * {
		margin-left: 0;
	}
	.stories-videoGlobal > p:first-child {
		display: block;
		margin-top: 15px;
	}
	.stories-countryList {
		position: relative;
		width: 100%;
		text-align: center;
		z-index: 1;
	}
	.stories-countryList > .stories-balloon {
		width: calc(100% / 5);
		margin-left: 0;
		margin-top: 15px;
	}
	.stories-countryList > .stories-balloon:nth-of-type(-n+5) {
		margin-top: 0;
	}
	.stories-countryList > .stories-balloon > dt {
		display: inline-block;
	}
	.stories-balloon {
		position: static;
	}
	.stories-balloon .balloon > .inner {
    margin-bottom: 0;
	}
	.stories-countryList > .stories-balloon .balloon {
		top: -90px;
		left: 0;
		width: 100%;
		margin-left: 0;
	}
	.stories-countryList > .stories-balloon:nth-of-type(-n+5) .balloon {
		top: -130px;
	}
	.stories-dna-list .stories-balloon .balloon > .inner {
		padding: 0 1em;
	}
	.stories-balloon .balloon:before {
		display: none;
	}
	.stories-balloon .stories-balloon-title:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: -12px;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -10px;
    border: solid 8px #ffffff;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: 2px 2px 2px rgba(160, 160, 160, 0.1);
    opacity: 0;
		-webkit-transition: none;
		transition: none;
		z-index: 2;
	}
	.stories-countryList > .stories-balloon .stories-balloon-title:before {
    top: -24px;
	}
	.stories-balloon.on .stories-balloon-title:before {
		opacity: 1;
	}
	.stories-column-link {
		font-size: 1.5rem;
	}
	
	.modalContents .modalLayout.movieModal .modalWrap  {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 96%;
		height: 260px;
		margin: -100px 0 0 -48%;
		padding: 20px;
		background-color: #fff;
	}
	.modalContents .modalLayout.movieModal iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.modalContents .modalLayout.movieModal .close {
		top: -30px;
	}
	.modalContents .modalLayout.movieModal .close > a {
    width: 30px;
    height: 30px;
	}
	.modalContents .modalLayout.movieModal .close > a:before {
		margin: 0;
		background-position: -90px -20px;
	}

}

/* font-family */
.storiesArea .heading1 .sub,
.storiesArea .heading1 .title {
	font-family: "TBUDゴシック R", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, Arial, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.storiesArea .stories-text,
.storiesArea .stories-last-lead {
	font-family: "TBUDゴシック B", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, Arial, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}