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


/*--------------------------------------------------------------
	Base
--------------------------------------------------------------*/
html{
	scroll-behavior: smooth;
	overflow-x: hidden;
}
body{
	position: relative;
	overflow-x: hidden;
}
a{
  transition: .3s;
}
a:hover{
	opacity: .7;
}
.container_925{
	width: 925px;
	margin: 0 auto;
}
.container_1000{
	width: 1000px;
	margin: 0 auto;
}
.mt20{
	margin-top: 20px;
}
.mt40{
	margin-top: 40px;
}
.mt60{
	margin-top: 60px;
}
.mt80{
	margin-top: 80px;
}
.mb20{
	margin-bottom: 20px;
}
.mb40{
	margin-bottom: 40px;
}
.mb60{
	margin-bottom: 60px;
}
.mb80{
	margin-bottom: 80px;
}


@media (min-width:769px) {
  .sp{
    display:none !important;
  }
}
@media (max-width:768px) {
  .pc{
    display:none !important;
  }
  .container_925,
  .container_1000{
		width: calc(100% - 2rem);
		padding: 0 1rem;
	}
	img{
		width: 100%;
	}
}

span.bold{
	font-weight: bold;
}
span.normal{
	font-weight: normal;
}
span.underline{
	background-image:linear-gradient(to right, #996515, #d4af37, #996515);
  background-image: -moz-linear-gradient(left, #996515, #d4af37, #996515);
  background-image: -webkit-linear-gradient(left, #996515, #d4af37, #996515);
  padding: 0 3rem;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 60%;
}

@media (max-width:768px) {
	span.underline{
	  padding: 0 1rem;
	}
}

/*--------------------------------------------------------------
	Header
--------------------------------------------------------------*/
header{
	z-index: 2;
	height: 900px;
	position: relative;
}
header #video{
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;	
}
.header_fixed{
	z-index: 3;
  position: fixed;
	display: flex;
	justify-content: space-between;
  padding: 1rem 3rem;
  width: calc(100% - 6rem);
  height: calc(130px - 2rem);
  background-color: rgba(0, 0, 0, .75);
}
.header_fixed h1{
	width: 96px;
	display: inline;
}
.header_fixed a{
	text-decoration: none;
}
.header_btn{
	display: flex;
	position: relative;
	align-items: center;
}
.header_btn a{
	margin: 0 0.5rem;
}
.header_btn a:last-of-type{
	margin-right: 50px;
}
.header_btn .line_btn{
	color: #fff;
	background-color: #af9356;
	margin-right: 1rem;
	padding: 0.5rem;
	font-size: 20px;
	font-weight: bold;
}
.header_btn .line_btn::before{
	content: "";
	background-image: url(../images/icon_line.png);
	background-size: contain;
	width: 34px;
	height: 33px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5rem;
}
.header_btn .line_btn::after{
	content: '\e5cf';
	font-family: 'Material Icons';
	color: #fff;
	font-size: 15px;
}

.video_area{
	width:100vw;
  z-index: -1;
  top: 0;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;	
}
.video_area .movie{
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-height: 100%;
    min-width: 100%;
}




@media (max-width:768px) {
	header {
		background-image: url(../images/mv_sp.png);
		background-size: auto;
    height: 65vh;
	}
	header #video{
	  width: 200vw; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
	  height: 100vh; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
	  min-height: 100%;
	  min-width: 100%;	
	}
	.header_fixed{
	  padding: 1rem;
	  width: calc(100% - 2rem);
	  height: calc(5rem - 2rem);
	  background-color: rgba(0, 0, 0, .75);
	}
	.header_fixed h1{
		width: 3rem;
	}
	.menu_btn_icon{
		display: flex;
		margin-top: 2rem;
	}
	.menu_btn_btn{
		display: block;
		margin-top: 1rem;
	}
	.header_btn a {
	  margin: 0 0.2rem;
	}
	.header_btn a:last-of-type {
		margin-right: 0;
	}
	.header_btn .line_btn {
	  margin-right: 0;
	}
}

	/*--------------------------------------------------------------
		Header - HBMenu
	--------------------------------------------------------------*/
	.hbmenu_full {
		position: relative;
		z-index: 3;
		top: -1.5rem;
		right: 2rem;
	}
	.hbmenu_full .menu {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		visibility: hidden;
		overflow: hidden;
		width: 100%;
		height: 100%;
		pointer-events: none;
		outline: 1px solid transparent;

		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
		align-items: center;
		justify-content: center;
	}
	.hbmenu_full .menu > div {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		width: 200vw;
		height: 300vw;
		transition: all 0.4s ease;
		-webkit-transform: scale(0);
		        transform: scale(0);
		text-align: center;
		color: #fefefe;
		border-radius: 50%;
		background: rgba(0,0,0 ,0.8);

		flex: none;
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
		align-items: center;
		justify-content: center;
	}
	.hbmenu_full .menu > div > ul {
		display: block;
		max-height: 100vh;
		margin: 0;
		padding: 0 1em;
		list-style: none;
		transition: opacity 0.4s ease;
		opacity: 0;
	}
	.hbmenu_full .menu > div > ul > li {
		display: block;
		padding: 0;
	}
	.hbmenu_full .menu > div > ul > li img{
		width: 55%;
	}
	.hbmenu_full .menu > div > ul > li > a {
		position: relative;
		display: inline;
		cursor: pointer;
		transition: color 0.4s ease;
	}
	.hbmenu_full .menu > div > ul > li > a:hover {
		color: #e5e5e5;
	}
	.hbmenu_full .menu > div > ul > li > a:hover:after {
		width: 100%;
	}
	.hbmenu_full .menu > div > ul > li > a:after {
		position: absolute;
		z-index: 1;
		bottom: -0.15em;
		left: 0;
		width: 0;
		height: 2px;
		content: '';
		transition: width 0.4s ease;
		background: #e5e5e5;
	}
	.hbmenu_full .toggle {
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: 60px;
		height: 60px;
		cursor: pointer;
		opacity: 0;
	}
	.hbmenu_full .toggle:checked + .hamburger > span {
		-webkit-transform: rotate(135deg);
		        transform: rotate(135deg);
	}
	.hbmenu_full .toggle:checked + .hamburger > span:before,
	.hbmenu_full .toggle:checked + .hamburger > span:after {
		top: 0;
		-webkit-transform: rotate(90deg);
		        transform: rotate(90deg);
	}
	.hbmenu_full .toggle:checked + .hamburger > span:after {
		opacity: 0;
	}
	.hbmenu_full .toggle:checked ~ .menu {
		visibility: visible;
		pointer-events: auto;
	}
	.hbmenu_full .toggle:checked ~ .menu > div {
		transition-duration: 0.75s;
		-webkit-transform: scale(1);
		        transform: scale(1);
	}
	.hbmenu_full .toggle:checked ~ .menu > div > ul {
		opacity: 1;
	}
	.hbmenu_full .toggle:checked ~ .menu > div > ul li{
		transition-delay: 0.4s;
	}
	.hbmenu_full .toggle:hover + .hamburger {
		box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
	}
	.hbmenu_full .toggle:checked:hover + .hamburger > span {
		-webkit-transform: rotate(225deg);
		        transform: rotate(225deg);
	}
	.hbmenu_full .hamburger {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		display: block;
		width: 37px;
		height: 37px;
		padding: 0.5em 1em;
		cursor: pointer;
		transition: box-shadow 0.4s ease;
		border-radius: 0 0.12em 0.12em 0;
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
	}
	.hbmenu_full .hamburger > span {
		position: relative;
		top: 50%;
		display: block;
		width: 100%;
		height: 2px;
		transition: all 0.4s ease;
		background: #fefefe;
	}
	.hbmenu_full .hamburger > span:before,
	.hbmenu_full .hamburger > span:after {
		position: absolute;
		z-index: 1;
		top: -15px;
		left: 0;
		display: block;
		width: 100%;
		height: 2px;
		content: '';
		transition: all 0.4s ease;
		background: inherit;
	}
	.hbmenu_full .hamburger > span:after {
		top: 15px;
	}
	@media (max-width:768px) {
		.hbmenu_full {
			right: 3.5rem;
		}
		.hbmenu_full .menu > div > ul > li h2{
			padding: 0.5rem 0;
		}

		.hbmenu_full .menu > div > ul > li img{
			width: 40%;
		}
	}

	/*--------------------------------------------------------------
		Header - Teams_of_service.html
	--------------------------------------------------------------*/
	header.subpage_header{
		height: 350px;
	}
	header.subpage_header h2{
		position: absolute;
	}
	.service_tt{
		position: relative;
	  display: grid;
	  place-content: center;
		place-items: center;
		height: 460px;
	}
	@media (max-width:768px) {
		header.subpage_header{
			height: 30vh;
		}
		header.subpage_header h2{
			width: 80%;
		}
		.service_tt{
			height: 20rem;
		}
	}



/*--------------------------------------------------------------
	FV
--------------------------------------------------------------*/
.fv_catch{
	z-index: 2;
	width: calc(100vw - 1.05rem);
	position: absolute;
	top: 750px;
	clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%);
	padding: 5rem 0;
	text-align: center;
}

