/**
 * Theme Name:     Renden Child
 * Author:         ThinkUpThemes
 * Template:       renden
 * Text Domain:	   renden-child
 * Description:    Renden is the free version of the multi-purpose professional theme (Renden Pro) ideal for a business or blog website. The theme has a responsive layout, HD retina ready and comes with a powerful theme options panel with can be used to make awesome changes without touching any code. The theme also comes with a full width easy to use slider. Easily add a logo to your site and create a beautiful homepage using the built-in homepage layout.
 */

/*そだちの家まちかどとは*/
.heading-022 {
    padding: .5em .7em;
    border-left: 5px solid #F49857;
    background-color: #F49857;
    color: #ffffff;
}

/*対象になる方*/
.box15 {
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #FFDB97;
    box-shadow: 0px 0px 0px 10px #FFDB97;
    border: dashed 2px #ffb02e;
    border-radius: 8px;
}
.box15 p {
    margin: 0; 
    padding: 0;
}

/* 学校がある日の一日流れ */
p.school-day {
  color: #F5AC4D;
}

/* 学校がお休みの日の一日の流れ */
p.day-off {
  color: #F5AC4D;
}

/***　平安カラー　***/

.heian-table {
	table-layout: fixed;
}

/* ヘッダー th の上下左右中央揃え */
.heian-table thead th {
    background: #f49a36;
    font-weight: bold;
    color: #fff;
    text-align: center;      /* 左右中央 */
    vertical-align: middle;  /* 上下中央 */
}


/* ボディ項目・フッター項目 */
.heian-table tbody th,
.heian-table tfoot th {
	background: #FBFBF6;
}

/* ボディデータ・フッターデータ */
.heian-table tbody td,
.heian-table tfoot td {
	text-align:center;
	background: #FBFBF6;
}

/* 概要 */
h2.overview {
  background: #5FDFFF;
  padding: 0.5em;
  color: #ffffff; /* テキストの色 */
}

/* 提供サービス */
h2.services {
  background: #5FDFFF;
  padding: 0.5em;
  color: #ffffff; /* テキストの色 */
}

/* ご利用までの流れ */
h2.usage-flow {
  background: #5FDFFF;
  padding: 0.5em;
  color: #ffffff; /* テキストの色 */
}

/***そだちの家まちかどステップバーデザイン4***/
.step-wrap4 {
 counter-reset: count;
 margin: 2em 0;
 position: relative;
}
.step-content4 {
 padding: 1em 0 1.3em 2.5em;
 margin: 0;
 position: relative;
}
.step-content4::before {
 content: "";
 display: block;
 width: 55px;
 height: 55px;
 background: #f49a36;
 border-radius: 50%;
 position: absolute;
 top: 0;
 left: -3px;
}
.step-content4::after {
 content: "";
 display: block;
 height: calc(100% - 55px);
 border-left: solid 2px #ddd;
 position: absolute;
 top: 55px;
 left: 10px;
}
.step-label4 {
 color: #fff;
 font-weight: bold;
 font-size: 12px;
 position: absolute;
 top: 6px;
 left: 9px;
}
.step-label4::after {
 counter-increment: count;
 content: counter(count);
 position: absolute;
 font-size: 30px;
 top: 8px;
 left: 7px;
}
.step-title4 {
 font-weight: bold;
 font-size: 120%;
 margin-left: 1.5em;
}
.step-body4 {
 margin-top: 1em;
 padding: 0 0 1em;
 border-bottom: dotted 2px #ddd;
}
.step-wrap4 > :last-of-type::after {
 display: none;
}
/***そだちの家まちかどステップバーデザイン４***/

/* ふせまちかど相談所のページ用 */
.step-wrap4 {
  counter-reset: count;
  margin: 2em 0;
  position: relative;
}

.step-content4 {
  padding: 1em 0 1.3em 2.5em;
  margin: 0;
  position: relative;
}

.step-content4::before {
  content: "";
  display: block;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: -3px;
}

.step-content4::after {
  content: "";
  display: block;
  height: calc(100% - 55px);
  border-left: solid 2px #ddd;
  position: absolute;
  top: 55px;
  left: 10px;
}

.step-label4 {
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  position: absolute;
  top: 6px;
  left: 9px;
}

.step-label4::after {
  counter-increment: count;
  content: counter(count);
  position: absolute;
  font-size: 30px;
  top: 8px;
  left: 7px;
}

