/*
Theme Name: TRYAD Theme
Author: TRYAD
Version: 1.0
*/

/* CSS Document */
@charset "UTF-8";
/******* general *******/
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

@media(max-width:767px){
	body{
		font-size:1rem !important;
	}
	html{
		font-size:4.2vw !important;
	}
}
@media(min-width:768px) and (max-width:1024px){
	html{
		font-size:1.35vw !important;
	}
}

@media(min-width:1025px){
	html{
		font-size:1.388888888vw !important;
	}
}

.row>*{
	padding:0px;
}
.row{
    --bs-gutter-x: 0 !important;
}


html, body, div, span, applet, object, iframe,h1,h2,h3,h4,h5,h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,  sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/**type selector　全般**/
html{
	max-width:100vw;
	letter-spacing:0.05rem;
	overflow-x:hidden;
}

body{
	font-family:"PT Sans","Zen Kaku Gothic New",sans-serif !important;
	font-style: normal;
	font-weight:500;
	overflow-wrap: break-word;
	white-space: normal;
	font-size:0.8rem !important;
	color:#362E2C;
	line-height:1;
}

main,.page-main,.single-main{
	width:100vw;
	overflow-x:hidden;
}

a {
    color: inherit !important; 
    text-decoration: none !important; 
}
p{
	margin-bottom:0px;
}

body > *{
	font-weight:500;
}

pre{
	margin-bottom:0 !important;
}

.sp_menu_toggle{
    width: 36px;
    height: 36px;
    display: block;
    padding: 0px;
}
.navbar-toggler{
	border:none !important;
	padding:0 !important;
}

.contact{
	background-image:url(/about/track/wp-content/themes/trd_theme/image/general/contact_bg.webp);
	background-size: cover;
}

@media(min-width:768px) and (max-width:1024px){
	body{
		font-size:1.2rem !important;
	}
}


/**追加クラス**/
.fs-14{
	font-size:0.7rem !important;
}
.fs-16{
	font-size:0.8rem !important;
}
.fs-18{
	font-size:0.9rem !important;
}
.fs-30{
	font-size:1.5rem !important;
}

@media(min-width:768px) and (max-width:1024px){
	body{
		font-size:1.2rem !important;
	}
	.fs-14,.fs-16,.fs-18{
		font-size:1.2rem !important;
	}
}

