html, body{
  overflow-x:hidden;
}


a{
  text-decoration:none;
  color:#000;
  font-size:16px;
  letter-spacing:1px;
  transition:0.5s;
}

/* ロゴ */
.logo img{
  transition:0.3s;
}
.logo img:hover{
  opacity:0.45;
}

/* ヘッダー */
header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:10;
  background:#fff;
  padding:28px 0;
  transition:0.5s;
}

/* スクロール時（PC） */
header.scroll-nav{
  display:flex;
  align-items:end;
  padding:7px 0;
  box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}

header.scroll-nav .nav-pc{
  text-align:left;
  padding-left:40px;
}

.nav-pc a{
  color:#333;
}

header.scroll-nav .nav-pc a{
  color:#333;
}


/* ナビ */
.cp_link{
	position: relative;
	padding: 0.1em 0.3em;
	display: inline-block;
	transition: .3s;
	color: #00acc1;
  	margin-top: 20px;
  	vertical-align: bottom;
  	margin-left: 30px;
}

.cp_link::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-2px;
  width:0;
  height:1px;
  background:#00acc1;
  transition:.3s;
  transform:translateX(-50%);
}

.cp_link:hover::after{
  width:100%;
}

/* トップ */
.image{
  width:100%;
  height:100vh;
  background:url("../top_bg.jpg") center/cover no-repeat;
  position:relative;
}

.image p{
  position:absolute;
  top:44%;
  left:52%;
  transform:translate(-50%,-50%);
  font-size:56px;
  color:#fff;
  font-family:serif;
  text-shadow:0 0 10px #19448e;
}

/* スローガン効果 */
.slogan {
  font-size:56px;
  font-family: "游明朝", "Yu Mincho", serif;
  letter-spacing:5px;
  color:#fff;
  white-space: nowrap;
  text-shadow:
    0 0 8px rgba(0,0,0,0.35),
    0 0 20px rgba(25,68,142,0.6);
  opacity:0;
  animation: sloganFade 2.2s ease forwards;

}

.slogan span{
  display:inline;
}



@keyframes sloganFade {
  0% {
    opacity:0;
    transform: translate(-50%, -45%);
  }
  100% {
    opacity:1;
    transform: translate(-50%, -50%);
  }
}



/* スクロール誘導 */
.scroll-indicator{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  color:#fff;
  font-size:11px;
  letter-spacing:2px;
  opacity:0.8;
}

.scroll-indicator i{
  display:block;
  font-size:18px;
  margin-top:6px;
  animation:scrollMove 1.8s infinite;
}

@keyframes scrollMove{
  0%{transform:translateY(0);opacity:0.4;}
  50%{transform:translateY(6px);opacity:1;}
  100%{transform:translateY(0);opacity:0.4;}
}


/* 見出し */
.section-title{
  margin:100px 0;
  text-align:center;
}
.section-title-text{
  margin:40px 0;
  font-family:"游明朝";
  font-size:22pt;
  letter-spacing:6px;
  font-weight:500;
}


.anchor{
  scroll-margin-top:120px;
}



/* 横線 */
hr.style14{
  border:0;
  height:2px;
  background-image:linear-gradient(to right,#f0f0f0,#00acc1,#f0f0f0);
}

/* テーブル */
.table8{
  width:72%;
  margin:0 auto 120px;
  font-family:"游ゴシック";
}

.table-row{
  display:table;
  width:100%;
  table-layout:fixed;
}

.th,
.td{
  display:table-cell;
  vertical-align:middle;
  padding:35px 30px;
}

.th{
  width:35%;
  background-color:#f9f9f9;
  color:#000;
  font-weight:600;
  text-align:center;
  border-bottom:1px solid #00acc1;
}

.td{
  width:65%;
  line-height:1.9;
  border-bottom:1px solid #ccc;
}






.td li{
  list-style:none;
  position:relative;
  padding-left:1.4em;
  margin-bottom:0.6em;
}

.td li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.7em;
  width:6px;
  height:6px;
  background:#00acc1;
  border-radius:50%;
}


/* 個人情報 */
.privacy{
  font-size:11px;
  color:#aaa;
  margin-top:80px;
}

.privacy a{
  font-size:11px;
  color:#aaa;
  transition:color 0.2s ease;
}

.privacy a:hover{
  color:#ccc;
}

.privacy a:active{
  color:#ccc;
}




/* トップへ */
#page_top{
  width:50px;
  height:50px;
  position:fixed;
  right:15px;
  bottom:15px;
  background:#ccc;
  border-radius:50%;
  opacity:.6;
}
#page_top a{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
}
#page_top a::before{
  font-family:'Font Awesome 5 Free';
  font-weight:900;
  content:'\f106';
  font-size:25px;
  color:#fff;
}


/* SP */
.nav-sp,
.nav-sp-toggle{display:none;}


@media screen and (max-width:768px){
.nav-pc{display:none;}

.nav-sp-toggle{
  display:block;
  position:absolute;
  top:20px;
  right:20px;
}
.nav-sp-toggle span{
  display:block;
  width:25px;
  height:2px;
  background:#000;
  margin:6px 0;
}

.nav-sp{
  text-align:center;
  background:#fff;
}

.nav-sp a{
  display:block;
  padding:15px;
  border-bottom:1px solid #eee;
}

header.scroll-nav{
  display:block;
  text-align:center;
  padding:10px 0;
}

.nav-sp li{
    text-align:center;
  }


.image p.slogan{
   white-space: normal;      /* nowrap を解除 */
    word-break: keep-all;     /* ← 勝手な改行を禁止 */
    line-break: strict;       /* 日本語の禁則処理を正しく */
    text-align: center;
    font-size: 40px;
    line-height: 1.4;
    top: 40%;
    left: 54%;
    transform: translate(-50%, -50%);
  }

  .image p.slogan span{
    display: block;           /* ← ここだけで改行 */
  }

  .image p.slogan .slogan-line1{
    margin-bottom: 6px;
  }

.scroll-indicator{
    bottom: 70px;   /* ← 上へ持ち上げる */
  }

.table8{
   width:100%;
   padding:0 16px;          /* ← 左右余白をここで統一 */
   box-sizing:border-box;  /* ← 超重要 */
  }


.table-row{
    display:block;
    margin:0;
  }

  .th,
  .td{
    display:block;
    width:100%;
    box-sizing:border-box;  /* ← 念押し */
  }

  .th{
    text-align:center;
    border-right:none;
    border-bottom:1px solid #00acc1;
    padding:20px 12px 20px;
  }

  .td{
    text-align:left;
    border-bottom:1px solid #ccc;
    padding:20px 12px 20px;
  }

}