@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* General Styles */
:root {
	--base-font-size: 10px; /* 基本フォントサイズ */
	--scaling-factor: 0.7vw; /* ビューポート幅に応じたスケール */
}
.fz-18px{
	font-size:1.8rem;
}
html{
	font-size:var(--scaling-factor);
	/* 	font-size: calc(var(--base-font-size) + var(--scaling-factor)); */
}
body {
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size:1.8rem;
	background:#fff;
}
.l-container {
	width: 85vw;
	/*     max-width: 1240px; */
	margin: 0 auto;
	padding:77px 0;
}
.l-inner{
	width: 68.49315068vw;
	/*     max-width: 1000px; */
	margin: 0 auto;
}
/* コンテンツタイトル */
h2 {
	font-size: 5.2rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 4rem;
	line-height: 7.5rem;
}
h2 b{
	font-size: 7.5rem;
}
h2 .gradient {
	background: linear-gradient(0deg, #ff7f00, #ffae00); /* 左から右にオレンジ系のグラデーション */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}
h2 .underline {
	/*     text-decoration:underline; */
	border-bottom: 4px solid #fff;
	padding-bottom: 7px;
	display: inline-block;
}
/* ドット付きタイトル */
h2.dot-title{
	position:relative;
	display:inline-block;
}
h2.dot-title:before,
h2.dot-title:after{
	content:"";
	position:absolute;
	top:50%;
	background:url(../../uploads/2024/12/taisou-jirei-title2.svg) no-repeat center;
	background-size:contain;
	width:4.589041096vw;
	height:0.616438356vw;
	transform: translateY(-50%);
}
h2.dot-title:before{
	right:calc(100% + 0.684931507vw);
}
h2.dot-title:after{
	left:calc(100% + 0.684931507vw);
}

a:hover{
	color:#ff6700;
}

/* コンテンツ本文 */
.c-txt{
	text-align:center;
}
.section-description {
	text-align: center;
	margin-bottom: 40px;
}
/* ボタン */
.p-btn-box{
	display: flex;
	justify-content: center;
	margin-top: 5rem;
}
.p-btn {
	display: flex;
	width: 22vw;
	height: 4vw;
	padding: 0.684931507vw 1.369863014vw;
	background-color: #303030;
	color: #fff;
	justify-content:center;
	align-items:center;
	text-decoration: none;
	position: relative;
	font-size: 2.5rem;
	border-radius: 50px;
	transition: opacity 0.3s;
}
.p-btn:hover {
	opacity:0.8;
	color:#fff;
}
.p-btn::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0.5vw;
	width: 1.5vw;
	height: 0.95890411vw;
	background-image: url(../../uploads/2024/12/btn-icon.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: translateY(-50%);
	margin-top: 0.15vw;
}


/* Header */
header {
	background: #fff;
	height: 100px;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index:100;
}
header .l-container {
	height: 100%;
	padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header__logo img{
	/* 	height: 4vw; */
	/*     min-height: 69px; */
}
.header__nav ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	align-items: center;
	/* 	gap: 1.369863014vw */
}
.header__nav ul li{
	margin: 0 10px;
}
.header__link {
	text-decoration: none;
	color: #38312A;
	font-weight: bold;
	transition: color 0.3s;

}
.header__link:hover {
	color: #ff6600;
}
.header__link.blank:after{
	content: url(../../uploads/2024/12/blank-icon.svg);
	margin-left: 9px;
	transform: translateY(-2px);
	display: inline-block;
}
header .p-btn{
	width: 21rem;
	height: 4.5rem;
	font-size: 2rem;
}
.l-container header{display:none;}

/* Contact Section */
.contact {
	background: #fff;
	padding:77px 0;
}
.contact dl{
	border-bottom: 1px solid #565656;
	padding: 35px 0;
	display:flex;
	align-items:center;
}
.contact dl dt{
	width:22%;
}
.contact dl dt .must{
	background: #C90000;
	color: #fff;
	display: inline-block;
	text-align: center;
	padding: 0 6px 0px;
	border-radius: 5px;
	font-size: 1.4rem;
	line-height: 1.4em;
	margin-left:5px;
}
.contact dl dd{
	width: 78%;
}
.contact input,
.contact textarea {
	width: 100%;
	padding: 1rem;
	background: #f6f6f6;
	border-radius: 5px;
}
.contact input {
	max-width: 340px;
}
.contact .p-btn input[type=submit]{
	background: none;
	border: none;
	padding: 0;
	width: auto;
	max-width: 100%;
	border-radius: 0;
	color: #fff;
	font-size:2.5rem;
	font-family: 'Noto Sans JP', sans-serif;
}
.contact .p-btn .wpcf7-spinner{
	display:none;
}

/* Footer */
footer {
	text-align: center;
	margin-top:0;
	background:#fff;
}
footer .l-container{
	padding:10px 0;
}
footer .footer_menu{
	display:flex;
	justify-content:center;
}
footer .footer_menu li{
	list-style:none;
	padding:0 1rem;
	border-left:1px solid #C6C6C6;
}
footer .footer_menu li:first-child{
	border-left:none;
}
footer .footer_menu li a,
footer .footer_menu li a:hover{
	color:#38312A;
}
footer .footer_menu li a:hover{
	opacity:0.8;
}

footer .caresoft{
	margin:2rem 0;
}
footer p {
	margin: 0;
}

.go-to-top-button{
	background-color: #303030;
	color: #fff;
}
.go-to-top-button:hover{
	color: #fff;
	opacity: 0.8;
}

/* 体操ムービーページ */
/* .taisou-hero{
position:relative;
display:flex;
justify-content:right;
padding-bottom: 2em;
width: 100%;
}
.taisou-hero h2{
position:absolute;
top:50%;
left: 7.5%;
transform: translateY(-50%);
z-index:10;
max-width: 31%;
margin-top:-0.8em;
}
.taisou-hero-back{
width:84%;
overflow:hidden;
border-radius:10vw 0 0 10vw;
position:relative;
background: url("../../uploads/2025/07/taisou-img.jpg")no-repeat center right;
background-size: cover;
padding-bottom: 36.25%;
} */

.taisou-hero{
	display:flex;
	justify-content:space-between;
	padding-bottom: 2em;
	width: 100%;
}
.taisou-hero .taisou-hero-title{
	z-index:10;
	max-width: 16%;
	display:flex;
	align-items:center;
}
.taisou-hero .taisou-hero-title h2{
	z-index:10;
	margin:10px -90% 0 28%;
}

.taisou-hero-back{
	width:84%;
	overflow:hidden;
	border-radius:10vw 0 0 10vw;
	position:relative;
	background: url("../../uploads/2025/07/taisou-img.jpg")no-repeat center right;
	background-size: cover;
	padding-bottom: 36.25%;
}
.taisou-hero-back img{
	width:100%;
}
.taisou-hero-back p{
	position:absolute;
	right: 3.5vw;
	bottom: 2.6vw;
	background:rgba(255,255,255,0.8);
	font-size: 2.7rem;
	font-weight:bold;
	padding: 0.4em;
}
.taisou-hero-back p span{
	color:#ff6600;
}
/*--- サイドバー ---*/
side{
	position: fixed;
	left: 0;
	bottom: 5%;
	/*     transform: translateY(-50%); */
	border-radius: 0 2em 2em 0;
	background: #fff;
	overflow: hidden;
	z-index: 10;
	padding: 1em;
	box-shadow: 7px 0px 0px rgba(0, 0, 0, 0.3);
}
side ul{
	font-size: 1.2rem;
	padding-left:0;
}
side ul li{
	list-style:none;
	background:url(../../uploads/2025/07/side-icon.svg) no-repeat center left;
	padding:0.5em 0 0.5em 1.2em;
}
side ul a{
	color:#333;
	text-decoration:underline;
}

/*--- メイン ---*/
.taisou-section{
	position:relative;
	margin: 12.232877vw 0;
}

.taisou-section.contact {
	margin: 0;
	padding: 0;
}
.taisou-section.blue{
	background:linear-gradient(90deg,#40a4f6,#40dbf6);
	color:var(--cocoon-text-color);
}
.taisou-section.blue:before,
.taisou-section.blue:after{
	content: "";
	width: 100%;
	height: 12.232877vw;
	display: block;
	position: absolute;
	left: 0;
}
.taisou-section.blue:before{
	bottom: 100%;
	background: url(../../uploads/2025/07/taisou-before.svg) no-repeat bottom center;
	background-size:100%;
	margin-bottom: -1px;
}
.taisou-section.blue:after{
	top: 100%;
	background: url(../../uploads/2025/07/taisou-after.svg) no-repeat top center;
	background-size:100%;
	margin-top: -1px;
}
.taisou-section .l-container{
	width:70vw;
	max-width:100%;
}
.taisou-section h3{
	text-align:center;
	color:#333;
	margin-bottom:2em;
}
.taisou-section h3:before{
	content:url(../../uploads/2025/07/title-icon.svg);
	display:block;
}
/* .taisou-section .hidden-video {
display: none;
opacity: 0;
transition: opacity 0.5s;
}
.taisou-section .hidden-video.show {
display: block;
opacity: 1;
} */

.taisou-example .l-container{
	padding-top: 0;
}

.taisou-section__grid{
	display:flex;
	justify-content:left;
	/* 	gap:5%; */
	flex-wrap:wrap;
}
.taisou-section__grid.hidden-list{
	display: none;
}
.taisou-section__grid.hide_list.show{
	grid-template-rows: 1fr;
}
/*--- 動画BOX ---*/
.taisou-section-box{
	width:47.5%;
	margin:1%;
	margin-bottom:5%;
}
.taisou-section-inner{
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}
.taisou-section-box iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.taisou-section-box p:before{
	content: "";
	border-left: 0.3em solid #333;
	height: 1em;
	display: inline-block;
	width: 1px;
	transform: translateY(0.13em);
	padding-right: 0.5em;
}
/*--- もっと表示ボタン ---*/
.more-btn{
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:4em;
	border-radius:10px;
	background:#ff8d00;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
	transition:color 0.3s;
}
.more-btn:after{
	content:"";
	display:block;
	width:12px;
	height:12px;
	border-top:2px solid #fff;
	border-left:2px solid #fff;
	transform:translateY(-50%) rotate(225deg);
	position:absolute;
	right:2em;
	top:50%;
	transition:transform 0.3s;
}
.more-btn.show:after{
	transform:translateY(-50%) rotate(45deg);
}
.more-btn:hover{
	color:#fff;
	opacity:0.8;
}
.more-btn:focus{
	color:#fff;
}
/* 実現 */
/* .taisou-jitsugen__grid{
display:flex;
justify-content:center;
gap:5%;
}
.taisou-jitsugen-box{
width:30%;
}
.taisou-jitsugen-box h3{
font-size:3.5rem;
margin-top: 3px;
} */
.sns-share,
.date-tags{
	display:none;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (min-width: 481px) {
	/*必要ならばここにコードを書く*/
	.hide_pc{
		display:none !important;
	}
	main{
		margin-top: 100px;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
	/*必要ならばここにコードを書く*/
	.hide_sp{
		display:none !important;
	}
	html{
		font-size:1.5vw;
	}
	main{
		margin-top: 70px;
	}
	.l-container,
	.l-inner{
		width:90vw;
	}
	/* header */
	header{
		height: 70px;
	}
	.gm-icon{
		width: 9.48717948717949vw;
		height: 9.48717948717949vw;
		border-radius: 50%;
		z-index: 100;
		position: relative;
		background-color: #f67b30;
	}
	.gm-icon svg {
		position: absolute;
		width: 50%;
		height: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.gm-icon .border {
		fill: #fff;
		transition: 200ms all ease;
		transform-origin: center;
	}
	.gm-icon.on .border1 {
		transform: translate(-6px, 6px) rotate(45deg);
		width: 1.04166666666667vw;
	}
	.gm-icon.on .border2 {
		opacity: 0;
	}
	.gm-icon.on .border3 {
		transform: translate(-6px, -6px) rotate(-45deg);
		width: 1.04166666666667vw;
	}
	.gm-menu-sp{
		opacity: 1;
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		right: -100vw;
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 7.25641vw;
		transition: right 0.5s;
		background: #fff;
		padding: 10vh 13vw 0;
	}
	.gm-menu-sp.on {
		right: 0;
	}
	.gm-menu-sp li {
		border-bottom: 1px solid #DCDCDC;
		padding: 3vh 0;
		list-style: none;
		color: #000;
		width: 100%;
	}
	.gm-menu-sp li a {
		color: #38312A;
		text-decoration:none;
	}
	/* btn */
	.p-btn{
		width: 90vw;
		height: 20vw;
		font-size: 4rem;
	}
	.p-btn:after{
		width: 13.5vw;
		height: 2.958904vw;
	}
	/* contact */
	.contact dl{
		flex-direction:column;
		padding: 22px 0;
	}
	.contact dl dt,
	.contact dl dd{
		width:100%;
	}
	.contact input{
		max-width: 100%;
		height: 50px;
	}
	.contact .p-btn input[type=submit]{
		font-size: 4rem;
	}
	footer .footer_menu{
		display:none;
	}
	/* 体操ムービー */
	.taisou-hero {
		padding: 30px 0 60px;
		flex-direction:column;
	}
	.taisou-hero .taisou-hero-title{
		width:100vw;
		max-width: 100% !important;
		justify-content: center;
	}
	.taisou-hero .taisou-hero-title h2{
		margin: 0;
		margin-bottom:-21%;
		transform:none;
	}
	/* トップ */
	.taisou-hero h2{
		width: 45%;
		max-width:100%;
	}
	.taisou-hero-back{
		width: 100vw;
		border-radius: 0;
		height: 34vh;
		background-position: center;
	}
	.taisou-hero-back img{
		height: 100%;
		min-width: 100%;
		width: auto;
		max-width: 900%;
		margin-left: -31%;
	}
	.taisou-hero-back p{
		padding: 10px;
	}

	/* サイド */
	side{
		display:none;
	}
	/* メイン */
	.taisou-section{
		padding-left:10px;
		padding-right:10px;
	}
	.taisou-section .l-container{
		width:100%;
	}
	.taisou-section__grid {
		flex-direction: column;
	}
	/* 動画BOX */
	.taisou-section-box {
		width: 100%;
		font-weight:bold;
		font-size: 18px;
		margin:0;
		margin-bottom:30px;
	}
	/* 実現 */
	/* 	.taisou-jitsugen__grid {
	gap: 20px;
	flex-direction: column;
}
	.taisou-jitsugen-box{
	width: 100%;
}
	.hidden-video {
	display: none;
} */
}