.step-title4 {
  font-weight: bold;
  font-size: 120%;
  margin-left: 1.5em;
}

.step-body4 {
  margin-top: 1em;
  padding: 0 0 1em;
  border-bottom: dotted 2px #ddd;
}

.step-wrap4 > :last-of-type::after {
  display: none;
}

/* ふせまちかど相談所のページ用 */
.step-content4.fuse-machikado::before {
  background: #A0EAFF; /* #A0EAFFに変更 */
}

/*サービス内容*/

/*そだちの家まちかどサービス*/
.styled-heading {
  background-color: #F49857; /* 背景色 */
  border-top: 2px solid #F5B57B; /* 上線 */
  padding: 14px 15px 10px;
  padding-top: 14px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  color: #ffffff; /* テキスト色 */
}

/*ご利用金額*/
.box22{
    padding: 0.5em 1em;
    margin: 1em 0;
    background: #f4f4f4;
    border-left: solid 6px #f4b57b;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}
.box22 p {
    margin: 0; 
    padding: 0;
}

/* 一日あたりの基本料金 */
.daily-basic-fee h3 {
  border-bottom: solid 3px #F49857; /* 下線を#F49857に設定 */
  color: #F49857; /* テキストカラーを#F49857に設定 */
}

/*基本料金*/
/* .special-textに特定のスタイルを適用 */
.special-text {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #474747;
    background: whitesmoke;
    border-left: double 7px #F5B57B; /*左線*/
    border-right: double 7px #F5B57B; /*右線*/
    border-radius: 0;
    line-height: 1.5;
}

/* 上限金額に関して */
.maximum-cost h3 {
  border-bottom: solid 3px #F49857; /* 下線を#F49857に設定 */
  color: #F49857; /* テキストカラーを#F49857に設定 */
}

/*ふせまちかどサービスデザイン2*/
.styled-heading2 {
  background-color: #5FDFFF ; /* 背景色 */
  border-top: 2px solid #A2F1FF; /* 上線 */
  padding: 14px 15px 10px;
  padding-top: 14px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  color: #ffffff; /* テキスト色 */
}

/* 要介護の方の利用負担額（目安） */
.care-costs h3 {
  border-bottom: solid 3px #60dfff; /* 下線を#f0830aに設定 */
  color: #60dfff; /* テキストカラーを#f0830aに設定 */
}

/* .specific-paragraphにスタイルを適用 */
.specific-paragraph {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #474747;
    background: whitesmoke;
    border-left: double 7px #9feafe;
    border-right: double 7px #9feafe;
}
.specific-paragraph p {
    margin: 0;
    padding: 0;
}

/*法人情報*/
.law-info-heading {
  padding: 1rem 2rem;
  color: #fff;
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left top, right top, from(#4472c5), to(#4472c5));
  background-image: -webkit-linear-gradient(left, #4472c5 0%,  #4472c5 100%);
  background-image: linear-gradient(to right,  #4472c5 0%, #4472c5 100%);
}

/* HTMLテーブルの背景色を設定 */
table {
    background-color: #f7f7f7; /* 背景色 */
	 color: #666; /* テキスト色 */
}

/* スマート　囲み枠　1 */
.kakomi-smart1 {
 position: relative;
 margin: 2em auto;
 padding: 2.5em 1em 1em;
 width: 90%; /* ボックス幅 */
 border-style: solid;
 border-color: #4472c5; /* 枠の色 */
 border-width: 5px 1px 1px;
 background-color: #f7f7f7; /* 背景色 */
 color: #666; /* テキスト色 */
 box-shadow: 1px 1px 3px #ccc; /* 影 */
}

.title-smart1 {
 position: absolute;
 top: 8px;
 left: 15px;
 background-color: #f7f7f7; /* タイトル背景色 */
 color: #82ca9c; /* タイトル色 */
 font-size: 1.1em;
 font-weight: bold;
}

/*ごあいさつ&プロフィール*/
.heading-001 {
    padding: .5em .7em;
    border-left: 5px solid #4472c5;
    color: #4472c5;
}

/*沿革*/
.enrollment-heading h2 {
	color: #4472c5; /* テキストカラーを指定 */
  border-bottom: solid 3px #4472c5; /* アンダーバーカラーを指定 */
}

/* デフォルトのスタイル */
.table-container {
    overflow-x: auto; /* 横スクロールを追加 */
}

.responsive-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

/* スマートフォン用のスタイル */
@media screen and (max-width: 600px) {
    .responsive-table {
        font-size: 10pt; /* 文字サイズを小さく */
    }
}


/* WordPressのカスタムCSSエディタやテーマのスタイルシートに追加してください */
.custom-box {
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #fdf5da;
    box-shadow: 0px 0px 0px 10px #fdf5da;
    border: dashed 2px #f49857;
    border-radius: 8px;
}

/*２事業所情報*/
.tape-box{
  margin: 1em 0;
  padding: 1em;
  background-color: #aec0e3;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15);
}

.tape{
  display: block;
  background-color: #ccb;
  opacity: 0.2;
  transform: rotate(3deg);
  width: 40%;
  height: 35px;
  margin: -2em auto 0 auto;
  border-left: 3px dotted rgba(0,0,0,.1);
  border-right: 3px dotted rgba(0,0,0,.1);
}

.tape-box p{
  margin: 0;
  padding: 0;
}

/* そだちの家まちかどのテープ */
.tape-box.sodachi .tape {
  background-color: #ea901c;
}

/* ふせまちかど相談所のテープ */
.tape-box.fuse .tape {
  background-color: #60dfff;
}

/*事業所の紹介*/
.law-info-heading {
  padding: 1rem 2rem;
  color: #fff;
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left top, right top, from(#4472c5), to(#4472c5));
  background-image: -webkit-linear-gradient(left, #4472c5 0%,  #4472c5 100%);
  background-image: linear-gradient(to right,  #4472c5 0%, #4472c5 100%);
}

h2.play-importance {
  position: relative;
  color: #FFF;
  padding: .8em;
  padding-left: 1.3em;
  background-color: #f9db56; /* 補足の指定 */
  border-radius: 50em 50em 50em 50em;
}

.fashionable-box4{
  margin: 1em 0;
  padding: 1em;
  background-size: 20px 20px;
  border-radius: 5px;
  background-color: #fefbd5;
  background-image: linear-gradient(45deg,rgba(255,186,238,.1) 25%,transparent 25%,transparent 50%,rgba(255,186,238,.1) 50%,rgba(255,186,238,.1) 75%,transparent 75%,transparent),linear-gradient(-45deg,rgba(255,186,238,.1) 25%,transparent 25%,transparent 50%,rgba(255,186,238,.1) 50%,rgba(255,186,238,.1) 75%,transparent 75%,transparent);
  border: solid 2px #f9db56;
}

.fashionable-box4 p{
  margin: 0;
  padding: 0;
}

/*うえすとさいど用ボックスデザイン*/
.box4{
    padding: 8px 19px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #ffeaea;
    border-top: solid 5px #ffc3c3;
    border-bottom: solid 5px #ffc3c3;
}
.box4 p {
    margin: 0; 
    padding: 0;
}

/*うえすとさいど用見出しデザイン2*/
.heading-17 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #18a465;
	font-size: 18px; /* 追加 */
}

.heading-17::before,
.heading-17::after {
    width: 3px;
    height: 40px;
    background-color: #64c99b ;
    content: '';
}

.heading-17::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}

.heading-17::after {
    transform: rotate(35deg);
    margin-left: 30px;
}

/*アンケート結果用*/
.survey-results .box4 {
    padding: 8px 19px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #d5e0f0;
    border-top: solid 5px #8ba7d5;
    border-bottom: solid 5px #8ba7d5;
}
.survey-results .box4 p {
    margin: 0; 
    padding: 0;
}

/*アンケート見出し*/
h2.enquete {
    background: #f6ca02;
    padding: 0.5em;
    color: #ffffff;
}

/*1番目非表示*/
article.section1 {
    display: none;
}

/*3番目非表示*/
article.section3 {
    display: none;
}

/*2番目を中央揃え*/
article.section2 {
    margin: 0 auto;   /* 左右の余白を自動にして中央寄せ */
    float: none;      /* テーマ側で float されている可能性があるので解除 */
    display: block;   /* 念のため block 要素として扱う */
}

/*2番目のサイズを変更*/
article.section2 {
    width: 31.8%;
    margin: 0 auto;
    float: none;
    display: block;
}

/* スマホ画面用（幅768px以下） */
@media screen and (max-width: 768px) {
    article.section2 {
        width: 90%;   /* スマホではほぼ全幅に */
    }
}