@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&subset=japanese');

/* --------------------------------------------------
 normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
--------------------------------------------------- */
button,hr,input{overflow:visible;padding:0;}progress,sub,sup{vertical-align:baseline;}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0;}html{line-height:1;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{margin:.67em 0;font-size:2em;}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-size:100%;font-family:inherit;line-height:1;}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none;}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{display:table;max-width:100%;color:inherit;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px-webkit-appearance:textfield;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}summary{display:list-item}[hidden],template{display:none}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}ul{margin:0;padding:0;}ul li{margin:0;padding:0;list-style:none;}ol{margin:0;padding:0;}ol li{margin:0;padding:0;list-style:none;}
main,figure,figcaption,time,address,dl,dt,dd{display: block;margin:0;padding:0;}h1,h2,h3,h4,h5{margin:0;font-size:100%;}p{margin:0; padding:0;}address{font-style: normal;}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%; font-size: 62.5%;}
body{
    min-width: 1000px;
    width: 100%;
    background: #fff;
    color: #000;
    font-size: 1.6rem;
    font-family: 'Noto Sans JP', system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}
img{ vertical-align: bottom;}
a{ color: #999; text-decoration: underline; transition: .2s;}
a:hover{ text-decoration: none;}
.none{ display: none;}
.sp{ display: none;}
.inner{ margin: 0 auto; width: 1000px;}

@media screen and (max-width: 768px){
    body{ min-width: 0; font-size: 1.4rem;}
    *, *:after, *:before{ box-sizing: border-box;}
    img{ max-width: 100%; width: auto; height: auto;}
    .pc{ display: none;}
    .sp{ display: block;}
    .inner{ width: 100%;}
}

small{ display: block; text-align: center; font-size: 1.2rem; line-height: 1.8;}
.backtop{ position: fixed; right: 20px; bottom: 20px;}
.backtop a{ display: inline-block; color: #999;font-size: 4rem; }
aside ul{ position: relative; text-align: left;font-size: 0; }
aside li{ display: inline-block; margin: 0 15px 0 0;font-size: 4rem; }
aside i{ display: inline-block; vertical-align: top;font-size: 4rem; line-height: 1; }

@media screen and (max-width: 768px){
    .backtop{ right: 10px; bottom: 10px;}
    .backtop a{ display: inline-block;}
    small{ text-align: left; line-height: 1.5;}
    aside li{margin: 0 10px 0 0; font-size: 3rem; }
    aside i{ font-size: 3rem;}
}

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header header{ position: relative; padding: 30px 0 0;}
.header h1{ position: relative; z-index: 999; margin: 0 auto; width: 350px;}
.header h1 img{ width: 100%;}
.header aside{ position: absolute; top: 50px; left: 0;}
.header .online{ position: absolute; top: 50px; right: 0;}
.header .online a{ display: inline-block; padding: 10px 30px; background: #999; color: #fff; text-decoration: none; font-size: 1.8rem;}
.header .online i{ display: inline-block; margin: 0 5px 0 0;}

@media screen and (max-width: 768px){
    .header header{ padding: 60px 0 0;}
    .header h1{ width: 50%;}
    .header aside{ top: 10px; left: 10px;}
    .header .online{ top: 10px; right: 10px;}
    .header .online a{ padding: 10px 10px; font-size: 1.3rem;}
}


/* --------------------------------------------------
 main
--------------------------------------------------- */
main{ padding: 0 0 30px;}
main aside{ padding: 30px 0;}
main aside ul{ text-align: center;}

/* rules
--------------------------------------------------- */
.rules{ box-sizing: border-box; margin: 30px auto 0; padding: 75px; width: 1000px; border: 4px solid #cbcbcb; text-align: left; line-height: 1.8;}
.rules h1{ padding: 0 0 15px; text-align: center; font-weight: normal; font-weight: 700; font-size: 2.4rem;}
.rules h2{ margin: 30px 0 0; text-align: left; font-weight: 700; font-size: 1.8rem; line-height: 1.8;}
.rules h3{ margin: 30px 0 0; text-align: left; font-weight: 700; font-size: 1.8rem; line-height: 1.8;}
.rules h4{ margin: 30px 0 0; text-align: left; font-weight: 700; line-height: 1.8;}
.rules p{ margin: 15px 0 0; text-align: left;}
.rules h2 + p{ margin: 15px 0 0;}
.rules h3 + p{ margin: 0;}
.rules h4 + p{ margin: 0;}
.rules ul + p{ margin: 0;}
.rules p:first-child{ margin: 0;}
.rules .right{ text-align: right;}
.rules ul{ margin: 0 0 0 2.2rem;}
.rules h2 + ul{ margin: 15px 0 0 2.2rem;}
.rules ul li{ list-style: disc; line-height: 1.8;}
.rules ol > li{ padding-left: 1em; text-indent: -1em;}
.rules .app{ margin: 30px 0 0; text-align: center;}
.rules .app a{ position: relative; display: inline-block; padding: 10px 40px 10px 30px; background: #999; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.8rem;}
.rules .app a:after{ position: absolute; top: 50%; right: 20px; width: 6px; height: 6px; border-top: 3px solid; border-right: 3px solid; border-radius: 1.5px; content: ""; transform: translate(0,-50%) rotate(45deg);}

@media screen and (max-width: 768px){
    .rules{ padding: 30px 20px; width: 100%; border-right: none; border-left: none;}
    .rules h1{ text-align: left; font-size: 1.8rem;}
    .rules h2{ font-size: 1.6rem;}
    .rules h3{ font-size: 1.6rem;}
    .rules ul{ margin: 0 0 0 2rem;}
    .rules ul li{ margin: 10px 0 0; line-height: 1.5;}
    .rules ol > li{ margin: 10px 0 0;}
    .rules .app a{ padding: 10px 30px 10px 10px; font-size: 1.3rem;}
    .rules .app a:after{ right: 10px; width: 6px; height: 6px; border-top: 2px solid; border-right: 2px solid; border-radius: 1px;}
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ padding: 50px 0; background: #efefef; text-align: center;}
.footer ul{ letter-spacing: -.5rem;}
.footer ul li{ display: inline-block; padding: 0 20px; border-left: 1px solid; letter-spacing: normal;}
.footer ul li:first-child{ border: none;}
.footer small{ margin: 35px 0 0; line-height: 1.8;}

@media screen and (max-width: 768px){
    .footer{ padding: 30px 0;}
    .footer ul li{ padding: 0 12px; font-size: 1.2rem;}
    .footer small{ margin: 30px 0 0; text-align: center;}
}