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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*リンクの下線削除*/
a {
    text-decoration:none; 
}

/*グローバルナビメニュー マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 0;/*線の位置*/
height: 2px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #622d18;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}
#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

/*アピールエリア*/
.appeal .appeal-in {
	width: 100%;
	background-color: rgba(0, 128, 128, .0);
}
.appeal-content {
	background-color: transparent;
}
/*アピールエリア 文字*/
.appeal-title,
.appeal-message {
	color: #fff;
	text-shadow    : 
    	 1px  1px 0.5px #946c45,
    	-1px  1px 0.5px #946c45,
    	 1px -1px 0.5px #946c45,
    	-1px -1px 0.5px #946c45,
    	 1px  0px 0.5px #946c45,
    	 0px  1px 0.5px #946c45,
    	-1px  0px 0.5px #946c45,
		 0px -1px 0.5px #946c45;
}
.p100 {
	font-size: 7vw;
}
.p101 {
	font-size: 4vw;
}


.box100 {
	display: flex;
	justify-content: space-around;
	position: relative;
	width: 100%;
	height: 70px;
}
.box100 img {
	width: 100%;
}
.box100 p {
	position: absolute;
	top: 0;
	font-size: 35px;
	color: #ffffff;
}


/*見出し初期化*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
    padding: 0;
    margin: 0;
    background:none;
    border-collapse: separate;
    border-spacing: 0;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
    line-height: normal;
    position:relative;
}

/*****サイドバー*****/

/*ボックス指定*/
/*全体*/
.box200 {
	
}
/*画像*/
.box201 {
	padding: 10px;
}
/*テキスト*/
.box202 {
	padding: 10px;
}
/*お問合せ リンク*/
.box203 {
	display: flex;
	justify-content: space-around;
	background-color: #6c3524;
	border: 1px #6c3524 solid;
	border-radius: 5px;
	padding: 5px;
	margin: 10px 20px;
	transition: all 1.0s;
}
.box203:hover {
	background-color: #fffacd;
}
/*QRコード 全体*/
.box204 {
	border: 1px #6c3524 solid;
	margin: 0 20px;
}
.box204 img {
	width: 50%;
}
/*アクセス 全体*/
.box205 {
	padding: 10px;
}
/*アクセス 地図*/
.box206 {
	padding: 10px;
}
/*QRコード*/
.box207 {
	display: flex;
	justify-content: space-around;
}

/***文字指定***/

/*店名*/
.p200 {
	font-size: 25px;
	font-weight: 500;
	color: #6c3524;
	text-align: center;
	margin-bottom: 10px;
}
.p201-1 {
	color: #ea5532;
}
/*所在地・TEL*/
.p201 {
	font-size: 16px;
	color: #6c3524;
}
.p202 {
	font-size: 16px;
	color: #6c3524;
}
.p203 {
	font-size: 16px;
	color: #6c3524;
}
.p204 {
	font-size: 16px;
	color: #6c3524;
}
.p205 a {
	color: #fff;
	transition: all 1.0s;
}
.p205 a:hover {
	color: #ff8c00;
}
/*アクセス*/
.p206 {
	font-size: 16px;
	color: #6c3524;
}

.p207 {
	font-size: 14px;
	color: #6c3524;
	text-align: center;
}

/***フレックス指定***/

/*所在地・TEL*/
.container200 {
	display: flex;
	flex-direction: row;
}

/***アイテム指定***/

/*所在地・TEL*/
.item200 {
	flex-basis: 70px;
}
.item201 {
	flex-basis: calc(100% - 70px);
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){

}

/*834px以下*/
@media screen and (max-width: 834px){

/**アイコン画像余白**/
.site-name-text img {
	margin: 15px auto 0;
}
/*アピールエリア 画像 縦サイズ*/
#appeal {
	min-height: 300px;
}

}

/*480px以下*/
@media screen and (max-width: 480px){

/*ヘッダー高さ指定*/
.header .header-in{
  min-height: 80px;
}

/**アイコン画像余白**/
.site-name-text img {
margin-top: 15px;
margin-bottom: 0px;
}
/*アピールエリア 画像 縦サイズ*/
#appeal {
  min-height: 250px;
}
/*アピールエリア 文字*/
.appeal-title,
.appeal-message {
	color: #fff;
	margin-top: 40px;
}
.p100 {
	font-size: 8vw;
}
.p101 {
	font-size: 5vw;
}

}

/*400px以下*/
@media screen and (max-width: 400px){

/*アピールエリア 文字*/
.p100 {
	font-size: 7vw;
}
.p101 {
	font-size: 4vw;
}

}