@charset "utf-8";

::before,::after {background-repeat: no-repeat;box-sizing: inherit;}


html{
font-size: 62.5%;
box-sizing: border-box;
}

body {
font-weight: 500;
line-height:1.7;
color: #333;
min-width:100%;
width:100%;
overflow-x: hidden;
word-wrap : break-word;
overflow-wrap : break-word;
}
body.noscroll {
overflow: hidden;
}
#wrapper_all{
overflow: hidden;
width: 100%;
position: relative;
}



article,header,footer {
width:100%;
}
a { transition:opacity .2s; }
a,a:visited { color: #333;text-decoration: none; }
a:hover { opacity: .5; }

rt,rp {
font-size: 40%;
-webkit-transform:scale(0.8);
}
rp{padding:0;}
ruby {
ruby-overhang: auto;
ruby-align:center;
ruby-position: inline;
}

/*縦書き*/
.text-vertical{
writing-mode:vertical-rl;
-ms-writing-mode:tb-rl;
-moz-writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;
font-family:sans-serif!important;
}

#all {
font-size: 1.6rem; /*スマホ基本フォントサイズ*/
}

img{max-width: 100%;}

/* margin */
.mt-0{ margin-top: 0!important; }
.mt-02em{ margin-top: .2rem!important; }
.mt-05em{ margin-top: .5rem!important; }
.mt-1em{ margin-top: 1rem!important; }
.mt-2em{ margin-top: 2rem!important; }
.mt-3em{ margin-top: 3rem!important; }
.mt-4em{ margin-top: 4rem!important; }
.mt-5em{ margin-top: 5rem!important; }
.mt-6em{ margin-top: 6rem!important; }
.mt-7em{ margin-top: 7rem!important; }
.mt-8em{ margin-top: 8rem!important; }
.mr-0{ margin-right: 0!important; }
.mr-02em{ margin-right: .2rem!important; }
.mr-05em{ margin-right: .5rem!important; }
.mr-1em{ margin-right: 1rem!important; }
.mr-2em{ margin-right: 2rem!important; }
.mr-3em{ margin-right: 3rem!important; }
.mr-4em{ margin-right: 4rem!important; }
.mb-0{ margin-bottom: 0 !important; }
.mb-05em{ margin-bottom: .5rem!important; }
.mb-1em{ margin-bottom: 1rem!important; }
.mb-2em{ margin-bottom: 2rem!important; }
.mb-3em{ margin-bottom: 3rem!important; }
.mb-4em{ margin-bottom: 4rem!important; }
.mb-5em{ margin-bottom: 5rem!important; }
.mb-6em{ margin-bottom: 6rem!important; }
.ml-0{ margin-left: 0!important; }
.ml-02em{ margin-left: .2rem!important; }
.ml-05em{ margin-left: .5rem!important; }
.ml-1em{ margin-left: 1rem!important; }
.ml-2em{ margin-left: 2rem!important; }
.ml-3em{ margin-left: 3rem!important; }
.ml-4em{ margin-left: 4rem!important; }
.mg-0{margin: 0!important;}

