@charset "UTF-8";
/* CSS Document */
/*=======================================
  共　通
=======================================*/
:root {
	--ULOS-TEXT-DARK:#3C3C3C;
	--ULOS-BLUE: #002C5C;
	--ULOS-BLUE-BG: #BCD3E8;
	--ULOS-LIGHT-BLUE: #00B5E2;
	--ULOS-LIGHT-BLUE-BG: #C3EAF7;
	--ULOS-RED: #e60909;
	--ULOS-RED-BG: #F4D6D6;
	--ULOS-LGRAY-BG: #F8F8F8;
	--ULOS-GREEN01: #008033;
	--ULOS-GREEN02: #036D3B;
	--ULOS-LIGHT-GREEN-TXT: #64db00;
	--ULOS-LIGHT-GREEN: #b6ff56;
	--ULOS-DARK-GREEN: #003F2A;
	--ULOS-EME-GREEN: #00c5aa;
}

html {
	background:#fff;
	color: var(--ULOS-TEXT-DARK);
	font-size: 625%;/*rem用100px*/
	/*scrollbar hidden*/
	/*-ms-overflow-style: none;*//* IE, Edge 対応 */
	/*scrollbar-width: none;*//* Firefox 対応 */
}
/*scrollbar hidden*/
html::-webkit-scrollbar {/* Chrome, Safari 対応 */
	/*display:none;*/
}
html.lock{
	overflow: hidden;
	-ms-touch-action: none;
	touch-action: none;
}
body{
	/*font-size:12px;*/
	font-size: 0.12em;/*rem用12px 以下rem chrome対策でem 以下fontsizeはremで1/100指定*/
	font-family: 'Noto Sans JP', sans-serif;/*Regular 400 Bold 700*/
	font-weight: 500;
	font-feature-settings: "palt";
	line-height:1.0;
	letter-spacing:0px;
	-webkit-text-size-adjust: 100%;/*スマホ文字拡大対策*/
}
.fenb{
	font-family: 'Syncopate', sans-serif !important;
	font-weight: 700 !important;
}
span.fenb{
	display: inline-block;
	padding-top: 0.2em;
}

/* --A-- */
a {
	color: var(--ULOS-TEXT-DARK);
	cursor:pointer;
	text-decoration:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);/*リンクタップ時のハイライト表示無効*/
}
a.noLink{cursor: default;}

a:hover {
	text-decoration:none;
}
/* --HEADLINE-- */
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight: 500;
	margin:0;
	/*max-height: 100%;android chrome対策*/
}
/* --OTHER TAGS-- */
p {
	margin-bottom:0;
	text-align:left;
	width:auto;
	/*max-height: 100%;android chrome対策*/
}
em, strong {
	font-weight:bold;
}
.wrapper img{
	width: 100%;
	height: auto;
}
/* --clearfix-- */
.clf:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}
.clf{
	display: inline-block;
}
	/* Hides from IE Mac */
	* html .clf{
		height: 1%;
	}
	.clf{
		display:block;
	}
	
