@media screen and (min-width:961px) { .spOnly { display:none !important; } }
@media screen and (max-width:960px) { .pcOnly { display:none !important; } }

/************************************************************************
  
************************************************************************/
html { color:#ffffff; }
img { vertical-align:bottom; border:0; }
body { /*font-family:'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝",sans-serif;*/ font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", Arial, sans-serif; color:#fff; min-height:100vh; font-size:16px; }

* { box-sizing:border-box; }
.pointer-events { pointer-events:none; }


/* SP */
@media screen and (max-width:960px){
body{  }
}
/************************************************************************
  body
************************************************************************/
body { background-color:#f7f9fb; color:#333333; line-height:1; font-size:0; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
html { background-color:transparent; }
body { background:url('../img/bg_sp.png') #e8eff7 top center; background-size:100% auto; }
}
/************************************************************************
  
************************************************************************/
.dp-none { display:none; }
p.img { font-size:0 }
h2 { font-size:0; }

a:hover { cursor:pointer !important; }
.mb60 { margin-bottom:60px !important; }

.elem{
word-break:keep-all;
line-break:strict;
word-wrap:break-word;
overflow-wrap:break-word;
}
span.elem { display:inline; }

a.pe-none { pointer-events:none; }

.alignC { text-align:center !important; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
.mb60 { margin-bottom:calc(60px * 0.7) !important; }
}
/************************************************************************
  header
************************************************************************/
header { margin-bottom:-61px; height:792px; position:relative; }

header h1 { margin:auto; height:700px; background:url('../img/main_image.png') no-repeat center top transparent; background-size:auto 100%; font-size:0; position:absolute; top:0; right:0; left:0; z-index:-1; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
header {
  margin-bottom:0;
  height:calc(1100/750*100vw);
  background:url('../img/sp/main_image_sp@2x.png') no-repeat center top;
  background-size:auto 100%;
}
header h1 { display:none; }
}
/************************************************************************
  #bg-fixed
************************************************************************/
#bg-fixed { width:100%; height:1137px; background:url('../img/bg_fixed.png') no-repeat bottom center; background-attachment:fixed; position:relative; z-index:-1; transition:1s ease-out; position:fixed; bottom:0; opacity:0; }
#bg-fixed.fixed { opacity:1; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#bg-fixed { height:calc(670/750*100vw); background-image:url('../img/bg_fixed_sp.png'); background-size:100% auto; }
}
/************************************************************************
  section
************************************************************************/
/* ============ smart phone ============ */
@media screen and (max-width:750px){
main { padding-top:calc(115/750*100vw); padding-bottom:calc(200/750*100vw); overflow:hidden; }
}
/************************************************************************
  section
************************************************************************/
main section { margin:auto auto 70px; }
main section h2 { margin:auto auto 30px; width:850px; height:120px; position:relative; }
main section h2::before { content:''; background-repeat:no-repeat; background-size:100%; display:block; position:absolute; }
main section h2::after { content:''; background-repeat:no-repeat; background-size:100%; display:block; position:absolute; }
main section h2 img { width:100%; height:auto; }
main section h3 { margin:auto auto 30px; }
main section h3 img { width:100%; height:auto; }

main section p { margin:auto auto 1.5em; width:820px; line-height:calc(30 /20); text-align:center; font-size:20px; }
main section p:last-child { margin-bottom:0; }

main section ul, main section ol { margin:0 auto; width:820px; }
main section li { margin:0; text-align:left; line-height:calc(26/20); font-size:20px; }

main section a, main section a:visited { color:#1999e5; text-decoration:underline; }
main section a:hover { color:#1999e5; text-decoration:none; }
.cookie-text a { color:dodgerblue; }

/* ============ fujii追記 ============ */
.bg.plus {
  margin-bottom: 10px;
}
.bg.plus .contents {
  width: 740px;
}
main .bg.plus section h2 {
  margin:0 auto 15px;
  width:338px;
}
.tab_top h2 {
  margin:0 auto 65px;
  width:287px;
}
main .bg.plus #section-010 h2 {
  width:287px;
}
main .bg.plus section h3 {
  margin:0 auto 26px;
}
main .bg.plus #section-007 h3 {
  width:139px;
}
main .bg.plus #section-008 h3 {
  width:166px;
}
main .bg.plus #section-009 h3 {
  width:112px;
}
main .bg.plus #section-010 h3 {
  width:185px;
}
main .bg.plus #section-011 h3 {
  width:185px;
}
main .bg.plus #section-012 h3 {
  width:180px;
}
main .bg.plus #section-013 h3 {
  width:143px;
}
main .bg.plus #section-014 h3 {
  width:300px;
}
main .bg.plus #section-015 h3 {
  width:231px;
}
main .bg.plus #section-016 h3 {
  width:216px;
}
main .bg.plus #section-017 h3 {
  width:326px;
}
main .bg.plus #section-018 h3 {
  width:220px;
}
main .bg.plus #section-019 h3 {
  width:152px;
}
main .bg.plus #section-020 h3 {
  width:106px;
}
main .bg.plus #section-021 h3 {
  width:154px;
}
main .bg.plus #section-022 h3 {
  width:168px;
}
main .bg.plus #section-023 h3 {
  width:184px;
}
main .bg.plus #section-024 h3 {
  width:137px;
}
main .bg.plus section h4 {
  margin:0 auto 30px;
  width:748px;
  position:relative;
}
main .bg.plus section h4 img,
main .bg.plus section .gamen img,
.block_btn_list img,
.tab_top img {
  width: 100%;
  height: auto;
}
main .bg.plus section h4::before {
    content: '';
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    position: absolute;
}
main .bg.plus #section-007 h4::before {
  width: 466px;
  height: 271px;
  background-image: url(../img/chara.png);
  top: -150%;
  right: -25%;
}
main .bg.plus #section-008 h4::before {
  width: 194px;
  height: 194px;
  background-image: url(../img/chara2.png);
  top: -127%;
  left: 1%;
}
main .bg.plus #section-009 h4::before {
  width: 149px;
  height: 240px;
  background-image: url(../img/chara3.png);
  top: -150%;
  right: -9%;
}
main .bg.plus #section-010 h4::before,
main .bg.plus #section-015 h4::before,
main .bg.plus #section-020 h4::before {
  width: 212px;
  height: 184px;
  background-image: url(../img/chara5.png);
  top: -88%;
  right: -22%;
}
main .bg.plus #section-015 h4::before {
  top: -40%;
  right: -22%;
}
main .bg.plus #section-020 h4::before {
  top: -103%;
  right: -19%;
}
main .bg.plus #section-011 h4::before,
main .bg.plus #section-016 h4::before,
main .bg.plus #section-021 h4::before {
  width: 156px;
  height: 193px;
  background-image: url(../img/chara6.png);
  top: -33%;
  left: -15%;
}
main .bg.plus #section-016 h4::before {
  top: -75%;
  left: -13%;
}
main .bg.plus #section-021 h4::before {
  top: -69%;
  left: -15%;
}
main .bg.plus #section-012 h4::before,
main .bg.plus #section-017 h4::before,
main .bg.plus #section-022 h4::before {
  width: 180px;
  height: 194px;
  background-image: url(../img/chara7.png);
  top: -90%;
  right: -20%;
}
main .bg.plus #section-017 h4::before {
  top: -101%;
  right: -20%;
}
main .bg.plus #section-022 h4::before {
  top: -62%;
  right: -17%;
}
main .bg.plus #section-013 h4::before,
main .bg.plus #section-018 h4::before,
main .bg.plus #section-023 h4::before {
  width: 210px;
  height: 269px;
  background-image: url(../img/chara8.png);
  top: -164%;
  left: -21%;
}
main .bg.plus #section-018 h4::before {
  top: -110%;
  left: -21%;
}
main .bg.plus #section-023 h4::before {
  top: -158%;
  left: -21%;
}
main .bg.plus #section-014 h4::before,
main .bg.plus #section-019 h4::before,
main .bg.plus #section-024 h4::before {
  width: 257px;
  height: 205px;
  background-image: url(../img/chara9.png);
  top: -82%;
  right: -24%;
}
main .bg.plus #section-019 h4::before {
  top: -94%;
  right: -24%;
}
}
main .bg.plus #section-024 h4::before {
  top: -89%;
  right: -27%;
}
main .bg.plus section .gamen {
  margin: -53px auto 26px;
  width:748px;
}
.rectangle {
  background: #f4f4ea;
  border-radius: 10px;
  padding: 25px;
  margin-bottom: 106px;
}
.rectangle span {
  color: #ad9f64;
  text-align: center;
  display: block;
  font-size: 17px;
  margin-bottom: 21px;
}
.rectangle p {
  width: inherit;
  text-align: left;
}
.bg.plus .under_section .rectangle {
  margin-bottom: 90px;
}
.bg.plus #section-014 .rectangle,
.bg.plus #section-019 .rectangle,
.bg.plus #section-024 .rectangle {
  margin-bottom: 70px;
}
.bg.plus .note {
  text-align: left;
  width: 740px;
}
main .bg.plus #section-009 .rectangle {
  position: relative;
}
main .bg.plus #section-009 .rectangle::before {
  content: '';
  background-repeat: no-repeat;
  background-size: 100%;
  display: block;
  position: absolute;
  width: 78px;
  height: 101px;
  background-image: url(../img/chara4.png);
  bottom: -40%;
  left: -12%;
}
.block_btn_list {
  width: 740px;
  margin: 0 auto 107px;
  display: -ms-flexbox;
  display: flex;
  -ms-justify-content: space-between;
  justify-content: space-between;
}
.block_btn_list li a {
  transition:all .5s;
}
.block_btn_list li a:hover {
  opacity: 0.5;
}

