/* /////////////////////////*/

#mv { background:url(./img/mv-bg.png) center bottom; background-size:cover; margin:0; padding:40px 0 0; }
#mv h2 { width:80%; margin:auto; padding:80px 0; }

#mv h2::before,
#mv h2::after,
main h3::after { display:none; }

/*横幅が大きい画像用*/
img.screen_image   { width:450px; height:auto; }
/*横幅が小さい画像用 320px以下*/
img.no_resizing { width:auto !important; height:auto; }
section p    {overflow-wrap:anywhere; word-break:normal; line-break:strict; }
section div figure { display:flex; justify-content:center; align-items:top; }

/*----------------
ステップリスト
----------------*/
main #step-list h2          { color:green; }
main #step-list h2:before, main #step-list h2:after { border:solid green; border-width:2px 0; }

#step-list ol { counter-reset:number; list-style-type:none !important; padding:0.3em 0.8em; border:solid 5px green; border-radius:20px; }
#step-list ol li { border-bottom:dashed 1px green; position:relative; padding:0.5em 0.5em 0.5em 30px; line-height:1.5em; }
#step-list ol li:before { position:absolute; counter-increment:number; content:counter(number); display:inline-block; background:green;       color:white; font-family:'Avenir','Arial Black','Arial',sans-serif; font-weight:bold; font-size:1em; border-radius:50%;       left:0; width:25px; height:25px; line-height:25px; text-align:center; top:50%;       -webkit-transform:translateY(-50%); transform:translateY(-50%);}
#step-list ol li:last-of-type { border-bottom:none; }
#step-list ol li a   { color:green; }

/*----------------
インストール
----------------*/
#install h2 { color:#09E; }
#install h3 { position:relative; padding:1em 1em 1em 2em; border-radius:10px; background:#09E; color:#fff;}
#install h3::before { position:absolute; content:'●'; left:0.5em; color:#ffffff; }


/*----------------
ステップ詳細
----------------*/
.step article     { max-width:100%; margin:0 auto; border:5px solid #ffc400; border-radius:20px; color:#333333; margin-top:30px; margin-bottom:4em; }
.step article h3  { display:inline-flex; align-items:center; column-gap:4px; position:relative; top:-25px; left:10px; margin:0 7px; padding:5px 1em;                   background:#fff; color:#ffa000; font-weight:600; vertical-align:top; border:solid 5px #ff8900; border-radius:20px; background:#fffac8;}
.step article div { margin:0; padding:0 1.5em 1em; }

/*step1 カラー変更*/
#step1 h2                         { color:#ffa000; }
#step1 h2:before, #step1 h2:after { border:solid #ffa000; border-width:2px 0; }

/*step2 カラー変更*/
#step2 h2                         { color:#ff47ff; }
#step2 h2:before, #step2 h2:after { border:solid #ff47ff; border-width:2px 0; }
#step2 article                    { border:5px solid #ff9cff; }
#step2 article h3                 { color:#ff47ff; border:solid 5px #ff70cc; background:#ffe3ff; }

/*step3 カラー変更*/
#step3 h2                         { color:#7c9300; }
#step3 h2:before, #step3 h2:after { border:solid #7c9300; border-width:2px 0; }
#step3 article                    { border:5px solid #b9d22e; }
#step3 article h3                 { color:#7c9300; border:solid 5px #7cb300; background:#fffac8; }


/*----------------
デスクトップメイトメニューの説明
----------------*/
dl.menus      { border:solid 2px #7c9300; border-radius:10px; padding:0.5em 1em; position:relative; }
dl.menus dt   { line-height:1.5; padding:0.5em 0; list-style-type:none!important; font-weight:bold; color:#7c9300; }
dl.menus dt a { background:linear-gradient(transparent 50%, #fffac8 50%); color:#7c9300; text-decoration:none; }
dl.menus dt:before { display:inline-block; vertical-align:middle; content:''; width:1em; height:1em; background:#7c9300; border-radius:50%; margin-right:8px; }
dl.menus dd   { margin:0; }




.step article div.box-01 { width:100%; margin:0 auto 1em auto; border:2px solid #7cb300; border-radius:10px; overflow:hidden; background:#fffac8; padding:0; }
.box-01 span { padding:.5em .8em; background-color:#7cb300; color:#fff; line-height:2; }
.box-01 p    { margin:0; padding:1em 1.5em; color:#333; }
.step article div.box-01 figure { display:flex; justify-content:space-between; gap:0 1em; align-items:center; line-height:1.5; }
div.box-01 figure img           { width:30%; }
div.box-01 figure dl            { border:solid 2px #7c9300; font-size:0.875em; padding:1em; border-radius:10px; }
div.box-01 figure dl dt         { line-height:1.5; padding:0.5em 0; list-style-type:none!important; font-weight:bold; color:#7c9300; }
div.box-01 figure dl dt:before  { display:inline-block; vertical-align:middle; content:''; width:1em; height:1em; background:#7c9300; border-radius:50%; margin-right:8px; }
div.box-01 figure dl dd         { margin:0; }

html { scroll-padding-top:75px; scrollbar-color: #09E #f1f1f1;}

/*----------------
	レスポンシブ
----------------*/
@media (max-width:768px){
  html   { scroll-padding-top:0px; }
	#mv h2 { padding:50px 0; }

  #step3 article h3 { font-size:1em; }
  /*横幅が大きい画像用*/
  figure             { width:100%; margin:0; padding:0; }
  img.screen_image   { width:100%; height:auto; }


  .step article div.box-01 figure { flex-direction:column; margin:1em; width:auto; gap:1em 0; }
  div.box-01 figure img           { width:100%;}
}