.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}
.Fright {float:right;}
.Fleft {float:left;}
.imgRight {float:right; margin:0px 0px 20px 20px ;}
.imgLeft {float:left; margin:0px 20px 20px 0px ;}
.vm,
.vmTxt{
	display: inline-block;
	position: relative;
	top:50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
/*========
親に設定
========*/
/*上下中央寄せ*/
.vmf,
.pc_vmf{
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.vmf_i{
	display: -webkit-inline-flex;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
}
/*上下左右中央寄せ*/
.vmf_c,
.pc_vmf_c{
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.vmg_c,
.pc_vmg_c{
	display: grid;
	place-content: center;
	place-items: center;
}
.flex,
.pc_flex{
	display: -webkit-flex;
	display: flex;
}
.f_warp,.pc_f_warp	{flex-wrap: wrap;}
.f_ac,.pc_f_ac			{align-items: center;}
.f_as,.pc_f_as			{align-items: flex-start;}
.f_dr,.pc_f_dr			{flex-direction: row-reverse;}
.f_dc,.pc_f_dc			{flex-direction: column;}
.f_cc,.pc_f_cc			{justify-content: center;}
.f_sb,.pc_f_sb			{justify-content: space-between;}

.grid,
.pc_grid{display: grid;}
.grid .ga1,
.pc_grid .pc_ga1{grid-area: 1/1;}

	/*IE遊ゴずれ対応*/
	/*@media all and (-ms-high-contrast:none){
		.vmTxt{padding-top: 0.3em;}
		.vmf_b,.vmf_ib{padding-top: 0.3em;}
	}*/
.opBtf a{
	opacity: 1;
	-webkit-transition: opacity 0.25s ease;
	transition: opacity 0.25s ease;
}
.zoomBt a{
	-webkit-transform: scale(1.0);
		transform: scale(1.0);
	-webkit-transition: transform 0.35s ease;
	transition: transform 0.35s ease;
}
/*.opBtf a,
.opBtf a *,*/
.zoomBt a,
.zoomBt a *{
	backface-visibility: hidden;/*chrome transition 1pxズレ対策*/
}
.opBtf a:not(.noLink):hover{
	opacity: 0.5;
	-webkit-transition: opacity 0.35s ease;
	transition: opacity 0.35s ease;
}
.zoomBt a:not(.noLink):hover{
	-webkit-transition: transform 0.2s ease;
	transition: transform 0.2s ease;
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}

#loaderOuter{
	position:fixed;
	width:100%;
	height:100%;
	z-index:499;
	background:#FFF;
}
#loader{
	position: fixed;
	top:50%;
	left:50%;
	z-index:90;
}
.fwb{font-weight: bold !important;}
.fwn{font-weight: normal !important;}
.txtInd{text-indent: -1em;padding-left: 1em;}
.bb1{border-bottom: 1px solid #000;}
.bt1{border-top: 1px solid #000;}
.posRe{position: relative;}
.posAb{position: absolute;}
.posFix{position: fixed;}
.lh2{line-height: 2.0;}
.sp,
.noDisp{display: none !important;}
/*.pc{display: none !important;}*/

.noEvent{pointer-events:none;}/*IE11以降（IE11ではaタグには利かない）*/
.wrapper{overflow: hidden;}

img.obFit,
img.obFit_ct{width: 100%;height: 100%;}
img.obFit   {object-fit: cover;}
img.obFit_ct{object-fit: contain;}

.bdr999{
	isolation: isolate;
	-webkit-border-radius: 9999px;
	border-radius: 9999px;
}

a.ring > *{
	position: relative;
	z-index: 1;
}
a.ring::after {
	content: '';
	display: block;
	position: absolute;
	z-index:0;
	border-radius: 50%;
	height: 1px;
	width: 1px;
	top: 50%;
	left: 50%;
}
a.ring.t75:hover::after {animation: t75 0.5s ease-out 0s 1 normal both;}
a.ring.t100:hover::after {animation: t100 0.5s ease-out 0s 1 normal both;}
a.ring.t200:hover::after {animation: t200 0.75s ease-out 0s 1 normal both;}
a.ring.cbl::after {background: rgba(181, 244, 253, 0.8);}
a.ring.cw::after  {background: rgba(255, 255, 255, 0.8);}
@keyframes t75 {
    0%   { opacity: 0; transform: scale(1);}
    50%  { opacity: 1; }
    100% { transform: scale(75); opacity: 0.0;}
}
@keyframes t100 {
    0%   { opacity: 0; transform: scale(1);}
    50%  { opacity: 1; }
    100% { transform: scale(100); opacity: 0.0;}
}
@keyframes t200 {
    0%   { opacity: 0; transform: scale(1);}
    50%  { opacity: 1; }
    100% { transform: scale(200); opacity: 0.0;}
}


/*=======================================
  tuka
=======================================*/
/*
大<span class="icon icon-tuka"></span>製薬
大<span class="corpName">塚</span>製薬
*/
@font-face {
	font-family: 'icomoon';
	src:  url('https://www.otsuka.co.jp/ulos/common/fonts/icomoon.eot?kwdmhv');
	src:  url('https://www.otsuka.co.jp/ulos/common/fonts/icomoon.eot?kwdmhv#iefix') format('embedded-opentype'),
	url('https://www.otsuka.co.jp/ulos/common/fonts/icomoon.ttf?kwdmhv') format('truetype'),
	url('https://www.otsuka.co.jp/ulos/common/fonts/icomoon.woff?kwdmhv') format('woff'),
	url('https://www.otsuka.co.jp/ulos/common/fonts/icomoon.svg?kwdmhv#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-tsuka_l:before {
	content: "\e902";/*PC*/
	font-size: 90%!important;
}
.icon-tsuka_m:before {
	content: "\e901";
	font-size: 90%!important;
}

.tsuka_l{
	/*font-family: 'Kosugi' !important;*/
	font-family: 'Zen Kaku Gothic New', sans-serif!important;
	font-weight: 300;
}
.tsuka_r{
	/*font-family: 'Kosugi' !important;*/
	font-family: 'Zen Kaku Gothic New', sans-serif!important;
	font-weight: 400;
}
.tsuka_m{
	/*font-family: 'Kosugi' !important;*/
	font-family: 'Zen Kaku Gothic New', sans-serif!important;
	font-weight: 500;
}


.bugai{
	display: inline-block;
	font-size: 0.09rem;
	letter-spacing: 0.15em;
	border: 1px solid #000;
	padding: 0.1em 0.85em 0.15em 1em;
	margin-top: 1em;
}

.imgAni{position: relative;}
.imgAni img.bg{
	position: absolute;
	top:0;
	left:0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	-webkit-transform: scale(1.3);
			transform: scale(1.3);
	-webkit-transition:
		opacity 1s ease,
		transform 1s ease;
	transition:
		opacity 1s ease,
		transform 1s ease;
}
.imgAni img.pd{
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	-webkit-transform: scale(1.3);
			transform: scale(1.3);
	-webkit-transition:
		opacity 1s 0.25s ease,
		transform 1s 0.25s ease;
	transition:
		opacity 1s 0.25s ease,
		transform 1s 0.25s ease;
}
.imgAni.show img.bg,
.imgAni.show img.pd{
	opacity: 1;
	-webkit-transform: scale(1.0);
			transform: scale(1.0);
}

.kome{
	font-size: 60%;
	vertical-align: baseline;
}
#container {}
/*=============================
  header
=============================*/
header{
	position: absolute;
	top:0;
	left:0;
	z-index: 500;
	width: 100%;
	height: 130px;
	-webkit-transition: height 0.5s ease;
	transition: height 0.5s ease;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	padding: 0 30px;
	background: #FFF;
}

header.small{
	position: fixed;
	top:-100%;
	height: 90px;
	animation: headAni 1.5s ease 0s 1 normal both;
}
@-webkit-keyframes headAni {
	0% {top: -100%;}
	100% {top: 0;}
}
@keyframes         headAni {
	0% {top: -100%;}
	100% {top: 0;}
}

header .logo{
	width: 165px;
	margin-right: auto;
}


/*gnavBt
=============================*/
header #gnavBt {
	position: fixed;
	top:0;
	right:0;
	z-index:500;
}
header #gnavBt a{
	display: block;
	width: 70px;
	height: 70px;
	position: relative;
	background:#000;
}
/*▼gnavBtアニメ*/
header #gnavBtBorder{
	z-index: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -20px;
	margin-top: -1px;
	display: block;
	width: 40px;
	height: 2px;
	background-color: #FFF;
	-webkit-transition: -webkit-transform 0.3s ease, top 0.3s ease;
	transition: transform 0.3s ease, top 0.3s ease;
}
header #gnavBtBorder:before {
	top: -8px;
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background-color: #FFF;
	position: absolute;
	z-index: -1;
	-webkit-transition: -webkit-transform 0.3s ease, top 0.3s ease, margin 0.2s ease;
	transition: transform 0.3s ease, top 0.3s ease, margin 0.2s ease;
}
header #gnavBtBorder:after {
	top: 8px;
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background-color: #FFF;
	position: absolute;
	z-index: -1;
	-webkit-transition: -webkit-transform 0.3s ease, top 0.3s ease, margin 0.2s ease;
	transition: transform 0.3s ease, top 0.3s ease, margin 0.2s ease;
}
header #gnavBt a:hover #gnavBtBorder:before {
	margin-top: -3px;
}
header #gnavBt a:hover #gnavBtBorder:after {
	margin-top: 3px;
}
header #gnavBt a.open #gnavBtBorder {
	background: none;
}
header #gnavBt a.open #gnavBtBorder:before {
	top:0 !important;
	margin-top: 0 !important;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg)
}
header #gnavBt a.open #gnavBtBorder:after {
	top:0 !important;
	margin-top: 0 !important;
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg)
}
header #gnav{background: #FFF;}
header #gmenu{
	display: -webkit-flex;
	display: flex;
	align-items: center;
}
header #gmenu > li:nth-child(n+2){
	margin-left: 3em;
}
header #gmenu > li::before{
	content: '';
	width: 26px;
	height: 0;
	background: url(https://www.otsuka.co.jp/ulos/common/img/gnav_arrow.svg) no-repeat bottom center/contain;
	position: absolute;
	bottom:-1px;
	z-index: 10;
	-webkit-transition: height 0.5s ease;
	transition: height 0.5s ease;
}
/*header #gmenu > li:nth-child(3)::before {right:320px;}*/
header #gmenu > li.gBt_prod::before {right:75px;}
header #gmenu > li.gBt_ec::before				{right:calc(30px + (190px/2) - 13px);}
header #gmenu > li.on::before{
	height: 26px;
}
header #gmenu > li > a{
	font-size: 0.17rem;
	color: var(--ULOS-DARK-GREEN);
}
header #gmenu > li.on > a{
	opacity: 0.5;
}

