@charset "UTF-8";

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

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

.header-container-in.hlt-top-menu .logo-header img{max-height:50px;}
.navi-in a{font-size:14px;}
.menu-header .item-label{font-size:14px;}
#navi .navi-in>ul>li>a{padding:0 .8em;}

.home .appeal{background-size:cover;}
.home .content-in.wrap{max-width:1100px;}
.home .main{margin:auto;}
.home header.article-header.entry-header{display:none;}
.apeel-title{font-size:1.2em;}

.main, .sidebar{background:#fff;}

.home .footer{margin-top:0;}
.footer-bottom-logo .logo-image{max-width:150px;}
.footer-bottom-logo img{height:auto;}

.common-title{text-align:center; font-size:30px; color:#006a1a; padding-bottom:15px;}

.top-map{padding-top:30px;}
.ggmap {position: relative; padding-bottom: 26.25%; padding-top: 30px; height: 0; overflow: hidden;}
.ggmap iframe,
.ggmap object,
.ggmap embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height:350px;}

.top-information-block{padding:15px 15px 60px; background:#f1f1f1; border-top:1px solid #e2e5e8;}
.top-information-title{text-align:center; font-size:30px; color:#006a1a;}
ul.top-information-list{list-style:none; margin:30px auto 50px; padding-left:0; max-width:1000px;}
ul.top-information-list li{padding:10px 0; border-bottom:1px dotted;}

.article h3{background-color:#2a9f85;}

.sidebar h3{border:0;}

span.required{font-size:10px; color:red;}
span.text-small{font-size:12px;}

table.table th{background:#f4f6fa; border:solid 1px #e2e5e8; font-size:16px;}
table.table td{background:#fff; border:solid 1px #e2e5e8;}

body.page .date-tags{display:none;}

.post-password-form input[type='submit']{margin-top: 10px;}


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

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

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
	.apeel-title{font-size:1.0em;}
}

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

.centerBox {
            display: flex;
            justify-content: center;
            position: relative;
            margin: auto;

            align-content: center;
            margin-top: -80px; /* 画像との余白 */
            padding-bottom: 10px; /* 画像との余白 */
            max-width: 710px;
            
            text-align: center;

        }

        .Txtbox-light {
          border: 2px solid 4ec4d3; /* 枠線 */
          padding-top: 1.62em;
          padding-bottom: 1.62em;
          padding-left: 0.5em;
          padding-right: 0.5em;
  
          overflow: hidden; /* はみ出た部分を非表示 */
          border: 3px solid #4ec4d3;
          width: 250px;
          height: 5vh; /* 画面高さの30% */
          background-color: whitesmoke;
          color: black;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          line-height: 1; /* 改行時の余白をなくす */
          text-align: center;
        }

        .Txtbox-light2 {
          border: 2px solid 4ec4d3; /* 枠線 */
          padding-top: 2em;
          padding-bottom: 2em;
          padding-left: 0.5em;
          padding-right: 0.5em;
  
          overflow: hidden; /* はみ出た部分を非表示 */
          border: 3px solid #4ec4d3;
          width: 250px;
          height: 5vh; /* 画面高さの30% */
          background-color: whitesmoke;
          color: black;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 13px;
          line-height: 1; /* 改行時の余白をなくす */
          text-align: center;
        }

        @media screen and (max-width: 768px) {
    	 .centerBox {
   		 	flex-direction: column;
   		 	align-items: center; /* 中央寄せ（任意） */
 		 	margin-top: -10px;
  			}
		}

		.right-text {
  			text-align: right;
		}

		@media screen and (max-width: 768px) {
  		  .Txtbox-light {
			width: 210px !important;
 			}
  		  .Txtbox-light2 {
   		    width: 210px !important;
 			}
		}


		@media screen and (max-width: 768px) {
		  .appeal-content {
  			padding: 0.5em;
			}
		}

		.marg{
          margin: auto;
          width: 30px;
		}

		@media screen and (max-width: 768px) {
			.marg {
			margin-bottom: 5px;
			}
		}

		.appeal{
  			background-image: url('https://ecca.jp/wp1/wp-content/uploads/2025/06/img_1748749262.jpg');
		}

		.unique-body {
          background-color: #ffff00;
        }
        
        .pic1{
          background-image:url(https://ecca.jp/wp1/wp-content/uploads/2025/06/momotarou-1.png);
		  background-size: 98%;
  		  background-size: cover;
    	  background-position: center;
  		  background-repeat: no-repeat;
        }

        .pic2{
          background-image:url();
		  background-size: 98%;
  		  background-size: cover;
    	  background-position: center;
  		  background-repeat: no-repeat;
        }

        .pic3{
          background-image:url();
		  background-size: 98%;
  		  background-size: cover;
    	  background-position: center;
  		  background-repeat: no-repeat;
        }

        .pic4{
          background-image:url();
		  background-size: 98%;
  		  background-size: cover;
    	  background-position: center;
  		  background-repeat: no-repeat;
        }

        .pic5{
          background-image:url();
		  background-size: 98%;
  		  background-size: cover;
    	  background-position: center;
  		  background-repeat: no-repeat;
        }

        .pic6{
          background-image:url();
		  background-size: 98%;
  		  background-size: cover;
    	  background-position: center;
  		  background-repeat: no-repeat;
        }

        .pic7{
          background-image:url();
		  background-size: 98%;
  		  background-size: cover;
    	  background-position: center;
  		  background-repeat: no-repeat;
        }

        .pic8{
          background-image:url();
		  background-size: 98%;
  		  background-size: cover;
    	  background-position: center;
  		  background-repeat: no-repeat;
        }

        .pic9{
          background-image:url();
		  background-size: 98%;
  		  background-size: cover;
    	  background-position: center;
  		  background-repeat: no-repeat;
        }

       .unique-company.pic:hover {
 		  outline: none;
  		  border: none;
  		  transform: none;
		}

        .unique-title{
          font-family: "Kosugi", sans-serif;
          margin-top: -10px;
          margin-bottom: 10px;
          color: black;
          font-size: 20px;
          font-weight: bold;
        }

        .unique-detail{
          font-family: "Kosugi", sans-serif;
          margin-top: -10px;
          color: black;
          font-size: 15px;
          font-weight: bold;
        }


        .unique-container {
            
            padding: 20px;
            width: 100%;
            margin: auto;
            background-color: #ffff00;
            border-radius: 10px;
        }
        .unique-companies {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
            align-items: stretch;
            color: white;
        }
        .unique-company-long {
          font-family: "Kosugi", sans-serif;
            background-color: white;
            border-radius: 7px;
            color: blue;
            font-weight: bold;
            text-align:  center;
            width: 300px;
            font-size: 15PX;
        }
        .unique-company {
          font-family: "Kosugi", sans-serif;
          border: 4px solid;
            padding: 5px;
            background-color: white;
            color: blue;
            font-weight: bold;
            text-align:  center;
            width: 250px;
            font-size: 20PX;
            align-items: center;
            color: white;
            height: 120px;
        }

        @media screen and (max-width: 768px) {
  .unique-companies {
    flex-direction: column;
    align-items: center;
  }

  .unique-company {
    width: 90%;
    max-width: 250px;
    aspect-ratio: 6 / 2.9; /* 横5:縦3の比率を維持 */
    height: auto; /* 高さは比率に従って自動調整 */
    margin-bottom: 15px;
  }

  .unique-company img {
    width: 80%;
    height: 85%;
    object-fit: contain; /* 画像の比率も維持して収める */
  }
			
  .margin-cnt1 {
    margin-top: 29px;		
  }

  .margin-cnt2 {
    margin-top: -21px;		
  }
	
  .btn-m{
	padding:14px 15px;
	font-size:12px
  }
}

        a {
  text-decoration: none;
}

 @media screen and (max-width: 428px) {
	 .margin-cnt2 {
    margin-top: 29px;		
  }

	 
@media screen and (max-width: 387px) {
	.margin-cnt2 {
  margin-top: 9px;	
  }
}