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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/******************************************Tmail（標的型メール攻撃訓練）*****************************************/

/* 背景ビデオ */
#bg-mail_video {
  width: 100%;
  height: auto;
}

/* Tmailタイトルスタイル */
.Tmail_title h1 {
  font-size: 4em;
  text-align: center;
  color: #05294d;
}

.Tmail_title h1 span {
	display: flex;
	align-items: center;
	justify-content: center; /* テキストを中央に配置 */
	color:  #805e08;
	font-size: 0.3em;
	text-transform: uppercase;
}

@media screen and (max-width: 480px) {
.Tmail_title h1{
 font-size: 2em;
}
}

/* 会社や従業員をサイバー攻撃から守りませんか */
.Tmail_title{
 margin-bottom: 2em;
}

.box-Tmai-title h1{
	font-size: 1.5em;
	text-align: center;
	color: #05294d;
}

/* サイバー攻撃文字色、大きさ */
.box-Tmai-title h1 span {
	color: #cc0c2c;
	font-size: 1.5em;
	display: inline; /* 折り返さない */
}


.box-Tmail {
  margin:3em auto;
  padding: 2em;
  border-radius: 10px;
  background-color: #05294d;
  box-shadow: 2px 2px 8px gray;
}

.box-Tmail p {
	color: #ffffff;
}


@media screen and (max-width: 480px) {
.box-Tmai-title｛
　display: inline-block;
	｝
.box-Tmai-title h1,
.box-Tmai-title h1 span	{
  font-size: 1em;
}
}

/*************効果セクション**************************/
/*******効果リスト**************************/
.list {
  list-style: none;
  padding: 0 .8em .5em;
  position: relative;
  font-weight: bold;
}
.list li {
  border-bottom: 1px dashed #b9b9b9;
  margin-top: 10px;
  padding: .5em 0 .5em 2em;
  font-size: 1.2em;
}
.list li:before {
  color: #99bdde;
  content: "\f138";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  left : 1em;
  margin: 3px 0;
  position: absolute;
}

/*******導入効果見出し**************************/
.kouka h1 {
  font-weight: bold;
  padding: 0 3em;
  width: fit-content;
  margin: 1.5em auto;
  text-align: center;
  position: relative;
  font-size: 2em;
}
.kouka h1::before, .kouka h1::after {
  content: '';
  background: #4c9ac0;
  width: 2em;
  height: 3px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.kouka h1::before {
  left: 0;
}
.kouka h1::after {
  right: 0;
}
@media screen and (max-width: 480px) {
.kouka h1{
 font-size: 1.5em;
}
}


/* ニーズセクション */
/* ニーズに合わせたプラン選択セクションのスタイル */
.needs h1 {
	font-size: 3em;
    text-align: center;
	color: #05294d;
	margin-top: 100px;
}

.needs h1 span {
	display: flex;
	align-items: center;
	justify-content: center; /* テキストを中央に配置 */
	color: #805e08;
	font-size: 0.4em;
	text-transform: uppercase;
	margin-bottom: 50px;
}
/* プラン情報見出しレスポンシブ */
@media screen and (max-width: 480px) {
.needs h1{
 font-size: 2em;
}
}



/******************* 価格表スタイル ******************/
/* 価格表セクションのスタイル */

.price_table table {
  width: 100%; /* 表の幅をページ全体に広げる */
  border-collapse: collapse; /* セルの境界線を1本にする */
  margin-top: 2rem; /* 表の上部の余白 */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* 影をつけて立体感を出す */
  font-size: 1em; /* 表全体のフォントサイズを1.5emに統一 */
  font-weight: bold; /* サービス列のテキストを太字に */
  table-layout: fixed;
}

/* ヘッダーのスタイル */
.price_table th {
  background-color: #05294d; /* ヘッダーの背景色 */
  color: white; /* ヘッダーの文字色 */
  padding: 1rem; /* ヘッダー内の余白 */
  font-size: 1.2em;
}

/* セルのスタイル */
.price_table td {
  padding: 1rem; /* セル内の余白 */
  text-align: center; /* テキストを中央揃えにする */
  border-bottom: 1px solid #ddd; /* 下線のスタイル */
}

/* セルフサービス列のスタイル */
.price_table td:nth-child(2){
  background-color: #d1e1f1; /* サービス列の背景色 */
  font-weight: bold; /* サービス列のテキストを太字に */
}

/* フルマネージドサービス列のスタイル */
.price_table td:nth-child(3){
  background-color: #ffe599; /* サービス列の背景色 */
  font-weight: bold; /* サービス列のテキストを太字に */
}
/* コスト部分の赤文字 */
.price {
 color: #cc0c2c;
 font-size: 1.2em;
}

/* 価格表モバイルスクロール対応 */
@media screen and (max-width: 768px) {/*768px以下*/
  .price_table{
   overflow-x : scroll;
  }
  .price_table table {
   min-width: 800px; /* この値はテーブルの幅を調整するためのものです。適宜変更してください */
  }
}

/*************************サービスの流れ*************/
/* サービスの流れ見出し */
.sc_title h1 {
  font-size: 3em;
  text-align: center;
  color: #05294d;
  margin-top: 100px;
}

/* サービスの流れ見出し英文 */
.sc_title h1 span {
  display: flex;
  align-items: center;
  justify-content: center; /* テキストを中央に配置 */
  color: #805e08;
  font-size: 0.4em;
  text-transform: uppercase;
  margin-bottom: 50px;
}

@media screen and (max-width: 480px) {
.sc_title h1{
 font-size: 2em;
}
}



/*************************サービスの流れ_比較表*********** */
/* サービスコンテナ */
.services-container {
  display: flex; /* 子要素をflexboxとして配置 */
  flex-direction: row; /* 子要素を横に並べる */
  justify-content: space-between; /* 子要素を均等に配置 */
  width: 100%; /* コンテナの幅いっぱいに広げる */
  margin-top: 2em; /* 上部に余白を設定 */
}



/* セルフサービスとフルマネージドサービスの共通スタイル */
.self_service,
.full_managed_service {
  flex-basis: calc(50% - 20px); /* 子要素の幅を計算して設定 */
  padding: 0.5em; /* 内側の余白を設定 */
  position: relative; /* 相対位置を設定 */
}

/************************* セルフサービスセクション ***********/
.self_service {
  background-color: #d1e1f1; /* セルフサービスの背景色 */
  padding-left: 5%; /* 内側の余白を設定 */
  padding-right: 5%; /* 内側の余白を設定 */
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%); /* ドッグイヤーの要素を追加 */
}