header #gmenu > li.gBt_ec{margin-left: 50px;}
header #gmenu > li.gBt_ec > a{
	min-width: 190px;
	height: 44px;
	-webkit-border-radius: 9999px;
	border-radius: 9999px;
	padding: 0 1.5em;
	font-size: 0.15rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: #FFF;
}
header #gmenu > li.gBt_ec > a{background: var(--ULOS-DARK-GREEN);}




header #gmenu .sub{
	position: absolute;
	top:100%;
	left:0;
	z-index: 5;
	width: 100%;
	background: #FFF;
	border-top: 1px solid var(--ULOS-DARK-GREEN);
	display: none;
}
header #gmenu .sub > ul{
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
	display: -webkit-flex;
	display: flex;
	padding-top: 45px;
	padding-bottom: 40px;
}
header #gmenu li.gBt_prod .sub > ul > li{
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	padding: 10px 2em 20px;
}
header #gmenu .sub > ul > li:nth-child(n+2){
	border-left: 1px solid #C9C9C9;
}
header #gmenu .sub > ul > li.list01{width: 34%;}
header #gmenu .sub > ul > li.list02{width: 42%;}
header #gmenu .sub > ul > li.list03{width: 24%;}

header #gmenu .sub > ul > li p.gTit{
	font-size: 0.21rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}
