@charset "UTF-8";

/* Reset style */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  text-align: center;
  font-size: 100%;
	line-height: 1.7;
	letter-spacing: 0.05em;
}

.body-text {
	margin: 100px auto;
}

.body-title {
	margin: 30px auto;
	font-size: 20px;
}

.body-text2 {
	margin-top: 20px;
}
/* 調整用スタイル */

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: #fafafa;
}

a {
  	text-decoration: none;
	color: #333;
	letter-spacing: 0.15rem;
	font-family: 'Noto Serif JP', serif;
}

ul,
li {
  list-style: none;
	font-family: 'Noto Serif JP', serif;
}

h2,h3,h4 {
	font-family: 'Noto Serif JP', serif;
	font-size: 1.5rem;
	letter-spacing: 0.2em;
	color: #333;
}

#over {
	width: 100%;
}

.pc-br {
	display: none;
}

/*head-title
--------------------------------------*/
.heading {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);/*320pxの時18px,1200pxの時22px*/
	
}
/*
.heading::before,
.heading::after {
	content: '';
	width: 50px;
	height: 1px;
	background-color: #1C2C5C;
}
*/
/*
.heading::before {
	margin-right: 12px;
}
*/
/*
.heading::after {
	margin-left: 12px;
}
*/
p {
	font-family: 'Noto Serif JP', serif;
	line-height: 1.9;
	font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);/*320pxの時14px,1200pxの時16px*/
}

img {
max-width: 100%;
height: auto;
width /***/:auto;
}

/* ヘッダー */
.header {
  background-color:#fafafa;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.header__inner {
  padding: 10px 25px; /*左右の余白確保*/
  display: flex; /*ロゴとハンバーガーメニューを横に並べる*/
  align-items: center;
  justify-content: space-between;
  height: inherit; /*親要素の高さを継承*/
  position: relative;
}

/* ヘッダーのロゴ部分 */
/*
.header__title {
  margin: 12px auto;
  width: 200px;
}
*/
/*
.header__title img {
  display: block;
  width: 50%;
  height: 100%;
  margin-bottom: 10px;
}*/

.hlogo img {
 display: block;
  width: 60%;
  height: 100%;
  margin: 2% 0;
}
.vlogo {
	display: none;
}

/* ヘッダーのナビ部分 */
.header__nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%); 
  background-color: #EDF5F5; /*ハンバーガーメニュークリック時のナビゲーションメニュー背景色*/
  transition: ease .4s; /*ハンバーガーメニュークリック時のナビゲーションメニュー出現を遅延*/
}

.top-sns {
	display: none;
}

/* ハンバーガーメニュー */
.header__hamburger {
  width: 60px;
  height: 100%;
}

.hamburger {
  background-color: transparent; /*buttonタグデフォルトスタイルを打ち消し*/
  border-color: transparent; /*buttonタグデフォルトスタイルを打ち消し*/
  z-index: 9999;
  cursor: pointer;
}

/* ハンバーガーメニューの線 */
.hamburger span {
  width: 100%;
  height: 1px;
  background-color: #333;
  position: relative;
  transition: ease .4s; /*ハンバーガーメニュークリック時の三本線の動きを遅延*/
  display: block;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  margin: 8px 0;
}


.hamburger span:nth-child(3) {
  top: 0;
}

/*ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
  transform: translateX(0);
}

.hamburger.active span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  top: -13px;
  transform: rotate(-45deg);
}


.nav-items {
  padding-top: 100px;
}

/* ナビのリンク */
.nav-items__item a {
  color: #333;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 20px;
	padding: 1rem;
}

.nav-items__item a:hover {
	background: #689CB2;
	opacity: 0.8;
	color: #fff;
}
.nav-items__item:last-child a {
  margin-bottom: 0;
}

.nav-items__item a.active {
	color: #fdfdfd;
	background: #689CB2;
}

.nav-items__item a.active2 {
	color: #fdfdfd;
	background: #689CB2;
}

.footer_nav a.active2 {
	color: #fdfdfd;
	background: #689CB2;
}

/*共通事項*/
/*
.background-color {
	background-color: #F7F2EF;
	padding-bottom: 100px;
	margin: 0 auto;
}
*/

/*ページ共通トップテキスト
--------------------------------------*/

/*topページ詳細ボタン*/

.detail-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 40px;
    max-width: 240px;
    margin: 10px auto;
    background: #fff;
    border: 1px solid #DFDFDF;
	box-shadow: 5px 5px 0 #0F5779;
}

.detail-btn::after {
   content: '';
  width: 40px;
  height: 8px;
  border-bottom: solid 1px;
  border-right: solid 1px;
  transform: skew(45deg);
}

.detail-btn:hover {
    background-color: #0F5779;
    opacity: 0.8;
    color: #fff;
	border-color: #0F5779;
	box-shadow: none;
}