.fs-20{
	font-size:1rem !important;
}
.fs-24{
	font-size:1.2rem !important;
}
.fs-28{
	font-size:1.4rem !important;
}
.fs-34{
	font-size:1.7rem !important;
}
.fs-44{
	font-size:2.2rem !important;
}
.fs-48{
	font-size:2.4rem !important;
}
.fs-78{
	font-size:3.9rem !important;
}
.fs-100{
	font-size:5rem !important;
	overflow:hidden;
}
.fs-110{
	font-size:5.72rem !important;
	line-height: 4.25rem;
	overflow:hidden;
}
.fs-120{
	font-size:clamp(3.65rem, 0.019rem + 15.31vw, 6rem) !important;
	overflow:hidden;
}
.text-grey{
	color:#8B8B8B !important;
}
.text-d-grey{
	color:#999999 !important;
}
.text-pink{
	color:#FF70A6 !important;
}
.text-d-pink{
	color:#CC5984;
}
.text-pink-grd{
    background: linear-gradient(220deg, #ffcee0 10%, #EB4483 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.bg-pink{
	background-color:#FF70A6;
}
.bg-l-pink{
	background-color:#FFF1F1;
}
.bg-grey{
	background-color:#F2F2F2;
}
.bg-d-grey{
	background-color:#BEBEBE;
}
.bg-d-grey-button{
	background-color:#BEBEBE;
	opacity: 1!important;
    border: solid 3px #BEBEBE;
}
.bg-d-grey-button:hover{
	color:#BEBEBE !important;
	background-color:white;
	transition:0.5s;
}

.bg-pink-grd{
   background: linear-gradient(
        198deg,
        #FFCEE0 0%,
        #FF70A6 100%
    );
}

.bg-pink{
	background-color:#FF70A6;
}
.bg-pink-button{
	background-color:#FF70A6;
	opacity: 1!important;
    border: solid 3px #FF70A6;
}
.bg-pink-button:hover{
	color:#FF70A6 !important;
	background-color:white;
	transition:0.5s;
}
.bg-pink-button:hover img{
	filter: brightness(0) saturate(100%) invert(63%) sepia(49%) saturate(1740%) hue-rotate(298deg) brightness(99%) contrast(104%); 
	transition:0.05s;
}

.column-gap-1{
	column-gap:0.25rem;
}
.column-gap-3{
	column-gap:1rem;
}

.w-900{
	width:45rem;
}

.mw-150{
	max-width:7.5rem;
	width: 100%;
}

.mw-500{
	max-width:25rem;
	width: 100%;
}
.mw-700{
	max-width:35rem;
	width: 100%;
}
.mw-900{
	max-width:45rem;
	width: 100%;
}
.mw-980{
	max-width:49rem;
	width: 100%;
}
.mw-1000{
	max-width:50rem;
	width: 100%;
}
.mw-1100{
	max-width:55rem;
	width: 100%;
}
.mw-1200{
	max-width:60rem;
	width: 100%;
}


/**hoverアニメ関係**/
a.join-bg:hover, a.apply-bg:hover, a.entry-bg:hover{
	opacity:0.7;
	transition:0.3s;
}
a p:hover,a:hover{
	opacity:0.7;
	transition:0.3s;
}

a:hover .rounded-circle.bi-chevron-right,a:hover .rounded-circle.bi-chevron-left{
	transform: scale(1.1);
	transition: transform 0.3s ease;
	opacity:1;
}

a:hover span.text-d-grey{
	color: #FF70A6 !important; /* 例: ホバー時の文字色をピンクに変更 */
	transition: color 0.3s ease;
	opacity:1;
}
.slick-prev:hover:before,
.slick-next:hover:before {
	color: white !important;
	background-color: #FF70A6 !important;
	transition:0.5s;
	-webkit-text-stroke: 1px white;
	text-stroke: 1px white;
	opacity:1;
}

/**header**/
.customize-support .fixed-top, .customize-support .offcanvas-header{
    margin-top: 32px;
}

.btn-close{
	--bs-btn-close-color:white !important;
}
.offcanvas{
	width:20rem !important;
	max-width:100% !important;
}
.offcanvas-header{
	justify-content:end !important;
}
.offcanvas-header button{
	background:none !important;
	border:none !important;
}
@media(min-width:768px) and (max-width:1024px){
	.offcanvas{
		width:30rem !important;
	}
}


@media(max-width:767px){
	.customize-support .fixed-top,.customize-support .offcanvas-header{
		margin-top: 46px;
	}
	.offcanvas{
		width:100% !important;
	}
}


/**footer**/
.join-bg{
	background-image:url(/about/track/wp-content/themes/trd_theme/image/general/join_bg.webp);
	background-size: cover;
	aspect-ratio:435/290;
	box-shadow: rgba(0,0,0,0.4) 5px 5px 20px;
	border-radius: 10px;
}

.apply-bg{
	background-image:url(/about/track/wp-content/themes/trd_theme/image/general/apply_bg.webp);
	background-size: cover;
	aspect-ratio:435/290;
	box-shadow: rgba(0,0,0,0.4) 5px 5px 20px;
	border-radius: 10px;
}

.entry-bg{
	background-image:url(/about/track/wp-content/themes/trd_theme/image/page/oneday/entry_bg.webp);
	background-size: cover;
	aspect-ratio:1000/290;
	box-shadow: rgba(0,0,0,0.4) 5px 5px 20px;
	border-radius: 10px;
	transform:translateY(-10rem);
}

@media (max-width:576px){
.entry-bg{
	background-image:url(/about/track/wp-content/themes/trd_theme/image/general/join_bg.webp);
	background-size: cover;
	aspect-ratio:435/290;
	box-shadow: rgba(0,0,0,0.4) 5px 5px 20px;
	border-radius: 10px;
	transform:translateY(-18.66vw);
}
}

/**bootstrap関連**/
.rounded-circle.bi-chevron-right,.nav-link .bi-chevron-right,.rounded-circle.bi-chevron-left,.nav-link .bi-chevron-left{
	right:0.5rem
}

.mb-n-025{
	margin-bottom:-0.25rem;
}
.mb-n-05{
	margin-bottom:-0.5rem;
}
.mb-n-1{
	margin-bottom:-1rem;
}
.pt-160{
	padding-top:8rem;
}
.rounded-circle.bi-chevron-right::before,.rounded-circle.bi-chevron-left::before{
	-webkit-text-stroke: 1px white;
	text-stroke: 1px white;
}

.col-12,.col-6{
	padding:0px !important;
}

.border-pink{
	border:solid 2px #FF70A6;
}

.border-bottom-pink{
	border-bottom:solid 2px #FF70A6;
}

.border-grey{
	border-color:#A3A3A3;
	border-width:2px !important;
	}
.fr-3{
	grid-template-columns:repeat(3, 1fr);
}

@media(min-width:577px){
	.pb-sm-200{
		padding-bottom:10rem !important;
	}
}

@media(max-width:767px){
	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
		--bs-gutter-x: 0 !important;
		padding-right:1.5rem !important;
		padding-left:1.5rem !important;
	}
	.mb-n-05,.mb-n-025{
		margin-bottom:0rem;
	}
	.mb-n-1{
		margin-bottom:-0.25rem;
	}
	.pt-160{
		padding-top:29.33vw;
	}

}

