@charset "utf-8";

@media screen and (min-width : 768px ) {
    /* 画面幅が768px以上の場合に適用されるCSS */
    
    /* TOPページ共通の設定 */
    .sec_inner {
      width: 950px;
      margin: 0 150px;
      padding: 60px 0;
    }
    
    /* ボタンのスタイル1 */
    .btn_01 {
      text-align: center;
      font-weight: bold;
    }

    .btn_01 a {
      color: #4d4e53;
      background-color: #ffffff;
      padding: 5px 50px;
      border-radius: 10px;
      display: inline-block;
      border: solid 2px #ffffff;
      font-size: 15px;
      letter-spacing: 1px;
    }

    .btn_01 a:hover {
      color: #fff;
      background-color: #4d4e53;
      border: solid 2px #4d4e53;
    }
    
    /* ボタンのスタイル2 */
    .btn_02 {
      text-align: center;
      font-weight: bold;
    }

    .btn_02 a {
      color: #4267b2;
      padding: 8px 50px;
      display: inline-block;
      border: solid 2px #4267b2;
      font-size: 26px;
      letter-spacing: 1px;

    }

    .btn_02 a:hover {
      color: #fff;
      background-color: #4267b2;
      border: solid 2px #4267b2;
    }	
    
    /* ボタンのスタイル3 */
    .btn_03 {
      text-align: center;
      font-weight: bold;
    }

    .btn_03 a {
      color: #fff;
      background-color: #f49d06;
      padding: 22px 100px;
      border-radius: 10px;
      display: inline-block;
      border: solid 2px #f49d06;
      font-size: 28px;
      letter-spacing: 1px;
    }

    /* ボタンのスタイル3のホバー時の設定はコメントアウトされている */
    /*
    .btn_03 a:hover {
      color: #f49d06;
      background-color: #fff;
      border: solid 2px #f49d06;
    }
    */
}

/* 立体ボタン */
a.btn--red.btn--cubic {
  border-bottom: 5px solid #9f000c; /* 下部に5pxの線を赤色で表示 */
}

a.btn--red.btn--cubic:hover {
  margin-top: 3px; /* 上部に3pxマージンを追加 */
  border-bottom: 2px solid #9f000c; /* 下部の線を2pxに変更 */
}

a.btn--radius {
  
}

.fa-position-right {
  position: absolute; /* 絶対位置 */
  top: calc(50% - .5em); /* 要素の中心に配置 */
  right: 1rem; /* 右から1remの位置に配置 */
}    

.lead{
	text-align: center; /* 中央揃え */
  font-size:26px; /* フォントサイズ26px */
  color: #4d4e4e; /* フォントカラーを灰色に設定 */
  font-weight: bold; /* フォントの太さをboldに設定 */
  padding:22px /* 上下左右に22pxのパディングを追加 */
}

.lead_l{
  color: #4d4e4e; /* フォントカラーを灰色に設定 */
  font-size: 24px; /* フォントサイズ24px */
  line-height: 1.8; /* 行の高さを1.8に設定 */
  font-weight: bold; /* フォントの太さをboldに設定 */
  text-align: center; /* 中央揃え */
}    
    
.lead_m{
  color: #4d4e4e; /* フォントカラーを灰色に設定 */
  font-size: 18px; /* フォントサイズ18px */
  line-height: 1.8; /* 行の高さを1.8に設定 */
}
    

.lead_s_red{
  text-align: center; /* 中央揃え */
  font-size:20px; /* フォントサイズ20px */
  font-weight: bold; /* フォントの太さをboldに設定 */
  color:#ff0808; /* フォントカラーを赤に設定 */
} 

.lead_or{
	text-align: center; /* 中央揃え */
  font-size:26px; /* フォントサイズ26px */
  color: #f49d06; /* フォントカラーをオレンジに設定 */
  font-weight: bold; /* フォントの太さをboldに設定 */
  padding:22px; /* 上下左右に22pxのパディングを追加 */
}    