.detail-btn:hover::after {
    border-top-color: #fff;
    border-right-color: #fff;
}

/*トップページ縦タイトル詳細ブロック
-----------------------*/

.flexBox,.flexBox4 {
	margin: 0 auto 80px;
	width: 100%;
}

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

.text_box {
	display: flex;
	text-align: right;/*縦書きにしたい親要素につける*/
	justify-content: flex-end;/*縦書きにしたい親要素につける*/
	flex-direction: row-reverse;
	margin: 40px auto;
	position: relative;
	
}

.text-title {
	font-family: 'Noto Serif JP', serif;
	/*font-size:clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);/*320pxの時18px,1200pxの時22px*/
	font-size: 25px;
	letter-spacing: 0.3em;
	writing-mode: vertical-rl;/*縦書きにしたい子要素につける*/
  	display: inline-block;/*ブラウザによっては右寄せにならないことがあるため必要*/
	width: 15%;
	text-align: justify;
	z-index: 2;
}

/*お問い合わせフォーム
-------------------------*/　
/*背景画像*/

#contact-bg {
	background-image: url("../img/contact-bg-sp.jpg");
	height: 500px;
	margin: 0 auto;
}

.big-bg {
	background-image: url("../img/contact-bg-sp.jpg");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	height: 500px;
	width: 100%;
	margin: 0 auto;
	z-index: 1;
}


.contact-title-box {
	display: flex;
	justify-content: space-between;/*縦書きにしたい親要素につける*/
	flex-direction: row-reverse;
	max-width: 300px;
	margin: 0 auto;
	padding-top: 20%;
}

.contactTitle {
	/*
	writing-mode: vertical-rl;/*縦書きにしたい子要素につける*/
 /* 	display: inline-block;/*ブラウザによっては右寄せにならないことがあるため必要*/
/*	color: #333;
	margin-top: 50px;
	margin-right: 20%;
	letter-spacing: 0.5rem;*/
	font-family: 'Noto Serif JP', serif;
	font-size: 25px;
	letter-spacing: 0.3em;
	writing-mode: vertical-rl;/*縦書きにしたい子要素につける*/
  	display: inline-block;/*ブラウザによっては右寄せにならないことがあるため必要*/
	z-index: 2;
}

.contact-text {
	font-size: 15px;
	text-align: left;
	margin-top: 10%;
}

/* メールフォームへボタン*/
.mail-btn {
    display: flex;
	text-align: center;
    padding: 1.5rem 58px;
    max-width: 300px;
    margin: 30px auto;
    background-color: #8F2D12;
	color: #fff;
	opacity: 0.8;
}

.mail-btn:hover {
    background-color: #D7CEBB;
    opacity: 0.8;
    color: #333;
}

.mail-btn:hover::after {
    border-top-color: #333;
    border-right-color: #333;
}

/*他ページのトップ設定
-----------------------------*/
.wrap {
	width: 98%;
	margin: 0 auto;
}

.sp-topImg {
	margin-top: 80px;
	width: 100%;
}

.title-border {
	font-family: 'Noto Serif JP', serif;
	font-size:clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);/*320pxの時20px,1200pxの時24px*/
	letter-spacing: 0.2em;
	color: #333;
	position: relative;
	margin-top: 60px;
	margin-bottom: 40px;
	padding-bottom: 10px;
	text-align: center;
	background-image: linear-gradient(90deg, rgba(0 0 0 / 0) 0%, rgba(0 0 0 / 0) 40%, #0F5779 40%, #0F5779 60%, rgba(0 0 0 /0) 60%, rgba(0 0 0 /0) 100%);
	background-size: 100% 2px;
	background-repeat: no-repeat;
	background-position: center bottom;
}

.top-Titletext p {
	font-family: 'Noto Serif JP', serif;
	font-size:clamp(0.75rem, 0.659rem + 0.45vw, 1rem);/*320pxの時12px,1200pxの時16px*/
	letter-spacing: 0.2em;
	margin: 40px auto 40px 10%;
	text-align: left;
}

/*school flexBox設定*/
/*
.school-img {
	margin: 60px auto 30px;
}

.textBox2 {
	display: flex;
	margin: 40px auto;
}

.text2 {
	margin: 30px auto;
	text-align: justify;
	width: 90%;
}
*/

/*about flexBox設定*/

.about-img {
	margin: 50px 10px;
}

.flexBox3 {
	margin: 0 auto;
}

.textBox3 {
	margin: 5% auto 20%;
}

.text3 {
	margin: 20px auto;
	text-align: justify;
	width: 85%;
}

