/*
***************************************特集ページ・お問い合わせ・aboutページ・プライバシーポリシー全体***************************************
***************************************特集ページ・お問い合わせ・aboutページ・プライバシーポリシー全体***************************************
***************************************特集ページ・お問い合わせ・aboutページ・プライバシーポリシー全体***************************************
*/
.page_main_area{
padding-top: 1px;
width: 99.5%;
max-width: 850px;
margin: auto;
}
.page_title{
width: 100%;
height: 90px;
margin: 5px auto;
/* background-color: #fff; */
border-radius: 8px;
/* box-shadow: 0.5px 2px 6px rgb(0 0 0 / 60%) inset; */
display: table;
text-align:center;
padding:0 10px 0;
background-image: url(https://webbura.com/img/main/search_back_01.png);
background-color: #f9f9f9;
background-color: #fffefb;
}
.page_content{
text-align: left;
width: 100%;
margin: 0 auto 5px;
padding: 10px 10px 5px;
border-radius: 8px;
/* box-shadow: 0.5px 2px 6px rgb(0 0 0 / 60%) inset; */
background-color: #f9f9f9;
background-color: #fffefb;
}
.page_content_area{
margin: 0 auto 20px;
width: 100%;
max-width: 750px;
}
@media screen and (min-width: 600px){
.page_content_area{
margin: 5px auto 50px;
}
}
/*
***************************************特集ページ・お問い合わせ・aboutページ・プライバシーポリシー全体***************************************
***************************************特集ページ・お問い合わせ・aboutページ・プライバシーポリシー全体***************************************
***************************************特集ページ・お問い合わせ・aboutページ・プライバシーポリシー全体***************************************
*/



/*
***************************************Contact Form 7カスタム***************************************
***************************************Contact Form 7カスタム***************************************
***************************************Contact Form 7カスタム***************************************
*/
/* コメントエリアタイトル作成*/
.wpd-form-head::before {
content: "コメント" ;
text-align: center;
margin: -10px auto 0;
font-size:19px;
}
#wpdcom .wpd-form-head {
padding: 7px 2px 9px 2px;
margin-top: 5px;
margin-bottom: 5px;
}

/*”問い合わせ送信時のロードアニメーションを消す*/
div.wpcf7 .ajax-loader {
display: none !important;
}
/*フォーム入力エリア*/
/*フォーム入力エリア*/
input[name="site-name"],
input[name="site_url"],
input[name="organization-name"],
input[name="department-name"],
input[name="your-name"],
input[name="sns-name"],
input[name="your-email"]{
width: 100%!important;
padding: 5px 10px;
margin: 0 auto;
background-color: #f5f5f5;
border-radius: 8px;
box-shadow: 0.5px 2px 6px rgb(0 0 0 / 30%) inset;
}
textarea[name="contact-address"],
textarea[name="site-point"],
textarea[name="your-message"]{
width: 100%!important;
resize: none;
height:200px;
text-align: left;
background-color: #f5f5f5;
padding:10px;
border-radius: 8px;
box-shadow: 0.5px 2px 6px rgb(0 0 0 / 30%) inset;
margin: auto;
}
select[name="contents_of_question"]{
width: 100%!important;
padding: 5px 10px;
margin: auto;
border-radius: 8px;
background-color: #f5f5f5;
box-shadow: 0.5px 2px 6px rgb(0 0 0 / 30%) inset;
cursor: pointer;
}
input[name="accept-this"]{
width: 20px;
height:20px;
background-color: #f5f5f5;
border-radius: 10px;
cursor:pointer;
}
/*フォーム全体*/
.form_mane_area{
max-width: 98%;
box-sizing: border-box;
margin: 10px auto;
padding: 5px 5px 1px;
border-radius: 8px;
border: solid 2px #9acece;
}
.form_mane_area span{
font-weight:normal;
margin: auto;
}

