@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');


/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}
mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
	vertical-align:middle;
}
img{
	line-height:1;
	vertical-align:bottom;
}

/************** layout base ********************/
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

img{ max-width:100%;}

a{text-decoration:none; color:#000000;}
a:hover{text-decoration: none;}
a:link{}

a:visited{color:#0d5bab;}

/* ボタンrollover */
a:hover img{
   opacity:0.8;
}

sup {
	line-height: 100%;
	font-size:10px;
	vertical-align: 0.4em;
}
sub{
	line-height: 100%;
	font-size:10px;
	vertical-align: -0.1em;
}

.txtLeft{text-align:left;}
.txtRight{text-align:right;}
.txtCenter{text-align:center;}

.fw{font-weight:bold !important;}
.f10{ font-size:10px !important;}
.f11{ font-size:11px !important;}
.f12{ font-size:12px !important;}
.f13{ font-size:13px !important;}
.f14{ font-size:14px !important;}
.f15{ font-size:15px !important;}
.f16{ font-size:16px !important;}
.f17{ font-size:17px !important;}
.f18{ font-size:18px !important;}
.f20{ font-size:20px !important;}
.f22{ font-size:22px !important;}
.f24{ font-size:24px !important;}

.txtRed{ color:#D80000;}

.fLeft{ float:left;}
.fRight{ float:right;}

.mTop0{ margin-top:0 !important;}
.mTop5{ margin-top:5px !important;}
.mTop10{ margin-top:10px !important;}
.mTop15{ margin-top:15px !important;}
.mTop20{ margin-top:20px !important;}
.mTop25{ margin-top:25px !important;}
.mTop30{ margin-top:30px !important;}
.mTop35{ margin-top:35px !important;}
.mTop40{ margin-top:40px !important;}
.mTop45{ margin-top:45px !important;}
.mTop50{ margin-top:50px !important;}
.mTop55{ margin-top:55px !important;}
.mTop60{ margin-top:60px !important;}

.mBtm0{ margin-bottom:0 !important;}
.mBtm5{ margin-bottom:5px !important;}
.mBtm10{ margin-bottom:10px !important;}
.mBtm15{ margin-bottom:15px !important;}
.mBtm20{ margin-bottom:20px !important;}
.mBtm25{ margin-bottom:25px !important;}
.mBtm30{ margin-bottom:30px !important;}
.mBtm35{ margin-bottom:35px !important;}
.mBtm40{ margin-bottom:40px !important;}
.mBtm45{ margin-bottom:45px !important;}
.mBtm50{ margin-bottom:50px !important;}
.mBtm55{ margin-bottom:55px !important;}
.mBtm60{ margin-bottom:60px !important;}
.mBtm70{ margin-bottom:70px !important;}
.mBtm80{ margin-bottom:80px !important;}
.mBtm90{ margin-bottom:90px !important;}
.mBtm100{ margin-bottom:100px !important;}

.pTop0{ padding-top:0 !important;}
.pTop5{ padding-top:5px !important;}
.pTop10{ padding-top:10px !important;}
.pTop15{ padding-top:15px !important;}
.pTop20{ padding-top:20px !important;}
.pTop25{ padding-top:25px !important;}
.pTop30{ padding-top:30px !important;}
.pTop35{ padding-top:35px !important;}
.pTop40{ padding-top:40px !important;}
.pTop45{ padding-top:45px !important;}
.pTop50{ padding-top:50px !important;}

.pBtm0{ padding-bottom:0 !important;}
.pBtm5{ padding-bottom:5px !important;}
.pBtm10{ padding-bottom:10px !important;}
.pBtm15{ padding-bottom:15px !important;}
.pBtm20{ padding-bottom:20px !important;}
.pBtm25{ padding-bottom:25px !important;}
.pBtm30{ padding-bottom:30px !important;}
.pBtm35{ padding-bottom:35px !important;}
.pBtm40{ padding-bottom:40px !important;}
.pBtm45{ padding-bottom:45px !important;}
.pBtm50{ padding-bottom:50px !important;}
.pBtm55{ padding-bottom:55px !important;}
.pBtm60{ padding-bottom:60px !important;}

/************** layout base ********************/
body{
	background: #ffffff;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	text-align: left;
	line-height:1.5;
	color:#000000;
}

ol,ul {
	list-style:none;
}

p,dt,dd,li,td,th{
	font-size: 16px;
	letter-spacing: 0.05em;
}

h1,h2,h3,h4,h5,h6{
	letter-spacing: 0.05em;
}

/*------------------ list style----------------*/
.numberList{
	padding:0 0 0 18px;	
}
.numberList li{
	list-style:decimal outside;
	padding:0 0 5px 0;
}

.discList{
	padding:0 0 0 18px;
}
.discList li{
	list-style:disc outside;
	padding:0 0 2px 0;
}

.indentList li{
	padding-left:1em;
	text-indent:-1em;
}


/* common
---------------------------------------------------------------------------- */
:root{
	--l-brown: #b48c44;
	--beige: #c8b085;
	--l-beige: #dcd1a6;
	--navy: #0f2a4a;
}
.white{
	color: #ffffff !important;
}

.inner{
	width: 100vw;
	margin: 0 auto;
}
.inner2{
	width: min(92%,1020px);
	margin: 0 auto;
}
.inner3{
	width: min(92%,940px);
	margin: 0 auto;
}

.fontAntique{
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}
.fontSerif{
  font-family: "Noto Serif JP", serif;
}


@media screen and (max-width: 768px) {
	.pc{ display: none;}
}/* //end for SP */
@media screen and (min-width: 769px) {
	.sp{ display: none;}
	.pcFlex{
		display: flex;
		justify-content: space-between;
	}
}/* //end for PC */


/* =======================================
	header
========================================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  padding: 16px 1.7%;
}

#headerInner {
  display: flex;
  justify-content: space-between;
}

#logo {
  width: 111px;
  aspect-ratio: 111/56;
}

#logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fontSerif {
  font-size: 14px;
  color: #ffffff;
  text-align: center;
}

.fontSerif span {
  display: block;
  font-size: 16px;
}

/* =======================================
	.menu
========================================== */
.menu {
  /*
  position: absolute;
  right: 3px;
  top: 3px;*/
  position: relative;
  width: 55px;
  height: 55px;
  cursor: pointer;
  z-index: 101;
}

.menu span {
  position: absolute;
  left: 16px;
  width: 23px;
  height: 1px;
  background-color: #ffffff;
  transition: all 0.6s;
  border-radius: calc(infinity * 1px);
}

.menu span.menuLine01 {
  top: 21px;
}

.menu span.menuLine02 {
  top: 28px;
}

.menu span.menuLine03 {
  top: 35px;
}

.menu.active span {
  background-color: #fff;
}

.menu.active span.menuLine01 {
  transform: rotate(45deg);
  top: 26px;
}

.menu.active span.menuLine02 {
  width: 0;
  left: 50%;
}

.menu.active span.menuLine03 {
  transform: rotate(-45deg);
  top: 26px;
}

.menuBg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  background-color: var(--navy);
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s;
  cursor: pointer;
}

.menuBg.active {
  opacity: 0.8;
  visibility: visible;
}


/* =======================================
	gNavi
========================================== */
#gNavi {
	position: fixed;
	right: -100%;
	transition: all 0.6s;
	width: 50%;
	z-index: 999
}

#gNavi ul{
	padding: 20px
}