.self_service h1,
.self_service ol li {
  font-weight: bold; /* テキストを太字に */
  color: #05294d;
}

.self_service p{
  font-weight: bold; /* テキストを太字に */
}
/**************** フルマネージドサービスセクション ***********/
.full_managed_service {
  background-color: #ffe599; /* フルマネージドサービスの背景色 */
  padding-left: 5%; /* 内側の余白を設定 */
  padding-right: 5%; /* 内側の余白を設定 */
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0% 100%); /* ドッグイヤーの要素を追加 */
}

.full_managed_service h1,
.full_managed_service ol li {
  font-weight: bold; /* テキストを太字に */
  color: #05294d;/* 視認性を高めるための色 */
}

.full_managed_service p{
  font-weight: bold; /* テキストを太字に */
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
.services-container {
	flex-direction: column; /* 子要素を縦に並べる */
  }
.self_service,
.full_managed_service {
  clip-path:none; /* ドッグイヤーの要素を追加 */
}
}

/**************** 問い合わせ *********/
.contact a{
  font-size: 2em;
  margin-top: 50px; /* 上の要素から20pxのマージン */
  margin-left:  auto; /* 左右のマージンを自動で中央揃え */
  margin-right:  auto; /* 左右のマージンを自動で中央揃え */
  color: white; /* 文字色を白に */
  font-weight: bold; /* 文字の太さ */
  max-width: 350px; /* ボタン幅 */
  display: block; /* ブロックレベル要素として表示 */
  text-align: center; /* テキストを中央揃え */
  padding: 10px 20px; /* 上下左右のパディング */
  background-color: #05294d; /* ボタンの背景色を濃い青色に */
  border: none; /* ボーダー無し */
  text-decoration: none; /* テキストの下線を無しに */
  transition: background-color 0.3s, transform 0.3s; /* 背景色と変形のトランジション効果 */
  border-radius: 30px; /* 角の丸み */
}



/* マウスオーバー時 */
.contact a:hover {
    background-color: #d1e1f1;
    color: #000000;
    cursor: pointer;
}


@media screen and (max-width: 480px) {
.contact a{
 font-size: 1em;
}
}


