@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

*/



/************************************

** 子テーマ用のスタイルを書く

************************************/

/*必要ならばここにコードを書く*/

.marker {

    line-height: .5rem;

    background: linear-gradient(transparent 60%, #f6f61c8a 60%);

}



.green_btn_mk3 a {

display: block;

   background-color: #29b05b;

   text-align: center;

   max-width: 360px;

   width: 80%;

   margin: 30px auto;

   padding: 8px;

   border-radius: 15px;

   box-shadow: 10px 10px 30px #d9d9d9, -10px -10px 30px #ffffff;

text-decoration: none;

color: #fff;

font-weight: bold;

font-size: 18px;

transition: .3s;

}



.green_btn_mk3 a:hover {

box-shadow: inherit;

}



.green_btn_mk3 a svg {

fill: #fff;

height: 20px;

margin-left: 8px;

top: 3px;

position: relative;

}



.orange_btn_mk3 span {

display: none;

}



.orange_btn_mk3 p {

margin: 0;

text-align: center;

font-size: 14px;

font-weight: bold;

color: red;

}



.orange_btn_mk3 a {

text-decoration: none;

color: #fff;

display: block;

font-weight: bold;

font-size: 18px;

background-color: #eb5c00;

text-align: center;

max-width: 360px;

width: 80%;

margin: 0 auto 30px auto;

padding: 8px;

border-radius: 15px;

transition: .3s;

box-shadow: rgb(217, 217, 217) 10px 10px 30px, rgb(255, 255, 255) -10px -10px 30px;

}



.orange_btn_mk3 a:hover {

box-shadow: inherit;

}



.orange_btn_mk3 a svg {

    fill: #fff;

    height: 20px;

    margin-left: 8px;

    top: 3px;

    position: relative;

}



/*アイキャッチサイズ*/

.eye-catch {

     max-width: 75%;

}

.logo {

    text-align: left;

float: left;

    padding: 0px;

}

.header-in {

    display: block;

}

.header-in form{

float:right;

width:200px;

margin:auto;

}

input.header_btn{

    font-size: 16px;

    background: #ff59a3;

    color: white;

    font-weight: bold;

    border-radius: 15px;

border: 2px solid white;

margin-top:3px;

}

input.header_btn:hover{

    background: white;

    color: #ff59a3;

    border: 2px solid #ff59a3;

}

.header_tel{

float: right;

    width: 300px;

    text-align: left;

font-size: 28px;

    background: url(/common/images/head-contact-image.png) no-repeat right top;

    height: 55px;

    padding-left: 20px;

padding-top: 5px;

}

.navi-in > ul li{

height: 40px;

    line-height: 40px;

}



.new-entry-card{

color: #333;

}

.new-entry-card-content .new-entry-card-title{

    font-weight:bold;

}

/************************************

** レスポンシブデザイン用のメディアクエリ

************************************/

/*1023px以下*/

@media screen and (max-width: 1023px){

  /*必要ならばここにコードを書く*/

.eye-catch {

     max-width: 75%;

}

}



/*834px以下*/

@media screen and (max-width: 834px){

  /*必要ならばここにコードを書く*/

.eye-catch {

    max-width: 100%;

}

.header-in form{

float:none;

}


}



/*480px以下*/

@media screen and (max-width: 500px){

  /*必要ならばここにコードを書く*/

.eye-catch {

     max-width: 100%;

}

.plan-column .block-box {

    height: auto;

margin: 0 35px;

}

.header_tel{

padding:0px;

}

input.header_btn{

margin:0px;

}

}



/************************************

** 追加スタイル

************************************/

.widget_categories ul li ul{

padding-left: 15px;

}

.cat-item a::before {

    font-family: "Font Awesome 5 Free";

    content: '\f058';

    color: #778;

margin: 0 8px 0 10px;

}

.cat-item .children a::before {

font-family: "Font Awesome 5 Free";

    content: '\f054';

    color: #abc;

    font-size: 13px;

}

.article  h3:after {

    border-bottom: solid 3px #ffc107;

}

.sidebar h2::after, .sidebar h3:after {

    border-bottom: solid 3px #ffc107;

}

.go-to-top-button {

    border: 1px solid #ffffff;

    color: #ffffff;

}

.go-to-top-button:hover {

    border: 1px solid #ffffff;

    color: #ffffff;

}

.pager-post-navi a {/*ページ送りナビ*/

color: #4086bf;/*文字色*/

line-height: 1.7;/*行間*/

font-size: 1em;/*文字の大きさ*/

font-weight: bold;/*文字の太さ*/

}

.pagination .current {

    color: #ffffff;

    background-color: #3261ab;

    font-size: 100%;

    border: 1px solid #ffffff;

}

.header-container-in.hlt-top-menu .logo-header img{

margin:10px;

}

/*料金表タイトル中央寄せ*/

.plan-column .caption-box-label{

display:block;

font-size: 20px;

text-align: center;

}



/*グローバルナビメニュー マウスオーバーでアンダーライン*/

#navi .navi-in a:after{

position: absolute;/*線の位置を絶対配置に*/

content: "";/*文字はなし*/

left: 0px;/*線の位置*/

bottom: 1px;/*線の位置*/

height: 1px;/*線の高さ*/

width: 100%;/*幅いっぱいに線を引く*/

background: #ffffff;/*線の色*/

transform: scale(0,1);/*マウスオーバーの前は線を消す*/

transition: 0.3s;/*線が0→100%になるまでの秒数*/

}