#gNavi ul li{
	border-bottom: 1px solid #fff;
	padding: .4em
}

#gNavi ul li a{
	color: #fff;
}

#gNavi.active {
	right: 0;
}
/* =======================================
	main common
========================================== */

main .bdr {
  border-TOP: 7px solid #bfb394;
  position: relative
}

main .bdr:after {
  background: #bfb394;
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  position: absolute;
  left: calc(50% - 14px);
  top: -18px;
  content: ''
}


main>section p+p {
  margin-top: 1em;
}

main section h2:has(.line) {
  padding-bottom: 6px;
}

main section h2 span.line {
  position: relative;
  min-width: 311px;
  padding: 0 28px 18px;
  display: inline-block;
  text-align: center;
  font-size: 24px;
}

main section h2 span.line img {
  height: 23px;
  width: auto;
}

main section h2 span.line::before {
  position: absolute;
  inset: auto 0 0 0;
  content: "";
  display: inline-block;
  width: 100%;
  aspect-ratio: 311/30;
  background: url(images/ttl_bg_navy_left.png) no-repeat center left / auto 100%, url(images/ttl_bg_navy_right.png) no-repeat center right / auto 100%;
}

main section h2.white span.line::before {
  background: url(images/ttl_bg_white_left.png) no-repeat center left / auto 100%, url(images/ttl_bg_white_right.png) no-repeat center right / auto 100%;
}

main section h2 span.jp {
  position: absolute;
  right: 26px;
  display: block;
  width: 100%;
  font-size: 18px;
  text-align: right;
}

