@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Roboto:wght@600&display=swap');

:root {
	--min-width: 1200px;
	--max-width: 1040px;
}
@media only screen and (max-width: 767px){
	:root {
  --min-width: 100%;
	}
}
html {
 min-width: 100%;
 min-height: 100%;
	font-size: 62.5%;
}

body {
 font-family: "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-size: 1.6rem;
	font-weight: 600;
 line-height: 1.8;
	color: #3d2622;
	background-color: #fafafa;
	position: relative;
 /*font-feature-settings: "palt" 1;*/
}

a {
 opacity: 1;
 transition: all 0.3s;
 word-break: break-all;
}
a:hover {
 opacity: 0.6;
 transition: all 0.3s;
}

img{
	max-width: 100%;
 margin: 0 auto;
}

.gothic {
 font-family: "Noto Sans JP", sans-serif;
}
.txt-center {
 text-align: center !important;
}
.txt-left {
	text-align: left !important;
}
.txt-right {
 text-align: right !important;
}
.txt-small {
	font-size: 1.3rem;
}

small.red-box {
  background-color: #f00;
  color: #fff;
  padding: 2px 5px;
}

/** margin **/
.mt00 {margin-top: 0 !important;}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mb00 {margin-bottom: 0 !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.ml00 {margin-left: 0 !important;}
.ml10 {margin-left: 10px !important;}
.ml20 {margin-left: 20px !important;}
.ml30 {margin-left: 30px !important;}
.ml40 {margin-left: 40px !important;}
.ml50 {margin-left: 50px !important;}
.ml60 {margin-left: 60px !important;}
.mr00 {margin-right: 0 !important;}
.mr10 {margin-right: 10px !important;}
.mr20 {margin-right: 20px !important;}
.mr30 {margin-right: 30px !important;}
.mr40 {margin-right: 40px !important;}
.mr50 {margin-right: 50px !important;}
.mr60 {margin-right: 60px !important;}

/** padding **/
.pt00 {padding-top: 0 !important;}
.pt10 {padding-top: 10px !important;}
.pt20 {padding-top: 20px !important;}
.pt30 {padding-top: 30px !important;}
.pt40 {padding-top: 40px !important;}
.pt50 {padding-top: 50px !important;}
.pt60 {padding-top: 60px !important;}
.pb00 {padding-bottom: 0 !important;}
.pb10 {padding-bottom: 10px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb50 {padding-bottom: 50px !important;}
.pb60 {padding-bottom: 60px !important;}
.pl00 {padding-left: 0 !important;}
.pl10 {padding-left: 10px !important;}
.pl20 {padding-left: 20px !important;}
.pl30 {padding-left: 30px !important;}
.pl40 {padding-left: 40px !important;}
.pl50 {padding-left: 50px !important;}
.pl60 {padding-left: 60px !important;}
.pr00 {padding-right: 0 !important;}
.pr10 {padding-right: 10px !important;}
.pr20 {padding-right: 20px !important;}
.pr30 {padding-right: 30px !important;}
.pr40 {padding-right: 40px !important;}
.pr50 {padding-right: 50px !important;}
.pr60 {padding-right: 60px !important;}

/* PCの時に非表示
-----------------------------------*/
.is_sp {
	display: none;
}
.is_pc {
	display: block;
}

/* --------------------------------------------------
 Header
---------------------------------------------------*/
header {
 position: sticky;
 top: 0;
 left: 0;
 width: 100%;
	min-width: var(--min-width);
	background-color: #f5f5f5;
 border-bottom: 1px solid #8b6d62;
	z-index: 100;
}
header a {
	text-decoration: none;
	color: #3d2622;
}
#head-inner {
	display: flex;
	align-items: stretch;
	width: 93%;
	margin: 0 0 0 auto;
}
#head_logo,
#foot_logo {
	width: 125px;
	height: 72px;
	margin: 2px 0 5px;
	margin-right: 2.7%;
}
p.sub-title {
	align-content: center;
	color: #3357a6;
}

#global_menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-left: auto;
	min-width: 570px;
	z-index: 100;
}
#global_menu ul.menu {
	list-style: none;
	width: 100%;
	display: flex;
	column-gap: 2.5%;
	margin: 0;
	padding: 0;
}
#global_menu ul.menu li {
	font-weight: 700;
}
#global_menu ul.menu li a {
	display: block;
	width: max-content;
}