#navi .navi-in a:hover:after{

transform: scale(1);/*マウスオーバー後、線を100%出す*/

}

/*選択中のカテゴリーにアンダーライン*/

.current-menu-item:not(:first-child):after{

position: absolute;/*線の位置を絶対配置に*/

content: "";/*文字はなし*/

left: 0px;/*線の位置*/

bottom: 1px;/*線の位置*/

height: 1.5px;/*線の高さ*/

width: 100%;/*幅いっぱいに線を引く*/

background: #ffffff;/*線の色*/

}

/*新着記事一覧に日付表示*/

.post-date{

font-size:14px;

}

/*

.no-post-date .post-date, .no-post-update .post-update{

  display: block;

}

*/

.new-entry-card-date {

padding-top: 0.2em;

text-align: right;

display: block;

}

/*固定ページ日付非表示*/

.page .date-tags {

display: none;

}

/*背景を横幅広げる*/

.fluid-box {

width: 100vw;

position: relative;

left: 50%;

transform: translateX(-50%);

background-color: #dbedf3;

padding: 0;

box-sizing: border-box;

}

.fluid-box-inner {

max-width: 1250px;

margin: 0 auto;

padding: 25px;

box-sizing: border-box;



}

body{overflow-x: hidden;}

/*アピールエリア左寄せ*/

.appeal-title {

    font-size: 1.4em;

}

/*アピールボタン文字サイズ指定*/

.appeal-content .appeal-button {

    font-size: 20px;

color: white;

border: none;

text-shadow: 1px 1px 1px #007b43;

}

.appeal-content .appeal-button:hover {

background-color: #3eb370;

}

/*アピールエリア左寄せ*/

.appeal-content {

margin: 0 0 auto 0;

border-radius: 30px;

background-color:rgb(230 230 230 / 45%);

padding:22px;

}

/*動画ファイル調整*/

.wp-video {

    margin: auto;

    border: solid 10px;

    border-color: #d0ebf4;

}



/*ページ送りナビ矢印色変更*/

.pager-post-navi a .iconfont {

    color: #6fa1f3;

}



/* Contact Form7 */



.contact7 {

max-width: 100%;

box-sizing: border-box;

}

.contact7 dd {

margin: 0 0 30px 0;

background-color:

}

.contact7 dt {

font-weight: normal;

}



/* 必須マーク */

.contact7 .must {

background: #FF1A00;

}



/* 任意マーク */

.contact7 .optional {

background: #999;

}



.contact7 .must,

.contact7 .optional {

color: #FFF;

border-radius: 3px;

font-size: 12px;

margin-left: 10px;

padding: 5px 10px;

letter-spacing: 2px;

}

