@charset "utf-8";

#cmgraphic .containerHeading{
background-image:url(/cmgraphic/shared/images/cmgraphic_title_bg_02_pc.jpg);
}
#cmgraphic #aside dt .en{
padding-top:53px;
}
#cmgraphic .cmTtl01{
margin-bottom:52px;
}
#cmgraphic .ttlWrap01{
padding:12px 0;
margin: 0 0 40px;
}
#cmgraphic .ttlWrap01>.cmTtl01{
width: 980px;
margin:0 auto;
color: #fff;
font-size: 16px;
}
#cmgraphic .ttlWrap01>.cmTtl01 .main{
font-size: 22px;
margin-right: 3px;
}
#cmgraphic .cmTtl02{
margin-bottom:20px;
}
/*
#cmgraphic .cmTtl02{
font-size:1.5em;
margin-bottom:20px;
padding-left:25px;
position:relative;
}
#cmgraphic .cmTtl02:after{
content:"";
display:block;
width:15px;
height:15px;
position:absolute;
left:0;
top:6px;
}
*/
#cmgraphic .cmTtl03{
font-size:1.833em;
margin-bottom:40px;
}


#cmgraphic .movieArea01{
padding: 0;
margin-bottom:50px;
}
#cmgraphic .cmSelectWrap{
position: relative;
margin-bottom: 40px;
}
#cmgraphic .cmSelectWrap:after{
content: '';
display: block;
width: 9999px;
height: 1px;
background: #c6cacd;
position: relative;
left: -4999px;
}
#cmgraphic .cmSelect{
display: inline-table;
width: 100%;
margin:0 auto 5px;
position: relative;
table-layout:fixed;
}

#cmgraphic .cmSelect.hide{
visibility:hidden;
}

#cmgraphic .cmSelect li{
display:table-cell;
background:#fff;
text-align: center;
border-left: 10px solid transparent;
}
#cmgraphic .cmSelect li:first-child{
border-left: none;
}
#cmgraphic .cmSelect li a:hover img[src*="_off"]{
filter:alpha(opacity=70) !important;
-moz-opacity:0.7 !important;
opacity:0.7 !important;
}
#cmgraphic .cmSelect li span{
width: 100%;
border: 1px solid #c6cacd;
border-bottom: none;
font-size: 12px;
color: #42515a;
font-weight: bold;
padding: 20px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cmgraphic .cmSelect li a{
display: inline-table;
width: 100%;
text-decoration: none;
height: 76px;
vertical-align: bottom;
}
#cmgraphic .cmSelect li a .ttl{
display: table-cell;
vertical-align: middle;
padding: 0;
}
#cmgraphic .cmSelect li a:hover span:not(.active){
opacity: 0.7;
}
#cmgraphic .cmSelect li span.active{
border-top: none;
font-size: 16px;
color: #015db2;
position: relative;
bottom: -5px;
height: 82px;
}
#cmgraphic .cmSelect li span.active:before{
content: '';
position: absolute;
width: 100%;
height: 6px;
background: #015db2;
padding: 0 1px;
top: -6px;
left: -1px;
}
#cmgraphic .ionwater .cmSelect li span.active:before{
background: #80d9eb;
}
#cmgraphic .cmSelect li span.active:after{
content: '';
position: absolute;
display: block;
background: #fff;
width: 100%;
height: 1px;
left: 0;
bottom: -1px;
z-index: 1;
}
#cmgraphic .textArea{
width: 980px;
margin: 0 auto 120px;
}
#cmgraphic .textArea .corporateLink{
margin-bottom: 35px;
}
#cmgraphic .textArea .cmTtl03{
padding-bottom: 35px;
margin-bottom: 35px;
border-bottom: 1px solid #ccdff0;
}

