/*
***************************************font等リセット用エリア***************************************
***************************************font等リセット用エリア***************************************
***************************************font等リセット用エリア***************************************
*/
/* ***************************************全体*************************************** */
*,
::before,
::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
}

html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-webkit-tap-highlight-color: transparent; /* 3*/
}
/* ***************************************全体*************************************** */



/* ***************************************Sections*************************************** */
/*ブラウザでマージンを削除する.*/
body {
margin: 0;
font-family: 'Noto Sans JP', sans-serif;
color:#656565;

}

/* IE「main」要素を表示できるようにする。*/
main {
display: block;
}
/* ***************************************Sections*************************************** */



/* ***************************************要素*************************************** */
/* 通常要素のmarginのdefaultを0にする */
p {
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}

/* 見出し */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
line-height: inherit;
font-weight: inherit;
margin: 0;
}

/* リスト */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
/* ***************************************要素*************************************** */



/* ***************************************コンテンツのグループ化*************************************** */
/**
* 1. Firefox に正しいボックス サイズを追加します。
* 2.EdgeとIEでオーバーフローを表示します。
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
border-top-width: 1px;
margin: 0;
clear: both;
color: inherit;
}

/**
* 1.全ブラウザでのフォントサイズの継承とスケーリングを修正。
* 2. すべてのブラウザで奇数の `em` フォント サイズを修正します。
*/

pre {
font-family: monospace, monospace; /* 1 */
font-size: inherit; /* 2 */
}

address {
font-style: inherit;
}
/* ***************************************コンテンツのグループ化*************************************** */



/* ***************************************テキスト系のセマンティクス*************************************** */
/**IE 10 でアクティブなリンクの灰色の背景を削除します*/
a {
background-color: transparent;
text-decoration: none;
color: inherit;
}

/**
* 1. Chrome 57で下の境界線を削除します-
* 2. Chrome、Edge、IE、Opera、Safari で正しいテキスト装飾を追加します。
*/
abbr[title] {
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}

/* Chrome、Edge、Safari に正しいフォントの太さを追加します。*/
b,
strong {
font-weight: bolder;
}

/**
* 1.全ブラウザでのフォントサイズの継承とスケーリングを修正。
* 2. すべてのブラウザで奇数の `em` フォント サイズを修正します。
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: inherit; /* 2 */
}

/* すべてのブラウザに正しいフォント サイズを追加します */
small {
font-size: 80%;
}

