@charset "utf-8"; 
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin: 0; padding: 0; border: 0; outline: 0; }
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary { display: block; }
ol,ul { list-style: none; }
blockquote,q { quotes: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
img{ max-width: 100%; height: auto; }
.clear { clear: both; }
.clearfix:after { height: 0; visibility: hidden; content: ""; display: block; clear: both; }

html { font-size: 0.625%; }
body { background-color: #fff; line-height: 1.4; color: #000008; font-size: 100%; font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Meiryo", "メイリオ", sans-serif; -webkit-text-size-adjust: none; }

button, input, select, textarea {
font-family : inherit;
font-size : 100%;
}

.new { color: #ff0000;; font-size: 60%;vertical-align: super;}

/* header */
header { width: 100%; height: auto; max-height: 140px; background: #f9f7f1; }
header > div { position: relative; overflow: hidden; width: 1136px; height: 100%; max-width: 98%; margin: 0 auto; text-align: center; }
header > div .brand { position: absolute; top: 30px; left: 0; width: 168px; max-width: 22%; height: auto; }
header > div .Annotation { position: absolute; bottom: 10px; right: 0; width: 192px; max-width: 22%; height: auto; }
header > div h1 { width: 256px; max-width: 32%; height: auto; margin: 25px auto 22px; }
header > div h1 img { display: block; }
/* header */

/* article */
/* nav */
article nav { width: 1136px; max-width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
article nav div { font-size: 15px; line-height: 1; font-weight: bold; margin: 0px; width: 180px; padding-top: 20px; }
article nav ul:first-child { width: 100%; }
article nav ul { width: calc( 100% - 180px ); display: flex; flex-wrap: wrap; justify-content: flex-start;  margin: 0px; }
article nav ul li { font-size: 14px; line-height: 1; text-decoration: underline; padding: 8px 14px; background-color: #e7f1e3; border-radius: 20px; margin: 15px 10px 0 0; cursor: pointer; }
article nav ul li.selected { background-color: #3fae14; color: #fff; }
article nav ul li:hover { text-decoration: none; }
/*article nav ul:last-child { padding-left: 126px; border-top: 1px solid #eee; padding-top: 20px; }*/

@media screen and (max-width: 1156px) {
	article nav { width: 840px; }
}

@media screen and (max-width: 856px) {
	article nav { width: 573px; }
	article nav div { font-size: 14px; width: 110px; padding-top: 4px; }
	article nav ul { width: calc( 100% - 110px ); margin: 1px 0 8px; padding-top: 4px; }
	article nav ul li { margin: 10px 5px 0; font-size: 11px; }
	/*article nav ul:last-child { padding-left: 110px; padding-top: 10px; }*/
}

@media screen and (max-width: 767px) {	
  article nav { width: 94%; }
  article nav div { position: relative; font-size: 14px; width: 100%; padding-top: 0; height: 50px; line-height: 50px; padding-left: 14px; border-bottom: 1px solid #ccc; }
  article nav div:before { position: absolute; display: block; content:  ''; top: 50%; right: 0; width: 30px; height: 30px; margin-top: -15px; background-color: #cbcbc3; border-radius: 50%; }
  article nav div:after  { position: absolute; display: block; content: '+'; top: 50%; right: 0; width: 30px; height: 30px; margin-top: -15px; color: #fff; text-align: center; line-height: 26px; font-size: 20px; font-weight: normal; }
  article nav div.open:after { content: '-'; font-size: 28px; }
  article nav ul { width: 100%; margin: 0; padding-top: 4px; }
  article nav ul li { width: calc( 100% - 28px ); margin: 10px 0; font-size: 11px; text-decoration: none; }
  article nav ul:nth-child(n+3) { display: none; padding-left: 14px; }
}
/* nav */


article > div { width: 1136px; margin: 0 auto; padding-left: 20px; }
article > div ul { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-start; display:-ms-flexbox; -ms-flex-wrap: wrap; -ms-flex-pack: flex-start; margin: 30px 0 73px; -webkit-transition: all .5s; transition: all .5s; }
article > div ul li { position: relative; display: block; font-size: 14px; line-height: 1; padding: 0 0 28px; margin: 12px 20px 0 0; cursor: pointer; opacity: 0; -webkit-transition: all .5s; transition: all .5s; }
article > div ul li img { display: block; }
article > div ul li.set { position: absolute; bottom: inherit; left: inherit; opacity: 1; width: auto; height: auto; }
article > div ul li.set a { position: absolute; display: block; color: #333; bottom: 0; left: 0; height: 26px; line-height: 26px; padding-left: 25px; text-decoration: none; }
article > div ul li.set a:before { position: absolute; display: block; content: ''; top: 50%; left: 0; width: 20px; height: 20px; margin-top: -10px; background: #aaa; border-radius: 50%; background-image: url(../img/download.png); background-size: 12px auto; background-position: center center; background-repeat: no-repeat; }
article > div ul li.hide { position: absolute; top: inherit; right: inherit; bottom: 0; left: 0; opacity: 0; width: 0; height: 0; visibility: hidden; }
article > div ul li:hover { text-decoration: none; }

@media screen and (max-width: 1156px) {
	article > div { width: 840px; padding-left: 16px; }
	article > div ul li { margin: 12px 16px 0 0; }
}

@media screen and (max-width: 856px) {
	article > div { width: 573px; padding-left: 15px; }
	article > div ul li.set { margin: 10px 15px 0 0; padding-bottom: 20px; }
	article > div ul li.set a { font-size: 10px; padding-left: 18px; height: 20px; line-height: 20px; }
	article > div ul li.set a:before { width: 14px; height: 14px; margin-top: -7px; background-image: url(../img/download.png); background-size: 8px auto; }
}

@media screen and (max-width: 603px) {	
	article > div { width: 94%; padding-left: 0; }
	article > div ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
	article > div ul li.set { position: relative; width: 48%; margin: 10px 0 0 0; }
	
}
/* article */




/* footer */
footer { width: 100%; height: 87px; background: #f9f7f1; overflow: hidden; }
footer > div { position: relative; width: 1136px; max-width: 96%; padding-top: 36px; margin: 0 auto; color: #666; }
footer small { font-size: 12px; }
footer img.logo { position: absolute; top: 32px; right: 10px; width: 166px; height: auto; }
/* footer */

@media screen and (max-width: 856px) {
	footer { height: auto; text-align: center }
	footer img.logo { position: relative; display: block; margin: 20px auto; top: inherit; right: inherit; }
}


/*modal*/
.modal { display: none; }
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); }
.modal > div { width: 100%; height: 100%; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; display:-ms-flexbox; -ms-flex-wrap: nowrap; -ms-flex-pack: center; -ms-flex-align: center; }
.modal > div .bgc { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.modal > div .close { position: absolute; top: 0; right: 0; width: 88px; height: 88px; background-color: #000; cursor: pointer; -webkit-transition: all .5s; transition: all .5s; }
/*.modal > div .close:before { position: absolute; top: 22px; left: 22px; width: 40px; height: 3px; background-color: #fff; }*/
.modal > div .close:before { content: ''; position: absolute; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; top: 50%; left: 50%; right: 50%; margin-top: 0; margin-left: -15px; width: 30px; height: 3.5px; background-color: #fff; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transition: all .5s; transition: all .5s; }
.modal > div .close:after { content: ''; position: absolute; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; top: 50%; left: 50%; right: 50%; margin-top: 0; margin-left: -15px; width: 30px; height: 3.5px; background-color: #fff; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transition: all .5s; transition: all .5s; }
.modal > div .close:hover:before,
.modal > div .close:hover:after { background-color: #999; }
.modal > div .body { position: relative; width: 840px; max-width: 100%; color: #fff; font-size: 14px; }
.modal > div .body p { margin-top: 8px; line-height: 1; }
.modal > div .body img {  width: 840px; height: auto; }
.modal > div .body a { position: absolute; display: inline-block; margin-top: 20px; height: 40px; line-height: 40px; background-color: #999; border-radius: 20px; color: #fff; white-space: nowrap; bottom: -65px; left: 50%; text-decoration: none; padding: 0 2em; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all .5s; transition: all .5s; }
.modal > div .body a:before { display: inline-block; content:''; width: 0; height: 0; margin-right: 5px; border: 5px solid transparent; border-left: 7px solid #fff; vertical-align: baseline; }
.modal > div .body a:hover { background-color: #ccc; }

@media screen and (max-width: 856px) {
	.modal > div .close { -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8); }
	.modal > div .body p { margin: 8px; }
}

@media screen and (max-width: 603px) {
	.modal > div .close { -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: scale(0.5,0.5); transform: scale(0.5,0.5); }
	.modal > div .body a { margin-top: 10px; font-size: 13px; }
}
/*modal*/