/************************************************************************
  #switch
************************************************************************/
#switch {
  width: 740px;
  margin: 0 auto 85px;
  display: -ms-flexbox;
  display: flex;
  -ms-justify-content: space-between;
  justify-content: space-between;
}
#switch li {
 width:242px;
 height:71px;
 background-repeat:no-repeat;
 background-size:100% auto;
}
#switch li:last-child { margin-right:0; }
#switch li img { width:100%; }
#switch li a { width:100%; height:100%; display:block; }
#switch li a:hover img { display:none; }

#switch li.active img { display:none; }
.tab_contents {
    display: none;
}
.tab_contents.active {
    display: block;
}
#btn-stage-1 { background-image:url('../img/btn_stage_1_on.png'); }
#btn-stage-2 { background-image:url('../img/btn_stage_2_on.png'); }
#btn-stage-3 { background-image:url('../img/btn_stage_3_on.png'); }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#switch {
  width: 100%;
  margin-bottom:calc(60/750*100vw);
}
#btn-stage-1 { background-image:url('../img/btn_stage_1_on_sp@2x.png'); }
#btn-stage-2 { background-image:url('../img/btn_stage_2_on_sp@2x.png'); }
#btn-stage-3 { background-image:url('../img/btn_stage_3_on_sp@2x.png'); }

}