.btn_contact7 {

text-align: center;

}

.btn_contact7 input {

width: 70%;

background-color: #005513;

color: #FFF;

font-size: 1.1em;

font-weight: bold;

letter-spacing: 0.2em;

border: 1px solid #005513;

-webkit-transition: 0.3s;

-moz-transition: 0.3s;

-o-transition: 0.3s;

-ms-transition: 0.3s;

transition: 0.3s;

}

.btn_contact7 input:hover {

background-color: #FFF;

color: #005513; 

}

@media screen and (min-width: 768px) {

.contact7 dt {

float: left;

clear: left;

width: 35%;

padding: 5px 10px 5px 0;

}

.contact7 dd {

margin-left: 35%;

}



.btn_contact7 input {

width: 70%;

background-color: #005513;

color: #FFF;

font-size: 1.1em;

font-weight: bold;

letter-spacing: 0.2em;

border: 1px solid #005513;

-webkit-transition: 0.3s;

-moz-transition: 0.3s;

-o-transition: 0.3s;

-ms-transition: 0.3s;

transition: 0.3s;

}

.btn_contact7 input:hover {

background-color: #FFF;

color: #005513; 

}

}



/*add css*/

/*design button*/

.btn_shine {

position: relative;

overflow: hidden;

max-width: 400px;

margin: 0 auto;

}



.btn_shine:before {

content: "";

animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;

background-color: #fff;

width: 140%;

  height: 100%;

  transform: skewX(-45deg);

  top: 0;

  left: -160%;

  opacity: 0.5;

  position: absolute;

pointer-events: none;

}

.btn_shine_img {

position: relative;

overflow: hidden;

max-width: max-content;

margin: 0 auto;


}



.btn_shine_img:before {

content: "";

animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;

background-color: #fff;

width: 140%;

  height: 100%;

  transform: skewX(-45deg);

  top: 0;

  left: -160%;

  opacity: 0.5;

  position: absolute;

pointer-events: none;

}

@keyframes shine{

  0% {

    left: -160%;

    opacity: 0;

  }

  70% {

    left: -160%;

    opacity: 0.5;

  }

  71% {

    left: -160%;

    opacity: 1;

  }

  100% {

    left: -20%;

    opacity: 0;

  }

}



p.orange_btn_text {

margin-bottom: 0;

text-align: center;

font-size: 16px;

color: #E80101;

font-weight: bold;

}



p.orange_btn_detail {

text-align: center;

font-size: 14px;

}



.shine_btn_green {

background-color: #32cf8c;

/*background-color: #64e46b;

background-image: linear-gradient(180deg, #64e46b 0%, #4ac9a2 100%);*/

text-align: center;

font-size: 16px;

line-height: 20px;

font-weight: bold;

border-radius: 50px;

border-bottom: 3px solid #349075;

padding: 10px 5px;

color: #fff;

max-width: 400px;

margin: 0px auto;

letter-spacing: 2px;

text-shadow:1px 1px 1px #349075;

z-index: 10;

}



.shine_btn_green i {

font-size: 20px;

font-weight: 600;

padding: 5px;

}



.shine_btn_green:hover {

margin-top: 3px;

border-bottom: 0px;

}



a {

text-decoration: none;

}

/*/design button*/



.blue_frame_test {

    border: 3px solid #3261ab;

    border-radius: 10px;

    padding: 5px 15px;

}



.blue_frame_back {

    border-radius: 5px;

    padding: 10px;

    background-color: #f8faff;

}



.red_frame_back {

    border-radius: 5px;

    padding: 10px;

    background-color: #ffdbdb;

}



input[type='submit'].front_gr_btn {

  border: none;

  color: #fff;

  font-weight: bold;

  border-radius: 25px;

}