/*`sub` 要素と `sup` 要素が行の高さに影響を与えないようにする*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}

/*スマホで触った時、タップされた所が青くなるのを防ぐ*/
a{
-webkit-tap-highlight-color:rgba(0,0,0,0);
cursor:pointer;
}
div{
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

/*スマホで触った時、タップされた所が青くなるのを防ぐ*/
p {
display: block;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

/* マウスクリック時 */
:focus:not(:fous-visible) {
outline: none;
}

/* タブ移動時 */
:focus-visible {
outline: none;
}
/* ***************************************テキスト系のセマンティクス*************************************** */



/* ***************************************埋め込みコンテンツ*************************************** */
/* 垂直方向の位置合わせの問題を防ぎます。*/
img,
embed,
object,
iframe {
vertical-align: bottom;
}
/* ***************************************埋め込みコンテンツ*************************************** */



/* ***************************************Forms*************************************** */
/* フォームフィールドをリセットしてスタイルを設定できるようにします */
button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
background: transparent;
padding: 0;
margin: 0;
outline: 0;
border-radius: 0;
text-align: inherit;
}

/* ラジオとチェックボックスの外観をリセットして、iOS での外観を維持します */
[type="checkbox"] {
-webkit-appearance: checkbox;
appearance: checkbox;
}
[type="radio"] {
-webkit-appearance: radio;
appearance: radio;
}
/**
※IEでオーバーフローを表示します。
※1.Edgeでオーバーフローを表示します。
*/
button,
input {
/* 1 */
overflow: visible;
}

/* Edge、Firefox、IE でのテキスト変換の継承を削除します。
1. Firefox のテキスト変換の継承を削除します。*/
button,
select {
/* 1 */
text-transform: none;
}

/* OS および Safari でクリック可能なタイプのスタイルを設定できない問題を修正。 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}

button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
cursor: default;
}

/* Firefox で内側の境界線とパディングを削除します。 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}

/* 以前のルールで設定解除されたフォーカス スタイルを復元します。*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}

/* IE10 および IE11 の矢印を削除 */
select::-ms-expand {
display: none;
}

/* パッドを削除します */
option {
padding: 0;
}

/* 非表示にリセット */
fieldset {
margin: 0;
padding: 0;
min-width: 0;
}

/**
*1.EdgeとIEの文字の折り返しを修正しました。
* 2. IE の `fieldset` 要素からの色の継承を修正します。
* 3. 開発者がゼロアウトしたときにバレないようにパディングを削除します。
* すべてのブラウザの `fieldset` 要素。
*/
legend {
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}

/* Chrome、Firefox、Opera に正しい垂直方向の配置を追加します。*/
progress {
vertical-align: baseline;
}

/* IE 10 以降のデフォルトの垂直スクロールバーを削除します。 */
textarea {
overflow: auto;
}

/* Chrome の増分ボタンと減分ボタンのカーソル スタイルを修正します。*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}

/* 1. Safariのアウトラインスタイルを修正します。 */
[type="search"] {
outline-offset: -2px; /* 1 */
}

/* macOS 上の Chrome および Safari で内部パディングを削除します。 */
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

/**
* 1. iOS および Safari でクリック可能なタイプのスタイルを設定できない問題を修正します。
* 2. Safari でフォントのプロパティを「継承」に変更します。
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}

/*クリック可能なラベル*/
label[for] {
cursor: pointer;
}
/* ***************************************Forms*************************************** */



/* ***************************************相互の作用*************************************** */

/* Edge、IE 10以降、Firefoxでの正しい表示を追加しました。 */
details {
display: block;
}

/*全てのブラウザで正しい表示を追加しました。 */
summary {
display: list-item;
}

/*編集可能なコンテンツのアウトラインを削除します。 */
[contenteditable] {
outline: none;
}
/* ***************************************相互の作用*************************************** */



/* ***************************************テーブル*************************************** */
table {
border-collapse: collapse;
border-spacing: 0;
}

caption {
text-align: left;
}

td,
th {
vertical-align: top;
padding: 0;
}

th {
text-align: left;
font-weight: bold;
}
/* ***************************************テーブル*************************************** */



/* ***************************************その他*************************************** */
/*※IE10以降での正しい表示を追加しました。 */
template {
display: none;
}

/* ※IE10での正しい表示を追加しました。 */
[hidden] {
display: none;
}
/* ***************************************その他*************************************** */



/*
***************************************font等リセット用エリア***************************************
***************************************font等リセット用エリア***************************************
***************************************font等リセット用エリア***************************************
*/




/*
***************************************メインエリア（全体効果）***************************************
***************************************メインエリア（全体効果）***************************************
***************************************メインエリア（全体効果）***************************************
*/
html { font-size: 62.5%; }
body {
background-attachment : fixed;
margin : 0;
background-image:url("https://webbura.com/img/main/db_gara_01.jpg");
}
#container {
max-width : 1120px;
min-height : 100vh;
margin : 0 auto;
box-shadow : 0 3px 10px rgb(0, 0, 0, 0.2);
animation : fadeIn 1.5s 0.2s both;
}
#main-in {
padding-left : 220px;
min-height : 100vh;
background-image:url("https://webbura.com/img/main/db01.jpg");
}
/*サイトメインエリア（footerの位置調整）*/
#main-visual{
min-height:100vh;
}
/*
***************************************メインエリア（全体効果）***************************************
***************************************メインエリア（全体効果）***************************************
***************************************メインエリア（全体効果）***************************************
*/




/*
***************************************サイドバー・ヘッターメニューエリア***************************************
***************************************サイドバー・ヘッターメニューエリア***************************************
***************************************サイドバー・ヘッターメニューエリア***************************************
*/
.robo_icon {
width : 80%;
}
.accordion_button p,
.n_accordion_button p {
font-size : 16px;
margin : 0;
line-height : 20px;
}

span.accordion_button {
color : #969494;
filter : grayscale(100%);
}
div.n_accordion_button {
color : #969494;
filter : grayscale(100%);
}
span.accordion_button:hover {
color : #8bccce;
filter : grayscale(0%);
}
div.n_accordion_button:hover {
color : #8bccce;
filter : grayscale(0%);
}
span.accordion_button:active {
color : #969494;
filter : grayscale(100%);
}
div.n_accordion_button:active {
color : #969494;
filter : grayscale(100%);
}
#global_nav a {
text-decoration : none;
display : block;
}
.inner li a {
font-size : 15px;
line-height : 20px;
padding : 5px 0 6px;
color : #969494;
transition : all 0.3s 0s ease;
}
.inner li a:visited {
color : #969494;
transition : all 0.3s 0s ease;
}
.inner li a:hover {
color : #8bccce;
transition : all 0.3s 0s ease;
}
p.open {
color : #8bccce;
}
img.open {
filter : grayscale(0%);
}
.side_accordion {
text-align : center;
}
.side_accordion .inner {
display : none;
}
.side_accordion li {
cursor : pointer;
}
#global_head {
position : fixed;
color : #033560;
width : 220px;
text-align : center;
padding-top : 60px;
z-index : 100;
}
.header_logo_img {
width : 100%;
}
#global_head a {
filter : drop-shadow(0 0 0 #cfcfcf);
transition : all 0.3s 0s ease;
}
#global_head a:hover {
filter : drop-shadow(1px 1px 10px #cfcfcf);
transition : all 0.3s 0s ease;
}
#global_head a:active {
filter : drop-shadow(5px 5px 5px #cfcfcf);
transition : all 0.3s 0s ease;
}
#sidebar {
padding-top : 180px;
width : 220px;
height : 100%;
position : fixed;
background : #fcfcfc;
text-align : center;
box-shadow : 0 3px 10px rgba(0, 0, 0, 0.3);
z-index : 30;
background-image:url("https://webbura.com/img/main/db02.jpg");
}
#global_nav ul {
list-style : none;
padding : 0;
width : 105px;
float : left;
margin-bottom : 0;
margin-top : 10px;
background-color : rgba(200, 200, 200, 0);
}
.side_nav_l {
margin : 0 2px 0 3px;
}
.side_nav_r {
margin : 0 3px 0 2px;
}