/* padding */
.pt-0{ padding-top: 0 !important; }
.pt-05em{ padding-top: .5rem!important; }
.pt-1em{ padding-top: 1rem!important; }
.pt-2em{ padding-top: 2rem!important; }
.pt-3em{ padding-top: 3rem!important; }
.pt-4em{ padding-top: 4rem!important; }
.pt-5em{ padding-top: 5rem!important; }
.pt-6em{ padding-top: 6rem!important; }
.pr-0{ padding-right: 0 !important; }
.pr-02em{ padding-right: .2rem!important; }
.pr-05em{ padding-right: .5rem!important; }
.pr-1em{ padding-right: 1rem!important; }
.pr-2em{ padding-right: 2rem!important; }
.pr-3em{ padding-right: 3rem!important; }
.pr-4em{ padding-right: 4rem!important; }
.pb-0{ padding-bottom: 0 !important; }
.pb-05em{ padding-bottom: .5rem!important; }
.pb-1em{ padding-bottom: 1rem !important; }
.pb-2em{ padding-bottom: 2rem !important; }
.pb-3em{ padding-bottom: 3rem!important; }
.pb-4em{ padding-bottom: 4rem!important; }
.pb-5em{ padding-bottom: 5rem!important; }
.pb-6em{ padding-bottom: 6rem!important; }
.pl-0{ padding-left: 0 !important; }
.pl-02em{ padding-left: .2rem!important; }
.pl-05em{ padding-left: .5rem!important; }
.pl-1em{ padding-left: 1rem!important; }
.pl-2em{ padding-left: 2rem!important; }
.pl-3em{ padding-left: 3rem!important; }
.pl-4em{ padding-left: 4rem!important; }
.pd-0{ padding: 0!important; }

.mb-05em-sp{ margin-bottom: .5rem!important; }
.mt-1em-sp{ margin-top: 1rem!important; }
.mt-2em-sp{ margin-top: 2rem!important; }
.mb-1em-sp{ margin-bottom: 1rem!important; }
.mb-2em-sp{ margin-bottom: 2rem!important; }
.pt-1em-sp{ padding-top: 1rem!important; }

.border_box {
    border: 1px solid #ddd;
    padding: 1.5rem;
}

.l_alpha > li {
	list-style: lower-alpha !important;
}

.katakana > li {
	list-style: katakana !important;
}

.d_inline {
	display: inline !important;
}

.table_lh {
	line-height: 1.5;
}

.table_lh .vertical {
	width: 0.8em;
	line-height: 1.2;
}

.date_spwfix {
	width: 30%;
}
@media screen and (min-width:768px) {
.date_spwfix {
	width: 25%;
}
}

.list_table_green-head.info_table th,
.list_table_green-head.info_table td,
.list_table_green-head.info_table thead th {
	text-align: left;
	vertical-align: top;
	line-height: 1.6;
}

.list_table_green-head.info_table th,
.list_table_green-head.info_table td {
	line-height: 1.6;
}

.info_table li {
	margin-bottom: 0.2em;
}


/* Container */
.wrapper{
width: 100%;
display: block;
position:relative;
margin:0 auto;
letter-spacing: -0.5em;/* i-b 隙間埋め用 */
display: block\9; /* i-b 隙間埋め用 IE 8,9対応 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
/*padding: 0 20px;*/
box-sizing: border-box;
}
.wrapper:after{
content:"";
display: block;
clear:both;
box-sizing: border-box;
}
.w100{
max-width: 100%!important;
width: 100%!important;
}
.wrapper.box_wrap {
padding: 0;
}

.wrapper.news_list {
text-align: left;
}
.col1,.col2,.col3,.col4,.col5,.col6,
.col7,.col8,.col9,.col10,.col11,.col12{
display:inline-block;
vertical-align:middle;
position: relative;
/*padding: 1.851% 20px;*/
padding: 15px 20px;
width:100%;
letter-spacing: normal;/* i-b 隙間埋め用 */
box-sizing: border-box;
line-height:1.7;
/*margin: auto;*/
}

.outline_glaf .col6 {
	vertical-align: top;
}