.front_gr_btn {

  background-color: #ff7423;

  background-image: linear-gradient(62deg, #ff7423 0%, #f9cd56 100%);

}



.orange_btn_text + form {

width: 90%;

max-width: 400px;

padding: 5px 0;

text-align: center;

margin: 0 auto;

}



ul.blue_list_frame {

border: 2px solid #00a2eb;

border-radius: 10px;

padding-top: 10px;

padding-bottom: 10px;

}



/*new content design*/

 /*base*/

.normal_box {

border: 2px solid #000;

margin-bottom: 20px;

}

.normal_box_label {

margin-bottom: 10px;

padding: 0 10px;

background-color: #000;

color: #fff;

font-weight: bold;

}

.normal_box_label:before {

font-family: "Font Awesome 5 Free";

font-weight: 900;

content: "\f06a";

margin: 0 8px 0 5px;

color: #fff;

}

.normal_box p {

padding: 0 10px;

margin-bottom: 10px;

}

 /*/base*/

.normal_box.blue_base {

border-color: #1AB6CC;

}

.normal_box_label.blue_base {

background-color: #1AB6CC;

}



.normal_box_label.yellow_base:before {

content: '\f0f3';

color: #d2911b;

}

.normal_box.yellow_base {

border-color: #f8cc2f;

}

.normal_box_label.yellow_base {

background-color: #f8cc2f;

color: #5a5a5a;

}



.normal_box_label.red_base:before {

content: '\f071';

color: #fff;

}

.normal_box.red_base {

border-color: #ee6759;

}

.normal_box_label.red_base {

background-color: #ee6759;

color: #fff;

}



.normal_box.list_base {

border-color: #1AB6CC;

}

.normal_box.list_base ul {

padding: 10px;

margin: 2px 0;

}

.normal_box.list_base li {

list-style: none;

}

.normal_box.list_base li:before {

font-family: "Font Awesome 5 Free";

font-weight: 900;

content: "\f35a";

margin-right: 10px;

color: #1AB6CC;

}

.expl_voice_container {

display: flex;

align-items: flex-start;

}

.expl_guy_icon {

height: 85px;

width: 85px;

min-height: 85px;

min-width: 85px;

border-radius: 50%;

}

.expl_guy_icon img {

   height: 80px;

   width: 80px;

   border-radius: 50%;

   border: 2px solid #1AB6CC;

}

.expl_voice_txt {

border: 2px solid #1AB6CC;

margin: 15px 10px 40px 15px;

border-radius: 10px;

padding: 5px 10px;

position: relative;

font-size: 14px;

}

.expl_voice_txt:before {

content: '';

border: 5px solid transparent;

border-top: 5px solid transparent;

border-bottom: 5px solid transparent;

border-right: 15px solid #1AB6CC;

position: absolute;

top:13px;

left: -22px;

}

.qa_container {

border: 1px solid silver;

padding: 18px 15px;

border-radius: 10px;

}

.question_container.blue_base {

border-bottom: 3px solid #3261ab;

padding: 10px 5px;

}

.question_container.red_base {

border-bottom: 3px solid #ffa5a5;

padding: 10px 5px;

}

.question_container .question_title_line span {

background-color: #3261ab;

padding: 2px 10px;

border-radius: 5px;

color: #fff;

}

.question_container.red_base .question_title_line span {

background-color: #ffa5a5;

}

.article h4:before {

    border: 2px solid #ffc107;

}



.article h2 {

    font-size: 24px;

    padding: 25px;

    background-color: #fff;

    border-radius: 2px;

    border-bottom: 3px solid #1AB6CC;

color: #000;

}

.article h3 {

    border-left: 7px solid #1AB6CC;

    border-right: 1px solid #1AB6CC;

    border-top: 1px solid #1AB6CC;

    border-bottom: 1px solid #1AB6CC;

    font-size: 22px;

    padding: 12px 20px;

}



div.sticky_table {

overflow-x: auto;

-webkit-overflow-scrolling: touch;

}



div.sticky_table table {

width: 100%;

border-collapse: collapse;

border-spacing: 0;

}



div.sticky_table table tbody tr th {

vertical-align: middle;

text-align: center;

white-space: nowrap;

background-color: navy;

font-size: 12px;

position: sticky;

left: 0;

}



div.sticky_table table tbody tr td {

vertical-align: middle;

border:1px solid;

text-align: center;

white-space: nowrap;

font-size: 14px;

}



div.sticky_table table tbody tr:nth-child(2n + 1) {

background-color: #fff;

}



div.sticky_table table tbody tr:nth-child(2n) {

background-color: #eff5ff;

}



div.sticky_table a {

display: block;

background-color: #ff7423;

padding:  5px 10px;

border-radius: 10px;

color: #fff;;

font-size: 12px;

min-width: 80%;

max-width: 180px;

margin: 0 auto;

transition: .5s;

}



div.sticky_table a:hover {

color: silver;

}

/*/new content design*/



#menu-item-7749 {

border-radius: 10px;

}