@media screen and (max-width:750px){
 main .bg.plus section {
    margin: auto auto calc(90/750*100vw);
 }
 .tab_top h2 {
  width: calc(315/750*100vw);
  margin-bottom: calc(49/750*100vw);
 }
 main .bg.plus section h3 {
  margin: 0 auto calc(22/750*100vw);
 }
 main .bg.plus #section-007 {
  padding-top: calc(25/750*100vw);
 }
 main .bg.plus #section-007 h3 {
  width:calc(166/750*100vw);
 }
 main .bg.plus #section-008 h3 {
  width:calc(196/750*100vw);
 }
 main .bg.plus #section-009 h3 {
  width:calc(136/750*100vw);
 }
 main .bg.plus #section-010 h3 {
  width:calc(223/750*100vw);
 }
 main .bg.plus #section-011 h3 {
  width:calc(222/750*100vw);
 }
 main .bg.plus #section-012 h3 {
  width:calc(207/750*100vw);
 }
 main .bg.plus #section-013 h3 {
  width:calc(171/750*100vw);
 }
 main .bg.plus #section-014 h3 {
  width:calc(352/750*100vw);
 }
 main .bg.plus #section-015 h3 {
  width:calc(278/750*100vw);
 }
 main .bg.plus #section-016 h3 {
  width:calc(251/750*100vw);
 }
 main .bg.plus #section-017 h3 {
  width:calc(385/750*100vw);
 }
 main .bg.plus #section-018 h3 {
  width:calc(257/750*100vw);
 }
 main .bg.plus #section-019 h3 {
  width:calc(178/750*100vw);
 }
 main .bg.plus #section-020 h3 {
  width:calc(128/750*100vw);
 }
 main .bg.plus #section-021 h3 {
  width:calc(183/750*100vw);
 }
 main .bg.plus #section-022 h3 {
  width:calc(202/750*100vw);
 }
 main .bg.plus #section-023 h3 {
  width:calc(218/750*100vw);
 }
 main .bg.plus #section-024 h3 {
  width:calc(163/750*100vw);
 }
 main .bg.plus section h4 {
  width:calc(598/750*100vw);
 }
 main .bg.plus section .gamen {
  width:calc(612/750*100vw);
  margin: calc(-90/750*100vw) auto calc(21/750*100vw);
 }
 main .bg.plus #section-007 h4::before {
  width: calc(249/750*100vw);
  height: calc(170/750*100vw);
  background-image: url(../img/sp/chara_sp@2x.png);
  top: -92%;
  right: -13%;
 }
 main .bg.plus #section-007 h4::after {
  content: '';
  background-repeat: no-repeat;
  background-size: 100%;
  display: block;
  position: absolute;
  width: calc(136/750*100vw);
  height: calc(208/750*100vw);
  background-image: url(../img/sp/chara_sp2@2x.png);
  top: -115%;
  left: -12%;
 }
 main .bg.plus #section-008 h4::before {
  width: calc(155/750*100vw);
  height: calc(155/750*100vw);
  background-image: url(../img/sp/chara_sp3@2x.png);
  top: -87%;
  left: -3%;
 }
 main .bg.plus #section-009 h4::before {
  width: calc(119/750*100vw);
  height: calc(192/750*100vw);
  background-image: url(../img/sp/chara_sp4@2x.png);
  top: -91%;
  right: -4%;
 }
 main .bg.plus #section-010 h4::before,
 main .bg.plus #section-015 h4::before,
 main .bg.plus #section-020 h4::before {
  width: calc(154/750*100vw);
  height: calc(147/750*100vw);
  background-image: url(../img/sp/chara_sp6@2x.png);
  top: -15%;
  right: -12%;
 }
 main .bg.plus #section-015 h4::before {
  top: -27%;
  right: -16%;
 }
 main .bg.plus #section-020 h4::before {
  top: -66%;
  right: -16%;
 }
 main .bg.plus #section-011 h4::before,
 main .bg.plus #section-016 h4::before,
 main .bg.plus #section-021 h4::before {
  width: calc(125/750*100vw);
  height: calc(154/750*100vw);
  background-image: url(../img/sp/chara_sp7@2x.png);
  top: -20%;
  left: -5%;
 }
 main .bg.plus #section-016 h4::before {
  left: -6%;
  top: -58%;
 }
 main .bg.plus #section-021 h4::before {
  top: -65%;
  left: -6%;
 }
 main .bg.plus #section-012 h4::before,
 main .bg.plus #section-017 h4::before,
 main .bg.plus #section-022 h4::before {
  width: calc(123/750*100vw);
  height: calc(155/750*100vw);
  background-image: url(../img/sp/chara_sp8@2x.png);
  top: -71%;
  right: -13%;
 }
 main .bg.plus #section-017 h4::before {
  top: -90%;
  right: -12%;
 }
 main .bg.plus #section-022 h4::before {
  top: -46%;
  right: -7%;
 }
  main .bg.plus #section-013 h4::before,
  main .bg.plus #section-018 h4::before,
  main .bg.plus #section-023 h4::before {
  width: calc(159/750*100vw);
  height: calc(215/750*100vw);
  background-image: url(../img/sp/chare_sp9@2x.png);
  top: -149%;
  left: -12%;
 }
 main .bg.plus #section-018 h4::before {
  top: -54%;
  left: -11%;
 }
 main .bg.plus #section-023 h4::before {
  top: -117%;
  left: -12%;
 }
 main .bg.plus #section-014 h4::before,
 main .bg.plus #section-019 h4::before,
 main .bg.plus #section-024 h4::before {
  width: calc(168/750*100vw);
  height: calc(164/750*100vw);
  background-image: url(../img/sp/chara_sp10@2x.png);
  top: -78%;
  right: -12%;
 }
 main .bg.plus #section-019 h4::before {
  top: -38%;
  right: -15%;
 }
 main .bg.plus #section-024 h4::before {
  top: -43%;
  right: -9%;
 }
 .rectangle {
  margin-bottom: calc(118/750*100vw);
 }
 main .bg.plus #section-009 .rectangle::before {
  width: calc(62/750*100vw);
  height: calc(81/750*100vw);
  background-image: url(../img/sp/chara_sp5@2x.png);
  bottom: -27%;
  left: -2%;
}
 .bg.plus .under_section .rectangle,
 .bg.plus #section-012 .rectangle {
   margin-bottom: calc(92/750*100vw);
 }
 main .bg.plus #section-009 .rectangle {
   margin-bottom: calc(120/750*100vw);
 }
 .bg.plus #section-014 .rectangle,
 .bg.plus #section-017 .rectangle,
 .bg.plus #section-019 .rectangle,
 .bg.plus #section-024 .rectangle {
   margin-bottom: calc(80/750*100vw);
 }
 .block_btn_list {
  width: 100%;
  margin-bottom: calc(92/750*100vw);
 }
 .bg.plus .note {
    width: 100%;
  }
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
main section { margin:auto auto calc(120/750*100vw); }
main section:last-child { margin-bottom:0; }

