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

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

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

.header {
  margin-top: 0;
  padding-top: 0;
}

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

/******ヘッダー*****/

/***ボックス指定***/

/*ヘッダー全体*/
.box900 {
	background-color: #fff;
	padding-top: 30px;
	width: 100%;
	height: 120px;
	position: fixed;
	top: 0;
	z-index: 100;
}
/*ロゴ画像*/
.box901 img {
	width: 70%;
	border-radius: 5px;
	padding-top: 10px;
	padding-left: 40px;
	padding-bottom: 10;
}
/*メニュー外枠*/
.box902 {
	padding: 35px 20px;
}
/*メニュー*/
.box903 {
	background-color: #fffacd;
	border: 1px #6d402b solid;
	border-radius: 3px;
	padding: 5px;
	margin: 5px;
	position: relative;
	transition: 0.2s;
}
.box903 ul {
	color: #622d18;
	list-style-type: none;
	padding: 0;
	text-align: center;
	display: none;
	transition: 0.2s;
}
.box903:hover {
    background-color: #f39800;
}
.box903:hover ul{
	display: block;
	color: #fff;
}
.box903 ul il a {
	color: #622d18;
}
.box903 ul li a:hover {
	color: #fff;
}


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

/*リンク文字*/
.p900 {
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	color: #6d402b;
}
.p900 a {
	color: #622d18;
	transition: 0.1s;
}
.p900 a:hover {
	color: #ffffff;
}

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

/*ヘッダー全体*/
.container900 {
	display: flex;
	flex-wrap: wrap;
}
/*メニュー*/
.container901 {
	display: flex;
	flex-direction: row;
}

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

/*ヘッダー全体*/
.item900 {
	flex-basis: 50%;
}
.item901 {
	flex-basis: 50%;
}
/*メニュー*/
.item902 {
	flex-basis: 20%;
}
.item903 {
	flex-basis: 17%;
}
.item904 {
	flex-basis: 23%;
}

/***ズーム・スライダー***/

@-webkit-keyframes zoomUp {
  0% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
  }
  100% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
}

@keyframes zoomUp { /* 1.15倍させる指定 */
  0% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
  }
  100% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
}

.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img { /* 12秒かけて拡大させる */
    -webkit-animation: zoomUp 15s linear 0s;
    animation: zoomUp 15s linear 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.slide-img {
    background-size: cover; 
    background-position: center center; /* 背景画像は中央を軸に表示させる */
    height: 400px; /* 400pxの高さで表示させる */
}

.box101 {
	position: relative;
}

.slide-text {
	position: absolute;
	z-index: 10;
	width: 100%;
	top: 40%;
	-webkit-transform:translateY(10px);
	-ms-transform:translateY(10px);
	transform:translateY(10px);
	text-align: center;
	font-weight: bold;
}
.p101 {
 font-size: 40px;
 margin-right: 20px;
  color          : #622d18;           /* 文字の色 */
 letter-spacing : 2px;                /* 文字間 */
 text-shadow    : 
      2px  2px 1px #fff,
     -2px  2px 1px #fff,
      2px -2px 1px #fff,
     -2px -2px 1px #fff,
      2px  0px 1px #fff,
      0px  2px 1px #fff,
     -2px  0px 1px #fff,
	  0px -2px 1px #fff;        /* 文字の影 */
}
.p102 {
 font-size: 30px;
 color: #ff8c00;
 margin-left: 20px;
 margin-right: 20px;
 letter-spacing : 2px;                /* 文字間 */
 text-shadow    : 
      2px  2px 3px #fff,
     -2px  2px 3px #fff,
      2px -2px 3px #fff,
     -2px -2px 3px #fff,
      2px  0px 3px #fff,
      0px  2px 3px #fff,
     -2px  0px 3px #fff,
	  0px -2px 3px #fff;        /* 文字の影 */
}
.p103 {
 font-size: 30px;
 color: #622d18;
 margin-left: 20px;
 margin-right: 20px;
 letter-spacing : 2px;                /* 文字間 */
 text-shadow    : 
      2px  2px 3px #fff,
     -2px  2px 3px #fff,
      2px -2px 3px #fff,
     -2px -2px 3px #fff,
      2px  0px 3px #fff,
      0px  2px 3px #fff,
     -2px  0px 3px #fff,
	  0px -2px 3px #fff;        /* 文字の影 */
}
.p104 {
 display: none;
 font-size: 30px;
 margin-left: 20px;
 margin-right: 20px;
 letter-spacing : 2px;                /* 文字間 */
 text-shadow    : 
      2px  2px 1px #fff,
     -2px  2px 1px #fff,
      2px -2px 1px #fff,
     -2px -2px 1px #fff,
      2px  0px 1px #fff,
      0px  2px 1px #fff,
     -2px  0px 1px #fff,
	  0px -2px 1px #fff;        /* 文字の影 */
}
.p105 {
 display: none;
 font-size: 30px;
 margin-left: 20px;
 margin-right: 20px;
 letter-spacing : 2px;                /* 文字間 */
 text-shadow    : 
      2px  2px 1px #fff,
     -2px  2px 1px #fff,
      2px -2px 1px #fff,
     -2px -2px 1px #fff,
      2px  0px 1px #fff,
      0px  2px 1px #fff,
     -2px  0px 1px #fff,
	  0px -2px 1px #fff;        /* 文字の影 */
}

/*見出し初期化*/
.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;
}

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