.under_marker {
  background: linear-gradient(transparent 50%, #ffff04 85%); /* グラデーション背景を設定 */
  display: inline; /* インライン要素に設定 */
  font-size: 20px; /* 文字サイズを追加 */
}

h1{
  font-size: 28px; /* 見出しの文字サイズを指定 */
  background: #727272; /* 見出しの背景色を指定 */
  box-shadow: 0px 0px 0px 5px #727272; /* 見出しに影をつける */
  border: dashed 2px white; /* 見出しの枠線を指定 */
  padding: 0.6em 1.5em; /* 見出しの内側の余白を指定 */
  color: #fff; /* 見出しの文字色を指定 */
}

.blue{
  color:#0868c4; /* クラス「blue」のテキストの色を指定 */
  font-weight: bold; /* クラス「blue」のテキストの太さを指定 */
}

.red-bold {
  color: red; /* テキストカラーを赤にする */
  font-weight: bold; /* フォントの太さをbold（太字）にする */
}

.big{
  font-size: 45px; /* クラス「big」の文字サイズを指定 */
}

.small{
  text-align: center; /* クラス「small」内のテキストを中央揃えにする */
  font-size: 16px; /* クラス「small」の文字サイズを指定 */
  display: block; /* クラス「small」の要素をブロック要素にする */
}    
  
.balloon1-top {
  position: relative; /* 上部吹き出しの位置を相対指定する */
  display: block; /* 上部吹き出しをブロック要素にする */
  margin: 1.5em 0; /* 上部吹き出しの外側の余白を指定 */
  padding: 20px 30px; /* 上部吹き出しの内側の余白を指定 */
  min-width: 120px; /* 上部吹き出しの最小幅を指定 */
  max-width: 100%; /* 上部吹き出しの最大幅を指定 */
  color: #fff; /* 上部吹き出しの文字色を指定 */
  font-weight: bold; /* 上部吹き出しの文字の太さを指定 */
  font-size: 34px; /* 上部吹き出しの文字サイズを指定 */
  background: #ed1d24; /* 上部吹き出しの背景色を指定 */
  text-align: center; /* 上部吹き出しの中のテキストを中央揃えにする */
}

.balloon1-top:before {
  content: "";
  position: absolute;
  top: -30px;  /* 要素の上端から30px上に配置 */
  left: 50%;   /* 要素の左端を親要素の中央に合わせる */
  margin-left: -15px;  /* 要素の幅の半分を左に移動する */
  border: 15px solid transparent; /* 透明な15pxのボーダーを設定 */
  border-bottom: 15px solid #ed1d24; /* 下側のボーダーを15pxの赤い色に設定 */
}

.balloon4 {
  position: relative; /* 相対的な位置指定を行う */
  margin: 2em 0 3em 40px; /* 上下にそれぞれ2em, 3em、左に40pxの余白を設定 */
  padding: 20px; /* 20pxの余白を設定 */
  background: #c3ddec; /* 背景色を設定 */
  border-radius: 30px; /* 角を30pxの半径の円で丸める */
}

.balloon4:before {  
  content: "";
  position: absolute; /* 絶対的な位置指定を行う */
  left: -38px; /* 左から38pxの位置に配置 */
  width: 13px; /* 幅を13pxに設定 */
  height: 12px; /* 高さを12pxに設定 */
  bottom: 0; /* 下端を親要素の下端に合わせる */
  background: #c3ddec; /* 背景色を設定 */
  border-radius: 50%; /* 角を50%の半径の円で丸める */
}

.balloon4:after {
  content: "";
  position: absolute; /* 絶対的な位置指定を行う */
  left: -24px; /* 左から24pxの位置に配置 */
  width: 20px; /* 幅を20pxに設定 */
  height: 18px; /* 高さを18pxに設定 */
  bottom: 3px; /* 下端から3px上に配置 */
  background: #c3ddec; /* 背景色を設定 */
  border-radius: 50%; /* 角を50%の半径の円で丸める */
}

.balloon4 p {
  margin: 0; /* 段落の余白を0に設定 */
  padding: 0; /* 段落の余白を0に設定 */
}
  
.balloon5 {
  position: relative; /* 要素の位置指定を相対的に指定 */
  margin: 2em 0 3em 40px; /* 上からのマージン、下からのマージン、左からのマージン、右からのマージン */
  padding: 20px; /* ボックス内部の余白指定 */
  background: #eef9c4; /* 背景色指定 */
  border-radius: 30px; /* 角丸指定 */
}

.balloon5:before {  
  content: ""; /* 生成されるコンテンツを指定 */
  position: absolute; /* 要素の位置指定を絶対的に指定 */
  left: -38px; /* 左からの位置指定 */
  width: 13px; /* 要素の幅指定 */
  height: 12px; /* 要素の高さ指定 */
  bottom: 0; /* 下からの位置指定 */
  background: #eef9c4; /* 背景色指定 */
  border-radius: 50%; /* 角丸指定 */
}

.balloon5:after {
  content: ""; /* 生成されるコンテンツを指定 */
  position: absolute; /* 要素の位置指定を絶対的に指定 */
  left: -24px; /* 左からの位置指定 */
  width: 20px; /* 要素の幅指定 */
  height: 18px; /* 要素の高さ指定 */
  bottom: 3px; /* 下からの位置指定 */
  background: #eef9c4; /* 背景色指定 */
  border-radius: 50%; /* 角丸指定 */
}

.balloon5 p {
  margin: 0; /* 上下のマージンを0に指定 */
  padding: 0; /* テキストと要素との余白を0に指定 */
}  
    
.letter {
  background: #fff; /* 背景色を白に指定 */
  box-shadow: 0 0 10px rgba(0,0,0,0.3); /* 影を付ける */
  margin: 26px auto 0; /* マージンを指定 */
  max-width: 800px; /* 最大幅を指定 */
  min-height: 300px; /* 最小高さを指定 */
  padding: 24px; /* パディングを指定 */
  position: relative; /* 要素を相対位置にする */
  width: 88%; /* 幅を指定 */
}

.letter:before, .letter:after {
  content: ""; /* コンテンツを挿入 */
  height: 98%; /* 高さを指定 */
  position: absolute; /* 要素を絶対位置にする */
  width: 100%; /* 幅を指定 */
  z-index: -1; /* レイヤーを指定 */
}

.letter:before {
  background: #fafafa; /* 背景色を指定 */
  box-shadow: 0 0 8px rgba(0,0,0,0.2); /* 影を付ける */
  left: -5px; /* 左からの位置を指定 */
  top: 4px; /* 上からの位置を指定 */
  transform: rotate(-2.5deg); /* 回転させる */
}

.letter:after {
  background: #f6f6f6; /* 背景色を指定 */
  box-shadow: 0 0 3px rgba(0,0,0,0.2); /* 影を付ける */
  right: -3px; /* 右からの位置を指定 */
  top: 1px; /* 上からの位置を指定 */
  transform: rotate(1.4deg); /* 回転させる */
}  

.letter_outer{
    background: linear-gradient(#ccc, #fff); /* 背景色をグラデーションにする */
    padding: 20px; /* パディングを指定 */
} 
     


/*-----------------------------------------------------

	TOP　　トップページ

------------------------------------------------------*/
#top #sec_01 {
}

#top p {
  color: #4d4e4e; /* テキストの色を指定 */
  font-size: 22px; /* テキストのフォントサイズを指定 */
  line-height: 1.8; /* 行間を指定 */
}

