@charset "utf-8";

/*----------------------------------------------------
	基本設定、リンクカラーなど
----------------------------------------------------*/
html { font-size: 62.5%; }
body { font-size:1.0rem; line-height: 1.8;  }

a:link 		{ text-decoration: none; color: #0089e0; transition:all 0.5s ease; }
a:visited 	{ text-decoration: none; color: #003a8f; }
a:hover 	{ text-decoration: none; color: #e83125; opacity: 0.6; filter: alpha(opacity=60); -moz-opacity:0.6; }
a:active 	{ text-decoration: none; color: #e83125; }

h1 { font-size: 3.6rem;/* 36px*/ }
h2 { font-size: 2.4rem;/* 24px*/ }

/*----------------------------------------------------
	汎用class
----------------------------------------------------*/
/* clearfix */
#hoge:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;}
br.sp{ display: none; }

/*----------------------------------------------------
	#navSkip (NavigationSkip) 
----------------------------------------------------*/
#navSkip a { position: absolute; top: 0; left: -9999px; display: block; text-align: center; }
#navSkip a:focus { z-index: 11000; left: 0; right: 0; margin: auto; }

/*----------------------------------------------------
	#gNavSp
----------------------------------------------------*/
#gNavSp{ display: none; }
#gNav{}

/*----------------------------------------------------
	#page
----------------------------------------------------*/
#page {	width: 100%; margin: 0 auto; text-align: left;}

/*----------------------------------------------------
	#contents
----------------------------------------------------*/
#contents { clear:both; width: 100%; margin: 0; padding: 0; }
#contents .pageTop { clear: both; text-align: right; }
.contentsInner{ width: 960px; margin: 0 auto; padding: 0; }

/*----------------------------------------------------
	#main
		メイン
----------------------------------------------------*/
.area{clear:both; width: 100%; margin: 0; padding: 0; }
.areaInner{ width: 960px; margin: 0 auto; padding: 0; }
.areaInner h2{ text-align: center; font-size: 3.5em; font-weight: bold; line-height: 1.0em; margin-bottom: 50px; }
.areaInner p{ text-align: center; font-size: 1.9em; color: #fff; line-height: 1.5em; padding-bottom:50px; }
section{ }

#main {}
#main table,#main ol,#main ul,#main dl,#main blockquote,#main pre,#main p {	margin-bottom: 1em;}
p,h1,h2,h3,h4,h5,h6,dl,ul { font-size: 1.4rem; }

#mainImg{ width: 100%; height: 420px; background: url("../img/top/mainImg.png") center top no-repeat; text-indent: -10000000px; }

/* 画像並び */
ul.img3{ display: flex; justify-content: space-around; width: 960px; margin-bottom: 30px;}
ul.img3 li{ width: 300px; overflow: hidden; }
ul.img3 li img{ width: 300px; margin-bottom: 10px; }
ul.img3 li h3{ font-size: 1.6em; font-weight: bold; padding: 10px 0; line-height: 1.0em; color: #0089e0; }
ul.img3 li h3 span{ font-size: 0.7em; padding: 0; }
ul.img3 li p{ font-size: 1.2em; font-weight: bold; padding-right: 20px; }

ul.img4{ display: flex; justify-content: center; width: 960px; margin-bottom: 30px;}
ul.img4 li{ font-size: 2.0em; font-weight: bold; color: #0089e0; line-height: 1.2em; }
ul.img4 li img{ width: 400px; height: auto; margin-bottom: 10px; border-radius: 10px;}

ul.text4{ display: flex; justify-content: space-between; width: 960px; margin:0;}
ul.text4 li{ font-size: 1.1em; font-weight: normal; color: #000000; line-height: 1.5em; border: 5px solid #0089e0; width: 23%; padding: 10px; margin-right: 10px; border-radius: 10px; }
ul.text4 li:last-child{ margin-right: 0px; }
ul.text4 li h3{ font-size: 1.6em; font-weight: bold; text-align: center; padding: 10px 0; line-height: 1.0em; color: #0089e0; border-bottom: 1px dotted #0089e0; margin-bottom: 10px; }
ul.text4 li img{ width: 200px; height: 200px; margin-bottom: 10px; border-radius: 6px; }

ul.img5{ display: flex; justify-content: space-between; width: 960px; margin-bottom: 30px; }
ul.img5 li{ font-size: 2.0em; font-weight: bold; color: #0089e0; line-height: 1.2em; }
ul.img5 li img{ width: 150px; height: 210px; margin-bottom: 10px; }

ul.img6{ display: flex; justify-content: space-between; width: 960px; margin-bottom: 30px;}
ul.img6 li{ font-size: 2.0em; font-weight: bold; color: #0363ad; font-size: 1.2em; line-height: 1.2em; text-align: center;}
ul.img6 li p{ color: #0363ad; font-size: 1em; padding-bottom: 0; }
.img6 .item{
  display: inline-block;
  width: 180px;
  height: 251px;
  background-color: gray;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border-radius: 6px;
}

/* トップページ おしらせ */
#topInfo{ background: #fff; padding-bottom: 0; padding-top: 10px; margin-bottom: 0; }
#topInfo h2{ display: block; width: 190px; height:150px; text-indent: -1000000px; background: url("../img/top/topInfoTitlePc.png") 0 0 no-repeat; background-size: 170px 60px; float: left; }
#topInfo dl{ margin-left: 190px; color: #0089e0; font-size: 1.8rem; font-weight: bold;  }
#topInfo dl dt{ width: 150px; padding-top: 5px; float: left; }
#topInfo dl dd{ width: 600px; padding-top: 5px; margin-left: 150px; }

/* トップページ 新飯塚スイミングスクールについて */
#topAbout{ 
background-color: #0fbfec; 
background-image:url("../img/top/bg_top_about1.png") ,url("../img/top/bg_top_about2.png") ; 
background-repeat:repeat-x,repeat-x;
background-position:center top,center bottom;
background-size: 1500px 150px,1500px 150px;
padding: 150px 0 250px 0; }
#topAbout h2{ color: #fff; }
#topAbout h2 span{ font-size: 0.8em; }
#topAbout p{ font-weight: normal; }

/* トップページ　スイミングの効果 */
#topKouka{ background: #fff; padding: 10px 0 100px 0;}
#topKouka h2{ color: #000; }
#topKouka .areaInner p{ color: #000; padding-bottom:20px; }
#topKouka ul li h3{ font-size: 2.0em; }
#topKouka ul li p{ text-align: left; }

/* トップページ　コロナ対策 */
#topCorona{ 
background-color: #0fbfec; 
background-image: url("../img/top/bg_top_corona1.png") ,url("../img/top/bg_top_corona2.png") ; 
background-repeat:repeat-x,repeat-x;
background-position:center top,center bottom;
background-size: 1500px 150px,1500px 150px;
padding: 150px 0 250px 0;}
#topCorona h2{ color: #fff; }
#topCorona p{ color: #fff; text-align: left; font-weight: normal; }
#topCorona .areaInner p{ padding-bottom:0px; }
ul.cation{ padding-bottom: 30px; }
ul.cation li{ color: #fff; font-size: 1.2em; font-weight: normal; list-style: square; margin-left: 40px; }

/* トップページ　コース */
#topCourse{ background: #fff ; padding: 0 0 50px 0;}
#topCourse h2{ color: #0297e3; }
#topCourse p{ color: #000; text-align: left; }

#topCourse ul { display: flex; justify-content: space-between; width: 960px; margin-bottom: 30px;}
#topCourse ul li{ width: 300px; overflow: hidden; }
#topCourse ul li img{ width: 300px; height: auto; margin-bottom: 10px; border-radius: 10px;}
#topCourse ul li h3{ font-size: 1.6em; font-weight: bold; padding: 10px 0; line-height: 1.0em; color: #0089e0; }
#topCourse ul li h3 span{ font-size: 0.7em; padding: 0; }
#topCourse ul li p{ font-size: 1.2em; font-weight: bold; padding-right: 20px; }

/* コース紹介ページ */
main.course{ background: url("../img/share/bg_main.png") 50% top no-repeat; }

#introduction{ padding: 60px 0 50px 0; }
#introduction h2{ font-size: 3.7em; color: #0258a6;}
#introduction p{ color: #000; text-align: left; }
#introduction ul li a{ display: block; border-radius: 10px; background: #0089e0 url("../img/page/arrow_course.png") center 90% no-repeat; background-size: 20px; color: #fff; font-size: 1.8em; font-weight: bold; text-align: center; line-height: 1.0em; padding: 13px 0 30px 0; }
#introduction ul li a span{ font-size:0.6em; }

#course1 p{ color: #fff; text-align: left; }
#course1{ 
background-color: #0fbfec; 
background-image:url("../img/top/bg_top_about1.png") ,url("../img/top/bg_top_about2.png") ; 
background-repeat:repeat-x,repeat-x;
background-position:center top,center bottom;
background-size: 1500px 150px,1500px 150px;
padding: 150px 0 200px 0;}
#course1 h2{ color: #fff; background: url("../img/page/h2_course1.png") 50% top no-repeat; background-size:600px 100px;}
#course1 h2 span{ font-size: 0.6em; }
#course1 h3{ font-size: 1.9em; color: #fff; margin-bottom: 10px; }

#course2 p{ color: #000; text-align: left; }
#course2{ background: none; padding: 100px 0 100px 0; margin-top: -100px; }
#course2 h2{ color: #0258a6; background: url("../img/page/h2_course2.png") 50% top no-repeat; background-size:600px 100px;}
#course2 h2 span{ font-size: 0.6em; }
#course2 h3{ font-size: 1.9em; color: #000; margin-bottom: 10px; }

#course3 p{ color: #fff; text-align: left; }
#course3{ 
background-color: #0fbfec; 
background-image:url("../img/top/bg_top_about1.png") ,url("../img/top/bg_top_about2.png") ; 
background-repeat:repeat-x,repeat-x;
background-position:center top,center bottom;
background-size: 1500px 150px,1500px 150px;
padding: 120px 0 200px 0;}
#course3 h2{ color: #fff; background: url("../img/page/h2_course3.png") 50% top no-repeat; background-size:600px 100px; padding-top: 30px;}
#course3 h2 span{ font-size: 0.6em; }
#course3 h3{ font-size: 1.9em; color: #fff; margin-bottom: 10px; }

.detail{ width: 100%; display: flex; }
.text{ width: 480px; }
.text p{ text-align: left; margin-bottom: 10px; padding-bottom:0;  }
.schedule table{ 
  width: 480px; 
  border: 4px solid #0258a6;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  overflow: hidden; }
.schedule table tr th{ }
.schedule table tr td span,
.schedule table tr th span{ display: block; font-size:0.7em; white-space: nowrap; padding: 0 5px; }
.schedule table tr td{ width: 40px; color: #0258a6; background: #fff; }

.schedule table th,
.schedule table td {
  height: 50px; 
  text-align: center;
  line-height: 1em;
  border: 4px solid #0258a6; 
  font-size: 2.0em;
}
.schedule table thead th {
  background-color: #0258a6;
  color: #fff;
  height: 30px; 
}
.schedule table tbody th {
  background-color: #e8f6fd;
  color: #0258a6;
  padding: 5px 0 0 0;
  width: 120px;
}
.schedule table td.no{ background: #fffe7e;}
#courseMessage{ height: 400px; }

.message{ display: block; height: 300px; width: 610px; position: relative; margin: 0 auto; background: url("../img/page/course_message.png") 0 0 no-repeat; background-size: 610px 300px; }
.areaInner .message p{ position: absolute; left: 80px; top:80px; font-size: 2.3em; }
.areaInner .message p a{ color: #fff; 
   border-bottom: 1px solid #fff;
   padding-bottom: 2px; }

#contact{ padding-top: 100px; margin-top: -100px; }
#contact p img{ }

/* 入会案内ページ */
#nyukai1{ 
background-color: #0fbfec; 
background-image: url("../img/top/bg_top_corona1.png") ,url("../img/top/bg_top_corona2.png") ; 
background-repeat:repeat-x,repeat-x;
background-position:center top,center bottom;
background-size: 1500px 150px,1500px 150px;
padding: 150px 0 200px 0; }

#nyukai1 h2{ color: #fff;  }
.areaInner #nyukai1 p{ text-align:left; color: red; }

ul.nyukaiList{ display: flex; justify-content: space-between; width: 960px; margin:0; }
ul.nyukaiList li{ font-size: 1.1em; font-weight: normal; line-height: 1.5em; width: 23%; padding: 10px; margin-right: 10px; border-radius: 10px; background: #fff; text-align: center; }
ul.nyukaiList li:last-child{ margin-right: 0px; }

#nyukai2{ background: none; padding: 0 0 100px 0;}
#nyukai2 h2{ color: #0258a6;  background: url("../img/page/h2_nyukai2.png") 50% top no-repeat; background-size:600px 100px; height: 100px; }
#nyukai2 h2 span{ font-size: 0.6em; }

#nyukai3{ 
background-color: #0fbfec; 
background-image:url("../img/top/bg_top_about1.png") ,url("../img/top/bg_top_about2.png") ; 
background-repeat:repeat-x,repeat-x;
background-position:center top,center bottom;
background-size: 1500px 150px,1500px 150px;
padding: 120px 0 200px 0;}
#nyukai3 h2{ color: #fff; }

/* おしらせページ */
#info{ padding: 60px 0 50px 0; }
#info h2{ font-size: 3.7em; color: #0258a6;}
#info p{ color: #000; text-align: left; }
#info dl{ margin-left: 190px; color: #0089e0; font-size: 1.8rem; font-weight: bold; }
#info dl dt{ width: 150px; padding-top: 5px; float: left; }
#info dl dd{ width: 600px; padding-top: 5px; margin-left: 150px; }
.info-title{
  font-size: 1.9rem;
  font-weight: bold;
  padding-bottom: 15px;
  border-bottom: 2px dotted #0089e0;
}
.info-detail{
  font-size: 1.9rem;
  font-weight: bold;
  padding-top: 15px;
}
.info-pager{
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 30px;
}
.info-pager > *{
  padding: 0 20px;
  font-size: 1.9rem;
  font-weight: bold;
}
.info-detail img{
  width: 90%;
}