main section h2:not(.white) span.jp {
  color: var(--navy);
}

main .mv {
  text-align: center;
  padding: 5vw;
}

main .mv iframe {
  margin: auto
}

@media screen and (min-width: 769px) {
  main section {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    background-attachment: fixed;
  }
}


@media screen and (max-width: 768px) {
  main section {
    position: relative;
  }

  main section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
  }

  main .bdr {
    border-TOP: 5px solid #bfb394;
  }

  main .bdrafter {
    width: 18px;
    height: 18px;
    border-radius: 9px;
    left: calc(50% - 9px);
    top: -9px;
  }
	main section h2{
		text-align: center
	}
  main .mv iframe {
    width: 100%
  }
}

/* =======================================
	main about
========================================== */
#about {
  color: #ffffff;
  height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

#about .lead {
  margin-bottom: 6vh;
  padding-top: 5vh
}

#about .inner {
  text-align: center;
  position: -webkit-sticky;
  /* Safari対応 */
  position: sticky;
  top: 20px;
  /* 画面上部から20pxの位置で固定 */
  max-height: 100vh;
  /* ビューポートの80%を最大高さに */
  overflow-y: auto;
  /* 内部をスクロール可能にする */
}

#about h2 {
  margin: 0 auto 5vh;
  text-align: center;
}

#about h2 img {
  width: min(100%, 511px);
  aspect-ratio: 511/105;
}

#about .leadbox {
  margin: 0 auto;
  width: min(100%, 595px);
  background: linear-gradient(180deg, rgba(12, 14, 26, 0) 0%, rgba(12, 14, 26, 0.2) 100%);
  padding-bottom: 5vh;
  padding-top: 5vh
}

#about p {
  line-height: 1.8
}

.aboutBtn {
  margin-top: 24px;
}

.aboutBtn img {
  width: min(100%, 348px);
  aspect-ratio: 348/143;
}


@media screen and (min-width: 769px) {
  #about {
    background-image: url(images/about_bg.jpg);
  }
}

@media screen and (max-width: 768px) {
  #about {
    position: relative;
    height: auto
  }

  #about::before {
    background-image: url(images/about_bg.jpg);
  }

  #about .inner {
    position: relative;
    top: 50px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10vh;
    height: auto;
    max-height: initial;
  }
}



/* =======================================
	main story
========================================== */
#story {
  color: #ffffff;
  height: 120vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding-top: 10vh;
  padding-bottom: 10vh
}

#story>.inner {
  padding: 60px 0 120px;
  position: -webkit-sticky;
  /* Safari対応 */
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;

}

main section#story .pcFlex {
  width: min(92%, 1100px);
  margin: 0 auto;
}

main section#story h2 span.line img {
  height: 38px;
}

main section#story h2 span.line {
  padding: 0 32px 8px;
}

main section#story h2 span.jp {
  right: 32px;
  margin-top: -4px;
}

main section#story .txts {
  padding-bottom: 5vh
}

@media screen and (min-width: 769px) {
  #story {
    background-image: url(images/story_bg.jpg);
  }

  #story>.inner .txts {
    width: 43%;
  }
}


@media screen and (max-width: 768px) {
  #story::before {
    background-image: url(images/story_bg.jpg);
  }

  #story,
  #story>.inner {
    position: relative;
    height: auto;
    max-height: initial
  }

  #story {
    padding-bottom: 15vh
  }

  #story>.inner {
    padding-top: 0;
    padding-bottom: 0
  }

  #story>.inner h2 {
    margin-bottom: 60px
  }

}

/* //end for SP */


/* =======================================
	main point
========================================== */


/*		#pointLead
-----------------------------*/
#pointLead {
  color: #ffffff;
  text-align: center;
  height: 360px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

#pointLead .inner {
  padding: 60px 0;
}

#pointLead p {
  font-size: 24px;
  font-weight: 700;
}

@media screen and (min-width: 769px) {
  #pointLead {
    background-image: url(images/point_lead_bg.jpg);
  }
}

@media screen and (max-width: 768px) {
  #pointLead {
    position: relative;
    height: auto;
  }

  #pointLead::before {
    background-image: url(images/point_lead_bg.jpg);
  }

  #pointLead .inner {
    padding-left: 20px;
    padding-right: 20px
  }

  #pointLead p {
    font-size: 20px;
  }
}

/* //end for SP */

/*		#pointMain
-----------------------------*/
#pointMain {
  padding-bottom: 30px;
  position: relative;
  padding: 10vh 0 10vh
}

#pointMain .inner {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  max-height: 150vh;
  overflow-y: auto;
}