header .c-meeting_btn {
	align-content: center;
	width: 230px;
	color: #fff;
 background: linear-gradient(135deg, #794bf8 0%, #2f95f7 100%);
}
header .c-meeting_btn a {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	font-size: 1.4rem;
	color: #fff;
	padding-left: 27px;
}
a span.arrow {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 5px;
	border: 1px solid #fff;
	border-width: 1px 1px 0 0;
	transform: rotate(45deg);
}

	.first_meeting {
		padding: 30px 0 40px;
	}
	.first_meeting a {
  display: block;
  width: fit-content;
  max-width: none;
  margin: 0 auto;
  padding: 14px 30px;
  font-size: 1.3rem;
  text-align: center;
  color: #fff;
  border-radius: 50px;
  background: linear-gradient(135deg, #794bf8 0%, #2f95f7 100%);
 }

ul.sns_link {
 list-style: none;
	display: flex;
 margin-left: 9.3%;
 padding: 0;
	column-gap:30px;
}
ul.sns_link li {
}
ul.sns_link li span {
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -500px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
ul.sns_link li span.X    { background-image: url("../images/icon_x.svg"); }
ul.sns_link li span.fb   { background-image: url("../images/icon_fb.svg"); }
ul.sns_link li span.inst { background-image: url("../images/icon_inst_w.svg"); }
ul.sns_link li span.yt   { background-image: url("../images/icon_yt.svg"); width: 41px; }


/* Page Top Button
---------------------------------------------------*/
p.page_top {
 position: fixed;
 right: 2%;
 bottom: 8%;
 z-index: 10;
}
p.page_top a {
 position: relative;
 display: block;
 width: 60px;
 height: 60px;
 text-indent: -9999px;
 overflow: hidden;
 border: 1px solid #fff;
 border-radius: 50%;
 background-color: rgba(96,96,96,0.5);
 opacity: 0.9;
}
p.page_top a::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 display: block;
 width: 27px;
 height: 27px;
 border-style: solid;
 border-width: 1px 1px 0 0;
 border-color: #fff #fff transparent transparent;
 transform: rotate(-45deg) translate(-20%, -50%);
 transition: all 0.3s;
}
p.page_top a:hover {
 opacity: 0.65;
 transition: all 0.3s;
}
/*-------------------------------------------------*/

/*---------------------------------------------------
 Main
---------------------------------------------------*/
main {
	width: 100%;
	min-width: var(--min-width);
}
main section {
	position: relative;
	background-color: #fafafa;
}
h2.section-title {
 display: block;
 margin: 0 auto 30px;
 text-align: center;
 width: fit-content;
 padding: 0 70px;
 font-size: 3.8rem;
 line-height: 1;
 letter-spacing: 0.13em;
 background: url("../images/h2_left.svg") no-repeat 0 100%,
  											url("../images/h2_right.svg") no-repeat 100% 100%;
 background-size: auto 80%, auto 90%;
}
h2.section-title.white {
	color: #fff;
 background: url("../images/h2_left-w.svg") no-repeat 0 100%,
  											url("../images/h2_right-w.svg") no-repeat 100% 100%;
}
p.section-lead {
 text-align: center;
	font-size: 1.4rem;
	letter-spacing: 0.15em;
}
p.section-lead.white {
	color: #fff;
}

/* ------------------------------------------------------------------
 Youtube
-------------------------------------------------------------------*/
#youtube {
	position: relative;
	padding: 70px 0;
	background-color: #ffab91;
}
#youtube .yt_container {
	width: 80%;
	max-width: var(--max-width);
	aspect-ratio: 16 / 9;
	margin: 0 auto;
}
#youtube .yt_container iframe {
	display: block;
	width: 100%;
	height: 100%;
}


/*---------------------------------------------------
 Footer
---------------------------------------------------*/
footer {
	position: relative;
 padding: 20px 0 30px;
	width: 100%;
	min-width: var(--min-width);
 color: #fff;
 background-color: #212121;
}
footer a {
	color: #fff;
	text-decoration: none;
}
#foot-inner {
	display: flex;
	align-items: center;
	width: 86%;
	margin: 0 auto;
}
.foot_logo {
	width: 125px;
	height: 72px;
	margin-right: 2.7%;
}
ul.sns_link li span {
	width: 30px;
	height: 30px;
}
.copyright {
 font-family: "Roboto", sans-serif;
 font-weight: 600;
	font-size: 1.4rem;
	margin: 0 auto;
	color: #bdbdbd;
}
/*-------------------------------------------------*/


