@charset "utf-8";
/*/////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////*/
* { margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
html, body { height:100%;}
html { font-family:-apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Meiryo", "Helvetica", sans-serif;}
body { font-size:100%; line-height:1; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary { display:block;}
audio,canvas,progress,video { display:inline-block;}
a,embed,object { outline:none;}
img { border:none; box-sizing:content-box; -webkit-box-sizing:content-box; -moz-box-sizing:content-box;}
hr { display:none;}
li { list-style:none;}
a { background-color:transparent; -webkit-text-decoration-skip:objects;}

/*@common ////////////////////////////////////////////////////////////*/
body { font-weight:bold; color:#000; text-align:center; }
a { color:#914907; text-decoration:none; -webkit-transition:all 0.2s; transition:all 0.2s;}

#contentsMain {
  background:url(../img/bg.png) center 0;
  padding:45px 0 00px;
  padding-bottom:30px;
}

/*@navigation ////////////////////////////////////////////////////////////*/
.main-nav {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom:50%;
}

.main-nav a {
  margin: 3px;
  border-radius: 5px;
  background: #d5ab6d;
  color: #fff;
  display: block;
  padding: 10px;
  text-decoration: underline;
  width:6.5em;
}

.main-nav a:hover {
  color:#da9e5f;
}

/*@language ////////////////////////////////////////////////////////////*/

.lang{
  vertical-align: middle;
  overflow: auto;
  display:inline-block;
  margin-bottom:70%;
  width:85%;
}

.lang__item{
  width:95%;
  padding:.5em 1em .5em 2em;
  display:inline-block;
  background:#fffcf6;
  transition:all linear .15s;
  font-size:1em;
  font-weight:700;
  color:#000000;
  position:relative;
  margin-top:3%;
  border-radius:8px;
  border:4px solid #d5ab6d;
  text-decoration: underline;
  line-height: 1.5em;
}

.lang__item:hover {
  color:#da9e5f;
}

.lang__item:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -0.55em;
  left: 1%;
  width: 0.8em;
  height: 0.8em;
  border-top: #f4a41a 3px solid;
  border-right: #f4a41a 3px solid;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
}

.lang__item2{
  width:95%;
  padding:.5em 1em .5em 2em;
  display:inline-block;
  background:#fffcf6;
  transition:all linear .15s;
  font-size:1em;
  font-weight:700;
  color:#000000;
  position:relative;
  margin-top:2%;
  border-radius:8px;
  border:4px solid #f4a41a;
  text-decoration: underline;
  line-height: 1.5em;
}

.lang__item2:hover {
  color:#da9e5f;
}

.lang__item2:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -0.55em;
  left: 1%;
  width: 0.8em;
  height: 0.8em;
  border-top: #f4a41a 3px solid;
  border-right: #f4a41a 3px solid;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
}


/*@contents
/////////////////////////////////////////////////////////////////////*/
.block__anchor{
  content: '';
  height: 20px;
}

.block {
  width:95%;
  min-height:200px;
  text-align:left;
  background:#fff;
  border:8px solid #d5ab6d;
  border-radius:10px;
  position:relative;
  margin:0 auto 40px;
  padding:20px 10px 30px;
  font-weight:normal;
  line-height:1.8;
  font-size: 12px;
}
.block:last-child { margin-bottom:0;}

.block a { color:#0d66aa; text-decoration:underline;}
.block a:hover { color:#da9e5f;}

.block h1 {
  text-align:center;
  margin-bottom:30px;
}
.block h1 span {
  display:inline-block;
  max-width:610px;
  font-size:20px;
  line-height:1.35;
  position:relative;
}
.block h1 span:before,
.block h1 span:after {
  content:'';
  display:inline-block;
  width:44px;
  height:44px;
  position:absolute; top:50%;
  margin-top:-22.5px;
}
.block h1 span:before { right:-50px;}
.block h1 span:after { left:-50px;}
.block h1 p { font-weight:500; font-size:0.8em;}

.block h2 {
  margin:0;
  text-indent:0;
  white-space:normal;
}

.block__inner { padding:0 10px; margin-bottom:40px;}
.block__inner:last-child { border-bottom:none; margin-bottom:0;}
.block__inner > p {
  font-size:12px;
  padding-bottom:30px;
}
.block__inner p {
  font-size:12px;
  line-height:1.8;
  padding-bottom:15px;
}
/*.block__inner .small { font-size:13px;}
.block__inner .big { font-size:20px;}
.block__inner ul { padding-bottom:30px;}
.block__inner .note { font-size:13px; line-height:1.8; color:#9e7a5b;}
.block__inner p.indent,
.block__inner ul.indent li { text-indent:-1em; padding-left:1em;}
.block__inner h2 { font-size:22px; margin-bottom:10px;}
.block__inner h3 { font-size:18px; margin-bottom:10px;}*/

.block__item { padding:10px 0;}
.block__item p,
.block__item ul { margin:0 5px;}
.block__item ol { padding:0 5px 15px 5px;counter-reset: section;}
.block__item ol li { list-style:none; padding:0 0 5px 0px;}
.block__item ol li:last-child { padding-bottom:0;}
.block__item ol ol { padding-top:10px; padding-bottom:10px;}
.block__item ol>li:before {
    content : '('counters(section, '-') ') ';
    counter-increment : section;
}
/*@ptop
/////////////////////////////////////////////////////////////////////*/
@-webkit-keyframes buzz {
  50% {
  -webkit-transform:translateX(3px) rotate(2deg);
  transform:translateX(3px) rotate(2deg);
  }
  100% {
  -webkit-transform:translateX(-3px) rotate(-2deg);
  transform:translateX(-3px) rotate(-2deg);
  }
}
@keyframes buzz {
  50% {
  -webkit-transform:translateX(3px) rotate(2deg);
  transform:translateX(3px) rotate(2deg);
  }
  100% {
  -webkit-transform:translateX(-3px) rotate(-2deg);
  transform:translateX(-3px) rotate(-2deg);
  }
}

#ptop {
  position:fixed;
  bottom:10px;
  right:10px;
  z-index:999;
  display:none;
  -webkit-transition:all 0.5s;
  transition:all 0.5s;
}
#ptop a {
  display:block;
  width:92px;
  height:92px;
  text-indent:-9999px;
  background:rgba(234, 151, 44, 0.8); border-radius:50%;
  position:relative;
}
#ptop a:before {
  content:"";
  display:block;
  width:45px;
  height:40px;
  position:absolute; top:35px; left:50%;
  margin-left:-22.5px;
}
/*#ptop a:after {
  content:''; display:block; width:50px; height:57px;
  background:url(../img/koiking1.png) no-repeat;
  background-size:contain;
  position:absolute; top:-13px; left:25px;
  -webkit-transform:rotate(16deg);
  -moz-transform:rotate(16deg);
  -ms-transform:rotate(16deg);
  transform:rotate(16deg);
  -webkit-transition:all 0.2s; transition:all 0.2s;
  -webkit-transform:perspective(1px) translateZ(0);
  transform:perspective(1px) translateZ(0);
}*/
#ptop a:hover:after {
  -webkit-animation-name:buzz; animation-name:buzz;
  -webkit-animation-duration:0.15s; animation-duration:0.15s;
  -webkit-animation-timing-function:linear; animation-timing-function:linear;
  -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite;
}
#ptop a:hover { background:rgba(224, 121, 4, 0.9);}
#ptop.end { bottom:160px;}