#pointMain h2 {
  margin-bottom: 40px;
  text-align: center;
  color: var(--navy);
}

#pointMain p,
#pointMain li {
  color: var(--navy);
}

@media screen and (max-width: 768px) {
  #pointMain::before {
    background-image: url(images/point_bg.jpg);
  }

  #pointMain .inner {
    max-height: initial;
    position: relative
  }

  #pointMain .bg {
    background: linear-gradient(0deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, .9) 100%);
    padding: 40px 15px;
    margin: 5vh 0 0 15px;
	width: calc(100% - 30px)
  }

  #pointMain .bg2 {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, .4) 100%);
    padding: 40px 15px;
    margin: 10px 0 0 15px;
    width: calc(100% - 30px)
  }

}

/* //end for SP */
@media screen and (min-width: 769px) {
  #pointMain {
    background-image: url(images/point_bg.jpg);
  }

  #pointMain .bg,
  #pointMain .bg2 {
    width: 34%;
    min-height: 869px;
  }

  #pointMain .bg2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  #pointMain .bg {
    background: linear-gradient(0deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .9) 100%);
    padding: 60px 2.5%;
    margin: 5vh 0 0 14vw
  }

  #pointMain .bg2 {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, .2) 100%);
    padding: 60px 2.5%;
    margin: 5vh 0 0 55%
  }
}

/* //end for PC */


/* =======================================
	main school
========================================== */


#schoolLead {
  padding: 100px 0 170px;
  text-align: center;
}

#schoolLead p {
  font-size: 18px;
  margin-bottom: 1.8em
}

#schoolLead .lead {
  font-size: 24px
}

@media screen and (min-width: 769px) {
	#school {
  background-image: url(images/school_bg.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  background-attachment: fixed;
  position: relative
}
}

@media screen and (max-width: 768px) {
#school::before {
  background-image: url(images/school_bg.jpg);
content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;	
	}
  #schoolLead {
    padding-bottom: 0
  }
	#schoolLead .inner{
		padding-left: 10px;
		padding-right: 10px
	}
	#schoolLead p{
		font-size: 16px;
	}
	#schoolLead .lead {
  font-size:19px;
}
}

/*		#schoolIntro
-----------------------------*/
#schoolIntro {
  padding: 100px 0 150px;
}

#schoolIntro .inner {
  width: min(92%, 1100px);
  margin: 0 auto;
}

#schoolIntro h2 {
  margin-bottom: 50px;
}

#schoolIntro .img iframe {
  width: 100%;
	height: auto
}

#schoolIntro .txts {
  text-align: center;
  color: var(--navy);
}

#schoolIntro .txts p {
  font-size: 18px;
  line-height: 1.67em;
}

  #schoolIntro .img iframe {
	  min-height: 315px;
	}

@media screen and (max-width: 768px) {
  #schoolIntro {
    padding: 100px 0 80px;
  }

  #schoolIntro .txts {
    margin-bottom: 40px
  }

}

/* //end for SP */
@media screen and (min-width: 769px) {
  #schoolIntro .pcFlex {
    align-items: center;
  }

  #schoolIntro .txts {
    width: 37.4%;
  }

  #schoolIntro .img {
    flex: 1;
    width: 34vw
  }

}
/* //end for PC */




/*		#schoolWhy
-----------------------------*/
#schoolWhy {
  padding: 150px 0;
}

#schoolWhy .inner {
  position: relative;
  z-index: 1;
}

/*.schoolFrame*/
.schoolFrame {
  position: relative;
  padding: 3%;
  background-color: #ffffff;
  border: 2px solid var(--l-beige);
}

.schoolFrame::before,
.schoolFrame::after {
  position: absolute;
  right: 0;
  left: 0;
  content: "";
  height: 42px;
  aspect-ratio: 356/42;
  display: block;
  margin: 0 auto;
}

.schoolFrame::before {
  top: -30px;
  background: url(images/school_flame_top.png) no-repeat center center / 100% auto;
}

.schoolFrame::after {
  bottom: -30px;
  background: url(images/school_flame_btm.png) no-repeat center center / 100% auto;
}

.schoolFrame h2 {
  margin-bottom: 1em;
  font-size: 24px;
  color: var(--navy);
  text-align: center;
}

/**/
#schoolWhy .txts {
  position: absolute;
  right: 3.6%;
  top: -120px;
  width: min(410px, 100%);
  z-index: 2;
}

#schoolWhy .txts p {
  line-height: 1.875em;
  color: var(--navy);
}