.current-menu-item:not(:first-child):after {

content: inherit;

}



.orange-contact-btn {

background-color: #f9953a;

background-image: linear-gradient(90deg, #f9953a 0%, #ffc16a 50%);

max-width: 400px;

font-weight: bold;

font-size: 20px;

text-align: center;

border-radius: 15px;

padding: 10px 0;

margin: 0 auto;

border-bottom: 5px solid #DC8900;

}

.orange-contact-btn a {

text-decoration: none;

color: #fff;

}



.forPartner {

max-width: 300px;

margin-left: auto;

margin-right: 10px;

text-align: center;

padding: 10px 0;

float: right;

}



.forPartner a {

color: #30ade8;

padding: 5px 15px;

background-color: #fff;

border-radius: 10px;

font-weight: bold;

transition: .3s;

}



.forPartner a:hover {

background-color: #efefef;

}

/*IT導入補助金バナー*/

div .banner,figure.banner img,img.banner{

filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.6));

}

img.banner:hover {

    opacity: 0.7;

}

figure.banner img:hover,figure.banner img:hover{

opacity:0.8;

cursor: pointer;

}

div.banner img:hover,div.banner img:hover{

opacity:0.8;

cursor: pointer;

}

figure.banner img:active,figure.banner img:active{

/* 今いる位置から相対的に3px下に配置する。*/

position: relative;

top: 3px;

}

div.banner img:active,div.banner img:active{

/* 今いる位置から相対的に3px下に配置する。*/

position: relative;

top: 3px;

}

/*フローティングIT導入補助金バナー*/

.floating-banner__image {



    width: 400px;

    height: auto;

    position: fixed;

    right: 10px;

    bottom: 10px;

z-index: 9999;

}



/*カラムブロックの中央寄せ*/



.wp-block-columns {

  &.is-style-justify {

    justify-content: space-between;

  }

  &.is-style-center {

    justify-content: center;

  }

}

#content{

margin-top:50px

}





表のデザインを変更20241108

--------------------------------------*/

/*--- 表全体(table) ---*/

.entry-content table {

    border-bottom: 1px solid #e6e6e6; /* 表の一番下の線 */

    border-top: none;

    border-left: none;

    border-right: none;

}

/*--- ヘッダーセル(th) ---*/

.entry-content th {

    border-radius: 10px 10px 0 0; /* 丸み（※ヘッダーセルが縦の場合は削除）*/

    padding: 1.2em .7em; /* 余白（上下　左右） */

    background-color: #008080; /* 背景色 */

    color: #fff; /* 文字の色 */

    letter-spacing: 0.15em; /* 文字の間隔 */

    text-align: center; /* 中央揃え */

    border: none; /* 線削除 */

}

/*--- 行（横方向）(tr) ---*/

.entry-content tr {

    text-align:center; /* 中央揃え */

}

.entry-content tr:not(:last-child) { /* 最後の行以外に適用 */

    border-bottom: 1px solid #e6e6e6; /* 下線 */

}

/*--- ヘッダーセル以外のセル(td) ---*/

.entry-content td {

    padding: 1em 2em; /* 余白（上下　左右） */

    border:none; /* 線を削除 */

}

.entry-content td:last-child { /* 最後のセルのみ適用 */

    border-right: 1px solid #e6e6e6; /* 右線 */

}

.entry-content td:not(last-child) { /* 最後のセル以外に適用 */

    border-left: 1px solid #e6e6e6; /* 左線 */

}