#top .sec_inner {
  width: 950px; /* セクションの幅を指定 */
  padding: 50px 0; /* セクション内の余白を指定 */
  font-size: 13px; /* テキストのフォントサイズを指定 */
  margin: 0 auto; /* セクションを中央に配置 */
}

#top #bnr_area01 {
  text-align: center; /* バナーを中央に配置 */
}

#top #sec_01{
  text-align: ; /* 何も指定されていないため、値は無し */
  background-image: url("../image/bg09.jpg"); /* 背景画像を指定 */
  background-color: rgba(255,255,255,0.4); /* 背景色を指定 */
  background-blend-mode: lighten; /* 背景画像と背景色の重ね方を指定 */
}  
    
#top #sec_01 .hoshu{
  border: solid 3px #4f86bc; /* 枠線のスタイルを指定 */
  padding: 15px; /* コンテンツの余白を指定 */
}   

#top .img_box{
  text-align: center; /* 画像を中央に配置 */
}
    
    
#top #sec_01 .list{
  font-size:22px; /* テキストのフォントサイズを指定 */
  color: #4f86bc; /* テキストの色を指定 */
  font-weight: bold; /* テキストの太さを指定 */
  text-align: left; /* テキストを左寄せに配置 */
  display: inline-block; /* インラインブロックで配置 */
  padding: 20px; /* テキストの余白を指定 */
  background: linear-gradient(-30deg, #c3ddec, #fff8c5) fixed; /* テキストの背景にグラデーションを指定 */
}    
    
  
/* #top #sec_01 .list li について */
#top #sec_01 .list li{
	margin-bottom: 8px; /* リストアイテム間の下部マージンを8pxに設定 */
}   

/* #top #sec_01 .list li:before について */
#top #sec_01 .list li:before{
	font-family: FontAwesome; /* Font Awesome アイコンフォントを使用 */
  content: "\f00c"; /* Font Awesome アイコンフォントの確認済みアイコン（グリーンチェックマーク）を表示 */
  margin-right: 20px; /* アイコンと文字の間のマージンを20pxに設定 */
  font-size: 30px; /* アイコンのフォントサイズを30pxに設定 */
  left: 0; /* アイコンを左端に揃えるために、leftプロパティを0に設定 */
  top: 0; /* アイコンを上端に揃えるために、topプロパティを0に設定 */
  color: #4f86bc; /* アイコンのカラーを指定 */
}
    