header #gmenu .sub > ul > li.list01 p.gTit{color: var(--ULOS-GREEN01);}
header #gmenu .sub > ul > li.list02 p.gTit{color: var(--ULOS-BLUE);}
header #gmenu .sub > ul > li.list03 p.gTit{color: var(--ULOS-LIGHT-GREEN-TXT);}

header #gmenu .sub > ul > li ul{
	margin-top: 30px;
}
header #gmenu .sub > ul > li ul > li:nth-child(n+2){
	margin-top: 1em;
}
header #gmenu .sub > ul > li ul > li a{
	display: inline-block;
	font-size: 0.13rem;
	letter-spacing: 0.05em;
	text-indent: -0.8em;
	padding-left: 1.5em;
}
header #gmenu .sub > ul > li ul > li a::before{
	content: '▶';
	display: inline-block;
	margin-right: 0.5em;
}
header #gmenu .sub > ul > li.list01 ul > li a{color: var(--ULOS-GREEN02);}
header #gmenu .sub > ul > li.list02 ul > li a{color: var(--ULOS-BLUE);}
header #gmenu .sub > ul > li.list03 ul > li a{color: var(--ULOS-LIGHT-GREEN-TXT);}

header #gmenu li.gBt_ec .sub > ul > li{}
header #gmenu li.gBt_ec .sub > ul > li:nth-child(n+2){
	padding-left: 50px;
	margin-left: 50px;
}
header #gmenu li.gBt_ec .sub > ul > li p{
	height: 46px;
}
header #gmenu > li.gBt_ec .sub > ul > li.ec_rakuten,
header #gmenu > li.gBt_ec .sub > ul > li.ec_lohaco{display: none;}