.side_accordion > li:first-child {
margin-top : 5px;
}

.side_accordion > li {
margin-top : 20px;
}
.side_nav_r > li:nth-child(3) {
margin-top : 2px;
}
.sidebar_content {
text-align : center;
border : #b8b8b8 solid 1.3px;
margin-bottom : 5px;
}
#nav_toggle {
display : none;
position : fixed;
top : 20px;
right : 12px;
height : 32px;
cursor: pointer;
}
#nav_toggle > div {
position : relative;
width : 32px;
}
#nav_toggle span {
width : 100%;
height : 2px;
left : 0;
display : block;
background : #033560;
position : absolute;
transition : 0.35s ease-in-out;
}
#nav_toggle span:nth-child(1) {
top : 0;
}
#nav_toggle span:nth-child(2) {
top : 11px;
}
#nav_toggle span:nth-child(3) {
top : 22px;
}
.nav_toggle_back {
width : 110px;
height : 110px;
border-radius : 20%;
background : rgba(255, 255, 255, 0.5);
display : none;
position : fixed;
top : -45px;
right : -45px;
box-shadow: 0 1px 4px 1px rgb(0 0 0 / 10%);
}
.side_scroll {
position : relative;
width : 100%;
overflow : hidden;
}
.scroll_regulate {
margin-bottom : 10px;
}
@media screen and (min-height: 680px) {
.side_accordion > li {
margin-top : 50px;
}
.side_nav_r > li:nth-child(3) {
margin-top : 30px;
}
}


@media screen and (max-width: 900px) {
#main-in {
padding-left : 0;
}
#global_head {
width : 100%;
height : 65px;
padding : 0;
background : rgba(255, 255, 255, 1);
position : static;
}
#sidebar {
position : fixed;
right : -240px;
top : 0;
height : 100%;
color : #333;
background : rgba(255, 255, 255, 0.95);
transition : 0.35s ease-in-out;
padding-top : 60px;
}
#global_nav .sub-menu-head:after, #global_nav .sub-menu-nav {
display : none;
}
#nav_toggle {
display : block;
}
.open {
overflow : hidden;
}
.open #overlay {
display : block;
}
.open #sidebar {
transform : translate3d(-240px,0,0);
}
.open #nav_toggle span:nth-child(1) {
top : 11px;
transform : rotate(45deg);
}
.open #nav_toggle span:nth-child(2) {
width : 0;
left : 50%;
}
.open #nav_toggle span:nth-child(3) {
top : 11px;
transform : rotate(-45deg);
}
#overlay {
z-index : 200;
}
#sidebar {
z-index : 300;
}
#nav_toggle {
z-index : 400;
}
.header_logo_img {
width : auto;
height : 65px;
}
.nav_toggle_back {
display : block;
z-index : 300;
}
.inner li a {
padding: 10px 0 11px;
}
.side_accordion > li {
margin-top : 20px;
}
}


@media screen and (max-width: 400px) {	
.accordion_button p,
.n_accordion_button p {
font-size : 14px;
margin : 0;
line-height : 15px;
}
#sidebar {
right : -220px;
width : 220px;
padding-top : 60px;
}
.open #sidebar {
transform : translate3d(-190px,0,0);
}
.header_logo_img {
width : 160px;
height : 56px;
/*padding-left : 15px;*/
}
#global_nav ul {
width : 90px;
}
#nav_toggle {
top : 23px;
right : 15px;
height : 25px;
}
#nav_toggle > div {
width : 25px;
}
#nav_toggle span:nth-child(1) {
top : 0;
}
#nav_toggle span:nth-child(2) {
top : 8px;
}
#nav_toggle span:nth-child(3) {
top : 16px;
}
#global_head {
/*text-align : left;*/
height : 63px;
}
.nav_toggle_back {
width : 100px;
height : 100px;
border-radius : 15%;
top : -37px;
right : -37px;
}
.inner li a {
font-size : 14px;
line-height : 18px;
}
}

@media screen and (min-height: 900px) {
#sidebar {
padding-top : 220px;
}
}


