@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
#pokegomi h1, #pokegomi h2 { overflow: hidden; text-indent: 100%; white-space: nowrap; background-repeat: no-repeat; background-size: contain; }

#suggest { padding: 8px; text-align: center; background-color: #E60115; }
#suggest * { color: #fff !important; display: inline-block; }
@media only screen and (max-width: 767px) { #suggest * { font-size: smaller; } }

#pokegomi { position: relative; background: #fff url(../img/bg.jpg) center center no-repeat; background-size: cover; }
#pokegomi h1 { background: transparent url("../img/logo.png") 3% top no-repeat; background-size: contain; }
#pokegomi h2 { background: transparent url("../img/copy.png") 3% top no-repeat; background-size: contain; }
#pokegomi .present img { height: 100%; width: auto; }
#pokegomi .project { padding: 16px; background-color: #fff; }
#pokegomi .project > *, #pokegomi .project picture { display: inline-block; }
#pokegomi .project a + a { margin-left: 1em; }
@media only screen and (min-width: 768px), print { #pokegomi { min-height: 640px; height: 60%; }
  #pokegomi > * { position: absolute; }
  #pokegomi .ttl { height: 32%; left: 0; right: 0; top: 0; bottom: 28%; margin: auto auto; display: flex; flex-direction: column; }
  #pokegomi h1 { height: 59%; margin-bottom: 1rem; background-position: 0 0; max-height: 108px; }
  #pokegomi h2 { height: 33%; background-position: 0 0; }
  #pokegomi .present { position: absolute; left: 0; right: 0; top: 0rem; bottom: 8rem; margin: auto auto; height: 55%; max-height: 320px; text-align: right; }
  #pokegomi .present img { height: 100%; width: auto; }
  #pokegomi .present .finish { text-align: right; color: #fff; font-size: .6em; }
  #pokegomi .project { bottom: 1.5em; left: 0; right: 0; margin: auto auto; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; }
  #pokegomi .project .img { display: flex; flex-wrap: nowrap; }
  #pokegomi .project .img * { max-height: 40px; width: auto; }
  #pokegomi .project .img a + a { margin-left: .5rem; }
  #pokegomi .project .note { padding-left: 1rem; } }
@media only screen and (min-width: 768px) and (max-width: 1023px), print { #pokegomi .cfb { display: none !important; } }
@media only screen and (max-width: 767px) { #pokegomi { height: 100vh; min-height: 700px; max-height: 750px; background-image: url(../img/bg_sp.jpg); padding: 2rem 0; }
  #pokegomi .ttl { width: 90%; margin: 2rem auto 1rem; }
  #pokegomi h1 { margin-bottom: 1em; height: 13vh; max-height: 96px; }
  #pokegomi h2 { height: 15vh; max-height: 116px; }
  #pokegomi .present { width: 100%; }
  #pokegomi .present img { width: 100%; height: auto; }
  #pokegomi .present .finish { text-align: center; color: #fff; font-size: .6em; }
  #pokegomi .project { position: absolute; bottom: 0; width: 100%; padding: 1.6rem; padding-bottom: 0; }
  #pokegomi .project img { height: 48px; width: auto; }
  #pokegomi .project .cfb { display: none !important; }
  #pokegomi .project .note { padding-top: .5rem; padding-bottom: 2rem; background-size: contain contain; border-bottom: solid 1px #ddd; } }

#concept { padding: 0 0 0 0; }
#concept .box { padding-top: 0; padding-bottom: 0; }
#concept .clm2 > picture img { width: 100%; height: auto; }
#concept p + p { margin-top: 16px; }
#concept * { background-color: transparent; }
@media only screen and (min-width: 768px), print { #concept .box { padding: 4rem 0 5rem 0; background-image: url("../img/concept_bg1.png"), url("../img/concept_bg2.png"), url("../img/concept_bg3.png"); background-position: right 12% top 2rem, right 1rem center, right 32% bottom 3rem; background-repeat: no-repeat,no-repeat,no-repeat; background-size: 4.2% auto, 3% auto, 3% auto; }
  #concept .clm2 { align-items: center; }
  #concept .clm2 > * { width: 49%; margin-top: 0; }
  #concept .clm2 div { padding: 0 1em; } }
@media only screen and (max-width: 767px) { #concept { padding-top: 2rem; padding-bottom: 5rem; background-image: url("../img/concept_bg1.png"), url("../img/concept_bg2.png"), url("../img/concept_bg3.png"); background-position: 4% 1rem, right 1rem bottom 16%, right 32% bottom 3rem; background-repeat: no-repeat,no-repeat,no-repeat; background-size: 7% auto, 5% auto, 5% auto; }
  #concept picture + div { padding-top: 2em; }
  #concept p + p { margin-top: 1.6em; }
  #concept .note { padding-right: 35%; } }

#present .clm2 > picture img { width: 100%; height: auto; }
#present .starterkit { margin-top: 1rem; padding-left: 8px; border-left: 4px solid #ddd; }
#present .blueship { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid #ddd; }
#present .blueship dd { padding-top: .5em; }
@media only screen and (min-width: 768px), print { #present .clm2 > * { width: 48.5%; margin-top: 0; }
  #present .clm2 picture { position: relative; background-color: #FFE8D9; }
  #present .clm2 picture > * { position: absolute; top: 0; bottom: 0; margin: auto auto; } }

#howto [class^="step"] figure img, #howto [class^="step"] picture img, #howto .special figure img, #howto .special picture img { margin-top: 0; width: 100%; height: auto; }
#howto [class^="step"] .box h3, #howto .special .box h3 { color: #323882; padding-top: 13px; padding-left: 96px; min-height: 54px; font-weight: bold; line-height: 1.2em; background: transparent url("../img/num1.png") left center no-repeat; background-size: auto 54px; }
#howto [class^="step"] a.txt, #howto .special a.txt { display: inline-block; margin-top: .4em; margin-left: 1em; margin-right: 0; white-space: nowrap; }
#howto .bnr a img { display: block; border: 2px solid #FFE8D9; }
#howto .box .btn { display: inline-block; max-width: 240px; width: 70%; }
#howto .step2 .box h3 { background-image: url("../img/num2.png"); }
#howto .step3 .box h3 { background-image: url("../img/num3.png"); }
#howto .step4 .box h3 { padding-left: 108px; padding-top: 0; background-image: url("../img/num4.png"); }
#howto .l_btn { margin-top: 2em; }
@media only screen and (min-width: 768px), print { #howto [class^="step"], #howto .special { align-items: center; }
  #howto [class^="step"] > *, #howto .special > * { width: 50%; }
  #howto [class^="step"] .bnr .note, #howto .special .bnr .note { margin-top: .5em; }
  #howto .special > picture { width: 54%; padding-right: 4%; }
  #howto .special .box { width: 46%; }
  #howto .special .box img { width: 100%; height: auto; }
  #howto .step2, #howto .step4 { flex-direction: row-reverse; }
  #howto .special { padding-bottom: 3em; }
  #howto .step1 { padding-bottom: 7em; background: url("../img/howto_bg1.png") left 52% bottom 0.5em no-repeat; background-size: 13% auto; }
  #howto .step2 { padding-bottom: 5em; background: url("../img/howto_bg2.png") left 56% bottom no-repeat; background-size: 13% auto; }
  #howto .step3 { padding-bottom: 5em; background: url("../img/howto_bg3.png") left 50% bottom no-repeat; background-size: 13% auto; }
  #howto .step4 { padding-bottom: 5em; background: url("../img/howto_bg4.png") left 54% bottom no-repeat; background-size: 13% auto; } }
@media only screen and (min-width: 768px) and (max-width: 1023px), print { #howto [class^="step"] .box h3, #howto .special .box h3 { min-height: 42px; padding-top: 6px; padding-left: 76px; background-size: auto 42px; }
  #howto .step4 .box h3 { padding-left: 82px; padding-top: 0; background-image: url("../img/num4.png"); } }
@media only screen and (max-width: 767px) { #howto [class^="step"] img, #howto .special img { display: block; }
  #howto [class^="step"] .box, #howto .special .box { width: 100%; margin-top: 0; }
  #howto [class^="step"] .box h3, #howto .special .box h3 { min-height: 36px; padding-top: 8px; padding-left: 64px; background-size: auto 36px; }
  #howto [class^="step"] { margin-bottom: 1.6rem; }
  #howto .step4 .box h3 { padding-left: 72px; padding-top: 0; background-image: url("../img/num4.png"); } }

#bs-guide h2 + div { background-color: #fff; }
#bs-guide h3 { color: #323882; }
#bs-guide .accordion { padding: 2rem 2rem 0; }
#bs-guide .accordion + .accordion { border-top: 1px solid #ddd; }
#bs-guide .accordion > h3 { padding-bottom: 2rem; }
#bs-guide .accordion > div { padding-bottom: 2rem; }
#bs-guide .accordion dl + dl { margin-top: 1rem; }
#bs-guide .accordion dt { margin-bottom: 1em; padding: 0.7em 8px; background-color: #ddd; height: 2.4em; border-radius: .2em; line-height: 1em !important; font-weight: normal; }
#bs-guide .accordion dt span { display: inline-block; margin-top: -0.3em; width: 1.6em; height: 1.6em; border-radius: 50%; text-align: center; background-color: #fff; vertical-align: middle; font-weight: bold; font-family: 'Poppins' !important; }
#bs-guide .accordion dl:first-child dt { margin-top: 0 !important; }
#bs-guide .accordion .clm2 figure img { width: 100%; height: auto; }
#bs-guide .accordion .clm2 span.note a { display: inline-block; margin-top: 1.6em; }
#bs-guide .accordion .clm2 a.btn { margin-top: 16px; display: inline-block; }
@media only screen and (min-width: 1024px) { #bs-guide .clm2 figure { width: 32%; }
  #bs-guide .clm2 p { width: 65%; } }
@media only screen and (min-width: 768px) and (max-width: 1023px), print { #bs-guide .clm2 figure { width: 48%; }
  #bs-guide .clm2 p { width: 49%; } }
@media only screen and (max-width: 767px) { #bs-guide .accordion { padding: 1.6rem 1rem 0; }
  #bs-guide .accordion h3 { padding-bottom: 1.6rem; }
  #bs-guide .accordion > div { padding-bottom: 0; }
  #bs-guide .clm2 { align-items: center; padding-bottom: 1.6rem; }
  #bs-guide .clm2 figure { margin-bottom: 1rem; }
  #bs-guide .clm2 figure img { display: block; } }

#download h3 { color: #ff784e; }
#download h4, #download #bs-guide .accordion dt, #bs-guide .accordion #download dt { margin: 1.6rem 0 0; border-top: 1px solid #ddd; padding-top: 1.6rem; }
#download [class^="clm"] { margin-top: 0; }
#download [class^="clm"] .icon, #download [class^="clm"] .cover { margin-top: 1.6rem; }
#download [class^="clm"] figure { margin-bottom: 8px; }
#download [class^="clm"] figure img { border: 1px solid #ddd; }
#download [class^="clm"] .icon { display: flex; flex-direction: column; }
#download [class^="clm"] .icon figure { display: inline-block; }
#download [class^="clm"] .icon figure img { width: 96px; height: 96px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; }
#download [class^="clm"] .cover img { width: 100%; height: auto; }
#download [class^="clm"] a.s_btn { display: inline-block; }
@media only screen and (min-width: 768px), print { #download .clm2 > * { width: 49%; } }
@media only screen and (max-width: 767px) { #download .clm3 .icon { flex-direction: row; align-items: center; }
  #download .clm3 .icon figure { margin-right: 1rem; margin-bottom: 0; } }

#organizer h3 { line-height: 0; }
#organizer h3 img { width: auto; }
#organizer .project { margin-top: 16px; border-top: 1px solid #ccc; padding-top: 16px; }
#organizer a { display: inline-block; }
@media only screen and (min-width: 1024px) { #organizer h3 img { height: 48px; }
  #organizer .project h3 img { height: 36px; } }
@media only screen and (min-width: 768px) and (max-width: 1023px), print { #organizer h3 img { height: 32px; }
  #organizer .project h3 img { height: 24px; } }
@media only screen and (max-width: 767px) { #organizer h3 img { height: 28px; }
  #organizer .project h3 img { height: 24px; } }