/* =======================================================
    service
========================================================== */
.page_title{
    background-size: cover;
    background-repeat: no-repeat;
    padding: 8rem 0;
}
.service_page{
    background-image: url(../img/service_top_bg.webp);
}
.section_title{
    color: #fff;
}
.section_title .line {
    background: #fff;
}
.block{
    padding: 13rem 10rem;
}
.service_intro p{
    font-size: 1.25rem;
}
.service_intro .service_head{
    font-size: 2rem;
    font-weight: bold;
    padding-bottom: 4rem;
}
.service_title{
    width: 100%;
    height: 360px;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;             /* タイトルを中央に置きたい場合 */
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.875rem;
    font-weight: bold;
}
.fitness{
    background-image: url(../img/fitness_bg.webp);
}
.web_marketing{
    background-image: url(../img/web_bg.webp);
}
.golf{
    background-image: url(../img/golf_bg.webp);
}
.service_list{
    display: flex;
    justify-content: space-between;
    padding: 6rem 0 16rem;
}
.service_list li {
    flex: 1;                 /* 均等幅にする場合 */
    position: relative;       /* 疑似要素用 */
    padding: 0 40px;          /* 左右に余白 */
}
.service_list li:not(:last-child)::after {
    content: "";               /* 疑似要素 */
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;               /* 線の太さ */
    height: 100%;             /* li の高さいっぱい */
    background-color: #B8B8B8;   /* 線の色 */
}
.service_list li img{
    padding: 1.5rem 0;
}
.service_detail{
    font-size: 1.25rem;
    font-weight: bold;
    padding-bottom: 1rem;
}
.num{
    font-size: 1.5rem;
}
.service_list li:only-child {
    max-width: 33.33%;       /* 3分割した幅と同じサイズに制限 */
    margin: 0 auto;          /* 中央寄せ */
}

/* =======================================================
    about
========================================================== */
.about_page{
    background-image: url(../img/about_top_bg.webp);
}
.about_intro .service_head{
    font-size: 2rem;
    font-weight: bold;
}
.about_intro table{
    text-align: left;
}
.about_intro table {
    width: 80%;
    border-collapse: collapse; /* 罫線の重なりを防ぐ */
    margin-top: 2rem;          /* 上の見出しとの余白 */
    font-size: 1.25rem;
    color: #000019;
}
/* th: 左列のラベル */
.about_intro table th {
    width: 30%;               /* ラベル列の幅 */
    padding: 2rem 1rem;    /* 行内余白 */
    font-weight: normal;      /* 軽めにする場合 */
    vertical-align: top;
    color: #919191;
}
/* td: 右列の値 */
.about_intro table td {
    width: 70%;               /* 値列 */
    text-align: left;
    padding: 2rem 1rem;
    line-height: 1.6;         /* 行間 */
}
/* 各行の下線 */
.about_intro table tr {
    border-bottom: 1px solid #ccc;
}
/* 事業内容の箇条書きを少しインデント */
.about_intro table td br {
    display: block;
    margin-bottom: 0.25rem;
}

.krm{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4rem 0;
}
.krm img{
    width: 40%;
}
.krm .krm_comment{
    margin-left: 8rem;
}
.krm .krm_comment p{
    padding-top: 2rem;
}
.krm .krm_comment p:first-child{
    font-size: 1.5rem;
    font-weight: bold;
    padding-bottom: 2rem;
    padding-top: 0;
    border-bottom: 1px solid #fff;
}
.krm .krm_comment p:last-child{
    text-align: right;
}

/* =======================================================
    news
========================================================== */
.news_page{
    background-image: url(../img/news_top_bg.webp);
}
.news-list {
  list-style: none;
  padding: 0;
}
.news-list li {
  margin-bottom: 10px;
}
.news-list .date {
  display: inline-block;
  color: #919191;
}
.news-list .title {
  padding-left:16px;
}


/* =======================================================
    contact
========================================================== */
/* お問い合わせページのフォーム全体 */
.contact-form-area {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ラベルのデザイン */
.contact-form-area label {
  display: block;
  margin-bottom: 6px;
  font-size:1.25rem;
}

/* 入力欄 */
.contact-form-area input[type="text"],
.contact-form-area input[type="email"],
.contact-form-area input[type="tel"],
.contact-form-area textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  margin-top:8px;
  border: 1px solid #EEEEEE;
  border-radius: 4px;
  font-size:1rem;
  font-weight:normal;
  box-sizing: border-box;
}
/* 送信ボタン */
.contact-form-area input[type="submit"] {
  background-color: #0073e6;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.contact-form-area input[type="submit"]:hover {
  background-color: #005bb5;
}



/* =======================================================
==========================================================

SP

==========================================================
========================================================== */


@media screen and (max-width: 768px) {
    /* ===================================
    service_page
    ===================================== */
    .page_title{
        padding: 6rem 0;
    }
    .block{
        padding: 8rem 0 6rem;
    }
    .service_intro .service_head{
        font-size: 1.5rem;
        padding-bottom: 1.5rem;
    }
    .service_intro p{
        font-size: 1rem;
    }
    .service_title{
        height: 130px;
        background-position: top;
    }
    .service_title p{
        font-size: 1.25rem;
    }
    .service_list{
        flex-direction: column;
        padding: 2rem 0 6rem;
    }
    .service_list li:not(:last-child)::after {
        display: none;
    }
    .service_list li {
        padding: 2rem 0; /* 上下の余白 */
        border-bottom: 1px solid #B8B8B8;
    }
    .service_list li:last-child {
        border-bottom: none; /* 最後の要素には線を引かない */
    }
    .service_list li:only-child {
        max-width: 100%;       /* 3分割した幅と同じサイズに制限 */
    }
    /* ===================================
    about_page
    ===================================== */
    .about_intro .service_head{
        font-size: 1.4rem;
        padding-left: 0.25rem;
    }
    .about_intro table {
        width: 100%;
        margin-top: 1rem;          /* 上の見出しとの余白 */
        font-size: 1rem;
    }
    /* th: 左列のラベル */
    .about_intro table th {
        padding: 1.5rem 0.5rem;    /* 行内余白 */
    }
    /* td: 右列の値 */
    .about_intro table td {
        padding: 1.5rem 0.5rem;
    }
    .krm{
        display: flex;
        flex-direction: column;
        padding: 2rem 0 0;
    }
    .krm img{
        width: 100%;
    }
    .krm .krm_comment{
        margin-left: 0;
        padding: 2rem 0.5rem 1rem;
    }
    .krm .krm_comment p:first-child{
        padding-top: 1rem;
    }
    /* ===================================
    contact
    ===================================== */
	/* お問い合わせページのフォーム全体 */
	.contact-form-area {
	  max-width: 90%;
	  padding: 0 10px;
	}


}