#cmgraphic .movieWrap{
position:relative;
width:100%;
padding-top:56.25%;
margin-bottom:20px;
}
#cmgraphic .movieWrap iframe{
position:absolute;
top:0;
right:0;
width:100% !important;
height:100% !important;
}
#cmgraphic .corporateLink{
padding-top:20px\9;
text-align: left;
}
#cmgraphic .graphicArea{
width: 980px;
margin: 35px auto 0;
position: relative;
}
#cmgraphic .graphicArea .textCol{
width: 490px;
float: left;
margin-top: 50px;
}
#cmgraphic .graphicArea .textCol .cmTtl03{
position: relative;
padding-bottom: 35px;
margin-bottom: 35px;
}
#cmgraphic .graphicArea .textCol .cmTtl03:after{
content: '';
display: block;
width: 980px;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
border-bottom: 1px solid #ccdff0;
}
#cmgraphic .graphicArea .textCol .corporateLink{
margin-top: 110px;
}
#cmgraphic .graphicArea .poster{
float: right;
position: relative;
z-index: 1;
}
#cmgraphic .graphicArea .poster .corporateLink{
margin-left: -590px;
position: relative;
top: -110px;
}
#cmgraphic .sectionTypeB01{
padding-bottom: 0;
border-bottom: none;
}
#cmgraphic .graphicArea:after{
content: '';
clear: both;
display: block;
}
#cmgraphic .graphic{
position:relative;
}
#cmgraphic .poster{
text-align:center;
}
#cmgraphic .graphic .corporateLink{
position:absolute;
bottom:80px;
right:0;
z-index:9999;
}

#cmgraphic .anchorList{
width: 980px;
margin: 0 auto;
text-align: left;
letter-spacing: -1em;
}
#cmgraphic .anchorList:after{
content: '';
clear: both;
display: block;
}
#cmgraphic .anchorList li{
margin-left: 20px;
width: 180px;
display: inline-block;
vertical-align: top;
letter-spacing: normal;
}
#cmgraphic .anchorList li:nth-child(5n+1){
margin-left: 0;
}
#cmgraphic .anchorList li:nth-child(n+6){
margin-top: 10px;
}
#cmgraphic .anchorList li .tmb,
#cmgraphic .anchorList li .ttl{
display: block;
}
#cmgraphic .anchorList li .tmb img{
width: 100%;
}
#cmgraphic .anchorList li .tmb{
position: relative;
margin-bottom: 10px;
}
#cmgraphic .anchorList li .tmb:before{
content: '';
display: block;
position: absolute;
width: 20px;
height: 20px;
background: url(/cmgraphic/images/anchorListArw.png) no-repeat 0 0;
-webkit-background-size: cover;
background-size: cover;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 2;
}
#cmgraphic .anchorList li a:hover .tmb:after{
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(1, 93, 178,0.6);
z-index: 1;
}
#cmgraphic .anchorList li .ttl{
text-align: left;
font-size: 13px;
vertical-align: middle;
}
#cmgraphic .anchorList li .ttl:before{
content: '■';
display: inline-block;
color: #99bee0;
font-size: 8px;
vertical-align: text-bottom;
margin-right: 5px;
}
#cmgraphic .anchorList li a{
color: #015db2;
text-decoration: none;
}
#cmgraphic .anchorList li a:hover .ttl{
text-decoration: underline;
}
#cmgraphic #container .containerInner{
width: 100%;
}

@media screen and (max-width: 764px){
#cmgraphic .containerHeading{
background-image:url(/cmgraphic/shared/images/cmgraphic_title_bg_02_sp.jpg);
background-size:cover;
}
#cmgraphic .containerHeading .title{
width:124px;
}
#cmgraphic .cmTtl01{
margin-bottom:52px;
}
#cmgraphic .ttlWrap01{
padding:10px 25px;
margin:0 0 30px;
}
#cmgraphic .ttlWrap01>.cmTtl01{
width:auto;
font-size: 12px;
}
#cmgraphic .ttlWrap01>.cmTtl01 .main{
font-size: 16px;
}

#cmgraphic .cmTtl02 img{
height:17px;
width:auto;
}
/*
#cmgraphic .cmTtl02{
margin-bottom:30px;
padding:0 25px;
position:relative;
line-height:1;
}
#cmgraphic .cmTtl02:after{
content:"";
display:block;
width:15px;
height:15px;
position:absolute;
left:0;
top:1px;
}
#cmgraphic .graphic .cmTtl02{
margin:0 0 30px;
}
*/
#cmgraphic .cmTtl03{
margin-bottom:30px;
font-size: 1.5em;
}

