@charset "utf-8";
body {
	font: normal 18px/1.7 "游明朝","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","メイリオ",Meiryo,Arial,Verdana,sans-serif;
	text-align: left;
	color:#000;
	text-align: justify;
	overflow-x: hidden;
}

body .sp-item {
    display: none !important; }
  body .pc-item {
    display: block !important; }
	
  @media screen and (max-width: 750px) {
    body {
      min-width: inherit; 
	  height:100%; 
	  }
      body .sp-item {
        display: block !important; }
      body .pc-item {
        display: none !important; } 
	  body .sp-item img {
		width:100%;}
}

@media screen and (max-width: 750px) {
	.sp img{
		max-width:90%;	
}
	.sp02 img{
		max-width:100%;	
}
.sp03 img{
		max-width:70%;	
}
}

.fl_left {
	float: left;
}
.fl_right {
	float: right;
}
.ov_hd {
	overflow: hidden;
}
.bg_none {
	background-image: none!important;
}
a.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.center {
	text-align: center;
}
.right {
	text-align:right;
}
.line_0 {
	line-height: 0;
}
.zindex {
	z-index: 200;
}
input[type=radio] {
	width: 15px;
	height: 15px;
	vertical-align: middle;
}
input[type=image]:hover{
		opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	}


.wrap_original {
overflow: hidden;
}







/* ===== 各種メディア・SNS 総フォロワー写真 ===== */
.media-follow{
  text-align: center;
  margin: 32px auto 48px; /* 前後とバランスのとれた余白 */
  max-width: 720px;       /* 横幅を制限（大きすぎ防止） */
}

.media-follow__img{
  width: 100%;
  height: auto;
  border-radius: 12px;     /* 角丸で他カードと一体感 */
  box-shadow: 0 6px 18px rgba(0,0,0,0.06); /* 軽いシャドウ */
}


/* ===== X（旧Twitter）カード ===== */
.media-item.x .media-icon svg rect {
  fill: #000; /* 背景ブラック */
}

.media-item.x .media-link {
  background-color: #000;
  color: #fff;
  border: 1px solid #000;
  transition: 0.2s ease;
}

.media-item.x .media-link:hover {
  background-color: #fff;
  color: #000;
}












/* ===== メディア実績（カードグリッド） ===== */
.press--grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px){
  .press--grid{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px){
  .press--grid{ grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.press__item{ margin: 0; }

.press__card{
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  height: 100%;
  padding: 16px 16px 14px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.press__card:hover,
.press__card:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.12);
  outline: none;
}

.press__media{
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .02em;
  color: #6b7280; /* グレー600 */
  margin: 0;
  white-space: normal;
}
.press__title{
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
  color: #111827; /* Gray 900 */
  margin: 2px 0 6px;
}
.press__cta{
  justify-self: start;
  margin-top: 2px;
  padding: 8px 12px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid #1d2088;   /* 既存トンマナに寄せる */
  color: #1d2088;
}
.press__card:hover .press__cta{ background: #1d2088; color: #fff; }

/* スマホ時の任意改行（<span class="sp-br"></span>） */
.sp-br{ display: none; }
@media (max-width: 640px){
  .sp-br{ display: inline; }
}


/* ===== メディア実績 サムネイル調整 ===== */
.press__card{
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden; /* はみ出し防止 */
}

.press__thumb{
  width: 100%;
  height: 160px;           /* 高さを統一（必要に応じて 140px〜180px で調整） */
  object-fit: cover;       /* トリミングして収める */
  border-radius: 8px 8px 0 0;
  display: block;
  flex-shrink: 0;
}

.press__media,
.press__title,
.press__cta{
  padding-left: 12px;
  padding-right: 12px;
}

.press__media{ margin-top: 8px; }
.press__title{ margin-top: 4px; margin-bottom: 8px; }
.press__cta{ margin-bottom: 12px; }



/* ===== メディア実績 画像の自然表示調整 ===== */
.press__thumb {
  width: 100%;
  height: auto;             /* 高さを固定せず、素材比率を保持 */
  object-fit: contain;      /* トリミングせず全体を表示 */
  border-radius: 8px;       /* 既存の角丸は維持 */
  display: block;
  background-color: #fff;   /* 背景が透過素材でも白地で見やすく */
  padding: 4px;             /* 上下に軽い余白を追加（好みで調整可） */
  box-sizing: border-box;
}

/* 各カード内の余白を微調整（画像の比率差を吸収） */
.press__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
  overflow: hidden;
}





/* 実績者インタビュー動画セクション - コンパクト版 */
.area8 {
  position: relative;
  background: linear-gradient(135deg, #fff 0%, #fff5e6 50%, #fff 100%);
  padding: 60px 0;
  overflow: hidden;
}

.area8::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(238, 141, 32, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(238, 141, 32, 0.08) 0%, transparent 50%);
  z-index: 0;
}

.area8 .bg { display: none; }

.area8 > div:not(.bg) {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 30px;
}

.area8 h2 {
  font-size: 48px !important;
  margin: 0 auto 20px !important;
  text-align: center !important;
  font-weight: bold !important;
  color: #ee8d20 !important;
  line-height: 1.2 !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
}

.area8 h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #ee8d20, #f4a445, #ee8d20);
  border-radius: 2px;
}

.area8 .txt {
  text-align: center;
  font-size: 22px;
  line-height: 1.7;
  margin-bottom: 50px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  color: #444;
  font-weight: 600;
}

/* 動画グリッド */
.interview-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 40px !important;
  margin: 60px 0 !important;
  width: 100% !important;
}

.interview-item {
  background: #fff !important;
  border-radius: 24px !important;
  padding: 30px !important;
  box-shadow: 0 20px 40px rgba(238, 141, 32, 0.15), 0 8px 16px rgba(0, 0, 0, 0.08) !important;
  border: 3px solid transparent !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.interview-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ee8d20, #f4a445, #ee8d20);
  border-radius: 24px;
  z-index: -1;
  padding: 3px;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.interview-item:hover {
  transform: translateY(-12px) scale(1.02) !important;
  box-shadow: 0 32px 64px rgba(238, 141, 32, 0.25), 0 16px 32px rgba(0, 0, 0, 0.15) !important;
}

.video-wrapper {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 56.25% !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

.video-wrapper::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #ee8d20, #f4a445);
  border-radius: 18px;
  z-index: -1;
}

.video-wrapper iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 16px !important;
}

.interview-item h4 {
  margin: 20px 0 0 0 !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #333 !important;
  text-align: center !important;
  line-height: 1.4 !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #fff9f0 0%, #fff5e6 100%) !important;
  border: 2px solid #ee8d20 !important;
  position: relative !important;
}

.interview-item h4::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 4px;
  background: #ee8d20;
  border-radius: 2px;
}