/**front-page.php**/
.top-bg{
	background-image:url(/about/track/wp-content/themes/trd_theme/image/top/top_main_bg.webp);
	background-size: cover;
	aspect-ratio:1440/800;
}
.runner-img{
	transform:translatex(5rem);
	height: 100% !important;
}
.main-copy{
	transform:translatey(-5rem);
}

#curve1{
	position:absolute;
	bottom:1rem;
	width: 140vw;
	left: 50%;
  	transform: translateX(-50%);
}

#curve2{
	position:absolute;
	width: 142.8vw;
	transform: translateX(-3rem);
	z-index:-1;
	top:-0.5rem;
}

#curve3{
	position:absolute;
	width: 137.9vw;
    right: -5.9vw;
	z-index:-1;
	top:21rem;
}
#page-curve1{
	position:absolute;
	width: 88.88vw;
    left: -2.7vw;
	z-index:-1;
	top:-8.33vw;
}

.bottom-0{
	bottom:0;
}

.category hr{
	height:2px;
	border: none !important;
	margin-top:-2px !important;
	opacity: 1;
	z-index: 1;
	position: relative;
}

.category .active{
	border-color: #FF70A6 !important;

}
.message{
	background-size:14rem 14rem,14rem 14rem;
	background-repeat: no-repeat, no-repeat;
	background-image:
    url(/about/track/wp-content/themes/trd_theme/image/top/top_message_left.svg), url(/about/track/wp-content/themes/trd_theme/image/top/top_message_right.svg);
	background-position:left top,right top;	
}
.message-box{
  line-height: 3.6rem;
  background-image: repeating-linear-gradient(
    to bottom,
    #ccc 0,
    #ccc 1px,
    transparent 1px,
    transparent 3.6rem
  );
  background-size: 100% 3.6rem;
  background-repeat: repeat-y;
  background-position: 0 3.5rem;
}


@media(max-width: 767px){
	.top-bg{
		aspect-ratio:375/700;
	}
	.runner-img{
		transform:translatex(0);
		height: 66% !important;
	}
	.message{
		background-size:4.5rem 4.5rem,4.5rem 4.5rem;
	}
	.main-copy{
		transform: translatey(-12rem);
	}
	.main-copy .fs-120{
		font-size:4.625rem !important;
		letter-spacing: 0.35rem;
	}
	.main-copy .fs-24{
		font-size:1rem !important;
	}
	.main-copy .fs-78{
		font-size:1.875rem !important;
		letter-spacing:0 !important;
		line-height:1.8rem;
	}
	.page-main .fs-100,.single-main .fs-100{
		font-size:3.125rem !important;
	}
	#curve1_sp{
		position:absolute;
		bottom:1rem;
		width: 282.6vw;
		left:0;
		transform: translateX(-150vw);
	}
	#curve2_sp{
		position:absolute;
		width: 200vw;
		left:-40vw;
		z-index:-1;
		top:0;
	}
	#curve3_sp{
		position:absolute;
		width: 200vw;
		right: -14vw;
		z-index: -1;
		top: 72vw;
	}
	#page-curve1_sp{
		position:absolute;
		width: 229.3vw;
		right: -26.66vw;
		z-index: -1;
		top:-14.93vw;
	}
	
	.bottom-copy{
		transform:scale(0.555);
		transform-origin: left bottom;
		left:-1.5rem;
	}
	
}


