/*
Theme Name: +labo
Theme URI: https://plus-labo.com/
Author: +labo
Author URI: https://plus-labo.com/
Description: ＋labo（プラスラボ）不登校訪問支援カウンセラー オリジナルテーマ
Version: 1.0.0
Text Domain: plus-labo
*/

/* =====================================================
   Reset
===================================================== */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  font-size:100%;
}

body{
  margin:0;
  padding:0;
  color:#5f4636;
  background:#fcfaf7;
  font-family:
    "Noto Sans JP",
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
  line-height:1.8;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{
  max-width:100%;
  height:auto;
  vertical-align:bottom;
}

a{
  color:inherit;
  text-decoration:none;
  transition:.3s;
}

ul{
  list-style:none;
  margin:0;
  padding:0;
}

h1,h2,h3,h4,h5,h6,p{
  margin:0;
}


/* =====================================================
   WordPress base
===================================================== */
.aligncenter{
  display:block;
  margin:0 auto;
}

.alignleft{
  float:left;
  margin:0 24px 24px 0;
}

.alignright{
  float:right;
  margin:0 0 24px 24px;
}

.wp-caption{
  max-width:100%;
}

.screen-reader-text{
  position:absolute;
  left:-9999px;
}

/* =====================================================
   Variables
===================================================== */
:root{
  --pink:#c86a96;
  --pink-dark:#9d5678;
  --mint:#c7e8df;
  --beige:#efe3d5;
  --cream:#fcfaf7;
  --text:#5f4636;
  --white:#ffffff;
  --glass:rgba(255,255,255,.82);

  --shadow:
    0 10px 40px rgba(95,70,54,.08);

  --radius-s:18px;
  --radius-m:26px;
  --radius-l:34px;
  --radius-xl:46px;

  --container:1200px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* =====================================================
   common
===================================================== */
.container{
  width:min(92%, var(--container));
  margin-inline:auto;
}

.section{
  position:relative;
  padding:110px 0;
}

.section-title{
  font-family:
    "Zen Maru Gothic",
    "Noto Sans JP",
    sans-serif;
  font-size:clamp(20px,4vw,40px);
  font-weight:700;
  line-height:1.4;
  text-align:center;
  margin-bottom:18px;
}

.section-lead{
  text-align:center;
  color:#7a665a;
  margin-bottom:60px;
}

/* =====================================================
   glass card
===================================================== */
.glass-card{
  background:var(--glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow);
}

/* =====================================================
   button
===================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:58px;
  padding:0 34px;
  border-radius:999px;
  font-weight:700;
  transition:.35s var(--ease);
  cursor:pointer;
}

.btn-primary{
  color:#fff;
  background:linear-gradient(
    135deg,
    var(--pink),
    var(--pink-dark)
  );
  box-shadow:
    0 10px 25px rgba(200,106,150,.28);
}

.btn-primary:hover{
  transform:translateY(-3px);
}

/* =====================================================
   watercolor bg
===================================================== */
body::before,
body::after{
  content:"";
  position:fixed;
  z-index:-2;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.14;
}

body::before{
  width:520px;
  height:520px;
  left:-120px;
  top:80px;
  background-image:url(img/watercolor-1.png);
}

body::after{
  width:520px;
  height:520px;
  right:-120px;
  bottom:60px;
  background-image:url(img/watercolor-2.png);
}