#schoolWhy .img {
  margin-right: auto;
  width: 74%;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  #schoolWhy {
    padding: 100px 0 50px;
  }

  #schoolWhy .txts {
    right: auto;
    position: relative;
    width: 94%;
    margin-left: 3%
  }

  #schoolWhy .img {
    width: 90%
  }
}

/* //end for SP */
@media screen and (min-width: 769px) {}

/* //end for PC */

/*		#schoolChange
-----------------------------*/
#schoolChange {
  padding: 100px 0 150px;
}

#schoolChange ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#schoolChange ul li {
  display: grid;
  place-content: center;
  background-color: var(--beige);
  border: 3px solid var(--l-beige);
  padding: 2.25em 0;
  color: #ffffff;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #schoolChange ul li {
    width: 100%
  }
}

/* //end for SP */
@media screen and (min-width: 769px) {
  #schoolChange ul li {
    width: calc((100% - 10px * 2)/3);
  }

  #schoolChange ul li:nth-of-type(1),
  #schoolChange ul li:nth-of-type(2),
  #schoolChange ul li:nth-of-type(3),
  #schoolChange ul li:nth-of-type(4) {
    width: calc((100% - 10px * 3)/4);
  }
}

/* //end for PC */


/* =======================================
	main beforeAfter
========================================== */
#beforeAfter #before,
#beforeAfter #after {
  padding: 40px 0 30px;
}

#beforeAfter h2 {
  margin-bottom: 20px;
  font-size: 30px;
  text-align: center;
}

#beforeAfter #before h2 {
  color: #ffffff;
}

#beforeAfter #after h2 {
  color: #5f571f;
}

#beforeAfter li {
  margin: 0 auto;
  height: 2em;
  display: grid;
  align-items: center;
  border-radius: calc(infinity * 1px);
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  text-align: center;
}

#beforeAfter #after li {
  background-color: var(--l-brown);
  border: 1px solid var(--l-brown);
}

#beforeAfter li+li {
  margin-top: 14px;
}

#beforeAfter #before li {
  width: 280px;
}

#beforeAfter #after li {
  width: 373px;
  font-size: 1.125em;
}

@media screen and (max-width: 768px) {
  #beforeAfter #before {
    background: url(images/before_bg.png) no-repeat center center / auto 100%;
  }

  #beforeAfter #after {
    background: url(images/after_bg.png) no-repeat center center / auto 100%;
  }
}

/* //end for SP */
@media screen and (min-width: 769px) {
  #beforeAfter {
    position: relative;
    background: url(images/beforeafter_bg.png) no-repeat center center / cover;
    z-index: 1;
  }

  #beforeAfter #before,
  #beforeAfter #after {
    width: 43%;
  }
}

/* //end for PC */



/* =======================================
	main experience
========================================== */
#experience {
  padding: 64px 0 100px;
  height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

#experience .inner {
  width: min(92%, 1100px);
  margin: 0 auto;
}

main section#experience h2 span.line img {
  height: 37px;
}

main section#experience h2 span.line {
  padding: 0 32px 8px;
}

main section#experience h2 span.jp {
  right: 32px;
  margin-top: -4px;
}

#experience ul {
  margin: 40px auto 0;
  position: relative;
  width: 100%;
  max-width: 1000px;
}

#experience ul li {
  background-color: rgba(255, 255, 255, .65);
  border-radius: 20px;
  display: inline-block;
  padding: .8em;
  position: absolute;
  color: #153551
}

#experience ul li.left::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 70%;
  border-style: solid;
  border-width: 20px 0 0 30px;
  border-color: rgba(255, 255, 255, .65) transparent transparent;
  translate: calc(-50% + 0.8px) 100%;
}

#experience ul li.right::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 30%;
  border-style: solid;
  border-width: 20px 30px 0 0;
  border-color: rgba(255, 255, 255, .65) transparent transparent;
  translate: calc(-50% - 0.8px) 100%;
}

@media screen and (min-width: 769px) {
#experience {	
	  background-image: url(images/experience_bg.jpg);
	}	
  #experience ul li:nth-child(1) {
    top: 5.9vh;
    left: 0
  }

  #experience ul li:nth-child(2) {
    top: 1.6vh;
    left: 16rem
  }

  #experience ul li:nth-child(3) {
    top: 13vh;
    right: 34.7vw
  }

  #experience ul li:nth-child(4) {
    top: 1.6vh;
    right: 1.9vw
  }

  #experience ul li:nth-child(5) {
    top: 20.2vh;
    left: 5.5vw
  }

  #experience ul li:nth-child(6) {
    top: 19.5vh;
    right: 0;
  }

  #experience ul li:nth-child(7) {
    top: 40.8vh;
    left: 3.6vw
  }

  #experience ul li:nth-child(8) {
    top: 36.2vh;
    right: 5.3vw
  }
	
	

}

