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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* HEROエリア画像幅広 */
.my-cover-full{
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
width: auto;
}




/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }


/*画像の下に余白をつける*/
body.home .site-main {
  padding-top: 100px;
}

/*余白を10pxつける*/
.m-10pc{
　margin: 10px;
}

/*余白を10pxつける*/
.m-20pc{
  margin: 20px;
}

/*余白を50pxつける*/
.m-50pc{
 margin: 50px;
}

/*余白を100pxつける*/
.m-100pc{
 margin: 100px;
}

/*余白を200pxつける*/
.m-200pc{
 margin: 200px;
}

/*余白を300pxつける*/
.m-300pc{
 margin: 300px;
}

/* TOP画像背景 */
.top-imgage-r {
  box-shadow: 20px 15px 0 #bae1e8;
}

.top-imgage-l {
  box-shadow: -30px 15px 0 #cad7f6;
}

/* TOPデザインリセット */
.main {
  width: 860px;
  padding: 0; 
  border: none;
  border-radius:none;
  position: relative;
  z-index: 0;
}



/* 見出しのデザインリセット */
/*h2*/
.entry-content h2{
  border:none;
  background:none;
  padding: 0;
}

/*h3*/
.article h3{
  background: none;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  padding: 0;
}

.article h2,
.article h3,
.article h4,
.article h5,
.article h6{
 margin:10px 0;
 color: #7695db;
 font-size: 32px;	
}

/*記事タイトルと投稿日時を非表示*/
.article h1,
.date-tags {
	display: none;
}

/*h2*/
h2 {
  text-align: left;
  color: #7695db;
}

h2:after {
  content: attr(data-en);
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  letter-spacing: 6px;	
  color: #87c1cb;
}

/*h3*/
h3 {
  border-bottom: solid 3px #cce4ff;
  text-align:center;	
}


/*リンクの下線を非表示*/
a {
  text-decoration: none;
}

/*各ページのコンテンツ幅*/
#page-width {
  max-width: 860px;
  margin: 0 auto;
}
#main {
  width: 100%;
}

/*グラデーション文字*/
.message　{
  font-size: 30px;
  font-family: YuMincho,"Hiragino Mincho ProN",serif;;
　text-align:center;
}

/*太文字見出し*/
.text-line {
  text-align: left;	
  color: #7695db;
　border-bottom: 1px solid #7695db;　　	
  display: inline-block;
  padding-bottom: 30px;	
}


/*背景ブルー*/
.haikei-blue {
  background: #cad7f6;
  margin: 0 calc((100% - 100vw) / 2);
  padding: 0 29px 1em;
}

.haikei-blue > h2 {
  margin: 0 calc((100% - 100vw) / 2);
  padding: 25px calc((100vw - 1142px) / 2) 15px;
}

.haikei-blue > p,
.haikei-blue > div,
.haikei-blue > h3 {
  margin-left: auto;
  margin-right: auto;
  max-width: 1142px;
}

.box-white{
  padding: 5em 1em;
  margin: 2em 0;
  background: #ffffff;
}


/*背景グレー*/
.haikei-gray {
  background: #f3f7fb;
  margin: 0 calc((100% - 100vw) / 2);
  padding: 0 29px 1em;
}

.page-design{
  width:80%;	
}

/*画像とテキストを並べて配置*/
.content-section {
    display: flex; 
    align-items: flex-start;
    margin-bottom: 10px;
}

.company-info {
    flex-direction: row;
}


.production-facilities {
    flex-direction: row;
}

.media-container,
.text-container {
    width: 50%; /* 左右に50%ずつ幅を割り当てる */
    padding: 0 64px;
    box-sizing: border-box; /* paddingを幅に含める */
}

.media-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

.section-title {
    font-size: 24px;
    /* その他のスタイル */
}

.company {
    color: #888;
    /* その他のスタイル */
}

/*トップ画像上部のマージンを消す*/
.entry-content{
	    margin-top: 0;
}
main.main{padding:0px 10px 0 10px;}

/*続きを見るリンク*/
.read-more {
    text-align: right;
	margin:1px;
}

.read-more a{
  display: inline-block;
  color:#333;
  font-size:120%;
  text-decoration: none;
  position: relative;
  transition: .3s;
}
.read-more a::after{
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: #7695db;
  transition: .3s;
}

.read-more a:hover::after{
  width: 100%;
}

/*TOPへ戻るボタン*/
.go-to-top {
  right: 20px; /*右から20px*/
  bottom: 55px; /*下から55px*/
}

.go-to-top-button {
  border-radius: 50%; /*丸くする*/
  width: 60px; /*横幅*/
  height: 60px; /*高さ*/
  font-size: 30px; /*アイコンフォントのサイズ*/
  opacity:0.9; /*透明度*/
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .2); /*影*/
}

