@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body {
	overflow-x: hidden;
animation: fadein 0.5s forwards;
}
@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}


.clear{
	clear:both;
}

/* メイン画像 s */
.main-visual {
/*
position: relative;
margin-left: -1em;
margin-right: -1em;
max-width: none;
width: auto;
border: none;
overflow:auto;
*/
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: url('https://karadalabginza.com/wp-content/uploads/2022/03/karadalab-s001.jpg') top center / cover no-repeat;

margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);

}

.main-visual .title {
text-align: center;
background-color:rgba(255,255,255,0.6);
padding:10px 20px 10px 20px;
position: absolute;
color:#000;
font-size:1.5em;
font-weight: nomal;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

width: 340px;
top: 0;
left: 0;
top: 50%; /* 追記 */
left: 50%; /* 追記 */
-ms-transform: translate(-50%, -50%); /* 追記 */
-webkit-transform: translate(-50%, -50%); /* 追記 */
transform: translate(-50%, -50%); /* 追記 */
}

.main-visual .msg {
/*
background-color:rgba(255,255,255,0.6);
padding:10px 20px 10px 20px;
*/

text-align: center;
position: absolute;
color:#fff;
font-size:1.6em;
font-weight: nomal;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

width: 400px;
top: 0;
left: 0;
top: 50%; /* 追記 */
left: 50%; /* 追記 */
-ms-transform: translate(-50%, -280%); /* 追記 */
-webkit-transform: translate(-50%, -280%); /* 追記 */
transform: translate(-50%, -280%); /* 追記 */
}



/* メイン画像 e */

/* 横幅フル s */
.w-full-pic {
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	text-align: center;
}
/* 横幅フル画像 e */

/* 文字 s */

	/* フォント s */
.fs60{
font-size:60%;
}
.fs80{
font-size:80%;
}
.fs120{
font-size:120%;
}
.fs140{
font-size:140%;
}
.fs180{
font-size:180%;
}
.fs260{
font-size:260%;
}

.at-bd{
font: italic normal bold 160% sans-serif;
}

.at-c01{
font-weight: 900;
/*color: #d9427f;*/
}

	/* フォント e */

	/* 見出し s */
h1 {
padding: 20px !important;
background: #293f4d !important;
color: #fff;

display: flex;
justify-content: center;
align-items: center;
margin-right: calc(50% - 50vw) !important;
margin-left: calc(50% - 50vw) !important;
font-weight: 500 !important;
clear: both;
}

h2 {
/*
padding: 20px 10px 20px 20px !important;
border-top: 1px solid #000 !important;
border-bottom: 1px solid #000 !important;
background: #fff !important;
*/
position: relative;
padding: 20px 10px 20px 20px !important;
color: #000;
font-weight: 600 !important;

border-top: 1px solid #000 !important;
/*border-bottom: 1px solid #000 !important;*/
background: #fff !important;

display: flex;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);

clear: both;

}

h2:before {
position: absolute;
content: '';
width: 15%;
left: 40px;
top: -1px;
border-top: 5px solid #000;
}


h3 {
padding: 10px 10px 10px 30px !important;
border: none !important;
border-bottom: 4px double #000 !important;
background-color: #fff;
/*margin: 0 0 0 10px;*/

display: flex;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);

font-weight: 600 !important;
clear: both;
}

h4 {
padding: 10px 10px 10px 40px !important;
border: none !important;
border-bottom: 1px dashed #000 !important;

display: flex;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);

font-weight: 600 !important;
clear: both;
/*margin: 0 0 0 20px;*/
}

.card-title{
clear: none;
background-color:rgba(0,0,0,0);
}

	/* 見出し e */
	
	/* 文字背景 s */
.bgc01 {
padding: 10px 20px;
background: #f2eee9 !important;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
clear: both;
}

.bgc02 {
padding: 10px 20px;
background: #f0f2f5 !important;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
clear: both;
}

.ht01 {
	position: relative;
	padding-top: 30px;
	font-size: 26px;
	border-bottom: 1px solid rgba(5,62,98,1);
}

.ht01 span {
	position: relative;
	z-index: 2;
}

.ht01::before {
	content: attr(data-en);
	position: absolute;
	top: -10px;
	left: 10px;
	color: rgba(204, 204, 204,0.3);
	font-size: 30px;
/*	text-transform: uppercase;*/
	z-index: 1;
/*
	font-style: italic;
*/
}
	/* 文字背景 e */

	/* 位置 s */
.al-center {
text-align: center;
}
.al-right {
text-align: right;
}
	/* 位置 e */


/* 文字 e */

/* マージン s */

mgtp1{
 margin-top: 1px;
}
mgbt1{
 margin-bottom: 1px;
}

/* マージン e */


/* 非表示関連 s*/
/*.home.page .logo-header,*/
.home.page .entry-title,
.date-tags{
	display: none;
}

/* ブログカード非表示 s */
.internal-blogcard-footer{
	display: none; 
}
/* ブログカード非表示 e */
/* 非表示関連 e*/


/*リンク関連 s */
a {	
	text-decoration: none;
/*	color: #000;*/
}
/*リンク関連 e */

