@charset "utf-8";
/*------------------
base.css
------------------*/

@layer base {
  :root {
    --color-primary: #aaeadb;
    --color-secondary: #F9B772;
    --color-bg-default: #FDF6E6;
    --color-bg-default2:#fcfcec;
    --transition-duration: 200ms;

    --cl-black: #535453;
    --cl-white:#fefefe;
    --cl-red:#e60044;

    --color-bg01: #eeeeee;
    --color-bg02: #edfff0;
    --color-bg03: #e8f7fd;
    --color-bg04: #f9edf1;
    --color-bg05: #fdf0e6;
    --color-bg06: #fbffd5;

    --box-shadow:0px 5px 15px 0px rgba(0, 0, 0, 0.35);

    --text-xs:.75rem;
    --text-base:1rem;
    --text-lg:1.125rem;
    --text-xl:1.25rem;
    --text-2xl:1.5rem;
    --text-3xl:1.875rem;
    --text-4xl:2.25rem;
    --text-5xl:3rem;

    --mt-2:calc(.25rem * 2);
    --mt-6:calc(.25rem * 6);
    --mt-10:calc(.25rem * 10);
    --mt-15:calc(.25rem * 15);
    --mt-20:calc(.25rem * 20);
    --mt-25:calc(.25rem * 25);
    --mt-30:calc(.25rem * 30);
    --mt-35:calc(.25rem * 35);
  }
  header{
    padding:3em;
  }
  header h1{
    font-size:var(--fs-ttl-m);
  }
  footer{
    text-align: center;
    padding:1em;
  }
  main{
    width:calc(100% - 6%);
    max-width: 1200px;
    padding: 3%;
    margin-inline: auto;
    background: var(--cl-white);
    border-radius: 6px;
  }
  .all-area{
    display: grid;
    grid-template-columns: 2.3fr 1fr;
    gap: 2em;
  }
  .secondary{
    padding:2em;
    background:var(--color-bg-default);
    border-radius: 6px;
  }
  @media only screen and (max-width: 1024px) {
    main{
      padding:5% 3%;
    }
    .all-area{
      display: block;
    }
    .secondary img{
      width:50%;
      display: block;
      margin-inline: auto;
    }
  }

  @media only screen and (max-width: 599px) {
    header{
      padding:1em;
    }
    .secondary{
      margin-top:5em;
      padding:1em;
    }
    .secondary img{
      width:70%;
    }
  }
  
}



/* wordpress css ------------------------------------------------------------------------------------------- */

/* ブロックエディタ使用ページ
---------------------------------------------------------------- */

.editor-page {
  clear: both;
  /* overflow: hidden; */
}
.edit-post-visual-editor__content-area {
  width: 100%;
}
.editor-styles-wrapper {
  max-width: calc(var(--contents-max-width) + 6%);
  /* padding: 0 3% 3% !important; */
}
.editor-styles-wrapper > div{
  padding: 0 3% 3% !important;
}
.editor-page :is(.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.aligncenter, .wp-block-image.alignleft, .wp-block-image.alignright) {
  display: block;
}

/* リストスタイル---------------- */
.editor-page ul li {
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 20px;
}
.editor-page ol li {
  list-style-type: decimal;
  list-style-position: outside;
  margin-left: 20px;
}

/* 画像配置---------------- */
.editor-page img.alignright {
  float: right;
}
.editor-page img.alignleft {
  float: left;
}
.editor-page .aligncenter {
  display: block;
 margin-inline:auto;
}
.editor-page .aligncenter img{
  margin-inline: auto;
}

@media only screen and (max-width: 768px) {
  .editor-page img.alignright {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .editor-page img.alignleft {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 編集ボタン */
.btn-edit {
  bottom:.5em;
  left:.5em;
  position:fixed;
  z-index:99;
}
.btn-edit a {
  background: var(--color-secondary);
  color: var(--cl-white);
  padding: .8em;
  border-radius: 6px;
  font-size: var(--fs-default);
  box-shadow: var(--box-shadow);
}
.btn-edit a i {
  font-size: 1.5em;
  margin-right: .3em;
}