/*TOPへ戻るボタンホバー時*/
.go-to-top-button:hover {
  color: #ffffff; /*アイコンフォントの色*/
  background-color:#9ea9fc; /*背景色*/
}


/*TOPお問い合わせデザイン*/
/* 全体背景（ページ幅いっぱい） */
.contact-area {
  background-color: #dce6fa;
  margin: 0 calc((100% - 100vw) / 2);	
  padding: 80px 20px;
  text-align: center;
}

/* 白いボックス中央配置 */
.contact-box {
  background-color: #fff;
  max-width: 900px;
  margin: 0 auto;
  padding: 50px 30px;
  border-radius: 10px;
}

/* タイトル部分 */
.contact-title {
  font-size: 1.8rem;
  color: #5a7bdd;
  margin-bottom: 5px;
}

.contact-sub {
  color: #83d4d0;
  letter-spacing: 3px;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.contact-desc {
  color: #666;
  font-size: 1rem;
  margin-bottom: 40px;
  line-height: 1.8;
}

/* 電話・FAX・ボタンの横並び */
.contact-info {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
  flex-wrap: wrap;
	align-items: center;
}

.contact-left {
  text-align: left;
	text-align: left;
    border-right: 1px solid #b9dde7;
    padding-right: 40px;
}
.contact-left p:first-child{
	margin-bottom: 0;
}

.contact-left .label {
  font-size: 0.9rem;
  color: #777;
  margin-right: 10px;
}

.contact-left .tel a {
	font-size: 2.3rem;
    color: #333;
	font-weight: bold;
}

.tel{
  font-size: 1.3rem;
  font-weight: bold;
  color: #333;
}

.fax {
  font-size: 1.3rem;
  font-weight: bold;
  color: #333;
}
.contact-note {
  font-size: 0.9rem;
  color: #666;
  margin-top: 15px;
  line-height: 1.6;
}
/*下部表示メッセージ*/
.wpcf7 form.sent .wpcf7-response-output{
	    border-color: #bae1e8;
}

/* ボタン */
.contact-btn {
  display: inline-block;
  border: 2px solid;
  border-image: linear-gradient(90deg, #9bb7ff, #7ee6e2) 1;
  border-radius: 6px;
  padding: 14px 30px;
  text-decoration: none;
  color: #555;
  font-size: 1.1rem;
  transition: all 0.4s ease;
}

.contact-btn:hover {
  background: linear-gradient(90deg, #9bb7ff, #7ee6e2);
  color: #fff;
}

/*アクセスデザイン*/
.access-area {
  background-color: #f3f7fb;
  margin: 0 calc((100% - 100vw) / 2);	
  padding: 80px 20px 0 20px;
  text-align: center;
}

.access-container {
   max-width: 1000px; 
   margin: 0 auto; 
}

.map-container {
    position: relative; 
    width: 100%;
    padding-bottom: 70%; 
    height: 0;
    overflow: hidden;
}

.map-container iframe {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.address-info {
    line-height: 1.8;
	text-align:left;
}

main.main {
	margin: 10px 10px 0 10px;
	padding: 10px 10px 0 10px;
}

/*フッター*/
.navi-footer-in > .menu-footer {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center !important;
    gap: 10px;
}
.menu-footer li:nth-child(5) {
    grid-column: 2;
}
.menu-footer li:nth-child(6) {
	grid-column: 3;
}
.footer-bottom{
	margin-top:0;
}
.footer{
	padding:10px 0 30px 0;
}

.navi-footer-in > .menu-footer li.menu-item{
	width: 100%;
}
/*会社概要の表*/
/* table01 */
#table01 tr {
  border-bottom: 1px solid #b5b1b1;
}

#table01 th,
#table01 td {
  padding: 16px 20px;
  border: none;
}

#table01 th {
  width: 20%;
}



/* sp */
@media only screen and (max-width: 480px) {
  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
  }

  #table01 th {
    width: 100%;
  }

  #table01 td {
    padding-top: 0;
  }
}



/* for Desktop */
@media ( min-width : 640px ){
  .timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .timeline-date {
    width: 110px;
    float: left;
    margin-top: 20px;
  }
  .timeline-content {
    width: 75%;
    float: left;
    border-left: 3px #cad7f6 solid;
    padding-left: 30px;
  }
  .timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #7695db;
    position: absolute;
    left: 106px;
    top: 24px;
    border-radius: 100%;
  }
}


/*生産設備の表*/
#product-table tr {
  border-bottom: 1px solid #b5b1b1;
}

#product-table th,
#product-table td {
  padding: 20px;
  border: none;
  text-align:center;	
}

#product-table th {
  width: 20%;
}