/*ヘッター検索ボタン*/
.site_search_sb_area {
  z-index:200;
  margin:0;
  width:62px;
  position: absolute;
  top: 0;
  left: 0;
  }
  .site_search_sb {
  display: flex;
  width: 62px;
  height: 62px;
  margin: 0;
  border-radius: 0 0 10px;
  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s 0s ease;
  transform: translateY(0);
  }
  .site_search_sb:active {
  box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
  transition : all 0.3s 0s ease;
  transform : translateY(1px);
  }
  .site_search_sb img {
  background-color : rgba(255, 255, 255, 0.85);
  width : 62px;
  height : 62px;
  }
  @media screen and (min-width: 400px) {
  .site_search_sb_area {
  width:65px;
  }
  .site_search_sb {
  width: 65px;
  height: 65px;
  }
  .site_search_sb img {
  width : 65px;
  height : 65px;
  }
  }
  @media screen and (min-width: 900px){
  .site_search_sb_area{
  display: none;
  }
  }
  /*ヘッター検索ボタン*/
/*
***************************************サイドバー・ヘッターメニューエリア***************************************
***************************************サイドバー・ヘッターメニューエリア***************************************
***************************************サイドバー・ヘッターメニューエリア***************************************
*/



/*
***************************************モーダルウインドウエリア***************************************
***************************************モーダルウインドウエリア***************************************
***************************************モーダルウインドウエリア***************************************
*/
/* ***************************************モーダル全体（共有部分）*************************************** */
.modal_wrapper {
z-index : 999;
position : fixed;
top : 0;
right : 0;
bottom : 0;
left : 0;
text-align : center;
}
.modal_wrapper:not(:target) {
opacity : 0;
visibility : hidden;
transition : opacity 0.3s, visibility 0.3s;
}
.modal_wrapper:target {
opacity : 1;
visibility : visible;
transition : opacity 0.4s, visibility 0.4s;
}
.modal_wrapper::after {
display : inline-block;
height : 100%;
margin-left : -0.05em;
vertical-align : middle;
content : "";
}
.modal_wrapper .modal_window {
box-sizing : border-box;
display : inline-block;
z-index : 20;
position : relative;
width : 98%;
max-width : 600px;
padding : 0 5px 15px;
background : rgba(255, 255, 255, 0.9);
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.3);
vertical-align : middle;
border-radius : 8px;
margin : auto;
background-image : url(https://webbura.com/img/main/db_gara_01.jpg);
}
.modal_overlay {
z-index : 10;
position : absolute;
top : 0;
right : 0;
bottom : 0;
left : 0;
background : rgba(0, 0, 0, 0.6);
}
.modal_wrapper .modal_close {
z-index : 20;
position : absolute;
top : 0;
right : 0;
width : 35px;
color : #95979c !important ;
font-size : 30px;
font-weight : 700;
line-height : 35px;
text-align : center;
text-decoration : none;
text-indent : 0;
}
.modal_wrapper .modal_close:hover {
color : #2b2e38 !important ;
}
/* ***************************************モーダル全体（共有部分）*************************************** */

/* ***************************************タグ・ランダムモーダル用*************************************** */
.modal_random_area_main_title {
float : left;
width : 100%;
margin : auto;
}
.modal_tag_area_main_title {
float : left;
width : 100%;
margin : 15px auto 5px;
}
.modal_tag_area_main_title p,
.modal_random_area_main_title p {
font-size : 17px;
text-align : center;
display: inline-block;
margin: 0px 0px 12px 40px;
}
.modal_tag_area_title, .modal_random_area_title {
width : 100%;
margin : auto;
}
.modal_tag_area_title p{
font-size : 16px;
text-align : center;
margin : 12px auto 0;
color:#717171;
}
.modal_random_area_title p {
font-size: 16px;
text-align: center;
margin: 12px auto 10px;
color: #717171;
}
.tag_cloud_area_pc, .random_cloud_area_pc {
border-radius : 8px;
margin : 0 auto 0;
padding : 0;
width : 99%;
max-width : 450px;
transition : 0.3s;
}
#tag_cloud svg, #random_search_cloud svg {
border: #cdcdcd solid 1px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.5);
}
.cloud_tag_list {
overflow: auto;
width: 98%;
max-width: 450px;
margin: 0 auto;
padding: 0;
list-style: none;
text-align: center;
}
.cloud_tag_link_button {
border-radius: 8px;
height: 34px;
width: auto;
max-width: 200px;
background-color: #fffefb;
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.3);
margin: 6px 0 6px 12px;
padding: 0 22px 0 0px;
position: relative;
transition: all 0.3s 0s ease;
display: inline-block;
}
.cloud_tag_link_button:active {
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0);
transition : all 0.3s 0s ease;
}
.cloud_tag_link_button p {
text-align: center;
font-size: 14px;
line-height: 15px;
padding: 10px;
transition: all 0.3s 0s ease;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.cloud_tag_link_button span {
position: absolute;
top: 6px;
right: 3px;
z-index: 2;
width: 23px;
height: 23px;
line-height: 23px;
background-color: #8bccce;
border-radius: 30%;
color: #fff;
font-size: 12px;
line-height: 22px;
text-align: center;
}
.cloud_tag_link_button a {
position : absolute;
top : 0;
left : 0;
height : 100%;
width : 100%;
z-index : 100;
transition : all 0.3s 0s ease;
}
@media screen and (min-width: 650px) {
/*取り扱いアイテム・タグカテゴリーulボタン化*/
.cloud_tag_link_button:hover{
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.0);
}
.cloud_tag_link_button::after{
content : "";
position : absolute;
top : 0;
right : 0;
bottom : 0;
left : 0;
transition : all 0.3s 0s ease;
border-radius : 8px;
}
.cloud_tag_link_button:active::after{
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.6) inset;
z-index : 20;
}
}