/*テキストの右側に線を引く*/
.text-line-right {
	display: flex;
	align-items: center;
	font-size:clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);/*320pxの時20px,1200pxの時24px*/
	letter-spacing: 0.2em;
	color: #333;
	padding-bottom: 0.5rem;
	padding: 0 5%;
}

.text-line-right:after {
	content:"";
	flex-grow: 1;
	height: 1px;
	display: block;
}

.text-line-right:after {
	margin-left: 1em;
	background: #333;
}


.about-box {
	width: 80%;
	margin: 60px auto;
}

.about-text {
	margin: 30px auto;
	width: 80%;
}

.about-text td {
	font-family: 'Noto Serif JP', serif;
	margin-bottom: 10px;
}


.about-text2 {
	margin: 5% auto;
	width: 80%;
	text-align: justify;
}

.about-item1,.about-item3 {
	text-align: left;
}


.about-item2,.about-item4 {
	display: block;
	font-family: 'Noto Serif JP', serif;
	text-align: left;
}

.about-item1:first-child{
    width: 8em;
}

.about-item3:first-child{
    width: 6em;
}

.red {
	color: #E83828;
}

/*
.tools-bg-color {
	background-color: #EDF5F5;
	padding-top: 10px;
	padding-bottom: 100px;
	margin: 0 auto;
}
*/
 /*about*/
.new-info {
	font-size:clamp(0.875rem, 0.83rem + 0.23vw, 1rem);/*320pxの時14px,1200pxの時16px*/
	margin: 80px auto;
}

.new-info h2 {
	margin: auto 20px;
	color: #333;
}

/*Introduction*/
/*
.flexwrap {
	margin: 50px auto 30px auto;
	width: 90%;
}
*/

.textBox4 {
	margin: 10% auto 30%;
}

.text4 {
	margin: 0 auto 10px;
	text-align: justify;
	width: 90%;
}

/*FAQページ
--------------------------------------*/

.top-text {
	width: 90%;
	margin: 30px auto;
}



/*footer_nav
--------------------------------------*/

.footer_nav a {
	display: block;
	padding: 0.8em;
	background-color: #fafafa; 
	color: #333;
}
.footer_nav a:hover {
	background-color: #689CB2;
	color: #fff;
}
.f_navitem {
	font-size: 10px;
	border-bottom: 0.5px solid #B4C9C9;	
}

.f_navitem:first-child {
	border-top: 0.5px solid #B4C9C9;	
}


/*SNSの紹介
--------------------------------------*/
.sns-text {
	font-size: 1.2em;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

.sns-text::before,
.sns-text::after {
	content: '';
	width: 1px;
	height: 30px;
	background-color: #333;
}

.sns-text::before {
	margin-right: 30px;
	transform: rotate(-35deg);
}

.sns-text::after {
	margin-left: 30px;
	transform: rotate(35deg);
}

.newInfo-sns {
	color: #333;
	font-size: 2rem;
	margin: 20px 10px 20px 10px;
}

/*footer
--------------------------------------*/
/*トップへ戻るボタン*/
.pagetop {
  	position:fixed; /*固定*/
 	bottom:30px; /*場所を右下に移動*/
  	right:1%; /*場所を右下に移動*/
  	display:block; /*aタグをblock要素に変更*/
  	height: 50px;
    text-decoration: none;
    font-weight: bold;
    transform: rotate(90deg);
    font-size: 80%;
    line-height: 1.5rem;
    color: #333;
    padding: 0 0 0 35px;
    border-top: solid 1px;
}

.pagetop::before {
	content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 15px;
    border-top: solid 1px;
    transform: rotate(35deg);
    transform-origin: left top;

}

.pagetop:hover {
  opacity:0.6;
}

.f-logo {
	width: 50%;
	margin: 50px auto 20px;
}

.sponser{
	display: flex;
	align-items: center;/*flexbox内の縦の中央揃え*/
	justify-content: center;/*flexbox内の横の中央揃え*/
}

.sponser a {
	display: inline-block;
}

.logo{
	width: 60px;
	margin: 20px 20px;
}

.s-logo{
	width: 60px;
	margin: 20px 20px;
}
.copyright {
	font-size: 10px;
}


.footer-photo {
	font-size: 12px;
	margin-bottom: 30px;
}

.contact-sns {
   display: flex;
 	justify-content: center;
	color: #fff;
	font-size: 2rem;
	margin: 0 10px 20px;
}

.footer-sns {
	color: #333;
	font-size: 2rem;
	margin: 0 10px 20px;
}


.contact-sns a:hover {
   color: rgba(255,255,255,.5);
}


/*フッター*/
/*.footer {
  background-color:#B4C9C9;
  height: auto;
  display: flex;
	background-image: url("../img/footer-bg.jpg");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	margin: 0 auto;
}
*/
.footer div {
  margin: 0 auto;
}


footer p {
	color: #333;
}