/*---------------------------------------------------
 Casual Meeting
---------------------------------------------------*/
.casual_entry{
	position:relative;
	z-index: 1;
 width: 70%;
	max-width: 1042px;
 padding:24px 28px;
	margin: 35px auto;
	text-align: center;
}
.casual_entry::before,
.casual_entry::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
	z-index: -1;
 border-radius: 8px;
}
.casual_entry::before {
 border: 1px solid transparent;
 background: linear-gradient(135deg,#7a4af8 0%,  #2e96f7 100%) border-box border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
 -webkit-mask-composite: destination-out;
 mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
 mask-composite: exclude;
}
.casual_entry::after {
	width: calc(100% - 2px);
 height: calc(100% - 2px);
 margin: 1px auto auto 1px;
 background-color: #fff;
}
.casual_entry h2 {
	font-size: 2.6rem;
	font-weight: 600;
	color: #3c4ea0;
	margin: 0 auto 0.8em;
}
.casual_entry p {
	margin-bottom: 20px;
	font-size: 1.4rem;
	text-align: justify;
}
a.entry_link {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 0;
	margin: 0 auto;
	color: #fff;
	text-decoration: none;
}
a.entry_link span {
	position: relative;
 padding: 14px 0;
	width: 240px;
	aspect-ratio: 21 / 5;
	mask-image: url("../images/btn_mask.svg");
	mask-repeat: no-repeat;
	mask-size: 100% auto;
}
a.entry_link span.entry_btn1 {
	z-index: 1;
	background: linear-gradient(135deg,#7a4af8 0%,  #2e96f7 100%);
}
a.entry_link span.entry_btn1::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 5px;
	border: 1px solid #fff;
	border-width: 1px 1px 0 0;
	transform: rotate(45deg);
}
a.entry_link span.entry_btn2 {
	z-index: 0;
	margin-left: -55px;
	padding-left: 40px;
	background: #000;
}


/* ------------------------------------------------------------------
 Break Point 767px
-------------------------------------------------------------------*/
@media only screen and (max-width: 767px){
	html {
		font-size: clamp(2.5vw,62.5%, 3.2vw);
	}
	.is_sp {
		display: block;
	}
 .is_pc {
  display: none;
 }
/*---------------------------------------------------
 Header
---------------------------------------------------*/
	header {
		/*height: 8vh;*/
		/*padding-bottom: 10px;*/
		border-bottom: none;
	}
	#head_logo, #foot_logo {
  width: 16%;
  height: auto;
 }
	#head-inner {
  width: 99%;
 }
	p.sub-title {
  font-size: 1.0rem;
		margin-left: 2%;
 }
 header .c-meeting_btn {
  width: 27%;
  margin-left: auto;
 }
	header .c-meeting_btn a {
		justify-content: center;
  font-size: 1.0rem;
  padding: 0;
  text-align: center;
 }
	p.sp_menu_btn {
  width: 10.8%;
  aspect-ratio: 1 / 1;
		background-position: bottom center;
		background-repeat: no-repeat;
		background-image: url("../images/sp_menu_open.svg");
		background-size: contain;
		position: relative;
 }
 p.sp_menu_btn span,
	p.sp_menu_btn span::before,
	p.sp_menu_btn span::after {
  display: block;
  height: 1px;
  width: 40%;
  background: #3d3d3d;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
		transition: all 0.25s;
 }
	p.sp_menu_btn span::before,
	p.sp_menu_btn span::after {
		content: "";
		width: 100%;
		top: 0;
		left: 0;
		transform: translate(0);
	}
	p.sp_menu_btn span::before {
		top: -900%;
	}
	p.sp_menu_btn span::after {
		top: 900%;
	}
	
	p.sp_menu_btn.enabled {
		background-image: url("../images/sp_menu_close.svg");
		background-size: contain;
	}
	p.sp_menu_btn.enabled span {
		transform: rotate(-45deg) translate(-30%, -1000%);
	}
	p.sp_menu_btn.enabled span::before {
		transform: rotate(90deg) translate(27%, 0%);
	}
	p.sp_menu_btn.enabled span::after {
		width: 1px;
		transform: translateY(-10px);
		opacity: 0;
	}
	
