@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.6
*/
.article{
   margin-bottom: 0 !important;
}
html{
	font-size: 62.5%;
	scroll-behavior: smooth;
}
body{
	box-sizing: border-box;
	margin-top: -20px !important;
}

#footer{
   margin-top: -1px !important;
   font-family: "Zalando Sans Expanded", sans-serif;
}
.copyright{
	margin-top: 50px;
}

article p{
	font-size: 1.4rem;
}
@media screen and (max-width: 834px) {
	article p{
	font-size: 1.4rem !important;
}
}
/*********
 * 改行
 * *******/
.kai{
	display: inline-block;
}

/***********
 * 全幅設定*
 * ******************/
.fullwidth-box{
	width:100vw;
	margin:0 0;
	padding:0;
	position: relative;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	background-color:rgba(255,255,255,0);
	padding-left: calc(env(safe-area-inset-left) + 16px);
	padding-right: calc(env(safe-area-inset-right) + 16px);
}
@media screen and (max-width: 834px) {
	.fwb-pr0{
		padding-right: 0 !important;
	}
}
	
/*ボックス*/

.inbox {
	margin: 0px auto;
	width:100%;
	max-width: 1256px;
	height:100%;
	position: relative;
}

.flexbox{
	display:flex;
	flex-wrap:wrap;
	align-items:stretch;
	justify-content:space-between;
}

.pad-t80{
	padding-top: 80px;
}
.pad-l20{
	padding-left:20px;
}
.pad-l50{
	padding-left:50px;
}
.pad-r50{
	padding-right:50px;
}

.bgcolor-gray{
   background-color: #574f4f !important;
}

/***************************
 * ローディング画面
*******************************/

.sydo-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  isolation: isolate;
  z-index: 99999;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.5s ease; /* ← フェード時間だけ指定 */
}

.sydo-loader.done {
  opacity: 0;  /* ← フェード対象はopacityのみ */
}


@keyframes sydo-fade { to { opacity:0; } }

/* --- ロゴ全体（SYD + O） --- */
.sydo-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(0.5rem, 2vw, 0);
  max-width: 90vw;
  height: auto;
  box-sizing: border-box;
  overflow: visible;
}

/* --- SYD画像 --- */
.sydo-word {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(6rem, 12vw, 10rem);
  width: auto;
  opacity: 0;
  transform: translateY(8px);
  animation: sydo-wordin 0.6s ease-out 1 both;
  animation-delay: 1.4s;
}
.sydo-word img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* --- Oロゴ --- */
.sydo-logo {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(6rem, 12vw, 10rem);
  width: auto;
  aspect-ratio: 1 / 1;
	animation-name: sydo-spin;
  animation: sydo-spin 0.8s ease-in-out 1 both;
  animation-delay: 1.84s;
  will-change: transform;
}

/* --- O内部パーツ --- */
.sydo-piece {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
  opacity: 0;
}
.sydo-piece--a { animation: sydo-enterA 1.4s cubic-bezier(.2, .8, .2, 1) forwards; }
.sydo-piece--b { animation: sydo-enterB 1.4s cubic-bezier(.2, .8, .2, 1) .12s forwards; }
.sydo-piece--c { animation: sydo-enterC 1.4s cubic-bezier(.2, .8, .2, 1) .24s forwards; }

@keyframes sydo-enterA {
  from { transform: translate(-55vw, -55vh) rotate(-240deg) scale(8); opacity: .85; filter: blur(6px); }
  to   { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; filter: blur(0); }
}
@keyframes sydo-enterB {
  from { transform: translate(55vw, -55vh) rotate(260deg) scale(8); opacity: .85; filter: blur(6px); }
  to   { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; filter: blur(0); }
}
@keyframes sydo-enterC {
  from { transform: translate(0, 70vh) rotate(-180deg) scale(8); opacity: .85; filter: blur(6px); }
  to   { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; filter: blur(0); }
}

