@charset "UTF-8";
/* CSS Document */


/*index.html*/

#loading {
	display: flex;
	justify-content: center;
	align-content: center;
	width: 100vw;
	height: 100vh;
	background-color: #c4c4c4;
	transition: all 1.0s;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}

#loading-logo {
	margin-top: 40vh;
	color: #fff;
	animation: happen 1.0s;
}



@keyframes happen {
  0% {
    opacity: 0;
  } 100% {
    opacity: 1;
  }
}
 

.loaded {
	opacity: 0;
	visibility: hidden;
}

.header-logo-container {
	display: flex;
	justify-content:flex-start;
	align-items: center;
	width: 100%;
}

.hero{
	height: 90vh;
}

.hero_accent{
	font-size: 12em;
	display: flex;
	align-items: flex-end;
	line-height: 0.8;
	width:20%
}

.hero_accent_wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: auto;
}

.hero_accent_sub_wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: auto;
}

.hero_accent_sub{
	font-size: 3.0em;
	line-height: 1.2;
	width:100%;
}

.heroimage {
	margin: 0 auto 3.2rem;
	display: flex;
	width: 95%;
	max-width: 2400px;
}

.herocatch {
	display:flex;
	position:relative;
	width: 28%;
	z-index: 50;
	line-height: 1.2;
}



.catch-lh {
	line-height: 1.2!important;
}


.swiper-container {
	width: 100%;
	height: 90vh;
}

.swiper-slide {
	width:100%;
	height: 90vh;
	background-size: cover;
	background-position: top;
	background-image: url(../image/top/hero.jpg);
}

.slide-content{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.slide-content-left {
    width: 72%;
}


.pgname {
	position: absolute;
	top: 22vh;
	left: 6vw;
	padding: 4px 8px;
	color: #fff;
	font-size: 2.0rem;
	font-weight: bold;
	display: flex;
	align-items: flex-end;
}
.pgname span {
	font-size: 1.2rem;
	color: #fff;
}

.pgsum {
	position: absolute;
	bottom: 2.4rem;
	right: 8px;
	padding: 16px;
	background: rgba(80,80,80,0.8);
	color: #fff;
}

.pgsum-point {
	font-size: 2.4rem;
	font-weight: bold;
}

.pgsum-point::after {
    content: '';
    display: block;
    margin: 0.2rem auto 0;
    height: 1px;
    background:linear-gradient(to right,#FCB30B,#00BAFF);
	background:-moz-linear-gradient(left,);
	background:-webkit-linear-gradient();
}


.news ul {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

.news ul li {
	width: 23%;
	border: solid 1px #000;
}

.news ul li::before {
	content: "";
	display: block;
	padding-top: 100%;
}


.programLink {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.aboutLink {
	display: flex;
	justify-content:  space-between;
}


.plonewrap{
	width: 32%;
	margin-bottom: 3.2rem;
	text-align: center;
}

.plone {
	display:flex;
  	align-items: center;
 	justify-content: center;
	width:80%;
	aspect-ratio: 1/1;
	color: #fff;
	border-radius: 50%;
	margin: 0 auto 2.4rem;
}

.fukurione {
	max-width: 60%;
	height: auto;
	display: block;
}

.fukuritwo {
	background-image: url('test.jpg');
	background-size: cover;
}

.program-sub {
	text-align:center;
	font-size: 1.4rem;
	color: #fff;
}

.darkfilter {
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,0.4);
	width: 100%;
	height: 100%;
}

.darkfilter>p,.darkfilter>div>p {
	font-weight: bold;
}

.darkfilter::before {
	content: "";
	display: block;
	padding-top: 150%;
}



.alone::before {
	content: "";
	display: block;
	padding-top: 32%;
}

.alone {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 49%;
	background-color: gray;
	color: #fff;
	font-size: 1.6rem;
	text-align: center;
}

.point-odd ,.point-even{
	display: flex;
	justify-content: space-between
}

.points-image {
	width: 300px;
	height: 200px;
	border: solid 1px #000;
}

table {
  border-collapse: collapse;
  border: solid 2px;
  width: 100%;
  background-color: #fff;
}

table th, table td {
  border: solid 1px;
  padding: 32px 16px;
  vertical-align: middle;;
}

.staff {
	display:flex;
	width: 100%;
    justify-content: space-between;
}

.staffleft {
	display: flex;
	flex-direction: column;
	justify-content: center;
    align-items: center;
	width: 20%;
}

.staffright {
	width: 70%;
}

.staffimage {
	max-width: 100%;
	height: auto;
	display: block;
}

.agename {
	font-size: 2.0rem;
	color: #00b4cf;
	margin-top: 8px;
}

.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #00b4cf;
  box-sizing: border-box;
  border-radius: 20px;

}

.balloon1:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}

.balloon1:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #00b4cf;
  z-index: 1;
}