/*---------------------------------------------------
 Global Menu
---------------------------------------------------*/
	#global_menu {
		pointer-events: none;
		display: block;
  position: absolute;
  top: 100%;
  right: 0;
  width: 90%;
  min-width: auto;
		max-height: 90vh;
  background-color: #f5f5f5;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-20px);
		transition: all 0.4s;
 }
	#global_menu.open {
		pointer-events: auto;
		visibility: visible;
		transform: translateY(0);
		opacity: 1;
	}
	#global_menu ul.menu {
  display: block;
  padding: 0 30px;
 }
	#global_menu > ul.menu li a {
  display: block;
  width: 100%;
		padding: 10px;
  text-align: right;
		font-size: 1.6rem;
 }
	
/*---------------------------------------------------
 Main
---------------------------------------------------*/
	main {
  min-width: 100%;
 }
	h2.section-title {
  font-size: 5.6vw;
  padding: 0 30px;
 }
	p.section-lead {
  width: 94%;
  text-align: justify;
  margin: 0 auto;
 }
	
/*---------------------------------------------------
 Youtube
---------------------------------------------------*/
	#youtube {
  padding: 20px 0;
 }
	#youtube .yt_container {
  width: 92%;
 }
	
/*---------------------------------------------------
 Casual Meeting
---------------------------------------------------*/
	.casual_entry {
  width: 92%;
  margin: 20px auto;
  padding: 20px;
 }
	.casual_entry h2 {
  line-height: 1.5;
  font-size: 5.65vw;
 }
	a.entry_link span {
  font-size: 3.2vw;
  padding: 14px 0;
  width: 59%;
  aspect-ratio: 18/5;
  mask-image: url("../images/btn_mask_sp.svg");
 }
	
/*---------------------------------------------------
 Footer
---------------------------------------------------*/
	footer {
		padding: 10px 0 15px;
	}
 #foot-inner {
  flex-wrap: wrap;
 }
	p.link-corp {
		font-size: 1.0rem;
  margin-left: 3%; 
 }
	ul.sns_link {
  margin-left: auto;
		column-gap: 15px;
 }
	ul.sns_link li span {
  width: 18px;
  height: 18px;
 }
	ul.sns_link li span.yt{
		width: 26px;
	}
 .copyright {
  font-size: 1.0rem;
  margin-top: 10px;
		width: 100%;
		text-align: center;
	}
	
	.sp_menu-foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		padding: 10px 0;
  background-color: #212121;		
	}
	.sp_menu-foot,
	.sp_menu-foot a {
		color: #fff;
	}
	.sp_menu-foot h1.logo {
		width: 16%;
		margin-left: 5%;
	}
	.sp_menu-foot	ul.sns_link {
		margin-right: 5%;
	}
	.sp_menu-foot p.copyright {
		padding: 20px 0;
		border-top: 1px solid #bdbdbd;
	}
}

/* For Mobile Phone
-------------------------------------------------*/
@media only screen and (max-width: 430px){
	p.sp_menu_btn span::before {
		top: -5px;
	}
	p.sp_menu_btn span::after {
		top: 5px;
	}
	p.sp_menu_btn.enabled span {
		transform: rotate(-45deg) translate(-40%, -450%);
	}
}
/*-------------------------------------------------
End Mobile Style */


/* Animation
-------------------------------------------------*/
.standby {
	opacity: 0;
}
.d02 {animation-delay: 0.2s;}
.d04 {animation-delay: 0.4s;}
.d06 {animation-delay: 0.6s;}
.d08 {animation-delay: 0.8s;}
.d10 {animation-delay: 1.0s;}

.fade-in {
 animation-name: fade-in;
 animation-duration: 0.8s;
	animation-timing-function: ease-out;
 animation-fill-mode: both;
}
@keyframes fade-in {
 0%   { opacity: 0; filter: blur(5px); transform: translateY(20px);}
 100% { opacity: 1; filter: blur(0px); transform: translateY(0);}
}
/*-------------------------------------------------*/

/* For Print Style
-------------------------------------------------*/
@media print {
 body {
  padding-left: 0;
  width: 1200px;
  transform: scale(0.88);
  transform-origin: 0 0;
 }
}
@page {
 size: A4;
 margin-bottom: -57.73mm;
}
/*-------------------------------------------------
End Print Style */