/* 下部テキストとボタン - スマホ対応強化 */
.area8 .txt.bold.font24 {
  font-size: 26px !important;
  color: #333 !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 60px auto 30px !important;
  background: linear-gradient(135deg, #fff9f0 0%, #fff 100%) !important;
  padding: 30px !important;
  border-radius: 20px !important;
  border: 3px solid #ee8d20 !important;
  max-width: 900px !important;
}

.area8 .txt .yellow2 {
  color: #ee8d20 !important;
  font-size: 28px !important;
  text-decoration: underline !important;
  text-decoration-color: #f4a445 !important;
  text-underline-offset: 4px !important;
}

.area8 .contents2 {
  max-width: 500px !important;
  margin: 40px auto 0 !important;
  text-align: center !important;
}

.area8 .contents2 .logo img {
  max-width: 80px !important;
  margin-bottom: 20px !important;
}

.area8 .contents2 a img {
  width: 100% !important;
  max-width: 400px !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 30px rgba(238, 141, 32, 0.3) !important;
  transition: all 0.3s ease !important;
}

.area8 .contents2 a:hover img {
  transform: scale(1.05) translateY(-5px) !important;
  box-shadow: 0 20px 40px rgba(238, 141, 32, 0.4) !important;
}

/* レスポンシブデザイン - 大幅簡略化 */
@media (max-width: 1200px) {
  .area8 > div:not(.bg) { max-width: 1200px; padding: 0 25px; }
  .area8 h2 { font-size: 40px !important; }
  .interview-grid { gap: 30px !important; }
  .interview-item { padding: 25px !important; }
  .interview-item h4 { font-size: 17px !important; }
}

@media (max-width: 768px) {
  .area8 { padding: 40px 0; }
  .area8 > div:not(.bg) { padding: 0 10px; }
  .area8 h2 { font-size: 32px !important; }
  .interview-grid { 
    grid-template-columns: 1fr !important; 
    gap: 30px !important; 
    margin: 40px 0 !important; 
  }
  .interview-item h4 { font-size: 18px !important; }
  .area8 .txt { font-size: 18px; }
  
  /* スマホ対応：テキストボックス見切れ対策 */
  .area8 .txt.bold.font24 {
    font-size: 18px !important;
    padding: 15px 10px !important;
    margin: 30px 5px 15px !important;
    border-radius: 15px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .area8 .txt .yellow2 {
    font-size: 20px !important;
    display: block !important;
    margin-top: 8px !important;
    word-wrap: break-word !important;
  }
  
  .area8 .contents2 {
    max-width: 100% !important;
    padding: 0 10px !important;
  }
  
  .area8 .contents2 .logo img { max-width: 60px !important; }
  .area8 .contents2 a { max-width: 95% !important; }
  .area8 .contents2 a img { border-radius: 15px !important; }
}

@media (max-width: 480px) {
  .area8 { padding: 30px 0; }
  .area8 h2 { font-size: 26px !important; }
  .interview-item { padding: 20px !important; }
  .interview-item h4 { font-size: 16px !important; padding: 10px 12px !important; }
  .area8 .txt { font-size: 16px; }
  
  /* 極小画面対応：完全見切れ防止 */
  .area8 .txt.bold.font24 {
    font-size: 16px !important;
    padding: 12px 8px !important;
    margin: 20px 2px 10px !important;
    line-height: 1.5 !important;
  }
  
  .area8 .txt .yellow2 {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }
  
  .area8 .contents2 { padding: 0 5px !important; }
  .area8 .contents2 .logo img { max-width: 50px !important; }
}

/* アニメーション */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}

.interview-item {
  animation: slideInUp 0.8s ease-out;
  animation-fill-mode: both;
}

.interview-item:nth-child(n) { animation-delay: calc(0.1s * var(--delay, 1)); }
.interview-item:nth-child(1) { --delay: 1; }
.interview-item:nth-child(2) { --delay: 2; }
.interview-item:nth-child(3) { --delay: 3; }
.interview-item:nth-child(4) { --delay: 4; }
.interview-item:nth-child(5) { --delay: 5; }
.interview-item:nth-child(6) { --delay: 6; }
.interview-item:nth-child(7) { --delay: 7; }
.interview-item:nth-child(8) { --delay: 8; }
.interview-item:nth-child(9) { --delay: 9; }




/* SNSメディア掲載情報セクション */
.area9 {
  background: linear-gradient(135deg, #fff 0%, #fff9f0 50%, #fff 100%);
  padding: 60px 0;
  position: relative;
}

.area9::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 10% 20%, rgba(238, 141, 32, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(238, 141, 32, 0.05) 0%, transparent 50%);
}

.area9 .contents2 {
  position: relative;
  z-index: 1;
}

.area9 h2 {
  font-size: 42px !important;
  margin: 0 auto 20px !important;
  text-align: center !important;
  font-weight: bold !important;
  color: #ee8d20 !important;
  line-height: 1.3 !important;
  position: relative !important;
}

.area9 h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg, #ee8d20, #f4a445, #ee8d20);
  border-radius: 2px;
}

.area9 .txt {
  text-align: center;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 50px;
  color: #555;
  font-weight: 500;
}