/*＠media
///////////////////////////////////////////////////////*/
/*
 * This @media comment out is quick fix for anchor link jump.
 * @media and font-size changing make wrong position in WebView.
 * If you don't need this fix and want to separate styles for pc and sp,
 * remove this comment out.
 */
/*@media screen and (max-width:720px){*/
  #contentsMain {
    background-size: 12px auto;
  }

  .block {
    width:95%;
    border:4px solid #d5ab6d;
    margin:0 auto 30px;
    padding: 10px 10px;

    font-size: 12px;
    line-height: 1.6;
  }
  .block__inner > p {
    font-size: 12px;
  }
  .block__inner p {
    font-size: 12px;
  }
  .block h1 {
    margin-bottom: 10px
  }
  .block h1 span {
    display:inline-block;
    max-width:80%;
    font-size:20px;
    line-height:1.35;
    position:relative;
  }
  .block h1 span:before,
  .block h1 span:after {
    width:26px;
    height:26px;
    background-size:26px auto;
    margin-top:-14px;
  }
  .block h1 span:before { right:-36px;}
  .block h1 span:after { left:-36px;}
  .block h1 p { font-size:18px;}
  .block h2 {
    font-size: 15px;
    margin-bottom: 0.5em;
  }
  .block__inner {
    padding: 0;
  }
  .block__inner h2 {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .block__item {
    padding: 10px 0;
  }

  #ptop {
    right: 10px;
  }

  #ptop a:after {
    display: none;
  }
  #ptop a {
    width:44px;
    height:44px;
  }
  #ptop a:before {
    width:24px;
    height:20px;
    background:url(../img/top.png) no-repeat;
    background-size: 22px auto;
    top:50%;
    left:50%;
    margin: -11px 0 0 -10px;
  }
  #ptop.end {
    bottom: 50px;
  }
/*}*/

/*
 * This style is also a quick fix for anchor link jump.
 * For details, refer to the above.

@media screen and (min-width:1200px){
  .block {
    width: 1100px;
    padding:40px 40px 30px;
  }
} */

/*PP*/

.lang_alist{
width:85%;
padding:.4em 1em .4em 2em;
display:inline-block;
background:#f4a41a;
transition:all linear .15s;
font-size:1em;
font-weight:700;
color:#fff;
position:relative;
margin-top:4%;
border-radius:8px;
border:4px solid #f4a41a;
}

.lang_alist:after {
content: '';
display: block;
position: absolute;
top: 50%;
margin-top: -.8em;
margin-left: 0.5em;
left: 0;
width: 1em;
height: 1em;
border-bottom: #fff 3px solid;
border-right: #fff 3px solid;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

.top_alist{
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.top_alist li{
width:auto;
border-radius: 8px;
background: #fffcf6;
margin: 5px;
display:inline-block;
padding: 5px;
text-decoration: none;
}

.box {
border:1px dashed #914907;
padding:12px 8px 10px 15px;
margin:0 5px 25px;
}
ol .box { margin:10px 0 5px;}
.box ol { padding-top:0;}