@media screen and (max-width: 768px) {
  #experience {
	position: relative;
	  height: auto
  }
   #experience::before {	
	  background-image: url(images/experience_bg.jpg);
	}
  #experience ul li {
    position: relative;
    margin-bottom: 25px;
    margin-right: 10px;
	padding: .6em;
  }
  #experience ul li:nth-child(5) {
    margin-left: 35%;
    margin-top: -20px;
  }
  #experience ul li:nth-child(7) {
	margin-left: 42%;
    margin-top: -20px;
}
}

/* =======================================
	main recommend
========================================== */
#recommend {
  height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

#recommend .inner {
  width: min(92%, 1100px);
  margin: 0 auto;
  position: relative;
  padding-top: 10vh
}

main section#recommend h2 span.line img {
  height: 30px;
}

main section#recommend h2 span.line {
  padding: 0 32px 8px;
}

main section#recommend h2 span.line:before {
  bottom: -9px
}

main section#recommend h2 span.jp {
  right: 32px;
  margin-top: 0px;
}


#recommend .contents {
  position: absolute;
  right: 0;
  color: #fff;
  width: 50%
}

#recommend .contents h3 {
  font-size: 24px;
  margin-bottom: 1em
}

#recommend .contents ul {
  margin-left: 4em;
  margin-bottom: 1em
}

#recommend .contents ul li {
  border-bottom: 1px solid #fff;
  padding-bottom: .4em;
  margin-bottom: .4em
}

#recommend .contents ul+p {
  font-size: 18px;
  font-weight: bold;
  text-align: right
}
	
@media screen and (min-width: 769px) {	
  #recommend {
    background-image: url(images/recommend_bg.jpg);
	}
	}

@media screen and (max-width: 768px) {
  #recommend {
    position: relative;
    height: auto;
    padding-bottom: 10vh
  }
  #recommend::before {
    background-image: url(images/recommend_bg.jpg);
	}	

  #recommend .contents {
    position: relative;
    width: 90%;
    margin-top: 40px
  }
}

/* =======================================
	main curriculum
========================================== */
#curriculum {
  background-image: url(images/curriculum_bg.jpg);

}

main section#curriculum h2 span.line img {
  height: 30px;
}

#curriculum .inner {
  width: min(92%, 1100px);
  margin: 0 auto;
  padding-top: 10vh;
  padding-bottom: 10vh
}

#curriculum h3 {
  max-width: 1020px;
  background: rgba(255, 255, 255, 0.4);
  text-align: center;
  font-size: 18px;
  padding: 1em;
  margin-top: 2em;
  margin-bottom: 1em;
  color: #42390d
}

#curriculum h3 span {
  font-size: 30px;
  font-weight: 700;
  display: block
}

#curriculum .inner>ul {
  flex-wrap: wrap;
  gap: 16px 13px;
  color: #153551;
  margin-bottom: 1em
}

#curriculum .inner>ul>li {
  background: rgba(255, 255, 255, 0.4);
  width: calc((100% - 26px)/3);
  padding: 0 0 1em;
  position: relative
}

#curriculum .inner>ul>li:before {
  content: '';
  background: url("images/curriculum_line.png") repeat-x;
  width: 100%;
  height: 8px;
  position: absolute;
  top: -4px;
  left: 0
}

#curriculum .inner>ul>li:after {
  content: '';
  background: url("images/curriculum_line.png") repeat-x;
  width: 100%;
  height: 8px;
  position: absolute;
  bottom: -4px;
  left: 0
}

#curriculum .inner>ul>li h4 {
  font-size: 18px;
  text-align: center;
  font-weight: 500;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 7em
}

#curriculum .inner>ul>li h4:after {
  content: '';
  background: url("images/curriculum_line.png") repeat-x;
  width: 100%;
  height: 8px;
  position: absolute;
  bottom: -4px;
  left: 0
}


#curriculum ul li ul {
  margin: 1em 2em
}

#curriculum ul li li {
  background: none;
  width: 100%;
  text-indent: -1em;
  padding-left: 1em;
  line-height: 1.8
}

#curriculum dl {
  border: 3px solid #ceb45b;
  display: flex;
  width: 80%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.4);
}