/**ボックス指定**/

/*会社概要全体*/
.box300 {
 padding: 0 10px;
}
/*画像*/
.box301 img {
 border: 1px #622d18 solid;
 padding: 5px;
 margin: 0 auto 10px;
}
/*会社情報*/
.box302 {
 background-color: #fffacd;
 border-radius: 5px;
 padding: 10px;
}
.box302 img {
 margin-bottom: 10px;
}
/*営業時間・定休日*/      
.box303 {
 padding: 15px;
}

/**文字指定**/

/*会社名*/
.p300 {
 font-size: 16px;
 font-weight: 500;
 color: #622d18;
 text-align: center;
 margin-bottom: 15px;
}
/*住所・連絡先*/
.p301 {
 font-size: 14px;
 color: #622d18;
}
/*住所・連絡先　文字間広げる*/
.p302 {
 font-size: 14px;
 letter-spacing: 0.5em;
 color: #622d18;
}

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

/*住所・連絡先・営業時間・定休日*/
.container300 {
 display: flex;
 flex-direction: row;
}

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

/*住所・連絡先・営業時間・定休日*/
.item300 {
 flex-basis: 65px;
}
.item301 {
 flex-basis: calc(100% - 65px);
}


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

/******ヘッダー*****/

/***ボックス指定***/

/*ヘッダー全体*/
.box900 {
	background-color: #fff;
	padding-top: 10px;
	width: 100%;
	height: 80px;
	position: fixed;
	top: 0;
	z-index: 100;
}
/*ロゴ画像*/
.box901 img {
	width: 50%;
	border-radius: 5px;
	padding-top: 10px;
	padding-left: 20px;
	padding-bottom: 5px;
}
/*メニュー外枠*/
.box902 {
	padding: 17px 20px 5px;
}
/*メニュー*/
.box903 {
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	color: #6d402b;
	background-color: #fffacd;
	border: 1px #6d402b solid;
	border-radius: 3px;
	padding: 5px;
	margin: 0 5px;
}

}

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

/******ヘッダー*****/
/*ヘッダー全体*/
.box900 {
	background-color: #fff;
	padding-top: 10px;
	width: 100%;
	height: 80px;
	position: fixed;
	top: 0;
	z-index: 100;
}
/***ボックス指定***/

/*ヘッダー全体*/

/*ロゴ画像*/
.box901 img {
	width: 90%;
	border-radius: 5px;
	padding-top: 10px;
	padding-left: 20px;
	padding-bottom: 5px;
}
/*メニュー外枠*/
.box902 {
	padding: 12px 20px 5px;
}
/*メニュー*/
.box903 {
	background-color: #fffacd;
	border: 1px #6d402b solid;
	border-radius: 3px;
	padding: 2px;
	margin: 0 5px;
}

/*リンク文字*/
.p900 {
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	color: #6d402b;
}


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

/*ヘッダー全体*/
.item900 {
	flex-basis: 30%;
}
.item901 {
	flex-basis: 70%;
}
/*メニュー*/
.item902 {
	flex-basis: 20%;
}


}

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