main section h2 { margin:auto auto calc(50/750*100vw); width:calc(610/750*100vw); height:calc(150/750*100vw); position:relative; }
main .bg.plus section h2 {
  margin:0 auto 15px;
  width:calc(370/750*100vw);
  margin:0 auto ;
}
main .bg.plus #section-010 h2 {
  width: calc(315/750*100vw);
}
main section h3 { margin:auto auto calc(40/750*100vw); }

main section p { width:auto; line-height:calc(50/30); font-size:calc(30/750*100vw); }
main section ul, main section ol { width:auto; }
main section li { line-height:calc(50/30); font-size:calc(30/750*100vw); }

}
/************************************************************************
  .note
************************************************************************/
main section p.note { line-height:calc(26 /16); }
main section p.note small { font-size:16px; }

main section div.note { width:820px; }
main section div.note p { margin-bottom:0; line-height:calc(24/16); font-size:16px; text-align:left; }
main section div.note ul li { line-height:calc(24/16); font-size:16px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
main section p.note { line-height:calc(40/24); }
main section p.note small { font-size:calc(24/750*100vw); }

main section div.note { width:auto; }

main section div.note ul li { line-height:calc(40/24); font-size:calc(24/750*100vw); }
}
/************************************************************************
  .disc
************************************************************************/
ul.disc { margin:auto; list-style:disc; }
ul.disc li { margin:auto; }

