@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.7
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.sfont{
	font-size:14px;
	font-weight:normal;
}

.font1 {
	font-size:130%;
  background: #ffe33f; /*背景色*/
	padding:0.5em 1em;
  color: #7f6037;/*文字を白に*/
	font-weight:bold;
	text-align:center;
}


/*ボックス*/

contents{
  display: flex;
	justify-content:center;
  flex-wrap: wrap;
	padding:0;
	margin:0 !important;
}

box3{
	width:1200px;
	padding:0.5em 0.5em 0em 0.5em;
	background-color:#f9f9f9;
	margin-bottom:5em;
	border:1px solid #dddddd;
}

.boxin2 {
  display: flex;
	justify-content:center;
  flex-wrap: wrap;
}

.con {
  width:33.3%;
  padding: 0.25em;
}

.con2 {
  width:75%;
  padding:0 1em;
}

.con3 {
  width:25%;
  padding: 0 1em;
  margin-bottom: 0.5em ;
}

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	
.con2 {
  width:100%;
  padding: 0.75em;
}
	
.con3 {
  width:100%;
  padding: 0.25em !important;
	text-align:center;
}
	
.con3 img{
	width:50%;
}
	
/*ヘッダーメニュー*/
	
}
/*ヘッダー太字*/
nav#navi, .menu-header .sub-menu{
font-weight: bold;
}
/*ヘッダーメニュー影*/
nav#navi, .menu-header .sub-menu{
font-weight: bold;
}
/*ヘッダーメニュ―下線*/
.menu-header .menu-item:hover{
border-bottom:6px solid #fff !important;/*線の太さ色*/
transition: all .8s;/*線が出てくる時間*/
}
/*.sub-menu .menu-item:hover{
border-bottom:none !important;
}*/

/*投稿日を消す*/
.page-template-default .entry-title,
.page-template-default .date-tags{
display: none;
}

/*メインカラムの背景を透過する*/
#main{
	width: 100%;
	background-color: rgba(255, 255, 255, .8);
}

/*ロゴの非表示*/
.logo-header{  display: none;} 


/*目次タイトル*/
.htagu{
font-size:34px;
letter-spacing: 0.2em;
text-align:center;
margin:0 auto;
}
.tc1{
color:#f5c566;
}
.tc2{
color:#f5c566;
}
.tc3{
color:#f5c566;
}
.tc4{
color:#f5c566;
}


/*ヘッダー詰める*/
.entry-title,
.content {
	padding-top: 0;
	margin-top: 0;
}

.page-template-default #main{
	padding-top: 0;
	margin-top:  0;
}



/*hタグリセット*/
.article h2 {
    padding: 0;
    background: none;
}
.article h3 {
    border: none;
    padding: 0;
}
.article h4 {
    border: none;
    padding: 0;
}
.article h5 {
    border: none;
    padding: 0;
}
.article h6 {
    border: none;
    padding: 0;
}

/*h2タグ*/
.article h2 {
  font-size:28px;
  background: #FFA500; /*背景色*/
  padding: 0.5em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  border-radius: 0.5em;/*角の丸み*/
}


/*h3タグ*/
.article h3 {
 
  background: linear-gradient(transparent 70%, #FFD700 70%);
  font-size:22px;
  display:inline;
}

/*h4タグ*/

.article h4{
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
}

.article h4:before {
  font-family: "FontAwesome";
  content: "\f00c";/*アイコンのユニコード*/
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #FF4500; /*アイコン色*/
}

/*ふわっとフェードインするアニメーション

#main{
    animation: fadeIn 1s ease-out 0s 1 normal;
}
#sidebar {
    animation: fadeIn 1s ease-out 0s 1 normal;
}

@keyframes fadeIn {
    from {transform: translateY(10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}
#header-container {
    animation: Down 1s ease-out 0s 1 normal;
}

@keyframes Down {
    from {transform: translateY(-10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}

#breadcrumb {
    animation: Right 1s ease-out 0s 1 normal;
}

@keyframes Right {
    from {transform: translateX(10%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}
*/
/*画像とグローバルメニューの隙間を小さくする*/
.logo-image {	
padding: 0;
}

.logo-image * {
display: block;
margin: auto;
}

/*コンタクトフォーム*/
/*名前*/
.boxB:after{
	content: "";
	display: block;
	clear:both;
}

.boxa {
	float: left;
	width:auto;
	margin-right:3em;
}

.boxb {
	float: left;
	width:auto;
	margin-right:3em;
}



/*希望日時*/
.boxA:after{
	content: "";
	display: block;
	clear:both;
}

.box1 {
	float: left;
	width:auto;
}

.box2 {
	float: left;
	width:auto;
	text-align:center;
	margin:0.5em;
}


.box3 {
	float: left;
	width:auto;
    margin: 0 auto;

}

.box4 {
	float: left;
	width:auto;
	text-align:center;
	margin:0.5em;
}

.box5 {
	float: left;
	width:auto;
}

.box6 {
	float: left;
	width:auto;
	text-align:center;
	margin:0.5em;
}

.box7 {
	float: left;
	width:auto;
}

.box8 {
	float: left;
	width:auto;
	text-align:center;
	margin:0.5em;
}

.box9 {
	float: left;
	width:auto;
}

.box10 {
	float: left;
	width:auto;
	text-align:center;
	margin:0.5em;
}