/* ==================================================
   component.css
   共通パーツ
================================================== */

/* ==========================
   見出し
========================== */
main{
  font-family: sans-serif;
}

h1{
    font-size:40px;
    text-align:center;
    margin-bottom:20px;
    color:#32605a;
}

h2{
    font-size:32px;
    text-align:center;
    margin-bottom:20px;
}

h3{
    font-size:24px;
    text-align:center;
    margin-bottom:15px;
}

h4{
    font-size:20px;
    margin-bottom:15px;
}

 main p{
   font-size:16px;
   margin: 15px 10px;
   line-height: 1.8;
}

ul li img{
  margin-left: 10px;
}

/* ==========================
   緑帯見出し
========================== */

.senn{
    background:#32605a;
    color:#fff;
    padding:12px;
    margin:30px 0;
    border-radius:5px;
}

.senn h2{
    margin:0;
    color:#fff;
}

/* ==========================
   薄緑見出し
========================== */

.ususenn{

    background:#e1eec1;
    padding:15px 25px;
    margin:30px 0;
    border-left:8px solid #32605a;

}

.ususenn h2{
    margin:0;
}

/* ==========================
   枠デザイン
========================== */

.waku{

    background:#fff;

    border:4px double #32605a;

    border-radius:10px;

    padding:15px;

    margin:30px 0;

}

.waku h2{

    color:#32605a;

}
.waku h3{

    text-align: center;

}

.waku ul{

    padding-left:10px;

}

.waku li{

    margin:10px 0;

}

/* ===========================
   スタッフ紹介
=========================== */
.profile{
}

.row{
  display: flex;
  border-bottom: 3px dotted #32605a;
  padding: 5px 20px;
  align-items: center;
}

.title{
  width: 150px;
  font-size: 20px;
  font-weight: bold;
}

.content{
  flex: 1;
  font-size: 22px;
}
/* ==========================
   Point
========================== */

.point{

    margin:30px 0;

}

.point-title{

    display:inline-block;

    background:#2e7d32;

    color:#fff;

    padding:8px 20px;

    border-radius:6px 6px 0 0;

    font-weight:bold;

}

.point-body{

    border:3px solid #2e7d32;

    padding:20px;

    background:#fff;

}

/* ==========================
   Q&A
========================== */

.qa{

    border:3px solid #2e7d32;

    padding:25px;

    border-radius:10px;

    margin:25px 0;

}

.qa h3{

    color:#d32f2f;

}

.qa p{

    margin-top:10px;

}
/* ==========================
   アイコン付き問い合わせ
========================== */
.title2{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.title2 img{
   width: 30px;
   height: 30px;
}

/* ==========================
   ボタン
========================== */

.botann{

    display:inline-block;

    background:#32605a;

    color:#fff;

    padding:15px 40px;

    border-radius:6px;

    font-size:20px;

    transition:.3s;

    text-align:center;

}

.botann:hover{

    background:#2e7d32;

}

.botann a{

    color:#fff;

}

/* ==========================
   下線
========================== */

.sitasenn{

      text-align:center;
      border-bottom: dotted 3px green;
      margin: auto 15px;
}

.sitasenn h2{
  margin-bottom: 5px;
}

/* ==========================
   アイコン付きリスト
========================== */

.before{

    padding-left:45px;

    background:url(images/hosi.png) no-repeat left center;

    background-size:25px;

    margin:18px 0;

}

/* ==========================
   中央ぞろい
========================== */
.center{
  text-align: center;
}


/* ==========================
    ちえっく
========================== */

.batu {
  list-style: none;
  padding: 0;
}

.batu li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.batu h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.batu li img {
  width: 30px;
  height: 24px;
}

.batu h3 img {
  width: 30px;
  height: 24px;
}

/* ==========================
   テーブル
========================== */

table{

    width:100%;

    border-collapse:collapse;

    margin:25px 0;

}

table th{

    width:30%;

    background:#32605a;

    color:#fff;

    padding:15px;

}

table td{

    width:70%;

    background:#f8f8f8;

    padding:15px;

    text-align:center;

}

/* ==========================
   Grid Card
========================== */

.glid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

}

.item{

    background:#fff;

    border-radius:10px;

    overflow:hidden;

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

}

.item img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

}

.item h3{

    margin:15px 10px;

}

.item p{

    padding:0 15px 20px;

}

/* ==========================
   レスポンシブ
========================== */

@media(max-width:768px){

h1{

    font-size:28px;

}

h2{

    font-size:24px;

}

h3{

    font-size:20px;

}

.waku{

    padding:18px;

}

.qa{

    padding:18px;

}

.botann{

    width:100%;

    font-size:18px;

    padding:15px;

}

.before{

    padding-left:38px;

    background-size:22px;

}

}