ul li ul.disc { margin-left:calc(18px *1.3); }
ul li ul.disc li { margin-left:1em; }

h3.disc { margin:0 0 10px; position:relative; left:calc(18px *1.3); }
h3.disc::before { content:''; margin:auto; width:1em; height:1em; background-color:#1999e5; border-radius:50%; display:inline-block; font-size:18px; position:absolute; top:0; bottom:0; left:-1.3em; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
h3.disc { font-size:0; }
h3.disc::before { font-size:calc(18/750*100vw); vertical-align:middle; }
}
/************************************************************************
  .maru-suuji
************************************************************************/
.maru-suuji { margin:0 auto 50px; padding:0; list-style:none; counter-reset:num; }
.maru-suuji li { margin-bottom:20px; margin-left:1.5em; text-indent: -1.5em; }
.maru-suuji li:last-child { margin-bottom:0; }
.maru-suuji li::before { content:counter(num); counter-increment:num; margin-right:0.5em; width:1.2em; height:1.2em; border:1px solid #000000; border-radius:50%; text-indent:0; line-height:1.2; display:inline-block; font-size:80%; font-family:monospace; text-align:center; }
/************************************************************************
  .box
************************************************************************/
.box { margin:auto; padding:50px 0; width:740px; background-color:#f5f6ee; /*filter:drop-shadow(10px 10px 10px rgba(157,147,100,0.32));*/ box-shadow:0 0 10px rgba(157,147,100,0.32); border-radius:20px; }
.box p { width:auto; font-size:18px; }
.box p.note { width:640px; text-align:left; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
.box { margin:auto; padding:calc(50/750*100vw) calc(30/750*100vw); width:calc(590/750*100vw); background-color:#f3f4ed; box-shadow:0 0 calc(10/750*100vw) rgba(157,147,100,0.32); border-radius:calc(20/750*100vw); }
.box p { font-size:calc(28/750*100vw); }
.box p.note { width:auto; }
}
/************************************************************************
  .pict
************************************************************************/
.pict { font-size:0; }
.pict img { width:100%; }
/************************************************************************
  .contents
************************************************************************/
.contents { margin:auto; width:850px; height:100%; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
.contents,
.bg.plus .contents { width:calc(610/750*100vw); }
}
/************************************************************************
  #section-001
************************************************************************/
#section-001 {  }
#section-001 h3 { width:calc(1194px /2); }

#section-001 h2::after { width:calc(444px /2); height:calc(480px /2); background-image:url('../img/sd_001.png'); top:-40px; right:-115px }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#section-001 h2::after { width:calc(164/750*100vw); height:calc(176/750*100vw); top:calc(-90/750*100vw); right:calc(-70/750*100vw); }
#section-001 h3 { width:calc(588/750*100vw); }
}
/************************************************************************
  #section-002
************************************************************************/
#section-002 h2::before { width:calc(510px /2); height:calc(470px /2); background-image:url('../img/sd_002.png'); top:-80px; left:-135px }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#section-002 h2::before { width:calc(187/750*100vw); height:calc(172/750*100vw); top:calc(-90/750*100vw); left:calc(-62/750*100vw); }
}
/************************************************************************
  #section-003
************************************************************************/
#section-003 h2::after { width:calc(604px /2); height:calc(476px /2); background-image:url('../img/sd_003.png'); top:-80px; right:-155px }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#section-003 h2::after { width:calc(227/750*100vw); height:calc(175/750*100vw); top:calc(-115/750*100vw); right:calc(-90/750*100vw); }
}
/************************************************************************
  #section-004
************************************************************************/
#section-004 h2::before { width:calc(526px /2); height:calc(472px /2); background-image:url('../img/sd_004.png'); top:-110px; left:-90px }