/*
header .btList{margin-left: 50px;}
header .btList li a{
	min-width: 190px;
	height: 44px;
	-webkit-border-radius: 22px;
	border-radius: 22px;
	padding: 0 1.5em;
	font-size: 0.15rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: #FFF;
}
header .btList li.bt_ec a{
	background: var(--ULOS-DARK-GREEN);
}
	*/
/*=============================
 footer
=============================*/
footer .btArea{
	position: relative;
}
footer .btArea .bg_movie{
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/*opacity: 0.4;*/
	z-index: -1;
	mix-blend-mode:multiply;
	opacity: 0.4;
}
footer .btArea .bg_movie video {
	position: absolute;
	top:50%;
	left:50%;
	min-width: 100%;
	min-height: 100%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
footer #backToTop{
	position: absolute;
	top:70px;
	right: 70px;
	width: 56px;
}
footer .btArea .btList{
	padding-top: 65px;
	padding-left: 75px;
	padding-bottom: 75px;
}
footer .btArea .btList li:nth-child(n+2){
	margin-top: 40px;
}
footer .btArea .btList li a{
	font-size: 0.35rem;
	letter-spacing: -0.05em;
	color: var(--ULOS-DARK-GREEN);
}

footer .btArea .bt_faq {
	background:var(--ULOS-DARK-GREEN);
}
footer .btArea .bt_twitter {
	background:#000;
}
footer .btArea .bt a{
	display: block;
	text-align: center;
	padding: 1.25em 0 1em;
	font-size: 0.2rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: #FFFFFF;
}
footer .btArea .bt_twitter a span::before{
	display: inline-block;
	content: url( 'data:image/svg+xml;utf-8,<svg viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/></svg>' );
	width: 24px;
	vertical-align: middle;
	margin-right: 1em;
}


footer .gfooter{
	-js-display: flex;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 15px;
}
footer .gfooter ul{
	-js-display: flex;
	display: -webkit-flex;
	display: flex;
}
footer #gfooterTop ul{
}
footer #gfooterTop ul img{
	height: 19px;
	width: auto;
}
footer #gfooterTop .logo img{
	height: 36px;
	width: auto;
}



footer #gfooterBottom{
	background: #EEEEEE;
	color: #828282;
}
footer #gfooterBottom ul{
	padding: 7px 0;
}
footer #gfooterBottom li:nth-child(n+2){
	margin-left: 10px;
}
footer #gfooterBottom a{
	color: #828282;
	text-decoration: none;
	font-size: 0.12rem;
}