@media (max-width:768px) {
	.fv_catch{
		width: 100vw;
		top: 55vh;
		padding: 3rem 0;
	}	
}


/*--------------------------------------------------------------
	Main
--------------------------------------------------------------*/
main{
	position: relative;
	font-weight: bold;
}
.bg_white{
	background-color: #fff;
	color: #000;
}
.bg_black{
	background-color: #000;
	color: #fff;
}
.bg_gray{
	background-color: #5a5a5a !important;
	color: #fff;
}
.bg_grad{
	background:linear-gradient(to right, #996515, #d4af37, #996515);
  background: -moz-linear-gradient(left, #996515, #d4af37, #996515);
  background: -webkit-linear-gradient(left, #996515, #d4af37, #996515);
	color: #000;

}
.sec01, .sec02, .sec03, .sec04, .sec05, .sec06, .sec07, .sec08{
	padding: 6rem 0;
	text-align: center;
}
main h2{
	margin: 2rem 0;
}

@media (max-width:768px) {
	.sec01, .sec02, .sec03, .sec04, .sec05, .sec06, .sec07, .sec08{
		padding: 4rem 0;
	}
}

	/*--------------------------------------------------------------
		Main - section01
	--------------------------------------------------------------*/
	.sec01{
		background-image: url(../images/sec01_bg.png);
		background-size: cover;
		background-position: center;
		padding: 15rem 0 6rem;
	}
	.sec01 h2{
		margin: 5rem 0;
	}
	.sec01 p{
		color: #fff;
		font-size: 36px;
		font-weight: bold;
		margin: 1.5rem 0;
	}
	.sec01 p:last-of-type{
		margin-bottom: 5rem;
	}


	@media (max-width:768px) {
		.sec01{
			background-image: url(../images/sec01_bg_sp.png);
			background-size: auto;
			padding: 6rem 0;
		}
		.sec01 h2{
			margin: 7rem 0 3rem;
		}
		.sec01 h2 img{
			width: 80%;
		}
		.sec01 p{
			font-size: 1.15rem;
			margin: 1.5rem 0;
		}
	}


	/*--------------------------------------------------------------
		Main - section02
	--------------------------------------------------------------*/
	.sec02{
		background-image: url(../images/sec02_bg.png);
		background-size: cover;
		background-position: center;
	}
	.sec02 .txt_box{
		color: #fff;
    background: rgba(0, 0, 0, .6);
    border: 1px solid;
    border-image: linear-gradient(to bottom right, #996515, #d4af37, #996515);
    border-image-slice: 1;
    margin: 3rem 0;
    padding: 2rem 3rem;
    text-align: left;
	}
	.sec02 .txt_box:last-of-type{
    margin-bottom: 0;
	}
	.sec02 .ttl{
		display: flex;
	  align-items: flex-start;
	}
	.sec02 h3{
		font-size: 24px;
		margin: 0 0 1rem 1rem;
	}
	.sec02 p{
		font-size: 16px;
		font-weight: normal;
	}

	@media (max-width:768px) {
		.sec02{
			background-image: url(../images/sec02_bg_sp.png);
		}		
		.sec02 h2 img{
			width: 70%;
		}
		.sec02 .txt_box{
	    padding: 1.5rem;
	    text-align: left;
		}
		.sec02 .ttl img{
			width: 2rem;
		}
		.sec02 h3{
			font-size: 1rem;
		}
	}

	/*--------------------------------------------------------------
		Main - section03
	--------------------------------------------------------------*/
	.sec03 p{
		margin: 4rem 0;
	}
	.sec03 p.txt01{
		font-size: 24px;	
	}
	.sec03 p.txt02{
		font-size: 40px;
	}
	.sec03 .machine_wrap{
		display: flex;
		align-items: center;
		margin-bottom: 2rem;
	}
	.sec03 .machine_wrap:nth-child(even) {
  	flex-direction: row-reverse;
	}
	.sec03 .machine_wrap .machine_txt{
		padding: 2rem 3rem;
		height: calc(390px - 4rem);		
	}
	.machine_txt h3{
		color: #af9356;
		background-color: #000;
		padding: 1rem 2rem;
		font-size: 16px;
		text-align: left;
	}
	.machine_txt p{
		font-size: 16px;
		margin: 1rem 0;
		text-align: left;
	}
	.machine_txt .machine_txt_flex{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 1.5rem 0;
	}
	.machine_txt_flex img{
		height: 13rem;
	}
	.machine_txt_flex p{
		margin-left: 1rem;
	}
	.machine_etc_wrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;		
	}
	.machine_etc_wrap p{
	  width: calc((100% - 40px) / 4);
	  margin: 0.5rem 0;
		text-align: left;
	}
	.machine_etc_wrap p span{
		font-size: 14px;
		font-weight: normal;
	}

	@media (max-width:768px) {
		.sec03 p{
			margin: 1rem 0;
		}
		.sec03 .machine_txt_flex p{
			margin-left: 1rem;
		}
		.sec03 h2 img{
			width: 70%;
		}
		.sec03 p.txt01{
			font-size: 1rem;
		}
		.sec03 p.txt02{
			font-size: 1.5rem;
		}
		.sec03 .machine_wrap{
			display: block;
			margin-bottom: 2rem;
		}
		.sec03 .machine_wrap .machine_txt{
			padding: 1rem 1.5rem;
			height: auto;		
		}
		.machine_txt h3{
			padding: 1rem;
			font-size: 0.8rem;
		}
		.machine_txt h3 img{
			width: 100%;
			height: auto;
		}
		.machine_etc_wrap p{
		  width: calc((100% - 2rem) / 2);
		  margin: 0.5rem;
		}
		.machine_etc_wrap p span{
			font-size: 0.7rem;
		}
	}


	/*--------------------------------------------------------------
		Main - section04
	--------------------------------------------------------------*/
	.sec04{
		background-image: url(../images/sec04_bg.png);
		background-size: cover;
		background-position: center;
	}
	.sec04 p{
		color: #fff;
		font-size: 24px;
		padding-bottom: 3rem;
	}
	.sec04 .trainer_wrap{
		display: flex;
		justify-content: space-between;
	}
	.trainer_wrap .trainer_content{
		width: 450px;
		text-align: left;
	}
	.trainer_wrap .trainer_content h3{
		color: #fff;
		background-color: #000;
		font-size: 32px;
		line-height: 1em;
		padding: 0.5rem 1rem;
	}
	.trainer_wrap .trainer_content h3 span{
		color: #fff;
		background-color: #000;
		font-size: 20px;
	}
	.trainer_content .trainer_content_txt{
		background-color: #fff;
		padding: 1.5rem;
		align-self: stretch;
	}
	.trainer_content_txt p{
		color: #000;
		font-size: 16px;
	}
	.trainer_content_txt p:first-of-type{
		font-weight: normal;
		border-bottom: 1px solid #af9356;
		padding-bottom: 1rem;
	}
	.trainer_content_txt p:last-of-type{
		padding-top: 1rem;
		font-weight: bold;
	}

	@media (max-width:768px) {
		.sec04{
			background-image: url(../images/sec04_bg_sp.png);
			background-size: auto;
		}		
		.sec04 h2 img{
			width: 80%;
		}
		.trainer_wrap .trainer_content{
			width: calc(50% - 0.5rem);
		}
		.trainer_wrap .trainer_content h3 {
		  font-size: 1rem;
		  padding: 0.5rem 1rem;
		}
		.trainer_wrap .trainer_content h3 span {
		  font-size: 0.7rem;
		  
		}
		.trainer_content_txt p{
			font-size: 0.8rem;
		}
		.trainer_content .trainer_content_txt {
		  padding: 0.5rem;
		  height: fit-content;
	  }
	}



	/*--------------------------------------------------------------
		Main - section05
	--------------------------------------------------------------*/
	.sec05 h2{
		padding-bottom: 3rem;
	}
	.sec05 .price_list{
		width: 80%;
		margin: 0 auto 3rem;
	}
	.sec05 .price_list:last-of-type{
		margin-bottom: 0;
	}
	.price_list tr{
	}
	.price_list th,
	.price_list td{
		width: 50%;
		padding: 1rem;
		text-align: center;
		font-size: 20px;
		border: 1px solid #fff;		
	}
	.price_list th{
		background-color: #af9356;
	}
	.price_list td{	}
	.price_list td span.txt18{
		font-size: 18px;
	}
	.price_list td span.txt32{
		font-size: 32px;
	}

	@media (max-width:768px) {
		.sec05 h2{
			padding-bottom: 1.5rem;
		}
		.sec05 h2 img{
			width: 50%;
		}
		.sec05 .price_list{
			width: 100%;
			margin: 0 auto 2rem;
		}
		.price_list th,
		.price_list td{
			padding: 0.5rem;
			font-size: 1rem;
		}
		.price_list td span.txt18{
			font-size: 0.8rem;
		}
		.price_list td span.txt32{
			font-size: 1.1rem;
		}

	}


	/*--------------------------------------------------------------
		Main - section06
	--------------------------------------------------------------*/
	.sec06{
		background-image: url(../images/sec06_bg.png);
		background-size: cover;
		background-position: center;
	}
	.sec06 p{
		color: #fff;
		font-size: 24px;
		padding-bottom: 3rem;
	}
	.sec06 .payment_icon{
		display: flex;
		justify-content: space-evenly;
	}
	.payment_icon p{
		color: #000;		
	}

	@media (max-width:768px) {
		.sec06 h2 img{
			width: 80%;
		}
		.sec06 p{
			font-size: 1rem;
			padding-bottom: 1rem;
		}
		.sec06 .payment_icon p{
			font-size: 0.6rem;
		}
		.sec06 .payment_icon img{
			width: 80%;
			margin: 0.5rem 0;
		}

	}



	/*--------------------------------------------------------------
		Main - section07
	--------------------------------------------------------------*/
	.sec07 a{
		text-decoration: none;
		color: #000;
	}
	.sec07 .link_txt{
		font-size: 24px;
	}
	.sec07 p{
		font-size: 18px;
	}
	.sec07 .btn_line,
	.sec07 .btn_twitter,
	.sec07 .btn_insta{
    width: 400px;
    position: relative;
    background-color: #000;
    color: #fff;
    font-weight: bold;
    padding: 1rem 3rem;
	}
	.sec07 .btn_line{
    margin: 3rem auto;
		border-radius: 50px;
    font-size: 26px;
	}
	.sec07 .btn_twitter,
	.sec07 .btn_insta{
    margin: 1.5rem auto;
    border-radius: 50px;
    font-size: 18px;
	}
	.sec07 .btn_line::before,
	.sec07 .btn_twitter::before,
	.sec07 .btn_insta::before{
		content: "";
	  background-size: contain;
    position: relative;
	  display: inline-block;
	  vertical-align: middle;
	}
	.sec07 .btn_line::before{
		background-image:  url(../images/icon_line.png);
	  width: 2rem;
	  height: 2rem;
	}
	.sec07 .btn_twitter::before{
		background-image:  url(../images/icon_twitter.png);
	  width: 1.45rem;
	  height: 1.2rem;
	}
	.sec07 .btn_insta::before{
		background-image:  url(../images/icon_insta.png);
	  width: 1.2rem;
	  height: 1.2rem;
	}

	@media (max-width:768px) {
		.sec07 h2 img{
			width: 80%;
		}
		.sec07 .link_txt{
			font-size: 1rem;
		}
		.sec07 p{
			font-size: 0.8rem;
		}
		.sec07 .btn_line,
		.sec07 .btn_twitter,
		.sec07 .btn_insta{
	    width: 60%;
	    padding: 1rem 3rem;
		}
		.sec07 .btn_line{
	    margin: 3rem auto;
	    font-size: 1rem;
		}
		.sec07 .btn_twitter,
		.sec07 .btn_insta{
	    margin: 1.5rem auto;
	    font-size: 0.75rem;
		}
	}



	/*--------------------------------------------------------------
		Main - section08
	--------------------------------------------------------------*/
	.sec08 .access_wrap{
		padding-top: 2rem;
	}
	.sec08 .access_wrap iframe{
		width: 100%;
  	aspect-ratio: 16/9; //アスペクト比（縦横比）を指定
	}
	.sec08 p{
		font-size: 16px;
		font-weight: normal;
		margin: 1rem 0;
	}

	@media (max-width:768px) {
		.sec08 h2 img{
			width: 65%;
		}
		.sec08 p{
			font-size: 0.8rem;
		}
	}

	/*--------------------------------------------------------------
		Main - Teams_of_service.html
	--------------------------------------------------------------*/
	main.subpage_service{
		padding: 6rem 0;
	}
	.subpage_service h3{
	  border-left: 0;
	  padding-left: 0;
	  font-size: 1.1rem;
    font-weight: bold;
	}
	.subpage_service p{
		font-weight: 100;
		margin-bottom: 1rem;
    font-size: 16px;
	}
	.subpage_service a{
		color: #af9356;
		font-weight: bold;
	}

	@media (max-width:768px) {
		main.subpage_service{
			padding: 3rem 0 6rem;
		}
		.subpage_service h3{
		  font-size: 0.9rem;
		}
		.subpage_service p{
			font-size: 0.8rem;
		}
	}



/*--------------------------------------------------------------
	Footer
--------------------------------------------------------------*/
footer{
	margin: 0 auto;
	padding: 2rem;
	text-align: center;
}
footer .footer_link{
	font-size: 16px;
	margin-bottom: 1.5rem;
}
footer .footer_link a{
	color: #000;
	margin: 1rem 1.5rem;
}


@media (max-width:768px) {
	footer .footer_link{
		font-size: 0.8rem;
		margin-bottom: 1.5rem;
	}
}

