@import url('https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css');

/*基本設定*/
html{font-size: 62.5%;}
body,table{font-family: 'Rounded Mplus 1c';font-size: 1.4rem;color:#3b3b3b;}
div{box-sizing:border-box;}
p, a{text-align:inherit}
p{word-break: normal;word-wrap: break-word;text-align:justify;}
h2{line-height:1.3em;}
ul,dl{letter-spacing: -.40em;}
li,dd,dt{letter-spacing: normal;}
a:hover>img{opacity:0.7;text-decoration:underline;}
img{  pointer-events: none;
  user-select: none;
  vertical-align: bottom;
  -webkit-user-select: none;
  width: auto;
  height: auto;
  -ms-interpolation-mode: bicubic;}
a img{display:block;}



#pkm_head{margin-bottom: 0;}
.box{background: rgba(255,255,255,0.75);padding:4em;margin-bottom: 1em;box-shadow:0 0 1px 1px rgba(0,0,0,0.5);border-radius:1em;}
.box2{background: rgba(255,255,255,1);padding:3em;margin-bottom: 1em;box-shadow:0 0 1px 1px rgba(0,0,0,0.5);border-radius:1em;}
.box3{margin-bottom: 1em;}

.outer{position:relative;min-width:980px;}
.outer{background: url(../img/bg2.jpg) ;background-attachment:;background-size: cover;;background-position: top center;}
.outer >footer{background: none;color:#fff;text-align:center;padding: 3em;background: #000;margin-top: 10em;}
.mt1{position:absolute;bottom:30px;left:0;width: 120px;}
.mt2{position:absolute;bottom:30px;right:0;width: 120px;}
.mt1 img,.mt2 img{width: 100%;}
.mt3{background: url(../img/material.png) repeat-x bottom center;width: 100%;height: 100px;position:absolute;bottom:0;}
.material{position:relative;}

#information {display:inline-block;text-align:center;margin:0 auto;width: 100%;}
#information a{background: #fff;border-radius:4em;padding: 1em 3em;text-align:center;    display: inline-block;margin: 1em 0;color:red;}

#visual{margin-bottom: -230px;padding-bottom: 200px;;}
#visual .inner{position:relative}
#visual .inner{position:relative;max-width: 1200px;width: 100%;}
#visual .inner >img{width: 100%;margin-top: 6em;}
#visual h2{position:absolute;margin-top: 1em;text-align:center;width: 100%;}
#visual h3{position:absolute;width: 80px;right:120px;top:80px;}
#visual h3 img{width: 100%;}

.readbtn{margin-top: 1em;background: #000;color:#fff!important;width: 100%;display: block;border-radius:15px;display:flex;align-items:center;text-align:center;    justify-content: center;padding: 1em;}
.readbtn img{width: 25px!important;margin:0 0.5em 0 0!important;;}
.readbtn:hover{background: rgba(0,0,0,0.8);}
.readbtn:hover img{opacity:1;}
.readbtn:hover{text-decoration:none;}

#read{}
#read p{font-size:1.8rem;margin-bottom: 2em;}
#read ul{margin-bottom: 2em;}
#read ul li{font-size:1.8rem;margin-bottom: 0.5em;}
#read figure.ph{display:table-cell;width: 30%;}
#read img{width: 100%;margin-bottom: 0.5em;}
#read figure.ph figcaption{font-size:1rem;text-align:center;}
#read figure.nv{position:absolute;top: 120px;right: -50px;width: 280px;}
#read div{display:table-cell;vertical-align: top;padding-left: 5%;position: relative;}
#read h1{margin-bottom: 1.5em;    margin-top: -7em;position: relative;}
#read h3{font-size:2rem;font-weight: 800;font-family: 'Rounded Mplus 1c';    margin-bottom: 0.5em;}
#read h3:before{
margin:0 10px 0 0;
    content:" ";
    display:inline-block;
    width:30px;
    height:30px;
    background:url(../img/icon1.png) no-repeat;    
    background-size:contain;
    vertical-align:middle;
    }
#read h3:nth-child(3):before{
	margin:0 10px 0 0;
    content:" ";
    display:inline-block;
    width:30px;
    height:30px;
    background:url(../img/icon2.png) no-repeat;    
    background-size:contain;
    vertical-align:middle;
    }
#read ol{}
#read ol li{margin-bottom: 1em;list-style-type: disc;margin-left: 2em;}

#read h3+ol{margin-top: 1em;margin-bottom: 0.5em;}
#read .list{-webkit-box-pack:justify;
    -moz-box-pack:justify;
    -webkit-flex-pack:justify;
    -moz-flex-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    justify-content:space-between;}