/* #top #sec_01 .list2 について */
#top #sec_01 .list2{
  text-align: left; /* テキストを左寄せに設定 */
  display: inline-block; /* インラインブロック要素として表示 */
  border: double 4px #4d4e4e; /* 二重線を4pxの幅で表示し、色は #4d4e4e に設定 */
  padding: 20px; /* 内部余白を20pxに設定 */
  background: #fff; /* 背景色を白に設定 */
}    
  
/* tableについて */
table{
  font-size: 16px; /* テーブル内の文字のフォントサイズを16pxに設定 */
}    
    
table th,td {
  border:solid 1px #4d4e4e; /* th要素とtd要素に、境界線を1pxの幅で表示し、色は #4d4e4e に設定 */
  padding: 20px; /* th要素とtd要素の内部余白を20pxに設定 */
}      
    
/* .result_wrapについて */
.result_wrap{
  width: 86%; /* 幅を86%に設定 */
  margin: 0 auto; /* 中央寄せにするため、左右のマージンをautoに設定 */
}  
    
/* .result_wrap spanについて */
.result_wrap  span{
  display:block; /* ブロック要素として表示 */
  text-align: right; /* テキストを右寄せに設定 */
} 
    
 /* リザルトインのスタイル */
.result_in {
  background-color: #fff; /* 背景色を白に設定 */
  padding: 50px; /* 上下左右の余白を50pxに設定 */
  border: solid 2px #a09f9f; /* 枠線のスタイルを設定 */
  margin-bottom: 24px; /* 下部に余白を追加 */
  box-shadow: 10px 10px 10px rgba(0,0,0,0.1); /* 影を追加 */
}

/* フッターのコピーライトのスタイル */
.footer #copy {
  text-align: center; /* 中央寄せにする */
  background-color: #e5e4e4; /* 背景色を灰色に設定 */
}

    
.testimonials {
  display: flex; /* 要素をフレックスボックスにする */
  flex-wrap: wrap; /* 要素がボックスに収まらない場合、折り返し表示させる */
}

.testimonial {
  width: 100%; /* 幅を100%に指定する */
  margin-bottom: 40px; /* 下側に40ピクセルの余白を設定する */
  padding: 0 20px; /* 左右に20ピクセルの余白を設定する */
}

.border {
  border: 1px solid #ccc; /* 枠線を1ピクセル幅で、灰色の実線で設定する */
  padding: 20px; /* 中身から枠線までの余白を20ピクセルにする */
}

.catch {
  font-size: 1.5rem; /* フォントサイズを1.5リマにする */
  font-weight: bold; /* フォントの太さをbold（太字）にする */
  margin-bottom: 10px; /* 下側に10ピクセルの余白を設定する */
}

.comment {
  font-size: 1.2rem; /* フォントサイズを1.2リマにする */
  margin-bottom: 10px; /* 下側に10ピクセルの余白を設定する */
  line-height: 1.5; /* 行の高さを1.5倍にする */
}

.name {
  font-size: 1.2rem; /* フォントサイズを1.2リマにする */
  font-weight: bold; /* フォントの太さをbold（太字）にする */
  margin-bottom: 10px; /* 下側に10ピクセルの余白を設定する */
}

.result {
  margin-top: 10px; /* 上側に10ピクセルの余白を設定する */
}

.result img {
  max-width: 100%; /* 画像の幅が親要素を超えた場合、最大で親要素の幅まで表示する */
  height: auto; /* 高さは自動調整 */
}


.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}



/*-----------------------------------------------------

	2023.07追加

------------------------------------------------------*/

 .result_wrap{
    width: 86%;
    margin: 0 auto;    
    }  
    
.result_wrap .left_box{
    float:left;
    width:30%;
    }  

.result_wrap .right_box{
    float:right;
    width:65%;
    }     
    
    .result_in{
        background-color: #fff;
    padding: 50px;
    border: solid 2px #a09f9f;
    margin-bottom: 24px;
        box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
    }  

.balloon1-top {
  position: relative;
  display: block;
  margin: 1.5em 0;
  padding: 20px 30px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-weight: bold;
  font-size: 24px;
  background: #555555;
    text-align: center;
}

.balloon1-top:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #555555;
}
    
.balloon2-top {
  position: relative;
  display: block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 18px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
  text-align: center;
  font-weight: bold;
}

.balloon2-top:before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-bottom: 12px solid #FFF;
  z-index: 2;
}

.balloon2-top:after {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-bottom: 14px solid #555;
  z-index: 1;
}

}