#curriculum dt {
  background: #ceb45b;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  min-width: 6em
}

#curriculum dd {
  color: #153551;
  padding: 1.2em
}

@media screen and (max-width: 768px) {

  #curriculum .inner>ul>li {
    width: 100%
  }

  #curriculum dl {
    flex-direction: column;
    width: 100%
  }
}

/* =======================================
	main faq
========================================== */
#faq {
  position: relative
}

#faq .inner {
  width: min(92%, 1100px);
  margin: 0 auto;
  padding-top: 10vh;
  padding-bottom: 10vh
}

main section#faq h2 {
  margin-bottom: 3em;
}

main section#faq h2 span.line img {
  height: 37px;
}

main section#faq h2 span.line {
  padding: 0 32px 8px;
}

main section#faq h2 span.jp {
  right: 32px;
  margin-top: -4px;
}

#faq dl {
  margin: 5px auto 0;
  width: 90%;
  max-width: 940px;
  background: rgba(255, 255, 255, 0.6);
  padding: 0 1.2em;
  color: #153551
}

#faq dl dt {
  padding: 1.2em 0;
}

#faq dl dd {
  padding: 1.2em 0;
  border-top: 1px solid #153551;
  display: none
}

#faq dl dt span,
#faq dl dd span {
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  width: 1.4em;
  height: 1.4em;
  border-radius: .7em;
  margin-right: .3em;
  line-height: 1
}
@media screen and (min-width: 769px) {	
#faq {
  background-image: url(images/faq_bg.jpg);
	}
}
@media screen and (max-width: 768px) {
#faq:before {
  background-image: url(images/faq_bg.jpg);
	}	
  #faq dl {
    width: 96%
  }
}

/* =======================================
	main about2
========================================== */
#about2 {
  background-image: url(images/about_bg.jpg);
  padding-top: 10vh;
  height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

#about2 .inner {
  height: 100%;
  overflow-y: scroll
}

#about2 .leadbox {
  margin: 0 auto;
  width: min(100%, 595px);
  background: linear-gradient(180deg, rgba(12, 14, 26, 0) 0%, rgba(12, 14, 26, 0.2) 100%);
  padding-top: 5vh;

  padding-bottom: 15vh;
  overflow-y: scroll
}

#about2 .leadbox p {
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  margin-bottom: 1.2em
}

#about2 .aboutBtn {
  text-align: center;
}

@media screen and (max-width: 768px) {
  #about2 {
    position: relative;
    height: auto
  }
}

/* =======================================
	main information
========================================== */
#information {
  background-image: url(images/information_bg.jpg);
  position: relative;
  border-top: 28px solid #ad9c76
}

#information .inner {
  width: min(92%, 1100px);
  margin: 0 auto;
  padding-top: 10vh;
  padding-bottom: 10vh
}
main section#information h2{
	margin-bottom: 3em
}
main section#information h2 span.line img {
  height: 30px;
}

#information .pcFlex {
  gap: 30px;
  margin-top: 3em;

}

#information .infoBox {
  background: #e1dcc9;
  position: relative;
  color: #153551;
  border: 1px solid #e1dcc9;
  margin-bottom: 35px
}

#information .infoBox:before {
  background: url("images/information_ic_pin.png") no-repeat;
  background-size: contain;
  height: 20px;
  width: 27px;
  content: '';
  position: absolute;
  right: -2px;
  top: -10px
}

#information .pcFlex .infoBox {
  width: calc((100% - 30px) / 2)
}

#information .infoBox h3 {
  background: #ad9c76;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: .8em;
  line-height: 1
}

#information .infoBox h3+dl {
  margin: 1em
}

#information .infoBox h3+dl dt {
  font-weight: bold;
  font-size: 18px;
}

#information .infoBox a.btn {
  margin: auto;

}

#information .infoBox a.btn span {
  border-radius: 10px;
  background: #225078;
  color: #fff;
  padding: .8em;
  display: inline-block;
}


#information .infoBox h3+dl dt.tBdr {
  border-top: 3px dotted #ad9c76;
  padding-top: 1.5em
}

#information .infoBox h3+dl dt .note {
  font-size: 70%
}

#information .infoBox h3+dl dd {
  margin-left: 1em;
  margin-bottom: 1.5em
}

#information .infoBox h3+dl dd p.special {
  border: 2px solid #ad9c76;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 1em
}

#information .infoBox h3+dl dd p.special span {
  display: inline-block;
  background: #ad9c76;
  padding: .5em 1em .5em 1em;
  color: #fff;
}

