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

/************************************
** 子テーマ用のスタイルを書く　428ab5（青）fabe00（黄色）
************************************/
/*必要ならばここにコードを書く*/

:root {
  --webgsss-bg-color: #428ab5;
  --webgsss-bg-color_usui: #D1ECF1;
  --webgsss-bg-color_motto_usui: #ecf7f9;
}


/************************************
** アピールエリア
************************************/
#appeal{
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;

  /* ここが肝：固定の最小幅/高さを撤廃して、箱の高さをレンジで制御 */
  min-width: 0;
  min-height: 0;
  max-height: none;

  /* PC〜スマホで「大きくなりすぎない」高さに固定（必要なら数値だけ調整） */
  height: clamp(400px, 33vw, 600px);

  background-repeat: no-repeat;
  background-position: center;

  /* 大きくなりすぎるならまず contain（余白が嫌なら cover に） */
  background-size: contain;

  overflow: hidden;
}

#appeal #appeal-in{
  height: 100%;
}

/* テーマ側の余白で高さが増えることがあるので潰します */
#appeal #appeal-in{
  padding: 0 !important;
  margin: 0 !important;
}

#appeal #appeal-in .appeal-content{
  display: none;
}

/* 余白の発生源をまとめて潰す（スマホ時だけ強制） */
@media screen and (max-width: 1023px){

  .appeal {
    background-image: url(https://nochi.gsss.pro/wp-content/uploads/2026/02/a1ba73155916c0e61e0dff8600be4785.jpg) !important;
  }
	
  /* 外側のブロック自体の上下余白をゼロに */
  #appeal.appeal.adt-front-page-only{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 中のwrapが上下paddingを持っていることが多いのでゼロに */
  #appeal #appeal-in.appeal-in.wrap{
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* 念のため、さらに内側も余白ゼロ */
  #appeal #appeal-in .appeal-content{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* もし #appeal 自体に余白が付いているケースも潰す */
  #appeal{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: 200px !important;
  }
}





/************************************
** 見出し
************************************/
.article h2{
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
	margin-right: calc(53% - 50vw);
	margin-left: calc(53% - 50vw);
	padding: 1em calc(50vw - 50% ) 1em calc(50vw - 50% );
	background: -webkit-repeating-linear-gradient(-45deg, #fff, #fff 3px, var(--webgsss-bg-color_motto_usui) 3px, var(--webgsss-bg-color_motto_usui) 7px);
	background: repeating-linear-gradient(-45deg, #fff, #fff 3px, var(--webgsss-bg-color_motto_usui) 3px, var(--webgsss-bg-color_motto_usui) 7px);
	font-size: 2.22em;
    font-feature-settings: "palt";
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.3;
	background-color: transparent;border:0px;
	color:#424242;

}
@media screen and (max-width:768px){
	.article h2{}
}
.article h3{
  display: inline;
  margin-top: 3em;
  margin-bottom: 1em;
  font-size: 1.55em;
  font-weight: bold;
  color:#424242;
  text-align:center;
  border:0;
  border-bottom: solid 3px var(--webgsss-bg-color_usui);
}
@media screen and (max-width:768px){
	.article h3{}
}
.article h4{
  position: relative;
  margin-top: 3em;
  margin-bottom: 1em;
  margin-right: calc(53% - 50vw);
  margin-left: calc(53% - 50vw);
  padding: 1em calc(50vw - 50% ) 1em calc(50vw - 50% );
  font-size: 1.55em;
  font-weight: bold;
  color:#424242;
  border:0;
  text-align:center;
}
.article h5{color:#f00;}
.article h6{color:#f00;}


/************************************
** 文字の配置center left right
************************************/
.center{text-align:center;margin:0 auto;}
.center a{text-align:center;margin:0 auto;}
.center img{text-align:center;margin:0 auto;}

/************************************
** 追従メニューにロゴを表示しない
************************************/
#header a{color:#000;text-decoration:none;}
#header a:hover{color:#000;text-decoration:none;}
.hlt-top-menu .header-in{display:none;}
.fixed-header{background-color: var(--webgsss-bg-color);}

/************************************
** フォームとテーブルのデザイン
************************************/
form u.hissu {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #bf0000;
	border: 1px solid #bf0000;
}
form u.nini {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #999;
	border: 1px solid #999;
}
form u.kotei {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #333;
	border: 1px solid #333;
}
/* チェック・ラジオを一行ごとに */
.wpcf7-form-control .wpcf7-list-item{
	display:block;
}

/* 禁止マーク */
input:disabled {
    cursor: not-allowed;
}
label.disabled {
    cursor: not-allowed;color:#999;
}
/* 郵便番号 */
input[name="your_name"]{width:30%;}
input[name="your_name_furigana"]{width:30%;}
input[name="your_denwa"]{width:20%;}
input[name="your_email"]{width:40%;}
input[name="zip"]{width:20%;}
input[name="pref"]{width:30%;}
input[name="city"]{width:30%;}
input[name="addr"]{width:30%;}
input[name="addr2"]{width:100%;}

/* フォームオブジェクト */
input[type="submit"] {
    display:block;
    background-color: #bf0000;
    color:#fff;
    font-weight:bold;
    text-align:center;
    margin: 0 auto;
    width: 80%;
	font-size:1.5em;
}
input {border: 1px solid #808080 !important;margin:4px 0;}
textarea {border: 1px solid #808080 !important;margin:2px 0;}
input:focus {background-color: #e0ffff;border: 1px solid #000 !important;}
textarea:focus {background-color: #e0ffff;border: 1px solid #000 !important;}
input:focus[type="submit"] {background-color: #0000ff;}


/************************************
** テーブルのデザイン
************************************/
.table{
	background-color: #fff;
	font-size:0.9em;
	border-collapse: collapse;
}
.table .tr{
  display: table;
  width: 100%;

  border-collapse: collapse;
  border-spacing: 0;
}
@media screen and (max-width: 767px) {
  .table .tr{
    display: block;
    width:100%;
  }
}
.table .tr .td{
  display: table-cell;
  border: 1px solid #e5e5e5;
  padding: 8px 13px;
  vertical-align:top;

  border-collapse: collapse;
  border-spacing: 0;
}
@media screen and (max-width: 767px) {
  .table .tr .td{
    display: block;
    width:100%;
  }
}
.table .label{
	background    : #fcfcfc;
	width:30%;
}
.table .input{
	width:70%;
}

.table .tr .td:nth-child(2){
width:70%;
}
@media screen and (max-width: 767px) {
  .table .tr .td:nth-child(2){
    display: block;
    width:100%;
  }
}



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

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

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