#cmgraphic .movieArea01{
padding: 0;
margin:0 -25px 30px;
}
#cmgraphic .cmSelect{
margin:0 auto;
}
#cmgraphic .cmSelect li img{
height:39px;
width:auto;
}
#cmgraphic .corporateLink{
width: 90.625%;
margin: 0 auto;
padding-left: 10px;
}
#cmgraphic .corporateLink img{
width:78px;
}
#cmgraphic .poster{
/*margin:0 -25px;*/
}
#cmgraphic .graphic .corporateLink{
position:absolute;
bottom:3%;
right:0;
z-index:9999;
}

#cmgraphic .headingTypeA01 .articleHead{
padding-left: 0;
border-left: none;
}
#cmgraphic .anchorList{
display: block;
width: 90.625%;
margin: 0 auto;
}
#cmgraphic .anchorList li{
padding: 0;
width: 48%;
margin-left: 4%;
}
#cmgraphic .anchorList li:nth-child(n+5){
margin-left: 4%;
}
#cmgraphic .anchorList li:nth-child(odd){
margin-left: 0;
}
#cmgraphic .anchorList li:nth-child(n+3){
margin-top: 4%;
}
#cmgraphic .anchorList li .tmb:before{
width: 16px;
height: 16px;
-webkit-background-size: 16px 16px;
background-size: 16px 16px;
}
#cmgraphic .anchorList li a .tmb:after{
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(1, 93, 178,0.6);
z-index: 1;
}
#cmgraphic .anchorList li .ttl{
font-size: 10px;
}
#cmgraphic .anchorList li .ttl:before{
font-size: 6px;
}

#cmgraphic .pocarisweat .movieArea01{
width: 100%;
}
#cmgraphic .cmSelectWrap{
margin-bottom: 20px;
}
#cmgraphic .cmSelect{
display: block;
width: 90.625%;
}
#cmgraphic .cmSelect:after{
content: '';
clear: both;
display: block;
}
#cmgraphic .cmSelect li{
display: block;
width: 48%;
float: left;
margin-left: 4%;
border-left: none;
}
#cmgraphic .cmSelect li:nth-child(odd){
margin-left: 0;
}
#cmgraphic .cmSelect li:nth-child(n+3){
margin-top: 4%;
}
#cmgraphic .cmSelect li a .ttl{
border-bottom: 1px solid #c6cacd;
padding: 10px 0;
height: auto;
}
#cmgraphic .cmSelect li a{
height: auto;
}
#cmgraphic .cmSelect li span.active{
border: 1px solid #015db2;
background: #015db2;
color: #fff;
position: static;
font-size: 12px;
}
#cmgraphic .ionwater .cmSelect li span.active{
background: #80d9eb;
border-color:#80d9eb;
}
#cmgraphic .sectionTypeA01,
#cmgraphic .sectionTypeB01{
margin: 0 0 20px;
padding: 0;
}
#cmgraphic .cmSelectWrap:after{
display: none;
}
#cmgraphic .textArea,
#cmgraphic .graphicArea{
width: 90.625%;
margin: 0 auto;
}
#cmgraphic .graphicArea .textCol{
width: 100%;
float: none;
}
#cmgraphic .pocarisweat .cmTtl03,
#cmgraphic .ionwater .cmTtl03,
#cmgraphic .graphicArea .textCol .cmTtl03{
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #ccdff0;
}
#cmgraphic .graphicArea .textCol .cmTtl03:after{
display: none;
}
#cmgraphic .textArea .articleArea01,
#cmgraphic .graphicArea .articleArea01{
margin-top: 0;
margin-left: 10px;
}
#cmgraphic .graphicArea .textCol .corporateLink{
margin-top: 25px;
}
#cmgraphic .graphicArea .poster{
float: none;
width: 67%;
margin-left: auto;
margin-right: auto;
}
#cmgraphic .graphicArea .poster .img01 img{
width: 100%;
}
#cmgraphic .cmSelect li span.active:before{
display: none;
}
#cmgraphic .graphicArea .poster .corporateLink{
position: static;
margin-left: 0;
padding-left: 0;
}
}