#information .infoBox h3+dl dd ul {
  margin-top: 1em
}

#information .infoBox h3+dl ul li {
  border-bottom: 1px solid #fff;
  margin-bottom: .3em
}

#information .infoBox h3+dl ul li dl {
  display: flex;
}

#information .infoBox h3+dl ul li dt {
  font-weight: 500;
  font-size: 16px;
  width: 50%
}

#information .infoBox h3+dl ul li dd {
  margin-bottom: .3em
}

#information .infoBox.limited dt {
  margin-bottom: 1em
}

#information .infoBox.limited dt span {
  font-size: 16px;
  font-weight: 500
}

#information .infoBox.limited dd {
  border-top: 3px dotted #ad9c76;
  padding-top: 1em
}


@media screen and (max-width: 768px) {
  #information h2 {
    margin-bottom: 40px
  }

  #information .pcFlex .infoBox {
    width: 100%
  }

  #information .infoBox h3+dl ul li dl {
    flex-direction: column
  }

  #information .infoBox h3+dl ul li dt {
    width: 100%
  }
}


/* =======================================
	main profile
========================================== */
#profile {
  background-image: url(images/profile_bg.jpg);
  position: relative
}

#profile .inner {
  width: min(92%, 1100px);
  margin: 0 auto;
  padding-top: 10vh;
  padding-bottom: 10vh
}

#profile h2 {
  margin-bottom: 3em
}

#profile .profileBox {
  border: 3px solid #caaf5d;
  position: relative;
  margin-bottom: 30px;
  padding: 20px 30px 40px;
  background: rgba(255, 255, 255, 0.7)
}

#profile .profileBox:before {
  display: block;
  width: 44px;
  height: 44px;
  content: '';
  background: url("images/profile_flame_topL.png") no-repeat;
  background-size: contain;
  position: absolute;
  left: 2px;
  top: 2px;

}

#profile .profileBox:after {
  display: block;
  width: 44px;
  height: 44px;
  content: '';
  background: url("images/profile_flame_topR.png") no-repeat;
  background-size: contain;
  position: absolute;
  right: 2px;
  top: 2px;

}

#profile .profileBox .pcFlex:before {
  display: block;
  width: 44px;
  height: 44px;
  content: '';
  background: url("images/profile_flame_btmL.png") no-repeat;
  background-size: contain;
  position: absolute;
  left: 2px;
  bottom: 2px;

}

#profile .profileBox .pcFlex:after {
  display: block;
  width: 44px;
  height: 44px;
  content: '';
  background: url("images/profile_flame_btmR.png") no-repeat;
  background-size: contain;
  position: absolute;
  right: 2px;
  bottom: 2px;

}

#profile .profileBox .pcFlex {
  gap: 24px
}

#profile .profileBox figure {
  width: 192px;
  flex-shrink: 0;
	margin-bottom: 10px;
}

#profile .profileBox div p {
  font-size: 14px
}

#profile .profileBox div h3 {
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 600
}

#profile .profileBox dl {
  margin-top: 1em;

}

#profile .profileBox dl dt,
#profile .profileBox dl dd li {
  font-size: 14px;
}

#profile .profileBox dl dt {
  margin-bottom: .3em
}

#profile .profileBox dl.credits ul {
  column-count: 3;
  /* 3列に設定 */
  column-gap: 20px;
}

#profile .profileBox dl.history {
  margin-bottom: 2em
}

#profile .profileBox dl.history li {
  display: flex;
  margin-bottom: .3em
}

#profile .profileBox dl.history li span {
  width: 4em;
  flex-shrink: 0;
}

@media screen and (max-width: 768px) {
	#profile .profileBox{
		padding: 20px 20px 40px;
	}	
  #profile .profileBox dl.credits ul {
    column-count: auto;
    column-gap: 20px;
  }
}

/* =======================================
	main topNavi
========================================== */
#topNavi {
  background-image: url(images/topNavi_bg.jpg);
}

.inner {}

.pcflex {}

.pcOnly {}

.spOnly {}

.mail {}







/* =======================================
	main topMenu
========================================== */
#topMenu {
  background-image: url(images/topMenu_bg.jpg);
}

.bgBeige {}

.cmnSubTi {}

.topMenuList {}

.btnMore {}


/* =======================================
	footer
========================================== */
footer {
  background: #caaf5d;
  padding: 20px 0 0
}

footer p img {
  width: 110px;
  margin-bottom: 20px
}

.copy {
  background: #0f2a4a;
  padding: .5em;
  text-align: center;
  color: #fff
}