/* メディアグリッド */
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 50px 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.media-item {
  background: #fff;
  border-radius: 20px;
  padding: 30px 25px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 3px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.media-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 3px;
  background: linear-gradient(135deg, #ee8d20, #f4a445);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.media-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.media-item:hover::before {
  opacity: 1;
}

.media-icon {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  width: 60px;
  margin-left: auto;
  margin-right: auto;
}

.media-icon svg {
  max-width: 40px;
  max-height: 40px;
  width: auto;
  height: auto;
}

.media-content h4 {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.follower-count {
  font-size: 28px;
  font-weight: 900;
  margin: 10px 0;
  background: linear-gradient(135deg, #ee8d20, #f4a445);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.media-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.4;
}

.media-link {
  display: inline-block !important;
  padding: 10px 20px !important;
  background: linear-gradient(135deg, #ee8d20, #f4a445) !important;
  color: white !important;
  text-decoration: none !important;
  border-radius: 25px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(238, 141, 32, 0.3) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

.media-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(238, 141, 32, 0.4);
}

/* 各SNSブランドカラー対応 */
.media-item.youtube:hover { box-shadow: 0 20px 40px rgba(255, 0, 0, 0.15); }
.media-item.line:hover { box-shadow: 0 20px 40px rgba(0, 185, 0, 0.15); }
.media-item.twitter:hover { box-shadow: 0 20px 40px rgba(29, 161, 242, 0.15); }
.media-item.tiktok:hover { box-shadow: 0 20px 40px rgba(255, 0, 80, 0.15); }
.media-item.instagram:hover { box-shadow: 0 20px 40px rgba(225, 48, 108, 0.15); }
.media-item.ameblo:hover { box-shadow: 0 20px 40px rgba(0, 212, 170, 0.15); }

/* 合計フォロワー数表示 */
.total-followers {
  text-align: center;
  margin: 60px 0 40px;
  padding: 40px;
  background: linear-gradient(135deg, #fff9f0 0%, #fff5e6 100%);
  border-radius: 25px;
  border: 4px solid #ee8d20;
  position: relative;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.total-followers h3 {
  font-size: 24px;
  color: #ee8d20;
  margin-bottom: 15px;
  font-weight: bold;
}

.total-count {
  font-size: 48px;
  font-weight: 900;
  color: #ee8d20;
  margin: 10px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.total-desc {
  font-size: 18px;
  color: #666;
  margin: 0;
  font-weight: 500;
}

/* ボタンエリア */
.area9 .logo img {
  max-width: 80px !important;
  margin: 20px auto !important;
}

.area9 a img {
  max-width: 400px !important;
  width: 100% !important;
  border-radius: 15px !important;
  transition: transform 0.3s ease !important;
}

.area9 a:hover img {
  transform: scale(1.05) !important;
}

/* レスポンシブデザイン */
@media (max-width: 1024px) {
  .media-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 800px;
  }
  
  .area9 h2 {
    font-size: 36px !important;
  }
  
  .media-item {
    padding: 25px 20px;
  }
  
  .follower-count {
    font-size: 24px;
  }
  
  .total-count {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .area9 {
    padding: 40px 0;
  }
  
  .area9 h2 {
    font-size: 28px !important;
  }
  
  .media-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 30px 0;
  }
  
  .media-item {
    padding: 25px 20px;
  }
  
  .media-content h4 {
    font-size: 20px;
  }
  
  .follower-count {
    font-size: 22px;
  }
  
  .media-desc {
    font-size: 13px;
  }
  
  .total-followers {
    margin: 40px 0 30px;
    padding: 30px 20px;
  }
  
  .total-followers h3 {
    font-size: 20px;
  }
  
  .total-count {
    font-size: 36px;
  }
  
  .total-desc {
    font-size: 16px;
  }
  
  .area9 .txt {
    font-size: 18px;
    padding: 0 15px;
  }
}

@media (max-width: 480px) {
  .area9 {
    padding: 30px 0;
  }
  
  .area9 h2 {
    font-size: 24px !important;
    line-height: 1.4 !important;
  }
  
  .media-item {
    padding: 20px 15px;
  }
  
  .media-icon {
    height: 50px;
    margin-bottom: 15px;
  }
  
  .media-icon svg {
    width: 35px;
    height: 35px;
  }
  
  .media-content h4 {
    font-size: 18px;
  }
  
  .follower-count {
    font-size: 20px;
  }
  
  .media-link {
    padding: 8px 16px;
    font-size: 12px;
  }
  
  .total-followers {
    padding: 25px 15px;
  }
  
  .total-count {
    font-size: 32px;
  }
  
  .area9 .txt {
    font-size: 16px;
    padding: 0 10px;
  }
}

/* アニメーション効果 */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.media-item {
  animation: fadeInScale 0.6s ease-out;
  animation-fill-mode: both;
}

.media-item:nth-child(1) { animation-delay: 0.1s; }
.media-item:nth-child(2) { animation-delay: 0.2s; }
.media-item:nth-child(3) { animation-delay: 0.3s; }
.media-item:nth-child(4) { animation-delay: 0.4s; }
.media-item:nth-child(5) { animation-delay: 0.5s; }
.media-item:nth-child(6) { animation-delay: 0.6s; }

.total-followers {
  animation: fadeInScale 0.8s ease-out;
  animation-delay: 0.8s;
  animation-fill-mode: both;
}




/* ===== 著書 & メディア実績 ===== */
.fukai-proof{ background: linear-gradient(135deg,#fff,#fff9f0); padding:64px 0; }
.proof__inner{ max-width:1100px; margin:0 auto; padding:0 20px; }
.proof__title{ font-size:clamp(24px,3.2vw,40px); color:#ee8d20; font-weight:800; text-align:center; line-height:1.3; margin:0 0 28px; }
.proof__block + .proof__block{ margin-top:36px; }
.proof__subtitle{ display:inline-flex; align-items:center; gap:.5em; font-size:clamp(18px,2.2vw,26px); font-weight:700; margin:0 0 16px; }
.proof__subtitle span{ display:inline-block; background:#ee8d20; color:#fff; font-weight:900; padding:.2em .6em; border-radius:999px; line-height:1; }

/* books */
.books{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:768px){ .books{ grid-template-columns:1fr; } }

.book{
  display:grid; grid-template-columns:180px 1fr; gap:16px;
  background:#fff; border:3px solid #ee8d20; border-radius:16px; padding:16px;
}
@media (max-width:560px){ .book{ grid-template-columns:130px 1fr; } }

/* 書影を必ず見せる：比率固定＋内側トリミング */
.book__media{ margin:0; align-self:center; aspect-ratio:2/3; overflow:hidden; border-radius:12px; background:#fff; }
.book__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* 万一の小さすぎ対策（Retina等） */
  image-rendering:auto;
}

.book__body{ display:flex; flex-direction:column; justify-content:center; }
.book__title{ margin:0 0 10px; line-height:1.6; font-weight:700; font-size:clamp(14px,1.5vw,18px); }
.book__links{ display:flex; flex-wrap:wrap; gap:10px; }

/* セクション専用ボタン（グローバル .btn と衝突しない） */
.proof-btn{
  display:inline-block; padding:12px 18px; border-radius:999px;
  font-weight:800; text-decoration:none;
  transition:transform .06s ease, box-shadow .2s ease;
  position:static; z-index:1;
}
.proof-btn:active{ transform:translateY(1px); }
.proof-btn--cta{ background:linear-gradient(135deg,#ee8d20,#f4a445); color:#fff; box-shadow:0 6px 16px rgba(238,141,32,.25); }
.proof-btn--cta:hover{ box-shadow:0 10px 22px rgba(238,141,32,.35); }
.proof-btn--ghost{ background:#fff; color:#ee8d20; border:2px solid #ee8d20; }

/* press（タイトル＋ボタン） */
.press{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.press__item{
  background:#fff; border:2px dashed rgba(238,141,32,.45); border-radius:12px;
  padding:16px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.press__title{ margin:0; font-weight:700; color:#333; flex:1 1 auto; }
.press__btn{ flex:0 0 auto; font-size:14px; padding:8px 14px; }


/* SPでタイトルもボタンも中央揃え */
@media (max-width: 768px){
  .press__item{
    display: block;
    text-align: center;
    padding: 16px;
  }
  .press__title{
    margin-bottom: 12px;
    text-align: center;   /* タイトルも中央に */
  }
  .press__btn{
    position: static !important;
    display: inline-block;
    margin: 0 auto;
  }
}



/* ===== 共通ラッパ & セクション見出し ===== */
.fwrap{max-width:1100px;margin:0 auto;padding:0 20px}
.sec-ttl{
  font-size:clamp(24px,3.2vw,40px);
  color:#ee8d20;
  font-weight:800;
  text-align:center;
  line-height:1.3;
  margin:0 0 28px;
  position:relative;
}
.sec-ttl::after{
  content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);
  width:120px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,#ee8d20,#f4a445,#ee8d20);
}

/* ===== プロフィール ===== */
.fukai-profile{background:linear-gradient(135deg,#fff,#fff9f0);padding:64px 0}
.profile-box{
  display:grid;grid-template-columns:260px 1fr;gap:24px;
  background:#fff;border:4px solid #ee8d20;border-radius:24px;
  padding:24px;box-shadow:0 12px 28px rgba(238,141,32,.12);
}
@media(max-width:820px){ .profile-box{ grid-template-columns:1fr; } }

.profile-photo{display:flex;align-items:flex-start;justify-content:center;position:relative;padding-top:8px}
.profile-photo img{
  width:200px;height:200px;object-fit:cover;border-radius:50%;
  background:#fff;position:relative;z-index:1;display:block;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.profile-photo::before{
  content:"";width:220px;height:220px;border-radius:50%;
  background:conic-gradient(from 180deg,#ee8d20,#f4a445,#ee8d20);
  position:absolute;transform:translateY(-10px);
  filter:blur(.3px);z-index:0;border:8px solid #fff;border-radius:50%;
}

.profile-text h3{margin:0 0 10px;font-weight:800;font-size:clamp(18px,2vw,22px);color:#333}
.career{list-style:none;margin:0 0 14px;padding:0}
.career li{
  position:relative;padding-left:1.4em;margin:6px 0;line-height:1.7;
  font-weight:600;color:#222;
}
.career li::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:#ee8d20;position:absolute;left:0;top:.65em;
  box-shadow:0 0 0 4px rgba(238,141,32,.15);
}
.profile-intro{margin:18px 0 0;text-align:center}
.profile-intro p{margin:0 0 12px;line-height:1.9}

/* ===== モーダル（名前空間） ===== */
.fukai-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px;transition:opacity .2s ease;opacity:1}
.fukai-modal[aria-hidden="true"]{opacity:0;pointer-events:none}
.fukai-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.fukai-modal__content{
  position:relative;z-index:1;width:min(860px,100%);max-height:85vh;overflow:auto;
  background:#fff;border:4px solid #ee8d20;border-radius:18px;padding:24px 24px 28px;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
}
.fukai-modal__content h3{margin:0 0 10px;font-size:22px;font-weight:800;color:#ee8d20}
.fukai-modal__body{line-height:1.9}
.fukai-modal__close{
  position:absolute;top:10px;right:12px;width:36px;height:36px;line-height:32px;
  background:#fff;color:#ee8d20;border:2px solid #ee8d20;border-radius:999px;
  font-size:20px;font-weight:900;cursor:pointer;
}
@media(max-width:768px){ .fukai-modal__content{ padding:20px; margin:0; } }



/* === 自己紹介（カード＋見出し） === */
.intro-card{
  margin:22px 0 0;
  background:#fff;
  border:3px solid #ee8d20;
  border-radius:16px;
  padding:20px 22px 24px;
  text-align:center;
  box-shadow:0 10px 24px rgba(238,141,32,.08);
}
.intro-ttl{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  margin:0 0 10px;
  font-size:clamp(18px,2.2vw,22px);
  font-weight:800;
  color:#ee8d20;
}
.intro-ttl span{
  display:inline-block;
  padding:.2em .9em;
  border-radius:999px;
  border:2px solid #ee8d20;
  background:#fff9f0;
  line-height:1;
}
.intro-lead{
  margin:0 0 14px;
  line-height:1.9;
  font-weight:600;
  color:#333;
}
.intro-cta .proof-btn--lg{
  padding:14px 24px;
  font-size:16px;
  box-shadow:0 12px 28px rgba(238,141,32,.28);
}
.intro-cta .proof-btn--lg:hover{
  box-shadow:0 16px 36px rgba(238,141,32,.36);
}


/* ===== Modal: blog-like typography ===== */
.modal-article{
  max-width: 720px; /* 1行の長さを抑えて読みやすく */
  margin: 0 auto;
}
.modal-prose{
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 2.0;                 /* 行間を広めに */
  letter-spacing: .02em;
  color: #222;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";    /* かなのプロポーショナル詰め */
  text-underline-position: under;
}
.modal-prose p{ margin: 0 0 16px; }  /* 段落間の余白を増やす */
.modal-prose p + p{ margin-top: 0; }

.modal-prose h3{
  margin: 22px 0 10px;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  color: #ee8d20;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  background: #fff9f0;
  border: 2px solid #ee8d20;
  padding: .2em .8em;
  border-radius: 999px;
}
.modal-prose .ma-title{ margin-top: 0; } /* 先頭見出しは上マージンを詰める */

.modal-prose .ma-figure{
  margin: 14px auto 18px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  background: #fff;
}
.modal-prose .ma-figure img{
  width: 100%; height: auto; display: block; /* 画像はトリミングしない */
}

.modal-prose .ma-cta{
  text-align: center;
  margin: 14px 0 8px;
}


/* ===== モーダル：×ボタンを右上に“固定” ===== */
/* コンテンツがスクロールしても常に見えるように */
.fukai-modal__content{ position: relative; padding-top: 28px; } /* ×が被らないよう少し上余白 */
.fukai-modal__close{
  position: sticky;         /* スクロールしても上部に張り付く */
  top: 12px;                /* 上からの固定距離 */
  float: right;             /* 右寄せ */
  z-index: 5;               /* コンテンツより前面に */
}
/* 端末の安全エリア考慮（iOS等） */
@supports (top: env(safe-area-inset-top)) {
  .fukai-modal__close{ top: calc(12px + env(safe-area-inset-top)); }
}

/* ===== 緑ボタン（戻る用） ===== */
.proof-btn--green{
  background: linear-gradient(135deg,#1db954,#3ecf78);
  color:#fff;
  border: none;
  box-shadow: 0 10px 24px rgba(61, 199, 118, .28);
}
.proof-btn--green:hover{
  box-shadow: 0 14px 32px rgba(61, 199, 118, .36);
}

/* ===== スマホ時：クローズを画面の右上に固定、当たり判定も拡大 ===== */
@media (max-width: 768px){
  .fukai-modal{ padding: 12px; }               /* 余白を少し詰めて右上スペース確保 */
  .fukai-modal__content{ padding-top: 20px; }  /* ×が被らないよう上余白 */
  .fukai-modal__close{
    position: fixed;                            /* 画面基準で固定 */
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    width: 44px; height: 44px;                  /* 指で押しやすいサイズ */
    line-height: 40px;                          /* アイコンの縦位置 */
    font-size: 22px;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    z-index: 3000;
  }
}

/* ===== 緑ボタン（戻る用）＋ XLサイズ ===== */
.proof-btn--green{
  background: linear-gradient(135deg,#1db954,#3ecf78);
  color:#fff; border:none;
  box-shadow: 0 10px 24px rgba(61,199,118,.28);
}
.proof-btn--green:hover{ box-shadow: 0 14px 32px rgba(61,199,118,.36); }

.proof-btn--xl{
  padding: 16px 28px;        /* ひと回り大きく */
  font-size: 18px;
}


/* === Closeボタンを"箱の中の右上"に固定（はみ出し防止） === */
.fukai-modal__content{
  position: relative;          /* 基準にする */
  max-height: 90vh;            /* 90%高さは維持 */
  overflow: auto;
}

/* すべての画面サイズで枠の内側に配置する */
.fukai-modal .fukai-modal__close{
  position: absolute !important;   /* 以前の fixed/sticky を打ち消す */
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  line-height: 36px;
  font-size: 20px;
  z-index: 5;                       /* コンテンツより前面 */
}

/* スマホ：上に×のスペースを少し確保、端の余白も安全に */
@media (max-width: 768px){
  .fukai-modal{ padding: 12px; }
  .fukai-modal__content{
    padding-top: 56px;              /* ×が本文に被らないよう余白 */
    margin: 0 12px;                 /* 端末端での接触を防止 */
    box-sizing: border-box;
  }
  .fukai-modal .fukai-modal__close{
    top: 8px;
    right: 8px;
    width: 40px; height: 40px;
  }
}




/* ===== 料金設定の思い（縦1カラム＆読みやすさアップ） ===== */
.pricing-thought{
  background: linear-gradient(135deg,#fff,#FFF7EC);
  padding: 56px 0;
}
.pricing-thought .sec-ttl{
  text-align:center;
  margin: 0 0 18px;
}

/* 2×2 ではなく、常に縦1カラムで並べる */
.pt-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;                  /* 各カードの間隔 */
}

/* カードのコントラストを少し柔らかく */
.pt-card{
  background: #fff;
  border: 2px solid #ee8d20;  /* 3px → 2px にして軽く */
  border-radius: 16px;
  padding: 20px 20px 22px;
  box-shadow: 0 10px 24px rgba(238,141,32,.10);
}

/* タイトルは強め、でも本文は通常ウェイトへ */
.pt-ttl{
  margin: 0 0 10px;
  font-weight: 700;           /* 強調は見出しに寄せる */
  color: #ee8d20;
  font-size: clamp(16px,1.9vw,18px);
}
.pt-ttl span{
  display: inline-block;
  background: #fff9f0;
  border: 2px solid #ee8d20;
  border-radius: 999px;
  padding: .25em .9em;
  line-height: 1;
}

/* 本文は通常ウェイト＆行間広めで読みやすく */
.pt-card p{
  margin: 0;
  color: #333;
  line-height: 1.95;          /* 行間アップ */
  font-weight: 400;           /* 600 → 400（通常） */
  letter-spacing: .01em;
}
.pt-card p + p{ margin-top: 10px; }  /* 段落間に余白 */

.pt-cta{
  margin-top: 22px;
  text-align: center;
}



/* ========== 実践者の声モーダル：見た目アップ ========== */

/* モーダル見出しを中央に、下線をアクセント */
#modal-voices-title{
  margin: 0 0 12px;
  text-align: center;
  font-size: clamp(18px, 2.3vw, 22px);
  font-weight: 900;
  color: #ee8d20;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
#modal-voices-title::after{
  content: "";
  display: block;
  width: 140px;
  height: 3px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, #ee8d20, transparent);
  border-radius: 2px;
}

/* 縦1カラム（そのままでOK） */
.voices-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 各カードの質感をアップ */
.voice-card{
  background: linear-gradient(180deg,#fff,#FFFDF6);
  border: 2px solid #ee8d20;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 12px 28px rgba(238,141,32,.10);
  display: grid;
  grid-template-columns: 110px 1fr;    /* 写真＋本文 */
  gap: 14px;
  align-items: start;
}
@media (max-width: 560px){
  .voice-card{
    grid-template-columns: 1fr;        /* SPは縦積み */
    padding: 14px;
  }
}

/* 画像をアバター風に（四角写真も自動で丸く） */
.voice-card__media{ margin: 0; }
.voice-card__media img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.12), 0 0 0 3px #ffd7a8; /* 外周に淡いオレンジ */
}

/* テキストの可読性 */
.voice-card__content{
  color:#222;
  line-height: 1.95;
  letter-spacing: .01em;
}
.voice-card__content p{ margin: 0 0 10px; }

/* 名前はやや大きめ＆濃色 */
.voice-card__name{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color:#222;
}

/* セクション見出しを“ピル型チップ”に */
.voice-card__section{
  display: inline-block;
  margin: 12px 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: #ee8d20;
  background: #fff9f0;
  border: 2px solid #ee8d20;
  border-radius: 999px;
  padding: .2em .75em;
  line-height: 1;
}

/* 箇条書きを視認性良く（オレンジのドット＋外環） */
.voice-card ul{
  margin: 0 0 10px 1.3em;
  padding: 0;
}
.voice-card li{
  position: relative;
  margin: 6px 0;
  list-style: none;
  padding-left: .1em;
}
.voice-card li::before{
  content:"";
  position: absolute;
  left: -1.2em;
  top: .72em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ee8d20;
  box-shadow: 0 0 0 4px rgba(238,141,32,.15);
}

/* 強調文字は背景ハイライト（数字が映える） */
.voice-card strong{
  background: linear-gradient(180deg, rgba(255,208,153,.4), rgba(255,208,153,.2));
  border-radius: 4px;
  padding: 0 .2em;
}

/* カード群の最後に余白 */
.voices-modal__body{ margin-top: 8px; }
.voices-modal__cta{ text-align:center; margin-top: 14px; }




/* ----------------------------------------------------
 
    text
 
---------------------------------------------------- */
em {
	text-decoration: underline;
  font-style: normal;
}
.bd_red {
	border-bottom: 1px solid #FF0004;
	padding-bottom: 2px;
}
.bd_red02 {
	border-bottom: 3px solid #FF0004;
	padding-bottom: 0px;
}
.red {
	color: #cb1c24;
}

.blue {
	color: blue;
}
.yellow {
	background-color: #ffff00;
}
.yellow2 {
	color: #ffff00;
}
.gray {
	color:#666666;
}

.white{
	color: #fff;
}

.bold {
	font-weight: bold;
}
strong {
	font-weight: bold;
}
.strike {
	text-decoration: line-through;
}
.ac {
	text-align: center !important;
}
.ar {
	text-align: right !important;
}
.al {
	text-align: left !important;
}
.bold {
	font-weight: bold !important;
}
.font10 {
	font-size: 10px !important;
}
.font11 {
	font-size: 11px !important;
}
.font12 {
	font-size: 12px !important;
}
.font13 {
	font-size: 13px !important;
}
.font14 {
	font-size: 14px !important;
}
.font15 {
	font-size: 15px !important;
}
.font16 {
	font-size: 16px !important;
}
.font17 {
	font-size: 17px !important;
	line-height:150%;
}
.font18 {
	font-size: 18px !important;
}
.font19 {
	font-size: 19px !important;
}
.font20 {
	font-size: 20px !important;
}
.font21 {
	font-size: 21px !important;
}
.font22 {
	font-size: 22px !important;
}
.font23 {
	font-size: 23px !important;
}
.font24 {
	font-size: 24px !important;
}
.font25 {
	font-size: 25px !important;
}
.font26 {
	font-size: 26px !important;
}
.font27 {
	font-size: 27px !important;
}
.font28 {
	font-size: 28px !important;
}
.font29 {
	font-size: 29px !important;
}
.font30 {
	font-size: 30px !important;
}
.font32 {
	font-size: 32px !important;
}
/* ----------------------------------------------------
 
    float
 
---------------------------------------------------- */
.fr {
	float: right !important;
}
.fl {
	float: left !important;
}
.clear {
	clear: both;
}
img {
	line-height: 0;
	padding: 0;
	margin: 0;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;/*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.content1{
	width: 680px;
	margin: 0 auto;
	background: #e9e9dd;
	font-weight: bold;
	font-size: 22px;
	box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.5);
	margin-bottom: 20px;
	position: relative;
}

.list ul{
	　list-style:none;
}
.list ul{
	padding: 30px  30px;
}
.list li{
	padding-bottom: 30px;
}
.list3 ul{
	padding: 20px 0px 0px 30px;
}
.list3 li{
	padding-bottom: 15px;
}
.list ul li{
	background: url("../images/check.png") left 3px  no-repeat;
	padding-left: 40px;
	line-height: 1.6em;
}


@media screen and (max-width: 800px) {
	
.font28 {
	font-size: 20px !important;
}
	
	.content1{
		width: 100%;
		

		margin: 0 auto;
		background: #e9e9dd;
		font-weight: bold;
		font-size: 18px;

	}
	.header-title p{
		font-size: 50%;
		line-height: 1.2em;
	}
	.arrow img{
		width: 20%;
	}
	.list{
		width: 90%;
		margin: 0 auto;
	}
	.title{
		
	}
	.info{
		width: 90%;
	}
	.info-title img{
		width: 20%;
		  height:auto;
	}
	.info-item h2{
		font-size: 25px;
		line-height: 1.3em;
	}
	.info-item h3{
		font-size: 25px;
		line-height: 1.3em;
	}
	.topic h2{
		font-size: 20px;
		line-height: 1.3em;
	}
	.topic{
		padding: initial;
		padding: 10px 0;
	}
	.profile h3{
		font-size: 35px;
	}
	.list ul{
		font-size: 18px;
		padding: 10px ;
	}
	.pic-text{
		font-size: 18px;
	}
	.pic-text h3{
		font-size: 25px;
	}
	.lead p{
		font-size: 12px;
	}
	.item3 h2{
		font-size: 100%;
	}
	.qa{
		font-size: 18px;
	}
	.reason-topic h3{
		font-size: 100%;
	}
	.list4{
		display: flex;
	}
	.list4 ul li{
		font-size: 18px;
	}
	.content2 ul li{
	background: url("../images/check3.png") left 7px  no-repeat;
	padding-left: 30px;
	line-height: 1.6em;
	}
	.list ul li{
	background: url("../images/check.png") left 1px  no-repeat;
	padding-left: 40px;
	line-height: 1.6em;
	}
	.qus{
		padding-bottom: 5px;
		font-weight: bold;
		background: url("./q2.png") left 6px  no-repeat;
		background-size:5%;
		padding-left: 22px;
		line-height: 1.6em;
}

	.ans{
		background: url("./a2.png") left 6px  no-repeat;
		background-size:5%;
		padding-left: 22px;
		line-height: 1.6em;
	}
	.list4 ul li{
	background: url("./check3.png") left 5px  no-repeat;
	padding-left: 30px;
	line-height: 1.6em;
	}
	.list2{
		font-size: 15px;
	}
	.list5 ul li{
	background: url("./check3.png") left 10px  no-repeat;
	padding-left: 20px;
	line-height: 1.4em;
	font-size: 18px;
	font-weight: bold;
	}
	.list5 li{
		padding: 5px 0;
	}
	

}
}


.hidden_box {
    margin-bottom: 10px;
    padding: 0;
}


/*ボタン装飾*/
.hidden_box label {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #f7f7f7;
  border-left: solid 6px red;/*左線*/
  color: red;/*文字色*/
  font-weight: bold;
  width: 500px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

@media screen and (max-width: 680px) {
	.hidden_box label {
	  width: 90%;
	  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
	}
}

/* ==========================================================================
   スティッキーバナー
   ========================================================================== */

.sticky-footer-btn {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 999;

  padding: 15px;
  width: 100%;
  height: auto;
  background: rgba(0,0,0,0.3);
  text-align: center;
  transform: translate(-50%);

  line-height: 1;
}

.sticky-footer-btn img {
  height: 90px;
	text-align: center;
}

.footer {
  padding-bottom: 130px;
}

@media(max-width: 599px) {
  .sticky-footer-btn img {
    height: auto;
  }
  .footer {
    padding-bottom: 100px;
  }
}





/* ----------------------------------------------------
    clearfix の代用
    &#60;div class="hr"&#62;&#60;hr /&#62;&#60;/div&#62;
---------------------------------------------------- */
.hrstyle {
	background-color: #fff;
	border-top: 2px dashed #8c8b8b;
}

.hl {
    background: linear-gradient(transparent 70%, #ffff00 0%);
    line-height: 1.3em;
}


.w10 {
	width: 10%;
}

.w20 {
	width: 20%;
}

.w30 {
	width: 30%;
}

.w40 {
	width: 40%;
}

.w50 {
	width: 50%;
}

.w60 {
	width: 60%;
}

.w70 {
	width: 70%;
}

.w80 {
	width: 80%;
}

.w90 {
	width: 90%;
}

.w100 {
	width: 100%;
}

.lc_box{
  width: 100%;
  height: 200px;
  border: dotted 3px #0d5383;
  overflow: scroll;
}


@media screen and (max-width : 749px ){
	.lc_box{
	  width: 90%;
	  height: 300px;
	  margin: 10px auto;
	  text-align: center;
	}	
}
.btn_area{
	position: relative;
	width: 100%;
	height: 573px;
	margin: 0 auto;	
}

.btn{
	position: absolute;
	top: 515px;
	left: 30px;
	
}

.logo {
	margin: 20px auto;
}

.box {
    padding: 1em 1em;
	background: #fffcef;
    margin: 2em 0;
	font-size: 16px;
    border: solid 1px #ee8d20;/*点線*/
}

.box2 {
    padding: 1em 1em;
    margin: 5px 0;
	font-size: 19px;
	color: red;
    background: #fff;
    border: dashed 2px #ff0000;/*点線*/
}

.box3 {
    padding: 1em 1em;
	margin-bottom: 20px;
	font-size: 25px;
	color: red;
    background: #fff0f0;
    border: dashed 2px #ff0000;/*点線*/
}

.area1{
	background: linear-gradient(to bottom, #000, #ee8d20);
	padding: 10px 10px;
}
	

.area1 h1{
	font-size: 40px;
	margin-top: 20px;
	text-align: center;
	font-weight: bold;
	color: #a6272d;
	line-height: 1.4em;
}

.area1 h2{
	font-size: 50px;
	text-align: center;
	font-weight: bold;
	color: #fff;
	line-height: 1.4em;
}

.area1 h3{
	font-size: 24px;
	margin-top: 20px;
	text-align: center;
	font-weight: bold;
	color: #0d538d;
	line-height: 1.4em;
}

.area1 p{

}

.box2p{
	
	margin-top: 20px;
	font-size: 14px;
	color: #808080;
}

.emp1{
	font-size: 28px;
	margin-top: 20px;
	text-align: center;
	font-weight: bold;
	color: #000;
	line-height: 1.4em;
}

.emp2{
	font-size: 40px;
	text-align: center;
	font-weight: bold;
	color: #cb1c24;
	line-height: 1.4em;
}




	
.media{
	background-color: #eeeff0;
	padding: 40px 20px;
	margin: 30px 0;
}
	

.media img{
	text-align: center;
	width: 900px;
}




.area2{
	background-color: #ee8d20;
  	background-size: cover;
	padding: 10px;
	margin: 0;
}
	


.area2 h2{
	font-size: 35px;

	text-align: center;
	font-weight: bold;
	color: #fff;
	line-height: 1.4em;
}

.area2 h3 {
	color: #fff;
	margin: 10px 50px;
	text-align: center;
	font-size: 24px;
	background: linear-gradient(-20deg, #d68d27 0%, #d3235f 100%);
	border-radius: 50px 3px;
	font-weight: 600;
}

.area2 h4{
	text-align: center;
	color: #a7272d;
	font-weight: bold;
	margin: 10px 0;
	font-size: 28px;
}

.area2 img{
	text-align: center;
}



.area2 p{
	font-size: 14px;
	text-align: center;
	color: #fff;
	line-height: 1.5em;
}



.area6 p{
	font-size: 14px;
	text-align: center;
	color: #fff;
	line-height: 1.5em;
}
	
.area6{
	background-color: #000;
  	background-size: cover;
	padding: 10px;
	margin: 0;
}
	


.area6 h2{
	font-size: 35px;

	text-align: center;
	font-weight: bold;
	color: #fff;
	line-height: 1.4em;
}

.area6 h3 {
	color: #fff;
	margin: 10px 50px;
	text-align: center;
	font-size: 24px;
	background: linear-gradient(-20deg, #d68d27 0%, #d3235f 100%);
	border-radius: 50px 3px;
	font-weight: 600;
}

.area6 h4{
	text-align: center;
	color: #a7272d;
	font-weight: bold;
	margin: 10px 0;
	font-size: 28px;
}

.area6 img{
	text-align: center;
}





.area7 p{
	font-size: 14px;
	text-align: center;
	color: #fff;
	line-height: 1.5em;
}
	
.area7{
	background-color: #f4d85a;
  	background-size: cover;
	padding: 10px;
	margin: 0;
}
	


.area7 h2{
	font-size: 35px;

	text-align: center;
	font-weight: bold;
	color: #fff;
	line-height: 1.4em;
}

.area7 h3 {
	color: #fff;
	margin: 10px 50px;
	text-align: center;
	font-size: 24px;
	background: linear-gradient(-20deg, #d68d27 0%, #d3235f 100%);
	border-radius: 50px 3px;
	font-weight: 600;
}

.area7 h4{
	text-align: center;
	color: #a7272d;
	font-weight: bold;
	margin: 10px 0;
	font-size: 28px;
}

.area7 img{
	text-align: center;
}


.free{
	color: red;
	font-size: 34px;
	font-weight: bold;
}

.area3{
    background: linear-gradient(to bottom, #ee8d20, #fff);
	padding: 10px;
}
	

.area3 h2{
	font-size: 35px;
	margin: 20px auto;
	text-align: center;
	font-weight: bold;
	color: #000;
	line-height: 1.4em;
}

.area3 h3 {
	color: #fff;
	text-align: center;
	font-size: 24px;
	background-color: #be271b;
	font-weight: 600;
}

.area3 h4{
	text-align: center;
	color: #000;
	font-weight: bold;
	margin: 10px 0;
	font-size: 20px;
}

.area3 img{
	text-align: center;
}



.area2 p{
	font-size: 14px;
	text-align: center;
	color: #fff;
	line-height: 1.5em;
}

.mincho{
	font-family: '游明朝 Medium', serif;
}

.flex_test-box {
	/* 背景色指定 */
    padding:  0 10px;             /* 余白指定 */
    display: flex;              /* フレックスボックスにする */
    justify-content:center;
}

 
.flex_test-item {
    padding: 10px;
    color:  #000;               /* 文字色 */
    margin:  10px;              /* 外側の余白 */
    width: 25%;                 /* 幅指定 */
}

.flex_test-item img{
	width: 100%;
}

.flex_test-item p{
	text-align: justify;
	margin: 20px auto;
	width: 90%;
	font-size: 13px;
}


.flex_test-item h4{
	text-align: center;
	color: #a8272d;
	font-size: 17px;
	font-weight: 700;
	margin: 10px 0;
}


.flex_test-box {
	/* 背景色指定 */            /* 余白指定 */
    display: flex;              /* フレックスボックスにする */
    justify-content:center;
}

 
.flex_test-item img{
	width: 100%;
}

.flex_test-item p{
	text-align: justify;
	margin: 20px auto;
	width: 90%;
	font-size: 13px;
}


.flex_test-item h4{
	text-align: center;
	color: #a8272d;
	font-size: 17px;
	font-weight: 700;
	margin: 10px 0;
}



.flex_test-iteml {
    padding: 10px;
    color:  #000;               /* 文字色 */
	background-color: #fff;
    margin:  10px;              /* 外側の余白 */
    width: 18%;                 /* 幅指定 */
}

.flex_test-iteml img{
	width: 100%;
}

.flex_test-iteml p{
	text-align: center;
	margin: 0 auto;
	width: 90%;
	color: #000;
	font-size: 18px;
}


.flex_test-iteml h4{
	text-align: center;
	color: #0d5385;
	font-size: 24px;
	font-weight: 700;
	margin: 10px 0;
}


.flex_test-box2 {
	/* 背景色指定 */
    padding:  0 10px;             /* 余白指定 */
    display: flex;              /* フレックスボックスにする */
    justify-content:center;
}

.flex_test-box2 h3{
	/* 背景色指定 */
    text-align: left;
}


 
.flex_test-item2 {
    padding: 10px;
    color:  #000;               /* 文字色 */
    margin:  10px;              /* 外側の余白 */
    width: 35%;                 /* 幅指定 */
}

.flex_test-item2 img{
	width: 100%;
}

.flex_test-item2 p{
	text-align: justify;
	margin: 10px auto;

	width: 100%;
	font-size: 18px;
}


.flex_test-item2 h4{
	text-align: center;
	color: #000;
	font-size: 16px;
	font-weight: 700;
	margin: 10px 0;
}

.tokuten {
	color: #fff;
	margin: 10px 10px;
	text-align: center;
	font-size: 30px;
	background-color: #a8272d;
	font-weight: 600;
}

	
.area4{
	background-color: #ee8d20;
  	background-size: cover;
	padding: 20px;
	margin: 0;
}
	
.area4 h1{
	font-size: 35px;
	margin-top: 20px;
	text-align: center;
	font-weight: bold;
	color: #0d5383;
	line-height: 1.4em;
}

.area4 h2{
	font-size: 35px;
	margin-top: 20px;
	text-align: center;
	font-weight: bold;
	color: #000;
	line-height: 1.4em;
}

.area4 h3 {
	color: #fff;
	margin: 10px 50px;
	text-align: center;
	font-size: 24px;
	background-color: #a7272d;
	font-weight: 600;
}

.area4 h4{
	text-align: center;
	color: #a7272d;
	font-weight: bold;
	margin: 10px 0;
	font-size: 28px;
}

.area4 img{
	text-align: center;
}



.area4 p{
	font-size: 14px;
	text-align: center;
	color: #fff;
	line-height: 1.5em;
}



.area5 {
  position: relative;
  overflow: hidden;
}

.area5 .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/bg1.jpg') center center / cover no-repeat;
  z-index: -1;
}

.area5 .contents2 {
  position: relative;
  z-index: 1;
}

.area5 h2{
	font-size: 35px;
	margin-top: 20px;
	text-align: center;
	font-weight: bold;
	color: #fff;
	text-shadow:  3px 4px 3px #000;
	line-height: 1.4em;
}

.area5 h3 {
	color: #fff;
	margin: 10px 50px;
	text-align: center;
	font-size: 24px;
	background-color: #ee8d20;
	font-weight: 600;
}

.area5 h4{
	text-align: center;
	color: #ee8d20;
	font-weight: bold;
	margin: 10px 0;
	font-size: 28px;
}

.area5 img{
	text-align: center;
}





.txt {
	width: 95%;
	text-align: left;
	margin: 10px auto;
}

.txt2 {
	width: 90%;
	text-align: left;
	margin: 20px auto ;
}

.txt3 {
	width: 90%;
	color: #fff;
	text-align: center;
	margin: 0 auto 50px;
}



@media screen and (max-width : 749px ){
.area5{
	padding:10px;
	margin: 0;
}
	
	

.txt {
	font-size: 18px;
	width: 95%;
	
	text-align: left;
	margin: 10px auto;
}

.txt2 {
	font-size: 16px;
	width: 90%;
	text-align: left;
	margin: 10px auto ;
}
	
.txt3 {
	font-size: 16px;
	width: 90%;
	text-align: center;
	margin: 0 auto 30px;
}
	
.box {
	width: 90%;
	font-size: 14px;
}
	
.box2 {
	width: 90%;
	margin: 10px auto;
	font-size: 18px;
}
	
.box3 {
	width: 80%;
	margin: 10px auto;
	font-size: 15px;
}
	
	
.emp1{
	font-size: 20px;
}
	
.emp2{
	font-size: 25px;
}
	
.emp3{
	font-size: 14px;
}
	

	
	.area1{
		padding: 10px;
	}
.area1 h1{
	font-size: 28px;
}
	
.area1 h2{
	font-size: 28px;
}
	
.area1 p{

}
.area3 h2{

	font-size: 23px;
}
	
.area3 h3{
	margin-top: 30px;
	font-size: 24px;
	text-align: center;
}

.flex_test-box {
  flex-direction: column;
	width: 95%;
	margin: 0px auto;
  align-content:space-around;

}

.flex_test-box p{
	width: 100%;
	font-size: 18px;
	margin: 20px auto;
	text-align: center;
}

.flex_test-item {
	width: 95%;
	margin: 0px auto;
}
	
.flex_test-item p{
	font-size: 14px;
	text-align: left;
	width: 90%;
	margin: 5px auto;
}
	
	
.flex_test-iteml {
	width: 95%;
	margin: 10px auto;
	padding: 10px 0;
}
	
.flex_test-iteml p{
	font-size: 14px;
	text-align: left;
	width: 90%;
	margin: 5px auto;
}
	
.flex_test-itemr {
	width: 95%;
	margin: 0 auto;
	padding: 0 0;
}
	
.flex_test-itemr p{
	font-size: 14px;
	text-align: left;
	width: 90%;
	margin: 5px auto;
}
	
	
.flex_test-box2 {
  flex-direction: column;
	width: 95%;
	margin: 10px auto;
  align-content:space-around;

}

.flex_test-box2 p{
	width: 100%;
	font-size: 18px;
	margin: 20px auto;
	text-align: center;
}

.flex_test-item2 {
	width: 95%;
	margin: 0px auto;
	padding: 0px 0;
}
	
.flex_test-item2 p{
	font-size: 16px;
	text-align: justify;
	width: 95%;
	margin: 5px auto;
}
	
.area6 {
	padding: 10px;
}
	
.area2 {
	padding: 10px;
}
	
.area2 h2 {
	font-size: 25px;
}


.area2 h3 {
	font-size: 15px;
	margin: 10px auto;
	width: 100%;
}

.area2 h4{
	text-align: center;
	color: #a7272d;
	font-weight: bold;
	margin: 10px 0;
	font-size: 23px;
}
	
	
.box2p{
	line-height: 1.8em;
	padding: 0px;
	font-size: 9px;
	color: #808080;
}

.area4 h1 {
	font-size: 25px;
	margin: 10px auto;
	width: 100%;
}
	
.area4{
	padding: 10px;
	margin: 0px auto;
}
	
}

@media screen and (max-width : 749px ){
	.btn_area{
		position: relative;
		width: 100%;
		height: auto;
	}

	.btn{
		position: absolute;
		width: 86%;
		left: 7%;
		top:73%;
	}
	
}










.form_area{
	background: #000;
	padding: 30px 0;
	
}

.form_back{
	background-color: #fff;
	width: 640px;
	margin: 10px auto;
	padding-top: 10px;
	border-radius: 0px;
}


#form {
	width: 680px;
	margin: 0 auto;
	text-align: left;
}

.inputText {
	height: 78px;
	width: 98%;
	padding-left: 2%;
	border: 2px solid #c1272d;
	font-size: 32px;
	font-weight: bold;
}



.content_form{
	width:90%;
	margin:0 auto;
}

.form_input_input{
	width: 98%;
	padding-left: 2%;
	height: 106px;
	font-size: 30px;
	font-weight: bold;
	
}

input::placeholder{
	color: #ccc;
}


input:-ms-input-placeholder{
	color: #ccc;
}




.add{
	background-color: #000;
	background-repeat: repeat-x;
}



@media screen and (max-width : 657px ){
	#form {
		width: 90%;
		margin: 0 auto;
		text-align: left;
	}

	.inputText {
		height: 60px;
		width: 98%;
		padding-left: 2%;
		font-size: 18px;
	}
	
	.form_area{
		margin: 0;
		padding:20px 0;
	}
	
	.form_back{
		width:95%;
		margin:10px auto;
	}
	
	.content_form{
		width:90%;
		margin:0 auto;
	}

	.form_input_input{
		width: 98%;
		height: 50px;
		font-size: 18px;
	}

	input::placeholder{
		color: #ccc;
	}


	input:-ms-input-placeholder{
		color: #ccc;
	}
	
	.add img{
		width: 100%;
	}
	
	.form_area img{
		width: 100%;
	}

}



footer{
	background-color: #000;
	padding: 5px;
	font-size: 12px;
	color: #fff;
	text-align: center;
}

footer a {
	coler: #AB975D;
	text-decoration: none;
}

footer a:hover {
	coler: #AB975D;
	text-decoration: none;
}

footer a:visited {
	coler: #AB975D;
	text-decoration: none;
}


.footer_link{
	margin-bottom: 0;
}

.footer_link a {
	coler: #fff;
	text-decoration: none;
}

.footer_link a:hover {
	coler: #fff;
	text-decoration: none;
}

.footer_link a:visited {
	coler: #fff;
	text-decoration: none;
}


.Qa-Box {
  width: 100%;
  margin: 0 auto;
}

.Qa-Box .Qa dt,
.Qa-Box .Qa dd {
  display: flex;
  align-items: baseline;
  margin: 15px 0;
  padding: 15px;
}

.Qa-Box .Qa dt {
  background: #F5F5F5;
}

.Qa-Box .Qa dt p {
  margin: 0;
  padding-left: 15px;
  font-weight: bold;
  width: 100%;
 font-size: 20px;
}

.Qa-Box .Qa dd p {
  margin: 0;
  padding-left: 15px;
  width: 100%;
 font-size: 20px;
}

.Qa-Box .Qa dt::before {
  content: "Q";
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #ee8d20;
  width: 2em;
  height: 2em;
}

.Qa-Box .Qa dd::before {
  content: "A";
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ee8d20;
  background: #fff;
  border: 1px solid #ee8d20;
  width: 2em;
  height: 2em;
}



@media screen and (max-width: 960px) {
  .Qa-Box {
    width: 95%;
	font-size: 12px;
  }
	.Qa-Box .Qa dt p {
	  margin: 0;
	  padding-left: 15px;
	  font-weight: bold;
	  width: 100%;
	 font-size: 14px;
	}

	.Qa-Box .Qa dd p {
	  margin: 0;
	  padding-left: 15px;
	  width: 100%;
	 font-size: 14px;
	}
}

/* 通常（PC）ではタイル表示 */
.slide-wrap {
  background-color: #ccc;
  display: flex;
  margin: 0 auto;
  max-width: 1024px;
  width: 100%;
}
.slide-box {
  height: auto;
  margin: .5%;
  width: 80%;
}
.slide-box a {
  background-color: #fff;
  color: #222;
  display: block;
  text-decoration: none;
}
.slide-box img {
  display: block;
  height: auto;
  width: 100%;
}
.slide-box p {
  font-weight: bold;
  padding: 10px;
  margin:.5rem auto;
}
@media screen and (max-width: 768px) {
/* スマホサイズでスライダー表示 */
  .slide-wrap {
    overflow-x: scroll;
  }
  .slide-box {
    flex: 0 0 70%;
    margin: auto 1% auto auto;
  }
}



/* ------------------------------------ */
/* ▼PC用デザインとして付け足すデザイン */
/* ------------------------------------ */
@media (min-width: 750px) {
	body {
		background: #fff;
	}

	
	.contents{
	width: 600px;
	margin: 0 auto;
	padding: 0 ;
	}
	
	.contents img{
		width: 100%;
	}
	
	.contents2{
	width: 680px;
	margin: 0 auto;
	padding: 0 ;
	}
	
	.contents2 img{
		width: 100%;
	}
	
	
	.contents3{
	width: 800px;
	margin: 0 auto;
	padding: 0;
	}
	
	
	
	.pic {
		margin: 0 auto;
		width: 90%;
	}
	
	.max {
		margin: 0 auto;
		width: 100%;
	}

	
	.cause{
		background: #a7272d;
		padding: 20px;
	}
	
	.cause2{
		background: #183F92;
		padding: 20px;
	}

	.point{
		background: #55992b;
		padding: 20px;
	}
	
	.cause-box{
		width:100%;
		background: #fff;
		margin: 30px auto;
		padding: 10px;
		box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .1);
	}
	
	.effect{
		width: 90%;
		margin: 20px auto;
	}
	
}




/* ------------------------------------ */
/* ▼スマホ用デザインとして付け足すデザイン */
/* ------------------------------------ */

@media (max-width: 749px) {
	
	.contents{
		width: 100%;
	}
	
	.contents img{
		width: 100%;
	}
	
	.contents3{
		width: 90%;
	}
	
	.pic {
		margin: 0 auto;
		width: 100%;
	}
	
	.cause{
		background: #a6272d;
		width:100%;
		margin: 0 auto;
		padding: 0;
		padding-bottom: 20px;
		padding-top: 5px;
	}
	
	.cause-box{
		width:95%;
		margin: 20px auto;
		background: #fff;
		padding: 10px;
		box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .1);
	}
	
	.point{
		background: #55992b;
		width:100%;
		margin: 0 auto;
		padding: 0;
		padding-bottom: 20px;
		padding-top: 5px;
	}
	

	
	
	.effect{
		width: 90%;
		margin: 20px auto;
	}
	
}


.kaisha {
width: 100%;
}

.kaisha th,
.kaisha td {
border: 1px solid #ccc;
padding: 20px;
}

.kaisha th {
font-weight: bold;
background-color: #dedede; 
}



@media screen and (max-width: 767px) {
.kaisha {
width: 90%;
font-size: 16px;
margin: 10px auto;
}

	
.kaisha,
.kaisha tr,
.kaisha td,
.kaisha th {display:block;}
.kaisha th {width:auto;}
}