.balloon1 p {
  font-size: 2.4rem;
  font-weight: bold;
  margin: 0;
  padding: 10px;
}

.dashed-note {
  background-color: #fff; /* 背景色 */
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), /* 点線1の色 */
                    linear-gradient(180deg, #ccc 1px, transparent 1px); /* 点線2の色と太さ */
  background-size: 8px 100%, /* 点線1のサイズ */
                   100% 2.5em; /* 点線2のサイズ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}

/*ipad縦以下　トップページ*/
@media screen and (max-width: 896px) {
	
	#loading-logo {
	margin-top: 40vh;
}
	
	
	
	.heroimage {
		padding-bottom: 1.2rem;
		margin: 0 auto 1.2rem;
		justify-content: flex-end;
		flex-direction: column-reverse;
		width: 100%;
	}
	
	.herocatch {
		margin: 0 auto;
		position:static;
		width: 90%;
		z-index: 1;
	}


	.swiper-container {
		width: 100%;
		height: 440px;
	}

	.white-block, .black-block {
		position: static;
		width: 100%;
		line-height: 1.2!important;
		font-size: 4.0rem;
		font-weight: 700;
		letter-spacing: 0.6rem;
	}
	
	.white-block > p {
	font-size: 4.5rem;
}

.white-block > p > span {
	font-size: 5.6rem;
}
	
	.black-block > p {
	font-size: 4.5rem;
}

.black-block > p > span {
	font-size: 5.6rem;
}

	
	.white-block {
		display: none;
	}
	
	.hero h1 {
		font-size: 2.4rem;	
	}

	.pgname {
		font-size: 1.6rem;
	}
	
	.pgsum {
		padding: 0.8rem;
	}
	
	.pgsum-point {
		font-size: 1.6rem;
		font-weight: bold;
	}
	
	.plone {
		margin-bottom: 1.6rem;
	}
	
.plonewrap {
		width: 45%;
	}

	
	.alone {
		margin-bottom: 0.8rem;
	}
}

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

	.hero_accent {
		font-size: 7em;
	}

	.hero_accent_sub {
    font-size: 1.6em;
}
	
	


	.darkfilter::before {
		padding-top: 40%;
	}
	
	.aboutLink {
		flex-direction: column;	
	}

	.alone {
		width: 100%;
		font-size: 1.6rem;
	}

	
}




/*programpages*/

.program-hero {
	height: 480px;
}

.whitefilter {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background: rgba(255,255,255,0.2);
	height: 100%;
}

.grayfilter {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background: rgba(40,40,40,0.3);
	height: 100%;
}

.pgname {
    top: 22vh;
    left: 1vw;
    padding: 4px 8px;
    font-size: 2.0rem;
}

.program-hero h1 {
	font-size: 4.0rem;
	color: #fff;
	font-weight: bold;
}

.program-intro {
	padding: 4.8rem 0;
	margin: 0 auto;
}

.program-intro h2{
	margin: 0 0 4.8rem 0;
	font-size: 2.0rem;
	line-height: 1.6;
}

.program-table {
	margin: 0 0 0 1.6rem;
	font-size: 1.2rem;
}

.program-table td {
	padding: 0.4rem 0;
}