/*フォームブロック*/
.form_sub_area{
width: 99%;
margin: auto;
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction: row;
border-bottom: 1px solid #ddd;
}
.form_check_area {
width: 99%;
margin: auto;
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction: row;
border-bottom: 1px solid #ddd;
}
.form_check_area > p {
width: 100%;
margin: 0 auto 10px;
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.form_sub_area:first-of-type {
border-top: 1px solid #ddd;
margin-top: 15px;
}
.form_sub_area2{
width: 100%;
margin: 15px auto 0px;
text-align: center;
}
.form_mane_area p{
margin:auto;
}
/*フォームブロック内解説エリア*/
.title_area{
width: 100%;
margin: 15px auto 10px;
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction: row;

}
/*フォームブロック内入力エリア*/
.input_area{
width: 100%;
margin: 0 auto 20px;
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.checkbox_area{
width: 100%;
margin: -10px auto 10px;
padding: 0 10px;
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction: row;
text-align:left;
}
.input_area span{
width: 100%;
font-size:15px;
}
.checkbox_area span{
width: auto;
font-size:15px;
margin: 0 10px 0 0;
}
.wpcf7-not-valid-tip {
margin: 10px auto 0;
}
/*フォーム送信ボタン*/
/*フォーム送信ボタン*/
.form_end_btn_area{
margin: 10px auto;
text-align: center;
}
.form_end_btn{
font-size:15px;
margin: 10px auto;
text-align: center;
padding: 10px 10px 14px;
border-radius: 10px;
box-shadow: 0.5px 2px 6px rgb(0 0 0 / 0) inset;
transition: all 0.3s 0s ease;
}
.form_end_btn_shadow{
width: 65%;
padding: 5px 0 8px;
border-radius: 10px;
transition: all 0.3s 0s ease;
transform: translateY(0);
box-shadow: 0 3px 6.5px -1px rgb(0 0 0 / 40%);
}
.form_end_btn_shadow:active{
transition: all 0.3s 0s ease;
transform: translateY(2px);
box-shadow: 0 3px 6.5px -1px rgb(0 0 0 / 0%);
}
/*フォームのデフォルトｃｓｓの修正*/
.form_end_btn_shadow span{
width: 0;
height: 0;
padding: 0;
margin: 0;
}
.wpcf7-list-item {
margin:0;
}
/*フォーム文字*/
.title_area span{ 
border-radius: 5px;
margin-right: 8px;
width: 43px;
display: inline-block;
text-align: center;
background: #f78989;
color: #fff;
padding: 1px 0 2px;
}
.title_area .voluntary{ 
background: #5bc8ac;
}
.form_mane_area h3 {
padding-bottom: 1px;
font-size:17px;
text-align: center;
margin:15px auto 10px;
}
.form_mane_area h3:first-letter {
font-size: 22px;
color: #3e98a1;
}
.title_area p{
width: 100%;
font-size:16px;
margin: auto 0 auto 10px;
text-align: left;
}
p.foam_sub_title {
font-size: 14px;
}
span.t_mini{
font-size:12px;
display: inline-block;
}
p.accept_message{
margin: 5px auto;
font-size: 15px;
line-height: 17px;
}
.form_mane_area .input_area p{
width:100%;
}
.image_input_area p{
margin: auto auto 10px;
}
.image_input_area{
margin: 20px auto 40px;
}
p.foam_sub_comment{
width: 100%;
font-size: 16px;
margin: 0 auto auto;
text-align: center;
}
.check_main_area p{
margin-top: 10px;
}
.check_main_area p:last-of-type{
margin: 10px auto 40px;
}
.check_main_area{
margin: auto;
}
@media screen and (min-width: 600px){
.form_mane_area h3 {
font-size:19px;
}
.form_mane_area h3:first-letter {
font-size: 24px;
}
}
@media screen and (min-width: 650px){
/*フォーム送信ボタン*/
/*フォーム送信ボタン*/	
.form_end_btn_shadow:hover{
transition: all 0.3s 0s ease;
transform: translateY(2px);
box-shadow: 0 3px 6.5px -1px rgb(0 0 0 / 0%);
}
.form_end_btn_shadow:active{
box-shadow: 0 3px 6.5px -1px rgb(0 0 0 / 0%);
}
.form_end_btn:active {
box-shadow: 0.5px 2px 6px rgb(0 0 0 / 60%) inset;
transition: all 0.3s 0s ease;
}
}
@media screen and (min-width: 720px){
/*フォーム全体*/
.form_mane_area{
max-width: 98%;
margin: 10px auto;
padding: 5px 5px;
}
/*フォームブロック内解説エリア*/
.title_area{
width: 35%;
margin: auto;
padding: 10px 0;
}
/*フォームブロック内入力エリア*/
.input_area{
width: 65%;
margin: 10px auto ;
}
.checkbox_area{
width: 65%;
margin: 10px auto ;
}
p.foam_sub_title {
text-align: center;
margin: auto 20px;
}
.check_main_area p,
.check_main_area p:last-of-type{
margin:  auto ;
}
.check_main_area {
width: 65%;
}
.form_check_area > p{
width: 65%;
margin: 10px auto;
}
}
/*
***************************************Contact Form 7カスタム***************************************
***************************************Contact Form 7カスタム***************************************
***************************************Contact Form 7カスタム***************************************
*/



/*
***************************************aboutページ（WEBぶらとは）で使用***************************************
***************************************aboutページ（WEBぶらとは）で使用***************************************
***************************************aboutページ（WEBぶらとは）で使用***************************************
*/
/*ブロックごと*/
.container_00 {
width: 100%;
max-width: 850px;
margin: 20px auto;
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction: row;
position: relative;
}
.container_00 div {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #000;
background-color: #ffffffd4;
width: auto;
height: 100%;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-align: left;
padding: 5px 15px;
}
.container_00 div p {
font-size:16px;
line-height: 1.5;
margin: 10px auto 0px;
}
.container_00 div h5 {
font-size: 18px;
margin-top: -1px;
margin-left: 3px;
}
@media screen and (min-width: 400px){
.container_00 div {
padding:15px;
}
.container_00 div p {
font-size:18px;
line-height: 1.5;
}
.container_00 div h5 {
font-size: 23px;
margin-top: -5px;
margin-left: 3px;
}
}

.container_01 {
width: 100%;
max-width: 850px;
margin: 20px auto;
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.container_03,.container_0{
width: 100%;
max-width: 850px;
margin: 20px auto;
}
/*テキストエリア*/
.container_text_area{
text-align: left;
display: inline-block;
margin: 0 auto;
vertical-align: top;
}


.container_01 .container_text_area,
.container_02 .container_text_area{
width: 100%;
order: 1;
}
.container_02{
width: 100%;
background-image: url(https://webbura.com/img/main/robo_icon_about02_02.png);
background-position: center;
background-repeat:  no-repeat; 
background-size:  60% auto; 
}
.container_03{
width: 100%;
background-image: url(https://webbura.com/img/main/robo_icon_about_03.png);
background-position: center;
background-repeat:  no-repeat; 
background-size:  60% auto; 
}
/*画像エリア*/
.container_00 img {
width: 100%;
min-height: 170px;
}
.container_01 .image_area{
width: 100%;
display: inline-block;
margin: auto;
vertical-align: top;
order: 2;
}
.container_02 .image_area{
display:none;
}
.sub_about_imag{
width: 100%;
max-width: 180px;
}
@media screen and (min-width: 350px){
/*ブロックごとに分割*/
.container_01 , .container_02{
width: 100%;
margin: 25px auto;
}

/*テキストエリア*/

.container_02 .container_text_area,
.container_03 .container_text_area{
width: 100%;
background-size: 50% auto; 
}

/*画像エリア*/

.container_02 .image_area{
width: 100%;
margin: auto;
}
.container_03 .image_area{
width: 100%;
margin: auto;
}

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

.container_02 {
width: 100%;
margin: 25px auto;
width: 100%;
max-width: 850px;
margin: 20px auto;
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction: row;
background-image: none;
}

.container_02 .container_text_area{
width: 70%;
order: 1;
}
.container_02 .image_area {
width: 29%;
display: inline-block;
margin: auto;
vertical-align: top;
order: 2;
}
.container_02 .container_text_area {
width: 70%;
order: 1;
}

}
/*
***************************************aboutページ（WEBぶらとは）で使用***************************************
***************************************aboutページ（WEBぶらとは）で使用***************************************
***************************************aboutページ（WEBぶらとは）で使用***************************************
*/



/*
***************************************requestページ（サイト掲載をご希望される方へ）で使用***************************************
***************************************requestページ（サイト掲載をご希望される方へ）で使用***************************************
***************************************requestページ（サイト掲載をご希望される方へ）で使用***************************************
*/
/*掲載の流れ紹介ブロック*/
.request_route_frame{
height: 100%;
background-color: #f7f7f7;
text-align: left;
padding: 5px;
border-radius: 10px;
border: solid #dcdcdc;
}
.request_route_frame:after {
position: absolute;
top: 0;
left: 0;
content: attr(data-title);
font-size: 23px;
padding: 16px 16.5px;
color: #0e0e0e;
}
.request_route_sub_area {
position: relative;
padding: 5px 0;
max-width: 350px;
margin: auto;
}
.request_route_sub_area img{
width: 100%;
}
.request_route_sub_area p{
font-size:15px;
}
@media screen and (min-width: 500px) {
.request_route_main_area{
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

.request_route_sub_area{
max-width: none;
margin: 0;
-webkit-flex-grow: 1;
flex-grow: 1;
width: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 5px;
}
}
/*
***************************************requestページ（サイト掲載をご希望される方へ）で使用***************************************
***************************************requestページ（サイト掲載をご希望される方へ）で使用***************************************
***************************************requestページ（サイト掲載をご希望される方へ）で使用***************************************
*/



/*
***************************************特集ページで使用***************************************
***************************************特集ページで使用***************************************
***************************************特集ページで使用***************************************
*/
/* ***************************************特集記事上部タグエリア*************************************** */
.special_tag_area {
text-align : right;
margin : -3px auto 2px;
}
.special_tag_area ul {
width : 95%;
width : calc(100% - 20px);
width : calc(100% - 20px);
margin : 0 auto;
padding : 2px;

}
.special_tag_area ul li {
display : inline-block;
margin : 2px 5px;
padding : 0;
height: 26px;
border-radius : 6px;
background-color: #fffefb;
}
.special_tag_area ul li a {
position : relative;
display : inline-block;
max-width : 100px;
height : 25px;
line-height : 25px;
padding : 0 5px 26px;
white-space : nowrap;
text-overflow : ellipsis;
overflow : hidden;
font-size : 14px;
text-decoration : none;
transition : all 0.3s 0s ease;
border-radius : 6px;
box-shadow : 0 1px 3px 1px rgb(0, 0, 0, 0.3);
}
.special_tag_area ul li a:active {
box-shadow : 0 0 0 rgb(0, 0, 0, 0);
transition : all 0.3s 0s ease;
}
@media screen and (min-width: 650px) {
/*特集記事上部タグエリア*/
.special_tag_area ul li {
box-shadow : 0.5px 2px 3px rgb(0, 0, 0, 0) inset;
transition : all 0.3s 0s ease;
}
.special_tag_area ul li:active {
box-shadow : 0.5px 2px 3px rgb(0, 0, 0, 0.2) inset;
transition : all 0.3s 0s ease;
}
.special_tag_area ul li a:hover {
box-shadow : 0 1px 4px 1px rgb(0, 0, 0, 0);
transition : all 0.3s 0s ease;
}
}
/* ***************************************特集記事上部タグエリア*************************************** */


/* ***************************************おすすめECサイト・他の記事・SNSタイトルエリア*************************************** */

.site_introduction_title_area {
width : 100%;
height : auto;
margin: 5px auto 2px;
position : relative;
display : inline-block;
vertical-align : top;
background-color: #fffefb;
border-radius: 8px;
}
.title_area_size02 {
margin: 5px auto 0px;
}
.site_introduction_title_area p {
margin: 4px auto 0;
padding-bottom: 7px;
font-size: 14px;
text-align: center;
}
.site_introduction_title_area2{
margin: 5px auto 0;
padding-top: 0px;
border-bottom : 1px solid #93cdce;
width: 95%;
position:  relative;
text-align: center;
}
.site_introduction_title_area_img{
width: auto;
height : auto;
padding:0;
position:  relative;
right: 9px;
}
.site_introduction_title_area h2{
display: inline-block;
position: relative;
text-align: center;
margin: auto;
font-size: 13px;
line-height: 15px;
padding-bottom: 3px;
padding-left: 3px;
right: 15px;
}
.site_introduction_title_area h2:first-letter {
font-size : 16px;
color: #3e98a1;
}

@media screen and (min-width: 901px) {
.site_introduction_title_area h2 span {
font-size : 17px;
}
.site_introduction_title_area p {
font-size:14px;
}
}
@media screen and (min-width: 1100px) {
.site_introduction_title_area {
margin: 5px auto 0;
}
}
/* ***************************************おすすめECサイト・他の記事・SNSタイトルエリア*************************************** */


/* ***************************************特集下部SNS エリア*************************************** */
.site_introduction_sns_share_sp {
border-radius: 8px;
height: 100%;
width: 100%;
margin: 0 auto;
padding: 5px 10px 20px;	
background-color: #fffefb;
}
.site_introduction_title_area3{
margin: 0 auto 10px;
padding-top: 0px;
border-bottom : 1px solid #93cdce;
width: 95%;
position:  relative;
text-align: center;
}
.site_introduction_sns_share_sp {
position : relative;
display : inline-block;
vertical-align : top;
padding-bottom:20px;
}
.site_introduction_sns_share_img{
width: auto;
height : auto;
padding:0;
position:  relative;
right:7px;
}
.site_introduction_sns_share_sp h2{
display: inline-block;
position:  relative;
text-align: center;
margin : auto;
font-size : 13px;
line-height : 15px;
padding-bottom : 3px;
padding-left : 3px;
right:15px;
}
.site_introduction_sns_share_sp h2:first-letter {
font-size : 16px;
color: #3e98a1;
}
/*特集下部SNSボタン*/
.social_icons {
display: flex;
width:100%;
max-width:315px;
margin: 5px auto -5px;
justify-content: center;
align-items: center;
}
.icon_shadow {
display: flex;
position: relative;
width: 40px;
height: 40px;
margin: 5px auto;
border-radius: 15%;
cursor: pointer; 
font-size: 35px;
transition: all 0.3s 0s ease;
box-shadow: 0 3px 7px -1px rgb(0 0 0 / 50%);
}
.icon_shadow:hover {
transition: all 0.3s 0s ease;
box-shadow: 0 3px 7px -1px rgba(0,0,0,0);
}
.icon_shadow:active {
transition: all 0.3s 0s ease;
box-shadow: 0 3px 7px -1px rgba(0,0,0,0);
}
.icon_shadow a {
width: 100%;
height: 100%;
margin:auto;
transition: all 0.3s 0s ease;
box-shadow: 0px 1px 3px rgba(0,0,0,0) inset;
border-radius: 15%;
}
.icon_shadow a:active {
transition: all 0.3s 0s ease;
box-shadow: 0px 1px 3px rgba(0,0,0,0.5) inset;
}
.icon_shadow img {
width: 100%;
}
.social_icon i {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.social_icon_line {
background: #06c755;
color: #06c755;
font-size: 38px;
}
.social_icon_line:before {
content: "";
position: absolute;
top: 6px;
left: 6px;
width: 28px;
height: 28px;
background: #ffffff;
}
.social_icon_facebook {
background: #3b5a9b;
color: #fff;
font-size: 28px;
}
.social_icon_facebook i{
position: absolute;
top: 55%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -55%)
}
.social_icon_twitter {
background: #000;
color: #fff;
font-size: 30px;
}
.social_icon_instagram {
background: #ff2075;
color: #fff;
font-size: 28px;
}
.social_icon_pocket {
background: #ef4056;
color: #fff;
font-size: 28px;
}
.social_icon_hatena_b {
background: #00A4DE;
}
@media screen and (min-width: 600px){
/*特集下部SNS*/
.site_introduction_sns_share_sp h3{
font-size : 15px;
}
.site_introduction_sns_share_sp h2 span {
font-size : 17px;
}
.site_introduction_sns_share_sp h2:first-letter {
font-size : 17px;
}
}
/* ***************************************特集下部SNS エリア*************************************** */

/* ***************************************サイト紹介　更新日*************************************** */
.site_introduction_ymd {
width: 100%;
margin: 5px auto;
order: 2;
background-color: #fffefb;
border-radius: 8px;
text-align: center;
}
.site_introduction_ymd span {
font-size: 14px;
line-height: 30px;
display:inline-block;
}
.site_introduction_ymd span:first-letter {
font-size : 15px;
color: #3e98a1;
}
.site_introduction_ymd span:last-of-type {
margin-left: 0px;
}
@media screen and (min-width: 300px) {
.site_introduction_ymd span:last-of-type {
margin-left: 15px;
}
}
/* ***************************************サイト紹介　更新日*************************************** */

/*
***************************************特集ページで使用***************************************
***************************************特集ページで使用***************************************
***************************************特集ページで使用***************************************
*/


/* ***************************************プライバシーポリシー・掲載希望の方へで使用*************************************** */
.page_section{
width: 100%;
max-width: 850px;
margin: 0 auto 20px;
text-align: left;
display: inline-block;
}

@media screen and (min-width: 350px) {
.page_section {
width: 100%;
margin: 0 auto 25px;
}
}

/* ***************************************プライバシーポリシー・掲載希望の方へで使用*************************************** */