#read .list li{text-align:center;width: 49%;}
#read .list li a{ display:block;color:#fff;padding: 0.7em;border-radius: 4px;box-shadow:0 0 1px 1px rgba(0,0,0,0.5);font-weight: 500;}
#read .list li a:hover{opacity:0.8;text-decoration:none;}
.amz{background: #fabe00;}
.svn{background: #00a33e;}
.rkn{background: #e72420;}
.pmc{background: rgba(23,42,136,1);}

#read2 h2{font-size:3rem;font-weight: 900;font-family: 'Rounded Mplus 1c';    padding: 1em 0;color:#e60012;text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,-2px 2px 0 #FFF, 2px -2px 0 #FFF, 0px 2px 0 #FFF,  0 -2px 0 #FFF,-2px 0 0 #FFF, 2px 0 0 #FFF;}

#read2 ul{display:flex;flex-wrap:nowrap;justify-content: space-between;}
#read2 ul li{border-radius:0.5em;padding:1.5em 1.5em 1.5em 1.5em;flex:1;margin:0 0.25em;position:relative;background: #fff;box-shadow:0 0 1px 1px rgba(0,0,0,0.5);}
#read2 ul li h3{position:absolute;left:1em;top:-1em;color:#fff;padding: 0.25em 1em;border-radius:1em;}
#read2 ul li.po1{border:3px solid #f18d00;}
#read2 ul li.po1 h3{background: #f18d00;}
#read2 ul li.po2{border:3px solid #00afe9;}
#read2 ul li.po2 h3{background: #00afe9;}
#read2 ul li.po3{border:3px solid #c93853;}
#read2 ul li.po3 h3{background: #c93853;}

#read2 ul li.po4{border:3px solid #f8b500;}
#read2 ul li.po4 h3{background: #f8b500;}
#read2 ul li.po5{border:3px solid #00a78d;}
#read2 ul li.po5 h3{background: #00a78d;}
#read2 ul li.po6{border:3px solid #e95389;}
#read2 ul li.po6 h3{background: #e95389;}
#read2 ul li.po7{border:3px solid #8fc31f;}
#read2 ul li.po7 h3{background: #8fc31f;}

#read2 ul li.po8{border:3px solid #d5b200;}
#read2 ul li.po8 h3{background: #d5b200;}
#read2 ul li.po9{border:3px solid #004ea2;}
#read2 ul li.po9 h3{background: #004ea2;}
#read2 ul li.po10{border:3px solid #8f9a9c;}
#read2 ul li.po10 h3{background: #8f9a9c;}

#detail{position:relative;}
#detail figure{position:absolute;}
#detail .c1{position:absolute;left:calc(50% - 410px);top:-165px;}
#detail .c2{position:absolute;right:calc(50% - 425px);top:-165px;}
#detail .c3{position:absolute;left:calc(50% - 500px);top:-165px;}
#detail .c4{position:absolute;right:calc(50% - 500px);top:-165px;}

.outer footer dl dd{display: inline-block;text-align:center;margin: 0 0.5em;}
.outer footer dl {margin-bottom: 1em;}
.outer footer .inner{text-shadow:1px 1px 0 #000, -1px -1px 0 #000,
              -1px 1px 0 #000, 1px -1px 0 #000,
              0px 1px 0 #000,  0-1px 0 #000,
              -1px 0 0 #000, 1px 0 0 #000;}


.cm{padding: 0.5em;text-align:center;text-decoration:underline!important;    display: block;}
#colorbox{    border-radius: 20px;}
#cboxOverlay{background:#000!important;opacity:0.9!important;}
#cboxContent{background: #fff!important;color:#000}
#cboxWrapper>div:first-child{background-color: #fff!important;background-image:none!important;}
#cboxWrapper>div:last-child{background-color: #fff!important;background-image:none!important;}
#cboxMiddleLeft,#cboxMiddleRight,#cboxTopLeft,#cboxTopRight,#cboxTopCenter,#cboxBottomLeft,#cboxBottomRight,#cboxBottomCenter
{background-color: #fff!important;background-image:none!important;}


/*smartphone*****************************************************************************************************************************************************************************************/
@media screen and (max-width: 768px) {
	#information a{width: 90%;padding: 1em 2em;}
img{width: 100%;}
.box{padding: 1em;}
.inner{    width: 95%;}
.box2{padding: 1em;}
.outer{width: 100%;min-width: auto;overflow: hidden;}

#visual{padding-bottom: 220px;}
#visual h2 img{width: 95%;}
#visual h3{width: 50px;top: 45px;right:10px;z-index: 10}
#visual .inner >img {
    width: 150%;
    margin-top:3em;
    left: -25%;
    position: relative;}

#read{padding-top: 2em;}
#read figure{}
#read figure.ph{width: 60%;    display: block;margin: 0 auto;margin-bottom: 1.5em;}
#read div{width: 100%;    display: block;    padding-left: 0;}
#read h3{font-size: 1.5rem;}
#read h3:before,#read h3:nth-child(3):before{width:20px;height: 20px;}
#read p,#read ul li{font-size:1.4rem;}
#read .list li{width: 100%;display:block;}
#read figure.nv{display:none;}
#read h1{margin-top: -50px;}
#read2 h2{font-size: 2.2rem;}
#read2 ul {display:block;}
#read2 ul li{width: 100%;margin: 0 0 0.5em 0}

#detail {display:none;}

.nvs h4{color:#00a0e9;font-weight:800;font-size:2rem;margin-bottom: 0.5em;}
.nvs p{color:#00a0e9;color:#000;}

.outer >footer{background: none;color:#fff;text-align:center;font-size:70%;padding-bottom: 2em;padding:5em 0 ;background: #000;margin-top: 2em;}
.mt1{width: 60px;bottom:25px;}
.mt2{width: 60px;bottom:25px;}
.mt3{background-size: contain;}

.outer footer dl dd{width: 45%;}
.outer footer dl dd img{width: 100%;}
.outer footer dl {margin-bottom: 1em;}

}