/*リンクボタン s */
a.bt01 {
	display: block;
	width: 50%;
/*	margin: 0 auto;*/
	padding: 15px 15px;
	text-align: center;
	transition: all .3s ease-out;
	color: #293f4d;
	border: 1px solid #293f4d;
}
a.bt01:hover {
	color: #fff;
	background-color: #293f4d;
}

a.bt02 {
	display: block;
	width: 100%;
/*	margin: 0 auto;*/
	padding: 10px 10px;
	text-align: center;
	transition: all .3s ease-out;
	color: #fff;
	background-color: #293f4d;
	border: 1px solid #293f4d;

/*	border-radius: 0.8rem;*/
	float:right;
}
a.bt02:hover {
	color: #293f4d;
	background-color: #fff;
}

a.bt03 {
	display: block;
	width: 40%;
	margin: 0 0 0 auto;
	padding: 15px 15px;
	text-align: center;
	transition: all .3s ease-out;
	color: #c1965b;
	border: 1px solid #c1965b;
	background-color: #fff;
	border-radius: 0.4rem;
}
a.bt03:hover {
	color: #fff;
	background-color: #c1965b;
}


.bt03-r {
  width: 120px;
  height: 120px;
  line-height: 140px;
/*  background-color: green;*/
  border: 1px solid #293f4d;
  border-radius: 50%;
  color: #293f4d;
  text-align: center;
  margin: 0 auto;
	transition: all .3s ease-out;
}
.bt03-r:hover {
	color: #fff;
	background-color: #293f4d;
	border: 1px solid #293f4d;
}

/*リンクボタン e */

/*リスト s */
ul.fademenu {
	list-style: none;
	margin: 0;
	display: flex;
}
li.fademenu {
	margin: 0 0 0 15px;
/*	font-size: 14px;*/
}

ul.list001{
padding:0;
list-style-type: none;
}

ul.list001 li{
margin:0 10px;
padding:10px 0 15px;
border-bottom:1px dashed #000;
}

ol.list001{
padding:0;
}

ol.list001 li{
margin-left:40px;
padding:10px 0 15px;
border-bottom:1px dashed #000;
}

dl{
}
dt{
padding:5px;
font-weight:bold;
}
dd{
padding:5px;
margin-left:10px !important;
}

/*リスト e */

/* フェード s */

/* 上からフェードイン */
.slide-top {
	opacity: 0;
	transform: translate(0, -20px);
	transition: all 0.5s ease-out;
 }

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 0.5s ease-out;
	clear: both;
 }

 /* 左からフェードイン */
.slide-left {
	opacity: 0;
	transform: translate(-20px, 0);
	transition: all 0.5s ease-out;
 }

/* 右からフェードイン */
.slide-right {
	opacity: 0;
	transform: translate(20px, 0);
	transition: all 0.5s ease-out;
 }

/*---- section フェード s */
#service .icon_list {
	display: block;
	margin: 0 auto;
	max-width: 800px;
}
#service ul {
	margin: 0;padding: 0;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
#service ul li {
	width: 25%;
	margin: 0;
	text-align: center;
}
#service ul li:nth-of-type(2){
	transition-delay: .2s;
}
#service ul li:nth-of-type(3){
	transition-delay: .4s;
}
#service ul li:nth-of-type(4){
	transition-delay: .6s;
}
#service ul li img {
	max-width: 116px;
}
#service ul li p {
/*	font-size: 14px;*/
	color: #000;
}
#service p {
	margin: 0 0 40px 0;
}
/*---- section フェード e */
/* フェード e */


/* カード関連 s */
.border-partition a {
border-bottom: 1px dashed #000;
}
.border-partition a:first-of-type {
border-top: none !important;
/*border-top: 1px dashed #000;*/
}
/* カード関連 e */

/* メニュー関連*/
.menu-header .item-label{
font-size: 100% !important;
}
.menu-header .sub-menu .item-label{
font-size: 100% !important;
}

.navi-in a:hover{
background-color: #ededed;
}

nav#navi, .menu-header .sub-menu{
/*font-weight: bold;*/
box-shadow:0 5px 15px -5px rgba(213,213,213, 0.8);
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/

	/* section */
	#service ul li {
		width: 50%;
	}

	p{
		clear:both;
	}

	img.aligncenter,
	img.alignright,
	img.alignleft{
		width: 100%;
		margin: 0 auto;

	}

.logo-menu-button img {
	width: 40%;
	max-height: none;
}





span.fas.fa-times::before{
/*font-family: "Font Awesome 5 Free";*/
content: "\f060";
color:#000;/*矢印色変更はこちら*/
}

/*
ul.menu-drawer:before{
font-size:1.2em;
background: white;
color:#333;
margin-bottom:1em;
border:1px solid #000;
content: "メニュー";
}
*/

ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
background-color:#ffffff;
color:#000;
margin: .2em 0;
border-bottom:1px dotted #000;
padding:20px 0px;
}
.menu-drawer a:hover{
background-color:#f7f7f7;
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
/*font-size: .9em;*/
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#000;
margin:0 .5em 0 1em;
}



}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}