#section-004 ul li { margin-bottom:50px; }
/*#section-004 ul li:last-child { margin-bottom:0; }*/
#section-004 ul li ul.disc li { margin:auto; }

#section-004 p.note { text-align:left; }

h3#h3-awards-1 { width:calc(1421px /2) }
h3#h3-awards-2 { width:calc(1189px /2) }


/* ============ smart phone ============ */
@media screen and (max-width:750px){
#section-004 h2::before { width:calc(204/750*100vw); height:calc(174/750*100vw); top:calc(-75/750*100vw); left:calc(-25/750*100vw); }
#section-004 ul li { margin-bottom:calc(50/750*100vw); }

h3#h3-awards-1 { width:calc((934/2)/750*100vw) }
h3#h3-awards-2 { width:calc((1091/2)/750*100vw) }
}
/************************************************************************
  #section-005
************************************************************************/
#section-005 h2::after { width:calc(384px /2); height:calc(884px /2); background-image:url('../img/sd_005.png'); top:-235px; right:-30px }

#section-005 h3 { width:calc(1300px /2); }
#section-005 .pict { margin-bottom:20px; width:calc(968px /2); }

/* .btn */
.btn a { margin:auto; display:block; }
.btn a img { width:100%; }

/* .btn-download */
a.btn-download { width:calc(590px /2); }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#section-005 h2::after { width:calc(142/750*100vw); height:calc(325/750*100vw); top:calc(-155/750*100vw); right:calc(-60/750*100vw); }

#section-005 h3 { width:calc(530/750*100vw); }
#section-005 .pict { margin-bottom:20px; width:calc(486/750*100vw); }

/* .btn-download */
a.btn-download { width:calc(352/750*100vw); }
}
/************************************************************************
  #section-006
************************************************************************/
#section-006 h2::before { width:calc(298px /2); height:calc(404px /2); background-image:url('../img/sd_006.png'); top:-10px; left:-10px }

#sd-007 { width:calc(142px /2) }

p.link { line-height:calc(40/20); }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#section-006 h2::before { width:calc(109/750*100vw); height:calc(149/750*100vw); top:auto; bottom:calc(-45/750*100vw); left:calc(5/750*100vw); }