.modal_tag_cloud_list_area {
width : 98%;
height : auto;
max-height : 200px;
margin : 5px auto 15px;
padding-top : 5px;
padding-bottom : 5px;
position : relative;
display : inline-block;
vertical-align : top;
order : 4;
max-width: 450px;
}
.random_button1 {
width : 100%;
max-width : 140px;
margin : 20px auto 10px;
}
.random_button2 {
border-radius : 8px;
height : 35px;
width : 100%;
background-color : #fcfcfc;
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.3);
margin : auto;
position : relative;
transition : all 0.3s 0s ease;
}
.random_button2:active {
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0);
transition : all 0.3s 0s ease;
}
.random_button1 p {
text-align : center;
font-size : 14px;
padding : 9px;
transition : all 0.3s 0s ease;
}
.random_button2 a {
position : absolute;
top : 0;
left : 0;
height : 100%;
width : 100%;
z-index : 100;
transition : all 0.3s 0s ease;
}
@media screen and (min-width: 650px) {
.modal_tag_area_main_title p,
.modal_random_area_main_title p {
font-size : 20px;
}
}
@media screen and (min-width: 650px) {

}
/* ***************************************タグ・ランダムモーダル用*************************************** */

/* ***************************************検索モーダル用*************************************** */
/*！！！！タイトル！！！！！*/
.modal_search_area_main_title {
float : left;
width : 100%;
margin : 18px auto 3px;
}
.modal_search_area_main_title p {
font-size: 18px;
text-align: center;
display: inline-block;
margin: 0px 0px 18px 35px;
}
.modal_search_area_title {
float : left;
width : 100%;
margin : auto;
}
.modal_search_area_title p {
font-size : 14px;
text-align : center;
margin : 5px auto;
}
.modal_title_img{
width: 40px;
margin: 0px 0px 6px;
display: inline-block;
}
@media screen and (min-width: 500px) {
.modal_search_area_main_title p {
font-size: 23px;
text-align: center;
margin: 0px 0px 18px 35px;
}
.modal_search_area_title p {
font-size : 15px;
margin : 5px auto 8px;
}
.modal_title_img{
width: 46px;
margin: 5px 0px 6px;
}
}

/*！！！！検索フォームエリア大枠！！！！！*/
.modal_search_check_area1 {
width : 100%;
max-width : 450px;
margin : auto;
padding : 0;
}
.modal_search_check_area2 {
width : 150px;
margin : 10px auto;
overflow : hidden;
}
@media screen and (min-width: 250px) {
.modal_search_check_area2 {
width : 225px;
}
}
@media screen and (min-width: 325px) {
.modal_search_check_area2 {
width : 300px;
}
}
@media screen and (min-width: 400px) {
.modal_search_check_area2 {
width : 375px;
}
}
@media screen and (min-width: 475px) {
.modal_search_check_area2 {
width : 450px;
}
}
@media screen and (min-width: 650px) {
.modal_search_check_area1{
max-width : 480px;
}
.modal_search_check_area2 {
width : 480px;
}
}

/*！！！！検索フォーム本体！！！！！*/
.modal_search_foam_area {
background : #fff;
user-select : none;
float : left;
height : 35px;
width : 80%;
width : -webkit-calc(83% - 5px);
width : calc(83% - 5px);
margin : 5px 5px 5px 2.5px;
border-radius : 8px;
transition : all 0.3s 0s ease;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.3) inset;
}
.modal_search_foam {
font-size : 16px;
float : left;
height : 35px;
width : 100%;
border-radius : 8px;
text-align : center;
transition : all 0.3s 0s ease;
box-shadow : 0 0 0 3px rgba(139, 204, 206, 0);
}
.modal_search_foam:focus {
transition : all 0.3s 0s ease;
box-shadow : 0 0 0 2px rgba(139, 204, 206, 1);
}
.modal_search_button_area {
background : #fff;
user-select : none;
float : left;
height : 35px;
width : 18%;
width : -webkit-calc(17% - 8px);
width : calc(17% - 8px);
margin : 5px 1px;
border-radius : 8px;
transition : all 0.3s 0s ease;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0) inset;
transform : translateY(0);
}
.modal_search_button_area:active {
transition : all 0.3s 0s ease;
transform : translateY(1px);
}
.modal_search_button {
text-align : center;
font-size : 13px;
height : 35px;
width : 100%;
border-radius : 8px;
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.3);
transform : translateY(0);
color : #656565;
transition : all 0.3s 0s ease;
}
.modal_search_button:active {
transition : all 0.3s 0s ease;
box-shadow : 0 0 0 2px rgba(139, 204, 206, 1);
}
@media screen and (min-width: 650px) {
.modal_search_foam_area:hover {
background : #fcfcfc;
transition : all 0.3s 0s ease;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.4) inset;
}
.modal_search_button_area:active {
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.3) inset;
}
.modal_search_button:hover {
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
transform : translateY(1px);
transition : all 0.3s 0s ease;
}
.modal_search_button:active {
transition : all 0.3s 0s ease;
box-shadow : 0 0 0 2px rgba(139, 204, 206, 1);
}
}

