@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 {
	text-align:left;
}

/*グローバルメニューのフォントサイズ等変更*/
.navi-in .menu-header .item-label{
	font-size: 22px;
	font-weight: bold;
}

/*固定ページの投稿日、更新日、投稿者名を非表示にする*/
.page .date-tags,
.page .author-info {
    display: none;
}

#appeal { 
	height: calc(100vw * calc(620 / 1600)); 
}

.top-sec01{
	display:none;
}
/*
.top-sec01 p{
	background: #06c755;
	text-align:center;
	padding: 0.5em;
	color: white;
	font-weight:bold;
	border-radius: 5em;
}

.top-sec01 span{
	font-size:0.8em;
}
*/
.top-sec02{
	margin:0 auto;
	width:50%;
	border:2px #00e1f5 solid;
	border-radius:20px;
	padding:20px;
}
.top-sec02 p{
	font-size:1.3em;
	text-decoration:underline;
	text-decoration-color: #00e1f5;
}
.top-sec02 ul{
	color: #00e1f5;
}
.top-sec02 span{
	color: #000;
}

/* 768px以下でロゴの大きさ変更 */
@media screen and (max-width: 768px) {
  img.site-logo-image{
    float: left;
    width:150px;
  }
	#appeal {
		height: 40vw; 
	}
	.top-sec02{
		width:90%;
	}
	.header div.header-in {
/*		min-height: 100px;*/
		min-height: 120px;
	}
	.header {
		background-image: url(https://sn-support.com/site/wp-content/themes/cocoon-child-master/images/header-background-mobile.png);
/*		background-size: 55%;*/
		background-size: 80%;
/*		background-position: center;*/
		background-position: right;
	}
}

/* 1023px以下でロゴの位置を変更 */
@media screen and (max-width: 1023px) {
  img.site-logo-image{
    margin-top: 7px;
  }
}

/* Contact Form7関連（ここから） */
.wpcf7 input[name="text-728"] { /* 会社名入力欄 */
	width: 80%;
}
.wpcf7 input[name="your-name"] { /* ご担当者名入力欄 */
	width: 80%;
}
.wpcf7 input[name="tel-944"] { /* 電話番号入力欄 */
	width: 80%;
}
.wpcf7 input[name="your-email"] { /* メール入力欄 */
	width: 80%;
}
.wpcf7 textarea[name="your-message"] { /* お問い合わせ内容入力欄 */
	width: 80%;
}
.wpcf7 input[type="submit"] { /* 送信ボタン */
	width: 80%;
}

/* Contact Form7関連（ここまで） */

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

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

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