.wrap-pd-0 .col1,.wrap-pd-0 .col2,.wrap-pd-0 .col3,.wrap-pd-0 .col4,.wrap-pd-0 .col5,.wrap-pd-0 .col6,.wrap-pd-0 .col7,.wrap-pd-0 .col8,.wrap-pd-0 .col9,.wrap-pd-0 .col10,.wrap-pd-0 .col11,.wrap-pd-0 .col12{
padding: 0;
}
.wrap-pd-5px .col1,.wrap-pd-5px .col2,.wrap-pd-5px .col3,.wrap-pd-5px .col4,.wrap-pd-5px .col5,.wrap-pd-5px .col6,.wrap-pd-5px .col7,.wrap-pd-5px .col8,.wrap-pd-5px .col9,.wrap-pd-5px .col10,.wrap-pd-5px .col11,.wrap-pd-5px .col12{
padding: 5px;
}
.wrap-pd-10px .col1,.wrap-pd-10px .col2,.wrap-pd-10px .col3,.wrap-pd-10px .col4,.wrap-pd-10px .col5,.wrap-pd-10px .col6,.wrap-pd-10px .col7,.wrap-pd-10px .col8,.wrap-pd-10px .col9,.wrap-pd-10px .col10,.wrap-pd-10px .col11,.wrap-pd-10px .col12{
padding: 10px;
}
.wrap-pd-0,.wrap-pd-5px,.wrap-pd-10px{
letter-spacing: -0.5em;/* i-b 隙間埋め用 */
text-align: center;
}
.col12.wrap-pd-0,
.col12.wrap-pd-5px,
.col12.wrap-pd-10px{
width:96.29%;
}

/* display */
.db{display: block;}
.di{display: inline!important;}
.dib{display: inline-block!important;}
.dt{display: table !important;}
.dtc{display: table-cell !important;vertical-align:middle;}

/* overflow */
.over-hidden{
overflow:hidden;
}

/* text-align */
.text-right{ text-align: right!important; }
.text-left{ text-align: left!important; }
.text-center{ text-align: center!important; }
.text-left-sp{ text-align: left!important; }

/* v-align */
.vertical-top{ vertical-align: top; }
.vertical-bottom{ vertical-align: bottom; }
.vertical-middle{ vertical-align: middle; }

/* float */
.fl{ float:left; }
.fr{ float:right; }
.fi{ float:inherit; text-align: center;}

/* on off */
.on-sp { display:inline-block; }
.on-sp2 { display:block; }
.off-sp,
.off-sp2 { display:none!important; }
.on-tb { display:none; }
.off-tb { display:none; }
.on-pc { display:none; }
.off-pc { display:inline-block; }

.off-narrow, .off-narrow2 { display:none!important; }
@media screen and (min-width:1050px) {
.off-narrow { display:block!important; }
}

@media screen and (min-width:1115px) {
.off-narrow2 { display:block!important; }
}



/* basic design */

/* Text */
.small { font-size:87.5%; }
.smaller { font-size:81.25%; }
.big{font-size: 115%; }
.bigger{font-size: 125%; }
.big-18{font-size: 112.5%; }
.strong{font-weight: 700; }
.normal { font-weight: 300;}

#pagetop { position:fixed; bottom:20px; right:20px; cursor:pointer; opacity:0.8; }

.sup{font-size:70%;vertical-align: super;}
.sub{font-size:70%;}

ul.list-circle, ul.list-decimal,ul.list-disc{
list-style-type: circle;
list-style-position:outside;
padding-left: 1.5rem;
margin-left: 1.5rem;
}
ul.list-circle li, ul.list-decimal li{margin-bottom: .5em;}
ul.list-decimal{list-style-type: decimal;padding-left: 2rem;}
ul.list-disc{list-style-type: disc; padding-inline-start: 10px;}





