@charset "UTF-8";
/*===========
body
============*/
@media screen and (orientation: landscape) {/* 横向きの場合のスタイル*/}
@media screen and (orientation: portrait) {/* 縦向きの場合のスタイル */}

/* html/body
------------------------------------------------- */
html{width: 100%;font-size: 62.5%;-webkit-font-smoothing: antialiased;}

@media only screen and (max-width:750px){
html {overflow-x: hidden;}
}
body {
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 16px;line-height: 1.8;
position: relative;
width: 100%;
color: #000;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;overflow-x: hidden;position: relative;transition: 0.4s;overflow-x: hidden;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;text-size-adjust: 100%;-webkit-text-size-adjust: 100%;/*Chrome,Safari*/-ms-text-size-adjust: 100%;/*EgdeMobile*/-moz-text-size-adjust: 100%;/*firefox*/
background: #0068b7;
}
@media screen and (max-width:767px){/*スマホ設定*/
body {font-size: 14px;font-size: 1.4rem;}
}
/*STYLE
------------------------------------------------- */
#wrapper {position: relative;max-width: 100%;background:#fff;margin: auto;width:640px;margin: auto;box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;border: 10px solid #00a7ea;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;}
#wrapper img{width: 100%;height: auto}
@media screen and (max-width:767px){/*スマホ設定*/
#wrapper {width: 100%}
}
span.marker{background: linear-gradient(transparent 70%, #fff100 70%);padding: 0 12px}
.txt12{font-size: 1.3rem}

 .logo{width: 11%; position: absolute;left: 3%;top: 16px}
 .logo2{width: 11%; position: absolute;left: 17%;top: 16px}
/*header*/
#header{position: relative;background: #fff;text-align: center}
#header h1{width: 80%;margin: 30px auto}
#header h2{padding: 40px 0;font-size: calc(0.2vw + 3rem);font-weight: 900;font-feature-settings: "palt";-webkit-font-feature-settings: "palt";}
@media screen and (max-width:767px){/*スマホ設定*/
#header h2{font-size: calc(0.2vw + 2rem);padding: 20px 0;}
}


.train1{overflow: hidden;margin-top: 80px}
.train2{
  overflow: hidden;
}
.train1-img {
  display: inline-block;width: 1867px;
  animation: scroll-left 10s linear infinite; /* アニメーション設定 */
}
.train2-img {
  display: inline-block;width: 1053px;
  animation: scroll-right 10s linear infinite; /* アニメーション設定 */
  animation-delay: 1s; transform: translateX(-100%);
}
@keyframes scroll-left {
  0% {
    transform: translateX(100vw); /* 開始位置：画面の右端 */
  }
  100% {
    transform: translateX(-100%); /* 終了位置：画面の左端 */
  }
}
@keyframes scroll-right {
0% {
    transform: translateX(-100%); /* 左の外側から開始 */
  }
  100% {
    transform: translateX(100vw); /* 右の外側へ移動（vwはビューポートの幅） */
  }
}
@media screen and (max-width:767px){/*スマホ設定*/
.train1{margin-top: 50px}
}


.heisei{width: 90%;margin: auto}
.heisei h2{
	width: 100%;
	padding: 8px 0;
	background: #00a7ea;
	clip-path: polygon(0% 100%, 5% 0%, 95% 0%, 100% 100%);text-align: center;color: #fff;
	font-size: calc(0.2vw + 2.6rem);font-weight: 900;font-feature-settings: "palt";-webkit-font-feature-settings: "palt";
	letter-spacing: 0.3em;text-indent: 0.3em;line-height: 1
}
.heisei p{margin-top: 20px;}
.heisei .coution{margin-top: 20px}
.heisei .coution p {margin-top: 0; margin-left: 1em;text-indent: -1em;font-size: 1.3rem;}
@media screen and (max-width:767px){/*スマホ設定*/
.img-scroll{overflow-x: scroll;}
.img-scroll p{width:700px!important;touch-action:auto;}
}


.merit{width: 90%;margin: 30px auto 0;text-align: center}
.merit h2{font-size: calc(0.2vw + 5rem);font-weight: 900;color: #0068b7; font-feature-settings: "palt";-webkit-font-feature-settings: "palt";}
.merit li{margin-top: 20px;}
@media screen and (max-width:767px){/*スマホ設定*/
.merit h2{font-size: calc(0.2vw + 3.5rem);}
.merit li.col3{width: 49%;margin: 20px auto 0}
}

.benri{background: #0068b7;margin-top: 30px;padding: 30px 0}
.benri h2{width: 90%;margin: auto}
.benri .about{width: 90%;margin: 20px auto 0;background: #fff;border-radius: 16px;padding: 12px 25px;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;}
.benri .about h3{text-align: center;color: #0068b7;font-size: calc(0.2vw + 3rem);font-weight: 900;color: #0068b7; font-feature-settings: "palt";-webkit-font-feature-settings: "palt";}
.benri .about p{font-feature-settings: "palt";-webkit-font-feature-settings: "palt";}
.benri .small{font-size: calc(0.2vw + 2rem);}
.benri ul{width: 90%;margin: auto}
.benri ul li.col2{width: 49%; margin-top: 20px}
@media screen and (max-width:767px){/*スマホ設定*/
.benri ul li.col2{width: 100%; margin-top: 20px}
}

.kippu{width: 90%;margin: 30px auto 0;text-align: center}
.kippu h2{margin-top: 30px;margin-bottom: 12px; font-size: calc(0.2vw + 2.5rem);font-weight: 900;font-feature-settings: "palt";-webkit-font-feature-settings: "palt";}
.kippu table{width:100%;border-collapse: collapse;border-spacing:0px; }
.kippu table th{font-size: calc(0.2vw + 2rem);padding: 8px; }
.kippu table th.head1{background: #00a7ea;color: #fff;border-right: 1px solid #999}
.kippu table th.head2{background: #c8c8c8}
.kippu table td{text-align: left;border-bottom: 1px solid #999;padding: 8px;vertical-align: middle;font-size: 1.6rem;}
.kippu table tr td:nth-child(1){border-right: 1px solid #999}
@media screen and (max-width:767px){/*スマホ設定*/
.kippu h2{font-size: calc(0.2vw + 2rem);}
.kippu table th{font-size: 1.6rem; }
.kippu table td{font-size: 1.4rem; }
}


.coution_area{width: 90%;margin: 30px auto;}
.coution_area p {margin-top: 0; margin-left: 1em;text-indent: -1em;font-size: 1.3rem;}


#footer{padding: 12px 0 ;font-size: 1.3rem;background: #00a7e3}
#footer .address{;color: #fff;text-align: center}
@media screen and (max-width:767px){/*スマホ設定*/
#footer{font-size: 1rem;}
}

/*===========
inview
===========*/

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 20%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/* スクロールバー全体 */
::-webkit-scrollbar {
  width: 8px; /* 縦幅 */
  height: 8px; /* 横幅 */
}

/* スクロールバーの背景（トラック） */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1); /* 薄いグレーなど */
  border-radius: 4px;
}

/* スクロールバーの動く部分（サム） */
::-webkit-scrollbar-thumb {
  background: #333; /* 濃い色（バーの色） */
  border-radius: 4px;
}