/* PC画面用のスタイル */
@media screen and (min-width: 800px) {
  /* ここにPC画面用のスタイルを追加 */
  .custom-style {
    margin: 0 auto; /* 左右余白を中央に寄せる */
    padding: 0 20px; /* 左右の余白を追加 */
    max-width: 1200px; /* 最大幅を指定 */
  }
}

/* スマートフォン画面用のスタイル */
@media screen and (max-width: 799px) {
  /* ここにスマートフォン画面用のスタイルを追加 */
  .custom-style {
    margin: 20px; /* コンテンツ全体の周囲の余白 */
  }
}





/******************************************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%;	
}
 }

/******************************************脆弱性診断*****************************************/
.webfv span{
color: #00205C;
font-size: 2em;
line-height:1.5em;
background: linear-gradient(transparent 50%, #ffff7f 50%);
}
/*日々の様々なサイト～*/
.webfv h2{
line-height:2em;
font-size: 1.0em;
}
@media screen and (max-width: 736px) {
.webfv span{
font-size: 1.0em;
}

.webfv h2{
line-height:1.5em;
font-size: 0.8em;
}
}

/* アコーディオンメニュー */
.ac-menu span{
color: #ff0000; /* 文字色 */
}
.ac-menu{
  margin: 1.5em; /* 外の余白*/
}
.ac-menu input {
  display: none;
}
.ac-menu label {
  color: #2589d0; /* 文字色 */
  font-size: 1.5em; /* 文字サイズ */
  line-height: 2; /* 行間 */
  font-weight: bold; /* 文字を太く */
  text-align: center; /* 文字を中央に */
  background: #ffffff; /* 背景色 */
  padding: 20px; /* 内側の余白 */
  cursor: pointer;
  position: relative;
  display: block;
  border-radius: 5px; /* 角を丸く */
	border: 3px solid #2589d0;
	margin: 1em; /* 外の余白*/
}
.ac-menu label:after {
  position: absolute;
  right: 20px; /* 左からの距離 */
  top: 50%; /* 上下中央配置 */
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
  content: "＋"; /* アイコン */
}
.ac-menu input:checked ~ label::after {
  content: "−"; /* クリック後のアイコン */
}
/* 開け閉め部分 */
.ac-menu div {
  height: 0;
  overflow: hidden;
  opacity: 0;
	transition: transform .5s, opacity .5s;
}
.ac-menu input:checked ~ div {
  height: auto;
  opacity: 1;
  padding: 20px; /* 中身の枠内の余白 */
  background: #DBEFED; /* 中身の背景色 */
　border-radius: 5px; /* 角を丸く */
}
.ac-menu-inside {
  color: #696969; /* 中身の文字色 */
  font-size: 1.5em; /* 中身の文字サイズ */
  line-height: 2; /* 行間 */
}
@media screen and (max-width: 736px) {
.ac-menu label {
  font-size: 1em; /* 文字サイズ */ 
}
.ac-menu{
  margin: 1em; /* 外の余白*/
}
	
.ac-menu label:after {
  position: absolute;
  right: 12px; /* 左からの距離 */
  top: 50%; /* 上下中央配置 */
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
  content: "＋"; /* アイコン */
}
}

/*無料診断*/
.pay1 {
    width: 33%;
	  margin: 1%;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.pay1 .box-title {
    font-size: 1.5em;
    background: #a9a9a9;
    padding:-top 6px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.pay1 p {
    padding: 15px 20px;
    margin: 0;
}


/*Web健康診断 Standard*/
/*王冠アイコン*/
.fa-crown{
color: #ffff00;
}

.pay2{
 width: 33%;
	  margin: 1%;
	  background: #f0f8ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

.pay2 .box-title {
    font-size: 1.5em;
    background: #5fc2f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.pay2 p {
    padding: 15px 20px;
    margin: 0;
}

/*Web健康診断​ Expert*/
.pay3{
    width: 33%;
	  margin: 1%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

.pay3 .box-title {
    font-size: 1.5em;
    background: #00205C;
    padding: 4px;
    text-align: center;
    color: #fff;
    font-weight: bold;
	  letter-spacing: 0.05em;
}
.pay3 p {
    padding: 15px 20px;
    margin: 0;
}

.paysection h2{
 text-align: center;
 padding-top: 1.5em;
 padding-bottom: 0;
}

.paysection h2 span{
 font-size: 0.8em;	
}

.paysection{
display: flex;
}
/*料金表のレスポンシブ****************/
@media screen and (max-width: 768px) {
.paysection{
display: block;
}
.pay1,
.pay2,	
.pay3{
width: auto;
margin-bottom: 1.5em;
}
 }


/*診断の流れ*/
.webfv2 {
    background-color: #acd2e6;
    color: #00205C;	 
	  width: 80%;
	  margin: 0 auto;
}
/*診断の流れコンテナーレスポンシブ幅*/
@media screen and (max-width: 768px) {
.webfv2 {
  width: auto;
	}
}

/*診断フロー⑤のアイコン④*/
.icon10 {
  background-color: #00205C;
  border-radius: 50%;
  text-align: center;
  box-sizing: border-box;
  padding: 0.3em 0.8em;
	margin: 0.5em;
	color: #fff;
}


.webfv2 h1{
	 padding: 2em 0;
	 font-size: 2em;
   text-align: center;
}

.webfv2-1{
 margin:2em;
 text-align: right;
  font-size: 0.9em;
	
}

.flow_design03 {
  display: flex;
  margin-left: 20px;
	justify-content: center;
}

.flow_design03 ul {
  padding: 0;
}

.flow_design03 li {
  list-style-type: none;
}

.flow_design03 dd {
  margin-left: 0;
}

.flow03 {
  position: relative;
}

/*白い線*/
.flow03::before {
  content: "";
  width: 15px;
  height: 100%;
  background: #eee;
  margin-left: -129px;
  display: block;
  position: absolute;
  top: 0;
  left: 120px;
  border-radius: 20px;
}

.flow03 > li {
  position: relative;
}

.flow03 > li:not(:last-child) {
  margin-bottom: 60px;
}

/*番号*/
.flow03 > li .icon03 {
  font-size: 1.1em;
  width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  border-radius: 100vh;
  color: #fff;
  background: #00205C;
  display: inline-block;
  margin-right: 0.3em;
}
/*白線とフロー文章との隙間*/
.flow03 > li dl {
  padding-left: 70px;
  position: relative;
}

.flow03 > li dl::before,
.flow03 > li dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}



/*点線*/
.flow03 > li dl::after {
  width: 50px;
  border-bottom: 1px dashed #999;
  position: absolute;
  left: 5px;
}

/*点線レスポンシブ*/
@media screen and (max-width: 768px) {
.flow03 > li dl::after {
  width: 26px;
  left: 5px;
}
/*白線とフロー文章との隙間*/
.flow03 > li dl {
  padding-left: 32px;
  position: relative;
 }
}


/*診断フロー子見出し部分*/
.flow03 > li dl dt {
  font-size: 1.3em;
  font-weight: 600;
  color: #00205C;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
}



/*securelinkの特徴セクション*/
.webfv1section{
margin: 0 calc((100% - 100vw) / 2);
background: #DBEFED;
padding: 1.5em;
}

.webfv1{
    display: inline-block;
    position: relative;
    padding: 0 2.5em;
    color: #333333;
	  font-size: 2.2em;
}

.webfv1::before,
.webfv1::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 45px;
    height: 3px;
    background-color: #2589d0;
}

.webfv1::before {
    left: 0;
}

.webfv1::after {
    right: 0;
}

@media screen and (max-width: 769px) {
.webfv1{/*securelinkの特徴*/
font-size: 1.3em;
}
.webfv1::before,
.webfv1::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 30px;
    height: 3px;
    background-color: #2589d0;
}
}

@media screen and (max-width: 480px) {
.webfv1{/*securelinkの特徴*/
font-size: 1.0em;
}
}

.webfv3 {
    padding: 1em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #2589d0;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
	  font-size: 1.1em; 
    width: 80%;
}
.webfv3 span{
 color: #ff0000;/*文字色*/
}

/*お問い合わせボタン*/
.button-032 a{
    background: #eee;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    box-shadow: 5px 5px 0 #acd2e6;
	width: 60%;
}
.button-032 a:hover {
  background-color: #acd2e6;
  box-shadow: 0 0 0;
  transform: translate(5px, 5px);
}

/*お問い合わせボタン480px以下は幅90％*/
@media screen and (max-width: 480px) {
.button-032 a{
 width: 90%;
}
}


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


/*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;
 }
}