/* hmenu / footer / sns */
.sp_header {
background: #FFF;
box-shadow: 0 1px 2px rgba(0,0,0,.1);
position: fixed;
width: 100%;
height: 40px;
text-align: right;
z-index: 109;
}
.sp_header h1,
.sp_header form {
display: inline-block;
}
.sp_header h1 {
padding: 7px;
width: 32px;
}
.sp_header h1 a {
display: block;
background: url(https://www.mandom.co.jp/common/images/common/mandom_logo.svg) no-repeat 0 0;
background-size: 100%;
height: 25px;
text-indent: -9999px;
}
.sp_header input[type="text"] {
border:none;
}


/* hamburger menu */
.hmenu-wrapper{
position:fixed;
top:0;
left:0;
z-index: 1010;
}
.hmenu{
position:relative;
width: 80px;
height:80px;
cursor:pointer;
display: inline-block;
float:left;
z-index: 999;
background:url(https://www.mandom.co.jp/common/images/common/sp-header_menu.svg) no-repeat 0 0;
background-size: 100%;
}
.hmenuclick1{
top:16px;
transform: rotate(45deg);
background-color: #FFF;
}
.hmenuclick2{
opacity:0;
}
.hmenuclick3{
top:16px;
transform: rotate(-45deg);
background-color: #FFF;
}
.hmenu-back{
display: none;
position: fixed;
background-color: #FFF;
opacity: 1;
z-index: 997;
width: 100%;
height: 100%;
top:0;
left:0;
}
.hmenu-nav{
display: none;
position:fixed;
top:0;
z-index: 1005;
width: 100%;
height: 100%;
padding: 0;
background: #FFF;
}
.hmenu-nav > div {
position: relative;
overflow-y: auto;
height:100%;
background: #FFF;
}


.hmenu-nav h2 a {
display: block;
padding: 2rem 1rem .5rem;
color: #888DA8;
text-align: center;
}
.hmenu-nav li {
border-bottom: 1px solid #AAD9DD;
}
.hmenu-nav li:first-child {
border-top: 1px solid #AAD9DD;
}
.hmenu-nav li a {
display: block;
text-align: center;
padding: .7rem;
}
.hmenu-nav li.current a {
color: #0099A8;
font-weight: 600;
}


.hmenu-nav li.language {
text-align: center;
}
.hmenu-nav li.language a {
display: inline-block;
color: #333;
}
.hmenu-nav li.language a.current {
color: #CCC;
pointer-events: none;
}






.side_nav {
position: fixed;
top:0;
width: calc(100% - 40px);
right:calc(-100% + 40px);
z-index: 1003;
transition: right .3s;
background-color: #FFF;
height:100%;
}
.side_nav section {
position: relative;
height: 100%;
padding: 3rem 20px 6rem;
box-sizing: border-box;
}
.side_nav h1 {
margin-bottom: 1rem;
width: 100%;
font-size: 1.6rem;
font-weight: 600;
color: #636989;
text-align: left;
}
.side_nav h2 {
border-top: 1px solid #AAD9DD;
border-bottom: 1px solid #AAD9DD;
}
.side_nav li {
border-bottom: 1px solid #AAD9DD;
}
.side_nav li.lower {
margin-left: 15px;
}
.side_nav h2 a,
.side_nav h2 strong,
.side_nav li a {
position: relative;
display: block;
padding: 1rem 2rem 1rem 1rem;
color: #636989;
font-size: 1.6rem;
font-weight: 600;
}
.side_nav h2 a,
.side_nav h2 strong {
font-size: 1.8rem;
color: #0099A8;
}
.side_nav h2 a:after,
.side_nav li a:after {
position: absolute;
top:40%;
right:0;
content: "";
display: inline-block;
height: 6px;
width: 6px;
border-top:1px solid #0099A8;
border-right:1px solid #0099A8;
transform: rotate(45deg);
}
.side_nav li a.launch:after ,
.side_nav h2.other a:after {
top:30%;
height: 20px;
width: 20px;
border-top: none;
border-right: none;
background: url(https://www.mandom.co.jp/common/images/common/ico_launch_green.svg) no-repeat 0 0;
background-size: 20px;
transform: rotate(0deg);
}
.side_nav li a.pdf:after {
top:30%;
height: 20px;
width: 20px;
border-top: none;
border-right: none;
background: url(https://www.mandom.co.jp/common/images/common/ico_pdf.png) no-repeat 0 0;
background-size: 20px;
transform: rotate(0deg);
}

.side_nav li.lower a {
color: #333;
font-weight: normal;
}
.side_nav ul {
margin-left: 1rem;
margin-bottom: 4rem;
}
.side_nav h2 + h2 {
border-top:none;
}
.side_nav ul + ul {
border-top:1px solid #AAD9DD;
}
.side_nav .top_border {
margin-top: 4rem;
border-top:1px solid #AAD9DD;
}


.side_nav_inner{
position:relative;
overflow: scroll;
height: 100vh;
background-color: #FFF;
-webkit-overflow-scrolling: touch!important;
overflow-scrolling: auto!important;
touch-action: auto!important;
}

.sidenav_trigger {
position: absolute;
left:-28px;
display: block;
width: 28px;
height: 83px;
background: #0099A8 url(https://www.mandom.co.jp/common/images/common/btn_index.svg) no-repeat 50% 100%;
background-size: 100% auto;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
z-index:110;
cursor: pointer;
}
.sidenav_trigger.active {
background: #0099A8 url(https://www.mandom.co.jp/common/images/common/btn_index_close.svg) no-repeat 50% 100%;
}











/* カテゴリ毎の色ver */
body.ir .sidenav_trigger,
body.ir .side_nav .btn_close {background-color: #1B93D3;}
body.csr .sidenav_trigger,
body.csr .side_nav .btn_close {background-color: #00A841;}
body.products .sidenav_trigger,
body.products .side_nav .btn_close {background-color: #E03C7B;}
body.consumer .sidenav_trigger,
body.consumer .side_nav .btn_close {background-color: #DE9100;}
body.careers .sidenav_trigger,
body.careers .side_nav .btn_close {background-color: #C71811;}
body.customer .sidenav_trigger,
body.customer .side_nav .btn_close,
body.contact .sidenav_trigger,
body.contact .side_nav .btn_close {background-color: #DE9100;}
body.rd .sidenav_trigger,
body.rd .side_nav .btn_close {background-color: #4E30A2;}

.aside_wrapper {
position: absolute;
background:#0099A8;
top:0;
right:-100%;
width: 100%;
height: 100%;
z-index: 1001;
opacity: 0;
transition: opacity 1s;
}
.aside_wrapper.active {
right:0;
opacity: .5;

}


@media screen and (min-width:768px) {
.aside_wrapper:before {
width: 415px;
}
.side_nav {
width: 400px;
right:-400px;
}
.side_nav section {
padding: 6rem 20px;
}
.sidenav_trigger {
top:570px;
}
.sidenav_trigger.fixed {
top: 130px;
}

.table_lh {
	line-height: 1.7;
}

.table_lh .vertical {
	width: auto;
	line-height: 1.7;
}

}


/*
_::-webkit-full-page-media, _:future, :root .aside_wrapper:before {
width: 100%;
}
_::-webkit-full-page-media, _:future, :root .side_nav {
width: calc(100% - 40px);
right:calc(-100% + 40px);
}
_::-webkit-full-page-media, _:future, :root .side_nav section {
padding: 3rem 20px 6rem;
}
*/





/* カテゴリ毎の色ver */
body.ir .aside_wrapper {background: #1B93D3;}
body.csr .aside_wrapper {background: #00A841;}
body.products .aside_wrapper {background: #E03C7B;}
body.consumer .aside_wrapper {background: #DE9100;}
body.careers .aside_wrapper {background: #C71811;}
body.customer .aside_wrapper,
body.contact .aside_wrapper {background: #DE9100;}
body.rd .aside_wrapper {background: #4E30A2;}

/* facebook like box */
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fb_iframe_widget span{
width: 100% !important;
}


/* Social Button */
.social-button {
position: relative;
display: inline-block;
width: 100%;
}
.social-button strong {
width: 100px;
position: absolute;
}
.social-button strong.fb {
display: block;
top:-15px;
left:calc(50% - 65px);
width: 65px;
}
.social-button strong.tw {
display: block;
top:-15px;
right:calc(50% - 72px);
width: 72px;
}
.social-button:before, .social-button:after {
content: " ";
display: table;
}
.social-button:after {
clear: both;
}
.social-button {
*zoom: 1;
}
.social-button iframe.twitter-share-button {
width: 90px !important;
}
.social-button.tw {
width:72px;
}
.footer span.social-button a {
border-right:none;
}

.footer {
position: relative;
text-align: center;
z-index: 50;
}
.footer-top-btn {
display: inline-block;
position: fixed;
z-index: 999;
transition: opacity .3s;
width: 40px;
height: 40px;
right: 15px;
bottom:10px;
text-indent: -9999px;
background: url(https://www.mandom.co.jp/common/images/common/footer-top-btn.svg) no-repeat 50% 50%;
background-size: 100%;
}
.footer-top-btn.fixed {
position: absolute;
top:-20px;
}



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

.col1-sp { width:8.3333%; }
.col2-sp { width:16.6666%; }
.col3-sp { width:25%; }
.col4-sp { width:33.3333%; }
.col5-sp { width:41.6666%; }
.col6-sp { width:50%; }
.col7-sp { width:58.333%; }
.col8-sp { width:66.666%; }
.col9-sp { width:74.999%; }
.col10-sp { width:83.333%; }
.col11-sp { width:91.666%; }

.col6-sp:nth-child(odd) {
padding-right: 10px;
}
.col6-sp:nth-child(even) {
padding-left: 10px;
}

}/*@media screen and (max-width:767px)*/












@media screen and (min-width:768px) {

#all {
font-size: 1.6rem; /*タブレット基本フォントサイズ*/
}

/* on off */
.on-sp,
.on-sp2 { display:none!important; }
.off-sp { display:inline-block!important; }
.off-sp2 { display:block!important; }
.on-tb { display:inline-block; }
.off-tb { display:none; }
.on-pc { display:none!important; }
.off-pc { display:inline-block; }

.mb-0-tb{ margin-bottom: 0!important; }
.mb-05em-sp{ margin-bottom: 0!important; }
.mt-1em-tb{ margin-top: 1em!important; }
.mt-1em-sp{ margin-top: 0!important; }
.mt-2em-sp{ margin-top: 0!important; }
.mb-1em-sp{ margin-bottom: 0!important; }
.mb-2em-sp{ margin-bottom: 0!important; }
.mt-2em-tb{ margin-top: 2em!important; }
.mb-2em-tb{ margin-bottom: 2em!important; }
.ml-1em-tb{ margin-left: 1em!important; }
.pt-1em-sp{ padding-top: 0!important; }

.pl-0-pc{ padding-left: 0!important; }
.pr-0-pc{ padding-right: 0!important; }

/* column*/
.wrapper {
padding: 0;
}
.col1,.col2,.col3,.col4,.col5,.col6,
.col7,.col8,.col9,.col10,.col11,.col12 {
padding:20px;
}
.col1 { width:8.3333%; }
.col2 { width:16.6666%; }
.col3 { width:25%; }
.col4 { width:33.3333%; }
.col5 { width:41.6666%; }
.col6 { width:50%; }
.col7 { width:58.333%; }
.col8 { width:66.666%; }
.col9 { width:74.999%; }
.col10 { width:83.333%; }
.col11 { width:91.666%; }
.col12 { width:100%; }

/* text-align */
.text-left-sp{ text-align: center!important; }




/* hamburger menu */
.sp_header,
.hmenu-wrapper{
display: none;
}

.social-button {
width: 110px;
left:10px;
}

.footer-top-btn {
right: 25px;
}







}/*@media screen and (min-width:768px)*/
























































@media screen and (min-width:1080px) {
.wrapper{max-width: 1080px;}
.col12{max-width: 1080px;}


#all {
font-size: 1.6rem; /*PC基本フォントサイズ*/
}

/* on off */
.off-tb { display:inline-block; }
.on-pc { display:inline-block!important; }
.off-pc { display:none; }


}/*@media screen and (min-width:1080px)*/