/*お問い合わせ装飾*/
/*ContactForm7カスタマイズ*/
table.CF7_table{
	width:90%;
	margin:0 auto;
	border: 3px solid #e5e5e5;
}

table.CF7_table tr{
	border-top: 1px solid #e5e5e5;
	border-radius: 4px;
}

.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
	display:table;
}

/*入力欄*/
.CF7_table input, .CF7_table textarea {
	border: 1px solid #d8d8d8;
}

.CF7_table ::placeholder {
	color:#797979;
}

/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: #7695db;
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/*「任意」文字*/
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #bdbdbd;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th{
	width:30%;/*横幅*/
	background-color:#ebedf5;
	text-align:left;	
	}
}

/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:95%;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
	line-height:2.5em;
	}
	.CF7_table th{
	background-color:#ebedf5;
	}
}

/*プライバシーポリシーチェック*/
.check　{
   text-align: center;
   margin: 50px auto;
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	width:50%;
	background-color:#7695db;
	border-radius: 4px;
	border:0;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	margin:0 auto;
}

.CF7_btn{
	text-align:center;
	margin-top:40px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}

/*プライバシーポリシー*/
.contact-privacy-policy p:first-child{
	font-size: 0.7em;
    margin: 0 0 0 20px;
}

/*スライドメニュー*/
.mobile-menu-buttons .menu-button{
	width: fit-content;
    justify-content: space-between;
	margin-right: 15px;
}
.logo-menu-button menu-button{
	    margin-left: 16px;
}
.fa-remove:before, .fa-close:before, .fa-times:before {
    content: "×" !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*h見た目リセット*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{
 margin:10px 0;	
}

/*モバイルメニュー*/	
/*メニュー文字消す*/
  .mobile-menu-buttons .menu-caption{
    display: none;
  }
  .mobile-menu-buttons{
    align-items: center;
  }
	
/*メニュー右側から表示*/
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}	
	
/*×アイコンを移動*/
.menu-close-button {
  padding: 20px;
  text-align: right;
}
	
/*ロゴ画像を移動*/
.logo-menu-button img {
  max-height: 40px;	
}
	
/*メニュー装飾*/
.menu-drawer a {
font-size: 1em;
text-align:center;	
line-height: 2.6em;
border-bottom: solid 1px #e6e6e6;
}
	
.menu-drawer a:hover {
background-color:#e1eaf5;　
}
	
.sub-menu li {                                      
margin-left:-14px;
font-size: 0.9em;
color: #e6e6e6;
}
		
}

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

/* 見出しのデザインリセット */	
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{
 margin:10px 0;	
}
	.content{
       margin-top: 0;
	}
@media (max-width: 768px) {
    .content-section {
        flex-direction: column; /* 子要素を縦並びにする */
    }

    .media-container,
    .text-container {
        width: 100%; /* 幅を100%にする */
        padding: 5px;
    }

/* スマホ表示では常に「画像（上）→ テキスト（下）」の順にする */
    .company-info .media-container { order: 1; }
    .company-info .text-container { order: 2; }

    .production-facilities .media-container { order: 1; }
    .production-facilities .text-container { order: 2; }
    
/* production-facilitiesセクションの画像の配置を、元の画像の位置に合わせて調整 */
    .production-facilities .media-container {
    }
}
	
/*TOPお問い合わせ*/
  .contact-box {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .contact-left {
    order: 1; /* 上 */
  }

  .contact-right {
    order: 2; /* 下 */
  }

  .contact-button {
    width: 100%;
    padding: 16px;
  }	
}

/*750px以下*/
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
	
	
/* 見出しのデザインリセット */	
	.article h2,
    .article h3,
    .article h4,
    .article h5,
    .article h6{
     margin:10px 0;
	 font-size: 28px;	
}

	.sp-none{
	 display: none;	
	}	
	
	.contact-left{border-right:none;}
	
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	
/* 見出しのデザインリセット */	
   .article h2,
   .article h3,
   .article h4,
   .article h5,
   .article h6{
    margin:10px 0;	
    font-size: 28px;	
}

/*各ページのコンテンツ幅*/
#page-width {
  max-width: 300px;
  margin: 0 auto;
}
#main {
  width: 100%;
}
	/*トップお問い合わ要素*/
	.contact-left .tel a {
		font-size: 1.45em;
	}
	/*フッター*/
	.navi-footer-in > .menu-footer{
		display:flex;
	}

/*会社概要の表*/
  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
  }

  #table01 th {
    width: 50%;
  }

  #table01 td {
    padding-top: 0;
  }	
	
/*生産設備の表*/
  #tproduct-table th,
  #product-table td {
    width: 100%;
    display: block;
  }

  #product-table th {
    width: 50%;
  }

  #product-table td {
    padding-top: 10px;
  }		
}