/*！！！！カテゴリー絞り込みエリア！！！！！*/
.modal_check_card_area{
width : 75px;
height: 75px;
float : left;
display:flex;
justify-content: center;
}
.modal_check_card {
position : static;
cursor : pointer;
float : left;
width : 65px;
margin :auto;
user-select : none;
}
.check_card_input {
position : absolute;
display : block;
outline : none;
border : none;
background : none;
padding : 0;
margin : 5px;
-webkit-appearance: none;
}
.check_card_body {
height : 65px;
border-radius : 8px;
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.3);
transition : all 0.3s 0s ease;
transform : translateY(0);
background : #f1f1f1;
text-align : center;
}
.check_card_body:active {
transition : all 0.3s 0s ease;
box-shadow : 0 3px 6px rgba(0, 0, 0, 0);
transform : translateY(1px);
}
.check_card_input:checked ~ .check_card_body {
box-shadow : 0 0 0 2px #8bccce;
transform : translateY(0);
}
.check_card_input:checked ~ .check_card_body:active {
box-shadow : 0 3px 6px rgba(0, 0, 0, 0);
transform : translateY(1px);
}
.check_card_body_cover_image {
height : 65px;
width : 65px;
border-radius : 8px;
filter : grayscale(1);
transition : all 0.3s 0s ease;
}
.check_card_input:checked ~ .check_card_body .check_card_body_cover_image {
filter : grayscale(0);
transition : all 0.3s 0s ease;
}
.check_card_input:checked ~ .check_card_body:active .check_card_body_cover_image {
filter : grayscale(1);
transition : all 0.3s 0s ease;
}
.check_card_body_cover_checkbox {
background : #8bccce;
border : #fff solid 2px;
position : absolute;
right : 0;
top : 0;
z-index : 1;
width : 28px;
height : 28px;
border-radius : 50%;
opacity : 0;
transition : transform 0.2s, opacity calc(0.2s * 1.2) linear, -webkit-transform 0.2s ease;
transform : scale(0);
}
.check_card_body_cover_checkbox_svg {
width : 12px;
height : 12px;
display : inline-block;
vertical-align : top;
fill : none;
margin : 6px 0 0 0;
stroke : #fff;
stroke-width : 2;
stroke-linecap : round;
stroke-linejoin : round;
stroke-dasharray : 17px;
stroke-dashoffset : 17px;
transition : stroke-dashoffset 0.4s 0.15s ease;
}
.check_card_input:checked ~ .check_card_body .check_card_body_cover_checkbox {
background : #8bccce;
border : #fff solid 2px;
opacity : 1;
transform : scale(0.8);
}
.check_card_input:checked ~ .check_card_body:active .check_card_body_cover_checkbox {
background : #8bccce;
opacity : 0;
transform : scale(0);
}
.check_card_input:checked ~ .check_card_body .check_card_body_cover_checkbox_svg {
stroke : #fff;
stroke-dashoffset : 0;
}
.check_card_body_header {
/*
background-color : rgba(255, 255, 255, 0.9);
border-radius : 0 0 12px 12px;
*/
position : absolute;
bottom : 0;
padding : 0;
width : 100%;
}
p.check_card_body_header_title {
font-weight : 500;
font-size : 11px;
margin-top : 2px;
margin-bottom : 3px;
text-align : center;
width : 100%;
}
p.check_card_body_header_title_2 {
font-weight: 500;
font-size: 10px;
margin-top: 3.5px;
margin-bottom: 4px;
text-align: center;
width: 100%;
white-space: nowrap;
}

