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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
@charset "UTF-8";


/* =========================================
   固定ページ専用CSS（Tmail / page-id-4488）
   ※ すべてページIDスコープ化／共通ボタン除外
========================================= */

.page-id-4488{font-family:'Helvetica Neue',sans-serif;color:#333}

/* ===== ラッパー ===== */
.page-id-4488 .wrapper-1000{max-width:1000px;margin:0 auto}

/* ===== アイキャッチ動画 ===== */
.page-id-4488 .video-wrapper{width:100%;max-width:1000px;margin:0 auto;text-align:center}
.page-id-4488 .video-wrapper video{width:100%;height:auto}

/* ===== intro-text ===== */
.page-id-4488 .intro-text{width:100%;max-width:1000px;margin:40px auto;padding:0 20px;line-height:1.8;color:#333}

/* ===== セクション共通 ===== */
.page-id-4488 section{background-color:#ebf6f7;clip-path:polygon(0 5%,100% 0,100% 90%,0 100%);padding:120px 20px}

/* ===== 見出し（h3.decorated） ===== */
.page-id-4488 h3.decorated{position:relative;display:inline-block;padding:0 55px;margin:0 auto 10px;text-align:center}
.page-id-4488 h3.decorated::before,.page-id-4488 h3.decorated::after{content:'';position:absolute;top:50%;width:45px;height:2px;border-top:solid 1px #000;border-bottom:solid 1px #000}
.page-id-4488 h3.decorated::before{left:0}
.page-id-4488 h3.decorated::after{right:0}

/* ===== セクション本文 ===== */
.page-id-4488 .heading-center{text-align:center}
.page-id-4488 .section-text{max-width:1000px;margin:0 auto 40px;padding:0 20px;line-height:1.8;color:#333}

/* =========================================
   カウントアップセクション
========================================= */
.page-id-4488 .countup-section-wrapper{overflow-x:auto;margin:30px auto;max-width:1200px}
.page-id-4488 .countup-section{display:flex;justify-content:center;gap:40px;text-align:center;min-width:700px}
.page-id-4488 .countup-box .number{font-size:48px;font-weight:bold;color:#0078D4}

/* =========================================
   Tmail特徴（アコーディオン）
========================================= */
.page-id-4488 .flow-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.page-id-4488 .flow-item{flex:1 1 calc(50% - 20px);background:#f7f7f7;border-radius:8px;padding:20px;text-align:initial}
.page-id-4488 .flow-item h4{font-size:20px;border-bottom:double 5px #87ceeb;padding-bottom:8px;text-align:center}
.page-id-4488 .flow-item p{text-align:left!important;margin:0;line-height:1.7}

/* =========================================
   サポートプラン表
========================================= */
.page-id-4488 table{width:100%;max-width:1000px;border-collapse:collapse;margin:0 auto;padding:0;table-layout:fixed;border:1px solid #999}
.page-id-4488 th,.page-id-4488 td{border:1px solid #ccc;padding:.7em}
.page-id-4488 th{font-size:.9em;text-align:left;padding-left:1em}
.page-id-4488 td{text-align:center}
.page-id-4488 table tbody tr:nth-child(2),.page-id-4488 table tbody tr:nth-child(4),.page-id-4488 table tbody tr:nth-child(6){background-color:#f5f5f5}
.page-id-4488 table tbody tr:nth-child(1),.page-id-4488 table tbody tr:nth-child(3),.page-id-4488 table tbody tr:nth-child(5){background-color:#fff}
.page-id-4488 .plan1{background:#03A9F4;color:#fff}
.page-id-4488 .plan2{background:#D4AF37;color:#000}
.page-id-4488 .plan3{background:#4caf50;color:#fff}
.page-id-4488 .plan1 .price,.page-id-4488 .plan2 .price,.page-id-4488 .plan3 .price{color:#fff;font-weight:bold;font-size:1.2em;text-align:center}
.page-id-4488 .plan1_i i{font-size:1.2em;color:#03A9F4}
.page-id-4488 .plan2_i i{font-size:1.2em;color:#D4AF37}
.page-id-4488 .plan3_i i{font-size:1.2em;color:#4caf50}

/* ===== 料金表（テキストブロック） ===== */
.page-id-4488 .mail_header{background-color:#001f4d;color:#fff;text-align:center;font-weight:bold;font-size:1.1em}
.page-id-4488 .mail_range{background-color:#fff;color:#333;vertical-align:top}
.page-id-4488 .mail_price{color:red;text-align:right;white-space:nowrap;background-color:#fff;vertical-align:top}
.page-id-4488 .support_header{background-color:#001f4d;color:#fff;text-align:center;font-weight:bold;font-size:1.1em;vertical-align:middle}
.page-id-4488 .ss_cell.support_name{background-color:#03A9F4;color:#fff;font-weight:bold;text-align:center;vertical-align:top}
.page-id-4488 .b_cell.support_name{background-color:#D4AF37;color:#fff;font-weight:bold;text-align:center;vertical-align:top}
.page-id-4488 .full_cell.support_name{background-color:#4caf50;color:#fff;font-weight:bold;text-align:center;vertical-align:top}
.page-id-4488 .support_price{color:red;text-align:right;white-space:nowrap;vertical-align:top}
.page-id-4488 .plus_sign{font-size:48px;font-weight:bold;text-align:center;width:80px;user-select:none;vertical-align:middle;padding:0;line-height:normal}
.page-id-4488 .support-table-scroll-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;margin-bottom:1em}
.page-id-4488 .p_tbl.scrollable-table-wrapper table{min-width:700px;border-collapse:collapse;width:100%}

/* =========================================
   価格カード
========================================= */
.page-id-4488 .pricecards-wrapper{max-width:1000px;margin:0 auto;padding-bottom:1em;overflow-x:visible}
@media(max-width:900px){.page-id-4488 .pricecards-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:1em}}
.page-id-4488 .pricecards{display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0;gap:1em;box-sizing:border-box;justify-content:flex-start}
.page-id-4488 .pricecard{flex:0 0 320px;box-sizing:border-box;border:2px solid #eee;margin:0;text-align:center;font-size:.85em;display:flex;flex-direction:column;align-items:stretch}
.page-id-4488 .pricecard h3{color:#fff;padding:10px;margin:0;font-size:1.2em}
.page-id-4488 .pricecard p{margin:0;padding:1rem;text-align:left;background-color:#fff!important;color:#000!important;flex-grow:0;border-radius:0}
.page-id-4488 .pricecard .steps{list-style:none;margin:0 1rem 1rem;padding:0;text-align:left;flex-grow:1;position:relative}
.page-id-4488 .pricecard .steps li{position:relative;padding:.3em 1rem .3em 3rem;margin:0;color:#fff;font-weight:bold;background-color:inherit;border-radius:0;line-height:1.3}
.page-id-4488 .pricecard .steps{counter-reset:step-counter}
.page-id-4488 .pricecard .steps li::before{counter-increment:step-counter;content:counter(step-counter) ".";position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-weight:bold;color:inherit;user-select:none;white-space:nowrap}
.page-id-4488 .pricecard.selfservice{border-color:#03A9F4;background-color:#03A9F4;color:#fff}
.page-id-4488 .pricecard.selfservice h3,.page-id-4488 .pricecard.selfservice .steps li{background-color:#03A9F4;color:#fff}
.page-id-4488 .pricecard.basic{border-color:#D4AF37;background-color:#D4AF37;color:#fff}
.page-id-4488 .pricecard.basic h3,.page-id-4488 .pricecard.basic .steps li{background-color:#D4AF37;color:#fff}
.page-id-4488 .pricecard.fullmanaged{border-color:#4caf50;background-color:#4caf50;color:#fff}
.page-id-4488 .pricecard.fullmanaged h3,.page-id-4488 .pricecard.fullmanaged .steps li{background-color:#4caf50;color:#fff}
.page-id-4488 .pricecard .steps li.empty-step{background-color:inherit;color:transparent;pointer-events:none;font-weight:normal;user-select:none;height:1.3em}
@media(max-width:900px){.page-id-4488 .pricecard{flex:0 0 280px;margin:0}}
@media(max-width:600px){.page-id-4488 .pricecard{flex:0 0 240px;margin:0}}
.page-id-4488 .pricecard p.fullmanaged-desc{margin-bottom:1.3em}

/* =========================================
   レスポンシブ調整（重複をページIDで再定義）
========================================= */
@media(max-width:768px){
  .page-id-4488 .intro-text{font-size:16px;line-height:1.6;padding:0 15px}
  .page-id-4488 .pricecard{flex:0 0 280px;margin:0;font-size:.8em}
  .page-id-4488 .pricecard p{font-size:.8em}
  .page-id-4488 .highlight-text{font-size:1.05em!important;line-height:1.6!important}
  .page-id-4488 .toggle-icon{display:inline-block;cursor:pointer;font-weight:bold;font-size:1.3em;margin-left:10px}
  .page-id-4488 .feature-description{display:none}
  .page-id-4488 .feature-block.active .feature-description{display:block;margin-top:10px}
}
@media(min-width:769px){.page-id-4488 .toggle-icon{display:none}}


/******************************************reCAPTCHAのロゴを非表示*********************************/
.grecaptcha-badge { visibility: hidden; }
/******************************************hovwer時の挙動*****************************************/
/*aタグの下線を無くす*/
a{text-decoration: none}
/*aタグクリック後の色変更*/
a:hover{
  color : #87ceeb;
}
/******************************************グローバルメニュー*************************************/
.menu-header.sub-menu.item-label {
 color: #000080;
}
.menu-header .menu-item:hover {
 border-bottom: 1px solid #000080;
 transition: all .1s ease;
 background: #b0c4de;　　
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .item-label:hover {
 color: #00205C !important;
 transition: all .2s ease;
 border-bottom: none;	
}
/******************************************レスポンシブ改行***************************************/
.sp_br {
  display: none; /*480px以上では改行タグを無効に。*/
}
@media screen and (max-width: 480px) {
.sp_br {
display: block;  /*480px以上では改行タグを有効に。*/
}
}

.sp_br2{
  display: block; /*767px以上では改行タグを有効に。*/
}	
@media screen and (max-width: 767px) {
.sp_br2 {
display: none; /*767px以上では改行タグを無効に。*/
  }
}




/******************************************見出しデザインリセット*****************************************/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
background-color:initial;/*背景色リセット*/
border:initial;/*上下左右の枠線リセット*/
border-radius:initial;/*角の丸みリセット*/
}
/*サイト全体のフォント変更*/
body {
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'  
}

/******************************************トップページ*****************************************/


/*生体認証デバイスセクション*/
.svsection1,
.svsection2{
 width: 80%;
margin: auto;
}

/*servise見出し*/
.section h1{
  color: #00205C;/*文字色*/
  border-top: solid 3px #00205C;/*上線*/
  border-bottom: solid 3px #00205C;/*下線*/
  text-align: center;
	font-size: 3rem;
	padding: 20px;
}

/*認証デバイス*/
.sv-text1 {
    display: inline-block;
    position: relative;
    margin: calc(3.5em / 2) 0 calc(3.5em / 4) calc(3.5em / 2);
    color: #333333;
    line-height: 1;
	  font-size: 28px;
	  padding-top: 50px;
}

.sv-text1::before {
    position: absolute;
    bottom: calc(-3.5em / 4);
	left: calc(-3.5em / 2);
    z-index: -1;
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    background: #bbdbfb;
    content: '';
}

/*生体認証・脆弱性見出しレスポンシブ*/
@media screen and (max-width: 480px) {
.sv-text1{
font-size: 26px;
}
}	

/*脆弱性診断*/
.sv-text3 {
    display: inline-block;
    position: relative;
    margin: calc(3.5em / 2) 0 calc(3.5em / 2) calc(3.5em / 2);
    color: #333333;
    line-height: 1;
	  font-size: 28px;
	  padding-top: 50px;
}


.sv-text3::before {
    position: absolute;
    bottom: calc(-3.5em / 4);
    left: calc(-3.5em / 2);
    z-index: -1;
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    background: #fffacd;
    content: '';
}

.sv-5 img{
border-radius: 30px;
}

/******トップページWeb脆弱性診断セクション768px以下の画面での表示******/
@media screen and (max-width: 768px) {
.svsection2{/*上下逆転させて表示させたいもの*/	
display: flex;		
}
.svsection2-right{
order: 1;/*1番目に表示させたいもの*/	
}

.svsection2-left{
order: 2;/*2番目に表示させたいもの*/	
}
}

/*生体認証の説明文*/
.sv-text2{
 padding: 3em;
 line-height: 2.0;
}
@media screen and (max-width: 1025px) {
.sv-text2{
 padding: 0;
 margin: 1em 0;
}
}


/*詳しくはこちらbutton*/
.button2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
	padding: .9em 2em;
    overflow: hidden;
    border: 1px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #2589d0;
    font-size: 1em;
	margin: auto;
}

.button2:hover {
    background-color: transparent;
    color: #fff;
}

.button2::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background-color: #2589d0;
    content: '';
    transition: width .3s ease;
}

.button2:hover::before {
    width: 100%;
}

/******************************************生体認証デバイス*****************************************/
.box-017 {
    padding: .5em 1.5em 1em;
    border-top: 5px solid #2589d0;
    background-color: #f2f2f2;
	  max-width: 600px;
}

.box-017 h1{
    margin-bottom: .5em;
    color: #2589d0;
    font-weight: 600;
    font-size: 40px;
}

.box-017 p{
    color: #333;
	 font-size: 1.5em;
}

/*モバイル：生体認証*/
@media screen and (max-width: 736px) {
.box-017 h1{/*生体認証デバイス見出し*/
 font-size: 24px;
 font-weight: 600;
}
/*生体認証デバイス説明文*/
.box-017 p{
    color: #333;
	 font-size: 17px;
}
	
.box-017container{/*生体認証コンテナ*/
display: flex;
}

.box-017container_left{/*2番目に表示させたいもの*/
order: 2;		
}
	
.box-017container_right{/*1番目に表示させたいもの*/
order: 1;		
}	
}

.box-017container{/*生体認証コンテナ*/
width: 80%;
margin: 0 auto;
}

/*顔認証デバイスpoint①②③*/
.box-012{
    max-width: 600px;
    margin: 0 auto;
    border: 2px solid #2589d0;
    border-radius: 3px;
    overflow: hidden;
}
.box-012 span {
    padding: .4em .8em;
    background-color: #2589d0;
    color: #fff;
	 font-size: 20px;
}

.box-012 p {
    margin: 0;
    padding: 1em 1.5em;
    color: #333;
}


/*困ったことはありませんか*/
.section2 {
  display: flex;
  flex-direction: row;
	justify-content: center;
	
}

@media screen and (max-width: 736px) {
.section2 {
  display: flex;
	flex-direction: column;
}
}

.item2 {/*画像*/
  padding: 30px;
	text-align: center;
}

.item2 h2{/*テキスト*/
  padding: 30px;
	font-size: 1em;
	justify-content: center;
}

@media screen and (max-width: 736px) {
.item2 h2{/*テキスト*/
  padding: 30px;
	font-size: 0.9em;
	justify-content: center;
}
}

/*こんな困ったことはありませんか見出し*/
.facefv h1{
 font-size: 2em;	
}

@media screen and (max-width: 736px) {
.facefv h1{
 font-size: 1.5em;	
}	
}

/*そんなお悩みを解決します見出し*/
.facefv2 {
    position: relative;
    padding: .5em .7em .4em;
    border-bottom: 3px solid #2589d0;
    color: #333333;
}

.facefv2::before,
.facefv2::after {
    position: absolute;
    left: 30px;
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.facefv2::before {
    background-color: #2589d0;
}

.facefv2::after {
    bottom: -11px;
    background-color: #fff;
}

.facefv2 h1 {
    margin: 0; 
    padding: 0;
	  font-size: 2em;
	  color: #00205C;
}

@media screen and (max-width: 620px) {
.facefv2 h1 {
 font-size: 20px;
	}
}


/*利用シーン*/
.facefv3 {
display: flex;
justify-content: center;
align-items: center;
color: #333333;
background: #E6F4F1;
padding-top: 10px;
margin-bottom: 0;

}

.facefv3 h1 {
 font-size: 2em;
 color: #5b5b5b;
 margin: 2.5em;
}

@media screen and (max-width: 736px) {
.facefv3 h1 {
 font-size: 1.2em;
}
}

.facefv3::before,
.facefv3::after {
    width: 3px;
    height: 40px;
    background-color: #2589d0;
    content: '';
}

.facefv3::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}

.facefv3::after {
    transform: rotate(35deg);
    margin-left: 30px;
}

/*利用シーンイラストと例*/
.facefv3-section {
background: #E6F4F1;
padding-bottom: 30px;
}


.item3-1 {/*左側画像*/
width: 80%;
}

.item3-2 h2{/*テキスト*/
	font-size: 1.5em;
	line-height: 2.0em;

}

@media screen and (max-width: 480px) {
.item3-2 h2{/*テキスト*/
	font-size: 1.3em;
}
.item3-2{
	text-align: center;
}
}

.item3-2 span:before {
content:"◆";
color:#5E78C2;
font-weight:bold;
}


/*接続方法*/
.facefv4parent{/*PoE給電の親ブロック*/
text-align: center;
}

.facefv4{/*PoE給電見出しの子ブロック*/
display: inline-block;
position: relative;
padding: 0 2.5em;
}

.facefv4::before,/*見出し背景*/
.facefv4::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 45px;
    height: 3px;
    background-color: #2589d0;
	  margin: 0 auto;
}
.facefv4::before {
    left: 0;
}

.facefv4::after {
    right: 0;
}


.facefv4 h1{ /*見出し文字の大きさ*/
 font-size: 2em;
}
/*POE接続方法*/
.facefv4-1 {/*青色見出し*/
    display: inline-block;
    position: relative;
    padding: .5em 1.4em .5em 1em;
    background-color: #add8e6;
}

@media screen and (max-width: 736px) {
.facefv4-1 {
margin: 0 auto;
}
.facefv4::before,/*見出し背景青線*/
.facefv4::after {
display: block;
content: '';
position: absolute;
    top: 50%;
    width: 30px;
    height: 3px;
    background-color: #2589d0;
	  margin: 0 auto;
}
}

.facefv4-1 ::before {
    position: absolute;
    bottom: -1px;
    right: 9px;
    z-index: -1;
    transform: rotate(5deg);
    width: 70%;
    height: 50%;
    background-color: #d0d0d0;
    content: "";
    filter: blur(4px);
}

.facefv4-1 h1{
 font-size: 1.8em;
}

.facefv4-2{
 font-size: 1.4em;
 padding: 2em;
}

/*※共有元となる～文言*/
.facefv4-4{
 font-size: 1.4em;
 padding: 0 2em;
}

.facefv4-2 span,
.facefv5-2 span{
color: #87ceeb;
}

/*APIやSDK接続方法*/
.facefv5-1 {/*黄色見出し*/
    display: inline-block;
    position: relative;
    padding: .5em 1.4em .5em 1em;
    background-color: #ffffe0;
}

.facefv5-1 ::before {
    position: absolute;
    bottom: -1px;
    right: 9px;
    z-index: -1;
    transform: rotate(5deg);
    width: 70%;
    height: 50%;
    background-color: #d0d0d0;
    content: "";
    filter: blur(4px);
}

.facefv5-1 h1{
 font-size: 1.8em;
}

.facefv5-2{/*文章*/
 font-size: 1.4em;
 padding: 2em;
}
/*product料金表*/
.facefv6 {
    padding: .5em .7em;
    border: 2px solid #2589d0;
    box-shadow: 5px 5px #2589d0;
    color: #2589d0;
    text-align: center;
	  font-size: 1.5em;
}


/*販売数量によってお値引きが可能な場合がございます*/
.facefv7 span:before{
content:"◆";
color:#5E78C2;
font-weight:bold;
}
.facefv7 span:after{
content:"◆";
color:#5E78C2;
font-weight:bold;
}

/*お問い合わせはこちらボタン*/
a.btn_04 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 20%;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #2589d0;
	background: #2589d0;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
}
a.btn_04:hover {
	color: #2589d0;
	background: #fff;
}

@media screen and (max-width: 1600px) {
a.btn_04 {
width: 80%;	
}
 }





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


/*Font Awesome*/

.size{
  font-size:1.8em; /*1.5倍にする*/
  color:#d4a850; /*goldにする*/
}


/*－－－－－－－－－－PC表示－－－－－－－－－－*/

.cp_hr02 {
	border-width: 2px 0 0 0;
	border-style: dotted;
	border-color: #dbb767;
}

p.test {
    font-size: 28px;
    font-weight: bold;
	color: #d4a850;
	text-shadow: 1px 2px 3px #fae5b6;
    }


#contact {
    font-size: 32px;
    font-weight: bold;
	color:#000;
    }


/*トップへ戻る*/
.go-to-top-button {
    width:  50px;
    height: 50px;
    border-radius: 50%;
    background-color: #000033;
    color: white;
}

.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}

/*固定ページの著者情報を消す場合*/
.page .author-info {
    display: none;
}

/*投稿ページの著者情報を消す場合*/
.post .author-info {
    display: none;
}

/*固定ページタイトル非表示*/
.page h1.entry-title{
display:none;
}

/*---------------------------------
複数の固定ページの日付を非表示にする
--------------------------------*/
.post-2 .date-tags,
.post-15 .date-tags,
.post-17 .date-tags,
.post-11 .date-tags,
.post-22 .date-tags,
.post-8 .date-tags,
.post-33 .date-tags,
.post-38 .date-tags,
.post-40 .date-tags {
  display: none;
}

/*画像キャプション*/
.wp-block-image figcaption{
font-size: 18px;
}

.change-area {
    background: #f8f9fc;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
}

@media screen and (max-width: 560px) {
	/* 560px以下*/
    /* スマホ向けのものを記述 */
	
p.test {
    font-size: 24px;
    font-weight: bold;
}
	

/*スライド*/

.navi-menu-content {
	background: url("http://yubeshi.moo.jp/wp-content/uploads/2022/01/mobile-scaled.jpg") top left;
	background-attachment: fixed;
}

	
}

.change-area {
    background: #fff;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
}

.change-area2 {
	display: inline-block;
    background: none;
	width: 80%;
}



/*－－－－－－－－－－メール－－－－－－－－－－*/



/* Contact Form 7 */

/* 必須マーク */
.must{
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #f58694; /* 背景色 */
	border-radius: 5px;
}

/* 任意マーク */
.free {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #7fbfff; /* 背景色 */
	border-radius: 5px;
}

/* 項目名を太字にする */
form p {
	font-weight: 600;
}

/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #d0d5d8; /* 枠線の色 */
	border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}



/* 送信ボタンを見やすくする */
input.wpcf7-submit {
	width: 40%; /* 好みで60〜80%でもOK */
	height: 40px;
	border-color: #ffab4a; /* 枠線の色 */
	background: #ffab4a; /* ボタンの色 */
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	border-radius: 7px;
}

input.wpcf7-submit:hover {
	width: 40%; /* 好みで60〜80%でもOK */
	height: 40px;
	border-color: #ffc787; /* 枠線の色 */
	background: #ffc787; /* ボタンの色 */
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	border-radius: 7px;
}



/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}




/* ――――――――――――――フッター―――――――――――――― */
.footer-bottom {
  margin-top: 14px; /*フッター内上部の余白を詰める*/
}
.footer-bottom-logo { /*ロゴの位置調整*/
  float: none;
  bottom: auto;
  position: static;
  margin-bottom: 10px;
}
.footer-bottom-logo .logo-image {
  padding: 0;
  margin: 0 auto;
}
.footer-bottom-content { /*メニュー＆クレジットの位置調整*/
  float: none;
  text-align: center;
}
input.wpcf7-submit {
	width: 100px;
	height: 50px;
}
input.wpcf7-submit:hover {
	width: 100px;
	height: 50px;
}
@media screen and (max-width: 560px) {
	span.price{
  font-size: 20px;
}
	
	span.price2{
  font-size: 12px;
}
	
	
span.price3{
  font-size: 20px;
}

span.price4{
  font-size: 20px;
  color: #f34955;
}

span.price5{
  font-size: 10px;
  color: #696969;
}

span.price6{
  font-size: 10px;
  color: #696969;
}

.button_green{
  background-color: #25b327;
  color: white;
  padding:5px 20px;
  border-radius: 30px;
  font-size: 20px;
  font-weight: bold;
  text-decoration:none;
}

.button_green:hover{
  background-color: #8de38e;
  color: white;
  padding:5px 20px;
  border-radius: 30px;
  font-size: 20px;
  font-weight: bold;
  text-decoration:none;
}
	
}

/* ――――――――――――――ｓｐ改行―――――――――――――― */

/* 769pxより大きい画面（タブレット・PC） */
@media only screen and (min-width: 769px) { 
.sp {
display: none;
 }
.pc {
display: block;
 }
}

/* 768pxより小さい画面（スマホ）*/
@media only screen and (max-width: 768px) { 
.sp {
display: block;
 }
.pc {
display: none;
 }
}

/* ――――――――――――――脆弱性診断背 　景テスト―――――――――――――― */
/* 横幅めいっぱい水色背景（webfv4セクション用） */
.webfv4section {
  margin: 0 calc((100% - 100vw) / 2);
  background: #eff7ff; /* ← 好きな色に変更可能 */
  padding: 1.5em;
}



/* ===== 問い合わせボタン（Tmail & 脆弱性診断のみ適用）===== */
/* ページID: 4488（/tmail/）、4731（/vulnerability/） */
.page-id-4488 .btn-circle-stitch,
.page-id-4731 .btn-circle-stitch {
  display: inline-block;
  text-decoration: none;
  background: #87befd;
  color: #FFF;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 0 0 5px #87befd;
  border: dashed 1px #FFF;
  transition: .4s;
}

.page-id-4488 .btn-circle-stitch:hover,
.page-id-4731 .btn-circle-stitch:hover {
   background: #668ad8;
  box-shadow: 0 0 0 5px #668ad8;