/**page.php(下層ページ)**/
.page-header{
	aspect-ratio:1440/392;
}

/*member(page-23.php)*/
.member{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3つの均等な列を作成 */
  gap:0 5.5rem; /* アイテム間のギャップ */
}

.member img{
	aspect-ratio: 1 / 1;
    object-fit: cover;
	max-width: 100%;
	height: auto;
}
.member .name{
	left:0;
	top:0.25rem;
	text-transform: uppercase;
}

@media(min-width:577px) and (max-width:1024px){
	.member{
		grid-template-columns: repeat(3, 1fr);
		gap:0 2.5rem;
	}
}

@media(max-width: 576px){
	.page-header{
		aspect-ratio:375/212;
	}
	.member{
		grid-template-columns: repeat(1, 1fr);
	}
	.member{
	max-width:100% !important;
	}
}
/*member下層ページ(single-member.php)*/
@media(max-width: 576px){
	.member-img{overflow-x:hidden;
	}
	.member-img .mw-1200{
		width:150vw !important;
		transform: translateX(-33.333vw);
	}
	
}
.single-main .row.bg-grey > div:nth-last-child(-n+2) {
  border-bottom: none !important;
}
/*post下層ページ(single.php)*/
.border-left-pink{
		border-left: solid 0.5rem #FF70A6;
}

/*応援メッセージ（message-achive.php）*/
.page-numbers{
	height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
	color:#FF70A6 !important;
}
a.page-numbers:hover{
	opacity:0.7;
	transition:0.3s;
}
.page-numbers:not(.prev,.next){
	width: 2.25rem;
    background-color:white;
	border:solid 3px #FF70A6;
	border-radius:50%;
	font-size:0.9rem;
}
.page-numbers.prev,.page-numbers.next{
	font-size:1.5rem;
	width:auto;
	padding:0 !important;
}

.current.page-numbers{
	background-color:#FF70A6 !important;
	color:white !important;
}

/*選手の一日oneday(page-27.php)*/
.oneday .position-relative{
	aspect-ratio:700/467 !important;
}
.oneday .position-relative img{
	object-fit:cover !important;
}

.time-box{
	transform:translateY(-4rem);
}
.page-27 #curve2{
	position:absolute;
	width: 142.8vw;
	transform: translate(-13.888vw,calc(38.88vw));
	z-index:-1;
	top:-0.5rem;
}

@media(max-width:576px){
	.time-box{
		transform:translateY(-3rem);
	}
	.page-27 #curve2_sp{
		position:absolute;
		width: 200vw;
		left:-21.33vw;
		z-index:-1;
		top:130vw;
	}
}

/*練習環境・施設environment(page-37.php)*/
.environment .position-relative{
	aspect-ratio:700/467 !important;
}

.page-37 #curve2{
	position:absolute;
	width: 142.8vw;
	transform: translate(-3rem,34rem);
	z-index:-1;
}

.page-37 #curve3{
	position:absolute;
	width:142.8vw;
	bottom:0;
	top:unset !important;
	transform:translate(-13.888vw,-10rem);
	z-index:-1;
}

.page-37 #curve3{
	position:absolute;
	width: 137.9vw;
    right: -5.9vw;
	bottom:0;
	z-index:-1;
	transform:translateY(-23rem);
	top:unset !important;
}

@media(max-width:576px){
	.page-37 #curve2_sp{
		position:absolute;
		width: 200vw;
		left:-21.33vw;
		z-index:-1;
		top:130vw;
	}
	.page-37 #curve3_sp{
		position:absolute;
		width: 200vw;
		right: -23vw;
		z-index: -1;
		top:unset;
		bottom:154vw;
	}
}

/**slick関係**/
.slick-track{
	display: flex !important;
}

