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

WebPush Sample の CSS

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



/**
☆ reCaptcha のロゴを非表示にする方法

右下に表示される reCaptcha のロゴは以下の手順で非表示にする事が出来ます。

1. HTML に reCaptcha を使ってる旨を記載する
↓以下をフッターなどに掲載して下さい

This site is protected by reCAPTCHA and the Google
 <a href="https://policies.google.com/privacy">Privacy Policy</a> and
 <a href="https://policies.google.com/terms">Terms of Service</a> apply.


2. CSS で非表示にする
.grecaptcha-badge { display: none }

~~~

詳細は↓などを参考にして下さい。
https://motoki-design.co.jp/wordpress-customize/blog/hide-recaptcha/

以上です。
*/



body {
  word-wrap       : break-word;
  overflow-wrap   : break-word;
  margin          : 0;
  padding         : 0;
  background-color: #f7f7f7;
}
ol li, ul li {
  padding-bottom: 15px;
}
fieldset {
  border: 0;
}
.annotation {
  font-size  : .8em;
  line-height: 1.1;
  color      : grey
}

.img {
  min-height: 200px;
  width     : 100%;
  max-width : 400px;
}
.title {
  font-size: 1.3em;
  color    : darkolivegreen;
}

/*
#webpush_message_box__unsupported
, #webpush_message_box__must_pwa
, #webpush_message_box__denied
, #webpush_message_box__has_token
, #webpush_message_box__has_not_token
, #requestPermissionArea
, #subscribe_token
{
  display: none;;
}
*/



.button--red {
  background-color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
}

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

header, footer {
  background: #e2f0f2;
}
header h1 {
  font-size: 1.1em;
  margin   : 0;
  padding  : 10px 0 0 ;
}
.subtitle {
  font-size  : 1.05rem;
  font-weight: 550;
  margin-top : 25px;

}

.mainbox {
  @media screen and (min-width: 600px) {
    display: flex;
  }
}
.mainbox__left {
  padding      : 0px 20px;
  word-wrap    : break-word;
  overflow-wrap: break-word;

  justify-content: flex-start;

  @media screen and (min-width: 600px) {
    flex           : 1 0 auto;
    width: calc(100% - 420px);
  }
}
.mainbox__right {
  background: #f2dcdc;
  padding   : 15px;
  font-size : .9em;

  @media screen and (min-width: 600px) {
    overflow-y : auto;
    box-sizing : border-box;
    position   : -webkit-sticky;
    position   : sticky;
    top        : 20px;
    width      : 380px;
    height     : 80vh;
    margin-left: 20px;
  }
}