.program-content {
	display:flex;
	padding: 10.4rem 0;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

.program-content-article {
	width: 50%;
}

.program-content-article h2 {
	font-size: 2.4rem;
	font-weight: bolder;
	padding: 0 0 0 1.6rem;
	margin-bottom: 3.2rem;
}

.program-content-article p {
	font-size: 1.6rem;
}

.program-content-photo {
	width: 40%;
	padding-top: 26%;
	background-position: top;
	background-size: cover;
	background-repeat: no-repeat;
}


.gray-gra {
	background:linear-gradient(to right, #F7F7F7 88%, #fff 88%);
}

table th, table td {
    padding: 24px 8px;
}

@media screen and (max-width: 1025px) {
.slide-content-left {
	
    padding: 12.6rem 0 8.2rem 0;
    width: 100%;
}

.herocatch {
    display: none;
}

}

@media screen and (max-width: 896px) {
	
	.swiper-container {
		margin: 0 0 0.8rem 0;
	}
	
	.black-block >  span, .white-block > span {
		line-height: 2.2rem!important;
	}
	
	.program-content-photo {
		width: 100%;
		padding-top: 66%;
		margin: 0 0 1.6rem 0;
	}
	
	.program-content-article {
		width: 100%;
	}
	
	.gray-gra {
	background:#F7F7F7;
	}
	
	.mail-icon, .tel-icon {
		width: 33%;
	}
	
	
	.program-intro {
		padding: 2.4rem 0;
		margin: 0 auto;
	}
	
	.program-intro h2{
		margin: 0 0 2.4rem 0;
		font-size: 2.0rem;
	}
	
	.program-content {
		padding: 5.6rem 0;
		
	}

	
}


/*about.html*/

.about-hero {
	display: flex;
	justify-content: center;
	align-items: center;
	background: gray;
	height: 24.0rem;
}

.about-hero h1 {
	color: #fff;
}

.bg-arch-logo{
  display:block;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url("../image/logo.png") center no-repeat;
  background-size:contain;
	z-index: -50;
}


.three-points-container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	
}

.three-points {
	width: 28%;
	height: 325px;
	text-align: center;
	padding: 2%;
}

.three-points h3 {
	font-size: 2.0rem;
	text-align: center;
	margin: 0 0 2.4rem 0;
}

.three-points h3::after {
	content: '';
    display: block;
    margin: 2.4rem auto 0;
    width: 4.0rem;
    height: 2px;
    background:#FCB30B;
}

.three-points p {
	font-size: 1.6rem;
	text-align: left;
}



.profile {
	margin: 0 0 2.0rem 0;
	font-size: 1.2rem;
}

.license {
	margin: 0 0 1.6rem 0;
	font-size: 1.2rem;
}

.license span {
	padding: 0 0 0 0.8rem;
	border-left: solid 2px #FCB30B;
}

.message {
	margin: 0 0 1.6rem 0;
	font-size: 1.2rem;
}

.message span {
	padding: 0 0 0 0.8rem;
	border-left: solid 2px #FCB30B;
}

.pc-content {
	margin: 0 0 8.0rem 0;
}

.pc-content h4 {
	margin: 0 0 1.6rem 0;
	padding-left: 1.2rem;
	text-align: left;
	font-size: 2.4rem;
}


.pc-case {
	padding: 3.2rem;
	margin: 0 0 4.8rem 0;
}

.pc-content-block {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}

.pc-content .heading {
	text-align: left;
}

.pc-content .article {
	width: 50%;
}


.name {
	margin: 0 0 1.6rem 0;
	padding-left: 1.2rem;
	text-align: left;
	font-size: 2.0rem;
}

.qanda {
	font-size: 1.6rem;
	margin: 3.2rem 0 0 0;
	padding: 0.8rem;
	background:#fff;
}

.question {
	
}

@media screen and (max-width: 896px) {
	
	.three-points-container {
		flex-direction: column
	}

	.three-points {
		width: 96%;
		height: auto;
		margin: 0 0 3.2rem 0;
	}
	
	.trainer {
		flex-direction: column;
		width: 100%;
	}

	.trainer-left {
		width: 100%;
	}
	
	.trainer-right {
		width: 100%;
	}

	.trainer-one, .trainer-two {
		width: 100%;
		margin: 0 0 1.6rem 0;
		padding-top: 66%;
	}

	.bg-logo {
		width: 100%;
		padding-top: 66%;
		margin: 0 auto 1.6rem;
	}

	
	
	.pc-content-block {
		flex-direction: column;
	}
	
	.pc-content .article {
		width: 100%;
	}
	
	.pc-image-one,.pc-image-two,.pc-image-three,.pc-image-four,.pc-image-five,.pc-image-six,.pc-image-seven,.pc-image-nine {
		width: 100%;
		padding-top: 66%;
		margin: 0 0 1.6rem 0;
	}
	
	.pc-image-eight {
		width: 100%;
		padding-top: 100%;
		margin: 0 auto 1.6rem;
}
	
	.pc-image-eight {
		
	}
	
	.pc-case {
	padding: 1.2rem;
}
	
}

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

.slide-content{
	display: block;
	width: 100%;
}

.slide-content-left {
    width: 100%;
}
    .herocatch {
        display:none;
    }

.balloon1 p {
    font-size: 1.8rem;
    padding: 6px;
}

.staffleft {
    width: 30%;
}

.agename {
    font-size: 1.6rem;
    margin-top: 6px;
}

}