@media screen and (min-width: 650px) {
.modal_check_card_area{
width : 80px;
height: 80px;
}
.modal_check_card {
width : 70px;
}
.check_card_body {
height : 70px;
}
.check_card_body_cover_image {
height : 70px;
width : 70px;
}
p.check_card_body_header_title {
font-size : 12px;
}
p.check_card_body_header_title_2 {
font-size: 11px;
}



.check_card_body:hover {
transition : all 0.3s 0s ease;
box-shadow : 0 3px 6px rgba(0, 0, 0, 0);
transform : translateY(1px);
}
.check_card_body:active {
transition : all 0.3s 0s ease;
transform : translateY(2px);
}
.check_card_input:checked ~ .check_card_body:hover {
transform : translateY(1px);
}
.check_card_input:checked ~ .check_card_body:active {
transform : translateY(2px);
}
.check_card_body:before {
content : "";
display : inline-block;
width : 100%;
height : 100%;
position : absolute;
top : 0;
left : 0;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0) inset;
z-index : 2;
border-radius : 8px;
transition : all 0.3s 0s ease;
}
.check_card_body:active:before {
content : "";
display : inline-block;
width : 100%;
height : 100%;
position : absolute;
top : 0;
left : 0;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.4) inset;
z-index : 2;
border-radius : 8px;
transition : all 0.3s 0s ease;
}
}

/*！！！！人気検索ワードエリア！！！！！*/
.modal_search_word_cloud {
width : 98%;
max-height : 200px;
margin : 0 auto 20px;
padding-top : 0;
padding-bottom : 20px;
position : relative;
display : inline-block;
vertical-align : top;
order : 4;
}
.search_word_button_area {
display : inline-block;
transition : all 0.3s 0s ease;
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.3);
margin : 5px;
border-radius : 8px;
transform : translateY(0);
}
.search_word_button_area:active {
transition : all 0.3s 0s ease;
box-shadow : 0 0 0 2px rgba(139, 204, 206, 1);
transform : translateY(1px);
}
.search_word_button {
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0) inset;
font-size : 12px;
padding : 8px 5px 10px;
background : #fff;
max-width : 150px;
white-space : nowrap;
text-overflow : ellipsis;
overflow : hidden;
text-decoration : none;
transition : all 0.3s 0s ease;
border-radius : 8px;
line-height: 1.1;
}
@media screen and (min-width: 650px) {
.search_word_button_area:hover {
transition : all 0.3s 0s ease;
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
transform : translateY(1px);
}
.search_word_button_area:active {
transition : all 0.3s 0s ease;
box-shadow : 0 0 0 3px rgba(139, 204, 206, 1);
transform : translateY(2px);
}
.search_word_button {
font-size : 13px;
padding: 7.5px 5px 8px;
}
.search_word_button:active {
transition : all 0.3s 0s ease;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.3) inset;
}
}
@media screen and (max-height: 680px) {
.modal_wrapper .modal_window {
height : 100%;
background-color:#555;
}
}
/* ***************************************検索モーダル用*************************************** */

/*
***************************************モーダルウインドウエリア***************************************
***************************************モーダルウインドウエリア***************************************
***************************************モーダルウインドウエリア***************************************
*/