/*****ヘッダー*****/
/*ヘッダー全体*/
.box900 {
	background-color: #fff;
	padding-top: 10px;
	width: 100%;
	height: 110px;
	position: fixed;
	top: 0;
	z-index: 100;
}
/***ボックス指定***/

/*全体*/

/*ロゴ画像*/
.box901 img {
	width: 60%;
	margin: 0 auto;
	display: block;
}
/*メニュー外枠*/
.box902 {
	padding: 0 5px 0;
}
/*メニュー*/
.box903 {
	background-color: #fffacd;
	border: 1px #6d402b solid;
	border-radius: 3px;
	padding: 2px;
	margin: 0 2px 10px;
}
.box903 ul {
	display: none;	
	}
.box903:hover ul{
	display: none;
}

/*メニュー文字*/
.p900 {
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	color: #6d402b;
}

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

/*ヘッダー全体*/
.item900 {
	flex-basis: 100%;
}
.item901 {
	flex-basis: 100%;
}
/*メニュー*/
.item902 {
	flex-basis: 25%;
}

/***ズーム・スライダー***/

.slide-text {
	position: absolute;
	z-index: 10;
	width: 100%;
	top: 25%;
	-webkit-transform:translateY(10px);
	-ms-transform:translateY(10px);
	transform:translateY(10px);
	text-align: center;
	font-weight: bold;
}

.p101 {
 font-size: 40px;
 margin-right: 20px;
  color          : #622d18;           /* 文字の色 */
 letter-spacing : 2px;                /* 文字間 */
 text-shadow    : 
      2px  2px 2px #fff,
     -2px  2px 2px #fff,
      2px -2px 2px #fff,
     -2px -2px 2px #fff,
      2px  0px 2px #fff,
      0px  2px 2px #fff,
     -2px  0px 2px #fff,
	  0px -2px 2px #fff;        /* 文字の影 */
}
.p102 {
 display: none;
}
.p103 {
 display: none;
}
.p104 {
 display: inherit;
 font-size: 25px;
 color: #ff8c00;
 margin-left: 20px;
 margin-right: 20px;
 letter-spacing : 2px;                /* 文字間 */
 text-shadow    : 
      2px  2px 1px #fff,
     -2px  2px 1px #fff,
      2px -2px 1px #fff,
     -2px -2px 1px #fff,
      2px  0px 1px #fff,
      0px  2px 1px #fff,
     -2px  0px 1px #fff,
	  0px -2px 1px #fff;        /* 文字の影 */	
}
.p105 {
 display: inherit;
 font-size: 20px;
 color: #622d18;
 margin-left: 20px;
 margin-right: 20px;
 letter-spacing : 2px;                /* 文字間 */
 text-shadow    : 
      2px  2px 1px #fff,
     -2px  2px 1px #fff,
      2px -2px 1px #fff,
     -2px -2px 1px #fff,
      2px  0px 1px #fff,
      0px  2px 1px #fff,
     -2px  0px 1px #fff,
	  0px -2px 1px #fff;        /* 文字の影 */	
}



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

/*会社情報*/
.box302 {
 background-color: #fffacd;
 border-radius: 5px;
 padding: 10px;
}
/*営業時間・定休日*/      
.box303 {
 padding: 30px;
}

/**文字指定**/

/*会社名*/
.p300 {
 font-size: 18px;
 font-weight: 500;
 color: #622d18;
 text-align: center;
 margin-bottom: 15px;
}
/*住所・連絡先*/
.p301 {
 font-size: 16px;
 color: #622d18;
}
/*営業時間・定休日*/
.p302 {
 font-size: 16px;
 color: #622d18;
}

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

/*住所・連絡先・営業時間・定休日*/
.item300 {
 flex-basis: 75px;
}
.item301 {
 flex-basis: calc(100% - 75px);
}
	
}

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

/*****ヘッダー*****/

/***ボックス指定***/

/*メニュー*/
.box903 {
	background-color: #fffacd;
	border: 1px #6d402b solid;
	border-radius: 3px;
	padding: 2px;
	margin: 0 2px 10px;
}

/*メニュー文字*/
.p900 {
	font-size: 11px;
	font-weight: 500;
	text-align: center;
	color: #6d402b;
}

}