.slick-dots{
	position: inherit !important;
}

.slick-bottom-nav .slick-dots{
	top:2.65rem;
	bottom:1.25rem !important;
}

.slick-member .slick-slide img{
	aspect-ratio: 1 / 1;
    object-fit: cover;
	max-width: 100%;
	height: auto;
	transform-origin: center bottom;
}

.slick-member .slick-slide:not(.slick-center) img{
	transform:scale(0.67);
}

.slick-member .slick-center img{
	transform:scale(1);
	transition: 0.5s;
}

.slick-name{
	opacity: 0;
	top:-1.75rem;
}

.slick-center .slick-name{
	opacity: 1;
	transition: 1s;
}
.slick-dots li{
	margin: 0.25rem !important;
	width: 1rem !important;
    height: 1rem !important;
}

.slick-dots li.slick-active button:before{
	color: #FF70A6 !important;
	content: '●' !important;
}
.slick-dots li button:before{
	color: #FF70A6 !important;
	    opacity: 1 !important;

}

.slick-dots li button:before {
    font-size: 0.6rem !important;
    content: '〇' !important;
}

.slick-list {
    overflow: unset !important;
    overflow-x: clip !important;
}


.slick-bottom-nav .slick-prev {
    right: calc(50% + 6rem);
    top: unset !important;
	left: unset !important;
    bottom: -1.1rem;
}

.slick-bottom-nav .slick-next {
    right: unset !important;
    top: unset !important;
	left: calc(50% + 6rem);
    bottom: -1.1rem;
}

.slick-prev, .slick-next{
	width: auto !important;
	height: auto !important;
	z-index: 2;
}


.slick-prev:before{
	font-size:1rem !important;
	content: "\f284" !important;
	font-family: bootstrap-icons !important;
	color:#FF70A6 !important;
  	display: inline-block;
	background-color:white;
	opacity: 1!important;
	-webkit-text-stroke: 1px #FF70A6;
	text-stroke: 1px #FF70A6;
	padding: 0.5rem;
    border: solid 3px #FF70A6;
    border-radius: 50%;
}

.slick-next:before{
	font-size:1rem !important;
	content: "\f285" !important;
	font-family: bootstrap-icons !important;
	color:#FF70A6 !important;
	display: inline-block;
	background-color:white;
	opacity: 1!important;
	-webkit-text-stroke: 1px #FF70A6;
	text-stroke: 1px #FF70A6;
	padding: 0.5rem;
    border: solid 3px #FF70A6;
    border-radius: 50%;
}

@media(max-width:767px){
	.slick-next{
		right:-1rem !important;
	}
	.slick-prev{
		left:-1rem !important;
	}
	.slick-member img{
		width:77%;
		margin:auto;
	}
}
	
/**Instagram feed　追加・修正**/
#sb_instagram #sbi_images{
	padding-top:0 !important;
	padding-bottom:0 !important;	
}

.form-type input[type="text"],.form-type input[type="email"],.form-type input[type="tel"],.form-type textarea{
	width:100% !important;
    padding:0.8rem;
	border-radius:0.35rem;
    border:solid 1px #B5B5B5;
}

.form-type input[type="submit"],.form-type button{
	max-width:17.5rem;
	width:100%;
	height:3rem;
	font-weight:500;
	border-radius:0.5rem;
}
.form-type button.border-pink:hover{
	background-color:#FF70A6 !important;
	color:white !important;
	transition:0.5s;
}
@media(max-width:576px){
	.form-type input[type="submit"],.form-type button{
		max-width:100% !important;
	}
}

.slick-slide{
	height:auto !important;
}

/* 確認画面のお問い合わせ欄のスタイル */
#confirmation-screen #confirm-your-message pre {
    white-space: pre-wrap; /* 改行は保持しつつ、要素の幅に合わせて自動的に折り返す */
    word-wrap: break-word; /* 長い単語も途中で改行する (IE/Edge対応) */
    overflow-wrap: break-word; /* 長い単語も途中で改行する (現代的なブラウザ) */
    overflow: hidden; /* 不要なスクロールバーを非表示にする (もしあれば) */
}
.empty-error{
    padding: 1.2em 1em;
    border: 2px solid #00a0d2;
}