@keyframes sydo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes sydo-wordin {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- 動きを減らす設定に対応 --- */
@media (prefers-reduced-motion: reduce) {
  .sydo-piece, .sydo-word, .sydo-logo {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/**************************************************
 * ローディング画面以外のアニメーション
 * *********************************************/
.fade-up {
	opacity: 0;
	transform: translateY(60px);
	transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.fade-up.active {
	opacity: 1;
	transform: translateY(0);
}

.fade-right {
	opacity: 0;
	transform: translateX(50px);
	transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.fade-right.active {
	opacity: 1;
	transform: translateX(0);
}

/*１文字ずつ表示されるアニメーション*/
.split-animate {
	font-size: 32px;
	font-weight: bold;
	color: #333;
	line-height: 1.5;
	opacity: 1; 
}
.split-animate span {
	display: inline-block;
	opacity: 0;
	transform: translateX(20px);
}
.split-animate.active span {
	animation: textFadeIn 0.1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes textFadeIn {
	0% {
		opacity: 0;
		transform: translateX(20px); /* 右から */
	}
	100% {
		opacity: 1;
		transform: translateX(0);    /* 元の位置へ */
	}
}



/**************ヘッダーメニュー*******************/
.header-container{
	width: 100vw;
}
.header-container-in{
	width: 100%;
}
.header-container-in.hlt-top-menu .logo-header  {
    max-height: 74px;
}
.header-container-in.hlt-top-menu .logo-header img {
    max-height: 74px;
}

nav#navi, .menu-header .sub-menu{
	font-family: "Zalando Sans Expanded", sans-serif;
	font-optical-sizing: auto;
  	font-weight: 500;
  	font-style: normal;
}

.menu-header .menu-item a:hover{
	color: rgb(228, 0, 0) !important;
	transition: all .3s;
}

.navi-in a {
    font-size: 13px; /* ナビ文字大きさ */
    font-weight: bold;
	color: #555 !important;
}

.zalando-sans-expanded {
  font-family: "Zalando Sans Expanded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}



/*******フロント固定ページのタイトルを非表示********/
.home.page .entry-title{
  display: none;
}


/**********目次カスタマイズ***********/

.article .toc {
	width: 100%;
	max-width:600px;/*外枠の最大幅を指定*/
	border-color: #ccc;/*外枠の線の色*/
	font-size: 85%;
	box-sizing: border-box;
	padding: 1em 2em;
	line-height: 1.8;
}

.toc-title{
font-weight:bold;     /*太字*/
color:#000;     /*フォントの色*/
	text-align:left;
	border-bottom:1px solid #ccc;
}

.toc-list > li a {
font-weight: bold;  /*文字は太目に*/
color: #000; /*文字カラー*/
display:block;
margin-top:10px;
margin-left: 10px;
	border-bottom:1px dotted #ccc;
}

.toc-list > li li a {
font-weight: normal;  /*文字の太さは普通*/
font-size: 95%;  /*文字を小さくします*/
color: #7b7b7b;   /*文字カラー*/
margin-left: 3em;  /*右に寄せます*/
}

/***************************Contact Form 7カスタマイズ***************************/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){
.inquiry th,.inquiry td {
 display:block!important;
 width:100%!important;
 border-top:none!important;
 -webkit-box-sizing:border-box!important;
 -moz-box-sizing:border-box!important;
 box-sizing:border-box!important;
}
.inquiry tr:first-child th{
 border-top:1px solid #d7d7d7!important;
}
/* 必須・任意のサイズ調整 */	
.inquiry .haveto,.inquiry .any {	
font-size:13px;
}}

input[type=text], input[type=email], input[type=tel], textarea{
	font-size: 16px;
}
/*見出し欄*/
.inquiry th{
	text-align:left;
	font-family: YakuHanJP_Narrow, "Shippori Mincho B1", serif !important;
 	font-size:14px;
 	color:#fff;
 	padding:5px;
 	width:30%;
 	background:initial;
 	border:solid 1px #d7d7d7;
	border-width: 1px 0;
}
/*通常欄*/
.inquiry td{
	font-size:13px;
	box-sizing: border-box;
	border:solid 1px #d7d7d7;
	border-width: 1px 0 !important;
	padding: 15px 10px 15px 5px;
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
 border:solid 1px #d7d7d7;
	border-width: 1px 0;
}
/*必須の調整*/
.haveto{
 font-size:10px;
 padding:1px 5px;
 background:initial;
 color:#fff;
 border: 1px solid #fff;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*任意の調整*/
.any{
 font-size:7px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}


.wpcf7-form-control-wrap .content{
	margin-top: 0;
}

/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:15px;
 background:#888;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:900px;
 margin:25px auto;
	max-width: 250px;
border:0px;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#aaa;
 color:#fff;
 border:0px;
}
.color-white{
	color: #fff;
}
/***サイドバーカスタマイズ****/
.sidebar h3{
	border-bottom:2px solid #001e55;
	padding-bottom:5px;
}
.wpcf7-response-output{
	color: #fff;
}

/********ヘッダー　・　メニュー********************/
#header-container{
    background-color: rgba(0, 0, 0, 0) !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 99998;
}
.mobile-menu-buttons {
    background-color: rgba(255, 255, 255, 0) !important;
}

.navi{
    background-color: rgba(255, 255, 255, 0) !important;
}
.mobile-header-menu-buttons {
    top: 0;
    bottom: auto;
    justify-content: space-between !important;
    min-width: 46px;
    box-shadow: initial;
    color:#fff;
    padding:6px;
    }
.mobile-header-menu-buttons li.logo-menu-button{
	width: 120px;
}

.logo-menu-button {
    flex-grow: initial;
    }

	/**************************************
	 **スライドインメニュー
	***************************************/	
	.navi-menu-content{
		left: auto;
		right: 0;
		background-color: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(7px);
		border-left:0px solid #fff;
		font-family: "Zen Old Mincho", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size:16px;
		transform: translateX(101%);
		padding-top: 5px;
	}
	.navi-menu-content a {
		color: #000;
		font-size:18px;
	}
	.navi-menu-content li{
		text-align: center;
		margin:4px 0;
		padding: 1px 0 6px 0;
		border-bottom: 0.5px solid #897158;
	}
	.navi-menu-content li:first-child{
		padding-top:4px;
		border-top: 0.5px solid #897158;
	}	
	
	.mobile-menu-buttons .menu-caption{
		 display: none;
  	}

	.menu-content .menu-drawer {
		 padding: 5em 0 0 2.5em;
	}
	
	/*ハンバーガーメニュー*/
	
	#navi-menu-open{
		z-index: 99999;
	}

	#navi-menu-open .navi-menu-icon{
		width: 46px;
		height: 46px;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		position: relative;
	}

	#navi-menu-input + #navi-menu-open .navi-menu-icon .fa-bars,
	#navi-menu-input + #navi-menu-open .navi-menu-icon .fa-bars::before,
	#navi-menu-input + #navi-menu-open .navi-menu-icon .fa-bars::after {
		content: "";
		display: block;
		width: 40px;
		height: 1px;
		background-color: #555;
		position: absolute;
		margin: 0 auto;
		right: 0;
		left: 0;
		transition:0.2s;
	}
	#navi-menu-input + #navi-menu-open .navi-menu-icon .fa-bars::before {
		bottom: 12px;
	}
	#navi-menu-input + #navi-menu-open .navi-menu-icon .fa-bars::after {
		top: 12px;
	}

	#navi-menu-input:checked + #navi-menu-open .navi-menu-icon .fa-bars {
		background-color: transparent;
	}
	#navi-menu-input:checked + #navi-menu-open .navi-menu-icon .fa-bars::before{
		bottom: 0;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#navi-menu-input:checked + #navi-menu-open .navi-menu-icon .fa-bars::after{
		top: 0;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.fa.fa-close{
		display: none;
	}

/*1023px以下*/
@media screen and (max-width: 1023px){
	body.public-page{
		margin-top: -25px;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
	body.public-page{
		margin-top: 0px;
	}
}