/*
***************************************フッターエリア***************************************
***************************************フッターエリア***************************************
***************************************フッターエリア***************************************
*/
ul.footer_menu {
padding-top:10px;
background-color:#f1f1f1;
width:100%;
margin:auto;
height:160px;
}
.footer_menu li {
float:center;
width :100%;
margin:12px auto; 
padding : 0;
box-sizing : border-box;
line-height : 1;
text-align : center;
text-decoration : none;
}
footer a {
text-decoration : none;
color : #969494;
font-size:17px;
}
.footer_menu a:hover {
text-decoration : none;
color : #8bccce;
}
.webbura_sns_title {
color: #818181;
text-align: center;
line-height: 1;
font-size: 18px;
margin: 0 auto 8px;
}
.webbura_copyright {
background-color : #e6e6e6;
color : #969494;
text-align : center;
line-height : 2;
padding: 10px 0 150px;
}
.footer_image_vw {
margin-top : 40px;
width : 100%;
}
footer {
line-height : 0;
}
.f_sns {
background-color : #dbdbdb;
}
.footer_sns_links {
font-size:30px;
text-align : center;
padding : 15px;
}
.footer_sns_links a {
font-size:30px;
margin:auto 20px;

}
.tw{color: #000;}
.yt{color: #FF0000;}
.fb{color: #3b5a9b;}
.footer_sns_links a:hover {
text-decoration : none;
}
@media screen and (min-width: 350px) {
ul.footer_menu {
padding-top:10px;
height:145px;
}
.footer_menu li {
width :100%;
margin:12px auto; 
}
}
@media screen and (min-width: 400px) {
.webbura_copyright {
padding: 10px 0;
}
}
@media screen and (min-width: 600px) {
ul.footer_menu {
padding-top:12px;
height:80px;
}
.footer_menu li {
float:left;
width :50%;
margin:5px auto; 
}
}
/*
***************************************フッターエリア***************************************
***************************************フッターエリア***************************************
***************************************フッターエリア***************************************
*/



/*
***************************************TOPスクロールボタン***************************************
***************************************TOPスクロールボタン***************************************
***************************************TOPスクロールボタン***************************************
*/
#page_scroll_fade_in{
display: none;
}
.button_area {
position: fixed;
bottom: 10px;
right: 5px;
z-index: 200;
}
.shoplist_button_area{
position: fixed;
bottom: 80px;
right: 5px;
z-index: 200;
}





.site_link_button_area{
position: fixed;
bottom: 10px;
right: 75px;
right: 5px;
z-index: 200;
}
.scroll_button p{
position: absolute;
bottom: 4px;
left: 5px;
pointer-events: none;
font-size: 11px;
margin: 0;
line-height: 11px;
text-align: center;
}
.site_link_button p{
position: absolute;
pointer-events: none;
margin: 0;
bottom: 5px;
left: 7px;
font-size: 15px;
line-height: 19px;
text-align: left;
color: #f3f3f3;
}
.site_link_button span {
color: #993636;
}
.scroll_button{
display: block;
width: 65px;
height: 65px;
border-radius: 10px;
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.3);
overflow: hidden;
transition: all 0.3s 0s ease;
transform: translateY(0);
}
.site_link_button {
display: block;
width: 130px;
height: 65px;
border-radius: 10px;
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.3);
overflow: hidden;
transition: all 0.3s 0s ease;
transform: translateY(0);
}
.scroll_button:active,
.site_link_button:active {
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
transition : all 0.3s 0s ease;
transform : translateY(1px);
}
.scroll_button img {
background-color : rgba(255, 255, 255, 0.85);
width : 65px;
height : 65px;
}
.site_link_button img {
background-color :#ad9370;
width : 130px;
height : 65px;
}
@media screen and (min-width: 650px) {
.shoplist_button_area{
bottom: 90px;
}
.scroll_button {
width : 85px;
height : 85px;
}
.site_link_button {
width : 150px;
height : 75px;
}
.scroll_button p{
bottom: 6px;
left: 2px;
font-size: 16px;
line-height: 14px;
text-align: left;
}
.site_link_button p{
bottom: 9px;
left: 9px;
font-size: 18px;
line-height: 20px;
}
.scroll_button:hover,
.site_link_button:hover {
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
transition : all 0.3s 0s ease;
border : rgba(255, 255, 255, 0) solid 0px;
transform : translateY(1px);
}
.scroll_button:active,
.site_link_button:active {
transform : translateY(2px);
}
.scroll_button img {
width : 85px;
height : 85px;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0) inset;
transition : all 0.3s 0s ease;
transform : translateY(0);
}
.site_link_button img {
width : 150px;
height : 75px;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0) inset;
transition : all 0.3s 0s ease;
/*transform : translateY(0);*/
}
.scroll_button img:active,
.site_link_button img:active  {
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.4) inset;
/*transform : translateY(1px);*/
transition : all 0.3s 0s ease;
}

}
@media screen and (min-width: 1550px) {
.button_area {
right: 50%;
left: 50%;
margin: 0 0 0 669px;
}
.shoplist_button_area{
right: 50%;
left: 50%;
margin: 0 0 0 669px;
bottom: 120px;
}
.site_link_button_area{
right: 50%;
left: 50%;
margin: 0 0 0 570px;
}
.scroll_button,
.scroll_button img {
width : 100px;
height : 100px;
}
.site_link_button,
.site_link_button img {
width : 200px;
height : 100px;
}
.scroll_button p {
left: 10px;
line-height: 15px;
text-align: center;
}
.site_link_button p{
bottom: 13px;
left: 19px;
font-size: 20px;
line-height: 25px;
}
}
/*
***************************************TOPスクロールボタン***************************************
***************************************TOPスクロールボタン***************************************
***************************************TOPスクロールボタン***************************************
*/



/*
***************************************サーチリンクボタン***************************************
***************************************サーチリンクボタン***************************************
***************************************サーチリンクボタン***************************************
*/
.button_area_left {
position: fixed;
/*right:70px;*/
bottom: 5px;
z-index: 200;
margin: 2px;
/*width: 100%;*/
}
.button_area_left .scroll_button{
margin:auto;
}
.button_area_left .scroll_button img {
/*background-color : rgba(183, 232, 235, 0.85);*/
width : 100px;
height : 50px;
}
.button_area_left .scroll_button {
width : 100px;
height : 50px;
}
@media screen and (min-width: 650px){
}
/*
***************************************サーチリンクボタン***************************************
***************************************サーチリンクボタン***************************************
***************************************サーチリンクボタン***************************************
*/


/*
***************************************広告類エリア***************************************
***************************************広告類エリア***************************************
***************************************広告類エリア***************************************
*/
/* フッター広告*/
.footer_pr_area{
padding: 0 10px;
width: 100%;
margin: auto;
text-align: center;
}
.footer_pr{
margin: 30px auto 0;
max-width: 728px;
width: 100%;}
/*
***************************************広告類エリア***************************************
***************************************広告類エリア***************************************
***************************************広告類エリア***************************************
*/