#sd-007 { width:calc(53/750*100vw); }
}
/************************************************************************
  ul.note
************************************************************************/
ul.note { margin:auto; width:500px; }
ul.note li { padding-left:1.2em; line-height:calc(34/17); font-size:16px; font-weight:normal; }
ul.note li::before { content:'\203B'; margin:0 0 0 -1.2em; font-size:16px; } 

/* ============ smart phone ============ */
@media screen and (max-width:750px){

ul.note { width:100%; }
ul.note li { line-height:calc(44/24); font-size:calc(24/750*100vw); }
ul.note li::before { line-height:calc(44/24); font-size:calc(24/750*100vw); } 

}
/************************************************************************
  small.note
************************************************************************/
small.note  { color:#666666; font-size:14px !important; }

/************************************************************************
  ol.maru
************************************************************************/
ol.maru { margin:auto; width:500px; list-style:none; counter-reset:my-counter; }
ol.maru li { margin-bottom:0.8em; padding:0 0 0 1.2em; line-height:1; font-size:20px; position:relative; font-weight:bold; }
ol.maru li::before { content:counter(my-counter); counter-increment:my-counter; margin:auto; width:20px; height:20px; color:#333333; border:1px solid #333333; border-radius:50%; box-sizing:border-box; display:flex; justify-content:center; align-items:center; line-height:1; font-size:80%; position:absolute; top:0; left:0; } 

/* ============ smart phone ============ */
@media screen and (max-width:750px){

ol.maru { width:100%; }
ol.maru li { font-size:calc(28/750*100vw); }
ol.maru li::before { width:calc(28/750*100vw); height:calc(28/750*100vw); font-size:calc(14/750*100vw); } 

}
/************************************************************************
  footer
************************************************************************/
footer { padding:70px 0 40px; height:auto; background-color:#000000; color:#ffffff; text-align:center; font-size:18px; box-sizing:border-box; position:relative; z-index:0; }

footer nav ul { margin-bottom:50px; display:flex; justify-content:center; }
footer nav ul li { margin-right:2em; line-height:1; }
footer nav ul li:last-child { margin-right:0; }

footer a { text-decoration:underline; }
footer a:hover { color:#ffffff; text-decoration:underline; }

footer p.logo { margin:auto auto 20px; width:calc(471px /2); }
footer p.logo img { width:100%; }
p.copyright { font-size:12px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){

footer { padding:calc(35/750*100vw) 0 calc(25/750*100vw); height:auto; font-size:calc(24/750*100vw); }
footer p.logo { width: calc(352/750*100vw); }
footer nav ul { flex-direction:column; }
footer nav ul li { margin-bottom:1em; margin-right:0; }
footer nav ul li::after { display:none; }
}
/************************************************************************
  #canvas
************************************************************************/
#canvas { background-color:transparent; position:fixed; z-index:1; }
/************************************************************************
  .bg
************************************************************************/
.bg { margin:auto auto 300px; width:1038px; background:url('../img/frame.png') repeat-y top center; display:block; position:relative; z-index:10; }
.bg:nth-child(2) { top:115px; }

.bg::before { content:''; margin:auto; width:1038px; height:100px; background:url('../img/frame_top.png') no-repeat; display:block; position:absolute; top:-100px; right:0; left:0; z-index:0; }
.bg::after { content:''; margin:auto; width:1038px; height:100px; background:url('../img/frame_bottom.png') no-repeat; display:block; position:absolute; bottom:-100px; right:0; left:0; z-index:-1; }
@media screen and (max-width:750px){
  .bg:nth-child(2) {
    top: calc(130/750*100vw);
 }
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
.bg { margin:0 auto 0; width:100%; background-image:url('../img/frame_sp.png'); background-size:100% auto; top:calc(20/750*100vw); }

.bg::before { width:100%; height:calc(100/750*100vw); background-image:url('../img/frame_top_sp.png'); background-size:100% auto; top:calc(-100/750*100vw); }
.bg::after { width:100%; height:calc(100/750*100vw); background-image:url('../img/frame_bottom_sp.png'); background-size:100% auto; bottom:calc(-100/750*100vw); }
}