:root {
  --accent-color:             #DCC69D;
  --black-color:              #2E2E2E;
  --light-dark:               #36332F;
  --gray-color:               #FDFDFC;
  --gray-color-300:           #F7F7F7;
  --gray-color-400:           #EFEFEF;
  --gray-color-500:           #d1d1d1;
  --gray-color-600:           #999999;
  --gray-color-800:           #3A3A3A;
  --light-gray-color:         #D7DDDF;
  --primary-color:            #DCC69D;
  --bs-primary-rgb:           220,198,157;
  --light-color:              #FFF;
  --dark-color:               #212529;
  --light-blue-color:         #EDF1F3;
  --navbar-color-color:       #131814;
  --swiper-theme-color:       #4A4A4A;
  --swiper-pagination-color:  #4A4A4A;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
    :root {
        --header-height : 100px;
        --header-height-min : 80px;
    }
}

/* Fonts */
:root {
    --body-font           : "Jost", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',sans-serif;
    --heading-font        : "Cormorant", serif;
}
@import url("inview.css");

@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*----------------------------------------------*/
/* 2. GENERAL TYPOGRAPHY */
/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body * {box-sizing: border-box;}

html {
  box-sizing: border-box;
}
body {
  background-color: var(--gray-color);
  font-family: var(--body-font);
  
  margin: 0;padding: 0;font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
}
html,body {
	height: 100%;
	font-size: 16px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	html, body {
		font-size: 14px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/


h1,h2,h3,h4,h5,h6 {
  font-family: var(--body-font);
 
  color: var(--black-color);
}
h1{
  font-size: 5rem;
}
h2{
  font-size: 4rem;
}
h3{
  font-size: 2.625rem;
  line-height: 100%;
}
h4{
  font-size: 1.75rem;
}
h5{
  font-size: 1.5rem;
}
p {
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
  font-weight: 300;
  color: var(--light-dark);
}
ul {
  color: var(--light-dark);
}
ul.inner-list li {
  font-size: 1.2em;
}
a {
  color: var(--dark-color);
  font-weight: 400;
  text-decoration: none;
  letter-spacing: 1.7px;
  transition: 0.3s color ease-out;
}
a.light {
  color: var(--light-color);
}
a:hover {
  text-decoration: none;
  color: var(--primary-color);
}

.fs-1{
  font-size: 1.75rem !important;
}
.fs-2{
  font-size: 1.625rem !important;
}
.fs-3{
  font-size: 1.375rem !important;
}
.fs-4{
  font-size: 1.25rem !important;
}
.fs-5{
  font-size: 1.125rem !important;
}
.fs-6{
  font-size: 0.875rem !important;
}

/* 2.3 Background Color
/*----------------------------------------------*/
.bg-gray {
  background: var(--gray-color);
}
.bg-dark {
  background: var(--dark-color);
}
.bg-light {
  background: var(--light-color);
}

/* 2.3 Shadow
/*----------------------------------------------*/
.shadow {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.05)!important;
}

@media (min-width: 1600px){
  .container {
    max-width: 1540px;
  }
}

/* 2.4 Section
--------------------------------------------------------------*/
/* - Section Padding
--------------------------------------------------------------*/
.padding-xsmall {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.padding-small {
  padding-top: 2em;
  padding-bottom: 2em;
}
.padding-medium {
  padding-top: 4em;
  padding-bottom: 4em;
}
.padding-large {
  padding-top: 7em;
  padding-bottom: 7em;
}
.padding-xlarge {
  padding-top: 9.5em;
  padding-bottom: 9.5em;
}

/* - Section Margin
--------------------------------------------------------------*/
.margin-xlarge {
  margin-top: 9.5em;
  margin-bottom: 9.5em;
}

/** 2.5 Buttons
--------------------------------------------------------------*/
button{
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 3px;
  transition: 0.3s color ease-out;
}
.btn {
  border: solid 1px var(--black-color);
  padding: 6px 30px;
  border-radius: 0;
  transition: 0.3s ease-in;
}
.btn:hover {
  color: var(--accent-color);
  background-color: var(--dark-color);
}
.btn:focus {
  box-shadow: none;
}

/* Filters Buttons */
#filters .btn{
  border: solid 1px var(--gray-color-500);
}
#filters .btn:hover {
  color: var(--dark-color);
  border: solid 1px var(--black-color);
  background: none;
}
#filters .btn:hover {
  color: var(--dark-color);
  border: solid 1px var(--black-color);
  background: none;
}
#filters .btn.is-checked{  
  border: solid 1px var(--black-color);
}

/* Dark Buttons */
.btn-dark{
  color: var(--light-color);
  background-color:#3074fd;
  padding: 10px 22px;
  border: 0;
  transition: 0.3s ease;
}
.btn-dark:hover{
  background-color: #c73bfe;
  color: var(--light-color);
  border: 0;
}

.btn-green{
  color: var(--light-color);
  background-color:#06c755;
  padding: 10px 22px;
  border: 0;
  transition: 0.3s ease;
}
.btn-green:hover{
 background-color: var(--black-color);
  color: var(--light-color);
  border: 0;
}

/* Primary Buttons */
.btn-primary{
  background-color: var(--primary-color);
  color: var(--light-color);
  padding: 10px 22px;
  border: 0;
  transition: 0.3s ease;
}
.btn-primary:hover{
  background-color: var(--black-color);
  color: var(--light-color);
  border: 0;
}

.form-check-input:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: none;
}
.form-check-input:focus {
    border-color: var(--accent-color);
    outline: 0;
    box-shadow: none;
}

/** 2.6 Forms
--------------------------------------------------------------*/
label{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
	
}
textarea,
select,
input{
  padding: 8px 0;
  background: none;
  border-top: none;
  border-right: none;
  border-left: none;
  border-image: initial;
  border-bottom: 1px solid var(--black-color);
  outline: none;
}
.form-control {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
  color: var(--black-color);
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
.form-control::placeholder {
  color: var(--gray-color-600);
}
.form-control:focus {
  background: none;
  box-shadow: none;
}

/* - Image Hover Effects
------------------------------------------------------------- */
.zoom-effect {
  background-color: #f5f3ef;
  overflow: hidden;
}
img.zoom-in {  
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
}
.zoom-effect:hover img.zoom-in {
  opacity: 0.8;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* Link Effect
 - Place anywhere you want your link to animate
 - Add data-after="Any text" to the link within the class
 - Use span within the anchor tag for the effect to work
------------------------------------------------------------- */
.link-effect a {
  position: relative;
  padding: 0;
  overflow: hidden;
  transition: 0.2s ease-in;
  display: block;
}
.link-effect a::after {
 content: attr(data-after);
 display: inline-block;
 transform: translateY(100%);
 position: absolute;
 left: 0;
 right: 0;
 text-align: inherit;
 transition: inherit;
}
.link-effect a > span {
 display: inline-block;
 transform: translateY(0%);
 transition: inherit;
}
.link-effect:hover a > span {
 transform: translateY(-100%);
}
.link-effect:hover a::after {
 transform: translateY(0%);
}

/* - Preloader
------------------------------------------------------------- */
#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#preloader.hide-preloader {
  opacity: 0;
  visibility: hidden;
}
#loader {
  position: relative;
  left: -9999px;
  width: 24px;
  height: 24px;
  border-radius: 90px;
  background-color: var(--accent-color);
  color: var(--accent-color);
  box-shadow: 9999px 0 0 0 var(--accent-color);
  animation: loader 2s infinite linear;
  animation-delay: 0.2s;
}
#loader::before, #loader::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
#loader::before {
  width: 24px;
  height: 24px;
  border-radius: 90px;
  background-color: var(--accent-color);
  color: var(--accent-color);
  animation: loader-before 2s infinite linear;
  animation-delay: 0s;
}
#loader::after {
  width: 24px;
  height: 24px;
  border-radius: 90px;
  background-color: var(--accent-color);
  color: var(--accent-color);
  animation: loader-after 2s infinite linear;
  animation-delay: 0.3s;
}

@keyframes loader {
  0% {
    box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);
  }
  25%, 50%, 75% {
    box-shadow: 9999px 0 0 0 var(--accent-color);
  }
  100% {
    box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);
  }
}
@keyframes loader-before {
  0% {
    box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);
  }
  25%, 50%, 75% {
    box-shadow: 9984px 0 0 0 var(--accent-color);
  }
  100% {
    box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);
  }
}
@keyframes loader-after {
  0% {
    box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);
  }
  25%, 50%, 75% {
    box-shadow: 10014px 0 0 0 var(--accent-color);
  }
  100% {
    box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);
  }
}

/* - Swiper arrows
------------------------------------------------------------- */
.swiper-buttons .swiper-prev,
.swiper-buttons .swiper-next{
  color: var(--black-color);
  border: none;
  background: none;
  transition: 0.3s ease;
}
.swiper-prev.swiper-button-disabled,
.swiper-next.swiper-button-disabled{
  color: var(--gray-color-500);
  background: none;
}

.swiper-buttons span{
  color: var(--gray-color-500);
}

/*----------------------------------------------*/
/* 3. SITE STRUCTURE */
/*----------------------------------------------*/

/* 3.1 Header
/*----------------------------------------------*/
/* - Search Bar
------------------------------------------------------------- */
#search-bar {
  position: relative;
}
#search-bar input[type="text"] {
  color: var(--dark-gray-color);
  height: 40px;
  display: inline-block;
  border: none;
  outline: none;
  padding-right: 74px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}
#search-bar input[type="text"]:focus:hover {
  border-bottom: 1px solid var(--black-color);
}
#search-bar input[type="text"]:focus {
  width: 200px;
  z-index: 1;
  border-bottom: 1px solid var(--black-color);
  cursor: text;
}
#search-bar button {
  background: transparent;
  border: none;
}

/* cart dropdown */
.cart-dropdown .dropdown-menu {
  min-width: 21rem;
}
@media only screen and (max-width: 340px) {
  .cart-dropdown .dropdown-menu {
    min-width: fit-content;
  }
}

.nav-link{
  color: var(--black-color);
  font-weight: 400;
  text-transform: uppercase;
}
.nav-link.active{
  color: var(--accent-color);
}
.nav-link:focus, .nav-link:hover {
  color: var(--accent-color);
}
.nav-link.dropdown-toggle::after{
  display: none;
}

.dropdown-item.active, .dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover {
  color: var(--black-color);
  background-color: var(--gray-color-400);
}

/* 3.2 Billboard
/*----------------------------------------------*/
.swiper-slide .banner-content{
  max-height: fit-content;
  margin: auto;
  margin-left: 10%;
  padding: 2%;
	width: 100%;
}
#billboard .main-slider-pagination {
  z-index: 999;
  bottom: 62px;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
  background-color: var(--light-color);
  opacity: 0.5;
  width: 18px;
  height: 18px;
  margin: 0 13px !important;
  transition: 0.3s ease;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background-color: var(--light-color);
  opacity: 1;
}

/* 3.3 Services
/*----------------------------------------------*/
.icon-box-icon{
  width: fit-content;
  height: fit-content;
  padding: 25px;
}

/* 3.4 Video
/*----------------------------------------------*/

/* overide */
.modal-dialog {
  max-width: 800px;
  margin: auto;
  height: 100vh;
  display: flex;
  align-items: center;
}
.modal-content {
  padding: 0;
  background-color: #f5f3ef;
  border: none;
  border-radius: 0
}

/* 3.5 Footer
/*----------------------------------------------*/
/*------------ Social Icon -----------*/
.social-links svg {
  width: 20px;
  height: 20px;
  color: var(--gray-color-500);
  transition: 0.3s ease;
}
.social-links svg:hover {
  color: var(--primary-color);
}
.social-links li {
  padding-right: 30px;
}
#footer-bottom a{
  letter-spacing: normal;
}

/* 4. PAGES
/*----------------------------------------------*/

/* 4.1 About Us Page
/*----------------------------------------------*/

/* BreadCrumbs */
.breadcrumbs a{
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: normal;
}

/* Newsletter */
#newsletter .form-control{
  font-size: inherit;
}
#newsletter form input{
  background: none;
}
#newsletter form input:focus{
  box-shadow: none;
}

/* 4.2 Shop Page
--------------------------------------------------------------*/
/* ----------- SideBar -----------*/
.sidebar input.search-field {
  background: none;
  border: none;
  outline: none;
  outline-offset: 0;
}
h5.widget-title {
  font-size: 1.4em;
  margin-bottom: 15px;
}
@media only screen and (max-width: 991px) {
  .widget-search-bar form {
    flex-wrap: wrap;
  }
}

/* ----------- Pagination -----------*/
.paging-navigation .pagination .page-numbers {
  color: var(--gray-color-500);
}
.paging-navigation .pagination .page-numbers:hover,
.paging-navigation .pagination .page-numbers.current {
  color: var(--primary-color);
}

/* 4.3 Single Product Page
/*----------------------------------------------*/
/*---- Single Product Image ----------*/
.single-product .large-swiper{
  padding-left: 0;
}
.product-preview .swiper-slide {
  height: fit-content;
  padding-bottom: 10px;
  transition: cubic-bezier(0.22, 0.78, 0.71, 1.01);
}
.swiper-slide-thumb-active img{
  border: 1px solid var(--accent-color);
}

/*---- Single Product Information ----------*/
.product-info del{
  color: var(--gray-color-500);
}
.product-info hr{
  color: var(--gray-color-500);
}
.rating-container .rating {
  display: flex;
  padding-right: 4px;
  color: var(--black-color);
}
.product-info .product-price strong {
  font-size: 1.6em;
  padding-right: 10px;
}
.product-info .select-item{
  margin-right: 8px;
}
.input-group{
  padding: 6px;
  background-color: var(--gray-color-400);
}
.input-group button{
  border: none;
}

/*---- Product Tabs ----------*/
.nav-tabs {
  border-bottom: 1px solid var(--black-color);
}
.nav-tabs .nav-link {
  color: var(--black-color);
  font-weight: 600;
}
.nav-tabs .nav-link:focus{
  box-shadow: none;
}
.nav-tabs .nav-link {
  background: none;
  border: none;
}
.nav-tabs button.nav-link.active {
  color: var(--primary-color);
  background: none;
}
.nav-tabs button.nav-link:hover {
  color: var(--primary-color);
}
.tabs-listing .tab-content {
  border-bottom: 1px solid var(--black-color);
  padding: 40px 0;
}
.product-tabs .review-item{
  width: 50%;
  margin-bottom: 20px;
}
.product-tabs .review-item .image-holder{
  margin-right: 10px;
}
@media screen and (max-width: 991px) {
  .product-tabs .review-item{
    width: 100%;
    flex-wrap: wrap;
  }
  .product-tabs .review-item .image-holder{
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 991px) {
  .cart-header{
    display: none;
  }
}

/* 4.4 Cart Page
-----------------------------------------------------*/
.shopify-cart .table th {
    width: 36%;
}
.table>:not(caption)>*>*{
  padding: 1.5rem;
}
.shopify-cart .cart-product-detail{
  min-width: 250px;
}
@media screen and (max-width: 775px) {
  .shopify-cart .table thead{
    display: none;
  }
  .shopify-cart .table tbody{
    border: none;
  }
  .shopify-cart .table tbody td{
    display: block;
  }
  .table>:not(caption)>*>*{
    padding: 1rem;
  }
}

/* 4.5 Blog Page
--------------------------------------------------------------*/
/*------------ Sidebar -----------*/
.widget.sidebar-recent-post .card-image{
  max-width: 120px;
}
.sidebar-post-item h4.card-title {
  font-size: 1.2em;
}

/* 4.6 Single Post Page
--------------------------------------------------------------*/
#single-post-navigation .post-navigation span.page-nav-title {
  font-size: 1.5em;
}
.post-navigation svg {
  width: 30px;
  height: 45px;
}
.post-navigation:hover svg,
.post-navigation:focus svg {
  fill: var(--primary-color);
}

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}
.example2{
    display: flex;
}
.example2 label{
    display: block;
    width: 150px;
    background: #c8eac3;
    color: #000;
    padding: 10px;
    margin: 10px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    border-radius: 30px;
    cursor: pointer;
}
.example2 input:checked+label{
    background: #1a720d;
    color: #FFF;
}
.example2 input{
    display: none;
}
.search-box_title{
	font-weight: bold;
}
.search-box label {
	cursor: pointer;
	display: inline-block;
	margin-right: 1px;
	line-height: 16px;
}
.search-box input[type="radio"] {
	width: 16px;
	height: 16px;
	margin: -2px 5px 0 0;
	padding: 0;
	box-sizing: border-box;
	vertical-align: middle;
}
.search-box input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: -2px 5px 0 0;
	padding: 0;
	box-sizing: border-box;
	vertical-align: middle;
}
.cat_image_all {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 680px;
	margin: 3em auto 0;
}
.cat_image {
	width: 48%;
	max-width: 320px;
	margin: 0 0 2em;
}
.cat_image.is-hide {
	display: none;
}
.cat_image a {
	display: block;
	color: #444;
}
.cat_image a:hover {
	text-decoration: underline;
}

/* ラジオボタンの装飾 */
.radio_input {
    display: none;
}

.radio_parts {
    padding-left: 25px;
    position: relative;
    margin-right: 20px;
}

.radio_parts::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #999;
    border-radius: 50%;
}

.radio_input:checked+.radio_parts::after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    background: #0050c1;
    border-radius: 50%;
}

/* チェックボックスの装飾 */
.checkbox_input {
    display: none;
}

.checkbox_parts {
    padding-left: 25px;
    position: relative;
    margin-right: 25px;
}

.checkbox_parts::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #999;
}

.checkbox_input:checked+.checkbox_parts::after {
    content: "";
    display: block;
    position: absolute;
    top: -5px;
    left: 5px;
    width: 7px;
    height: 14px;
    transform: rotate(40deg);
    border-bottom: 3px solid #0050c1;
    border-right: 3px solid #0050c1;
}

/*他エリア*/
.wrapper {
    width: 1000px;
    margin: 30px auto;
}



.search_area {
    text-align: center;
}

.search_area div {
    margin-bottom: 10px;
}

.item_container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    padding: 3px;
    width: calc(100% / 3);
    text-align: center;
	
}

@media screen and (max-width: 775px) {
	.item {
    padding: 1px;
    width: calc(100% / 2);
    text-align: center;
	border: 1px solid #F0F0F0; /* 淵の線を指定 */
}
	}
	
/*絞り込み条件外のアイテム*/
.hide_item {
    display: none;
}


label {
	margin-right: 2px; /* ボタン同士の間隔 */
	margin-bottom: 16px; /* ボタン同士の間隔 */
}
label input {
	display: none; /* デフォルトのinputは非表示にする */
}
label span {
	color: #333; /* 文字色を黒に */
	font-size: 11px; /* 文字サイズを14pxに */
	border: 1px solid #333; /* 淵の線を指定 */
	border-radius: 20px; /* 角丸を入れて、左右が丸いボタンにする */
	padding: 5px 18px; /* 上下左右に余白をトル */
}
label input:checked + span {
	color: #FFF; /* 文字色を白に */
	background: #1C84F9; /* 背景色を薄い赤に */
	border: 1px solid #1C84F9; /* 淵の線を薄い赤に */
}

.line{
	margin-top: -1em ;
margin-bottom: 0.8em ;
}

/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 50%;
   padding:0;
   margin:0;
   font-size: 14px;
   border-right: 1px solid #fff;
}

/*左側メニューを緑色に*/
#sp-fixed-menu li:first-child{
   background: #1C84F9;
}

/*左側メニューをオレンジ色に*/
#sp-fixed-menu li:last-child{
   background: #546AFC;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:20px;
}




.outer-menu {
  position: fixed;
  bottom: 23vh;
  right: 130px;
  z-index: 1;
}
.outer-menu .checkbox-toggle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 60px;
  height: 60px;
  opacity: 0;
}
.outer-menu .checkbox-toggle:checked + .hamburger > div {
  transform: rotate(135deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before,
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  opacity: 0;
}
.outer-menu .checkbox-toggle:checked ~ .menu {
  pointer-events: auto;
  visibility: visible;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: 0.75s;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {
  opacity: 1;
  transition: opacity 0.4s ease 0.4s;
}
.outer-menu .checkbox-toggle:hover + .hamburger {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}
.outer-menu .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 110px;
  height: 110px;
  padding: 0.5em 1em;
  background: linear-gradient(to top right, #C63BFD, #1C84F9);
  border-radius: 4em 4em 4em 4em;
  cursor: pointer;
  transition: box-shadow 0.4s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .hamburger > div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .hamburger > div:before,
.outer-menu .hamburger > div:after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 0;
  width: 100%;
  
  transition: all 0.4s ease;
}
.outer-menu .hamburger > div:after {
  top: 10px;
}
.outer-menu .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  outline: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div {
  width: 200vw;
  height: 200vw;
  color: #FEFEFE;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 00%;
  transition: all 0.3s ease;
  transform: scale(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  display: flex;
flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
  overflow-y: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div > div > ul {
  list-style: none;
  padding: 0 1em;
  margin: 0;
  display: block;
  max-height: 100vh;
}
.outer-menu .menu > div > div > ul > li {
  padding: 0;
  margin: 1em;
  font-size: 24px;
  display: block;
}
.outer-menu .menu > div > div > ul > li > a {
  position: relative;
  display: inline;
  cursor: pointer;
  transition: color 0.4s ease;
}
.outer-menu .menu > div > div > ul > li > a:hover {
  color: #e5e5e5;
}
.outer-menu .menu > div > div > ul > li > a:hover:after {
  width: 100%;
}
.outer-menu .menu > div > div > ul > li > a:after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: -0.15em;
  left: 0;
  width: 0;
  height: 2px;
  background: #e5e5e5;
  transition: width 0.4s ease;
}

.random_box {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}

body.open_popup {
    overflow: hidden;
}

.bg_onetime_popup {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}

body.open_popup .bg_onetime_popup {
    opacity: 1;
    visibility: visible;
}

.onetime_popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 50%;
    min-width: 500px;
    background-color: #fff;
}

.onetime_popup_title {
    position: relative;
    padding: 1em 80px;
    margin: 0px;
    background-color: #3388dd;
    color: #fff;
    font-size: 32px;
    text-align: center;
    line-height: 1.2;
}

.onetime_popup_title_close {
    position: absolute;
    top: 50%;
    right: 30px;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    cursor: pointer;
}
.onetime_popup_title_close::before,
.onetime_popup_title_close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 4px;
    background-color: #fff;
    content: "";
}
.onetime_popup_title_close::before {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.onetime_popup_title_close::after {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.onetime_popup_content {
    padding: 60px 30px;
    text-align: center;
}

details summary {
  list-style: none;
  cursor: pointer;
  padding: 12px;
  font-size: 1rem;
font-weight: 200;
}
details summary::-webkit-details-marker {
  display: none;
}

/**
 * Font Awesomeのプラスアイコン使用
**/
details summary::before {
  font-family: FontAwesome;
  content: '\f067';
  margin-right: 20px;
}
/**
 * アコーディオンがオープン時はマイナスアイコンに変更
**/
details[open] summary::before {
  content: '\f068';
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
	.pc { display: block !important; }
    .sp { display: none !important; }

 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}



.video{
	width: 100%;
	height: 100%;
 justify-content: center;
  }

@media (max-width: 747px) {
  video {
    width: 100%;
    height: 100%;
  }
}

.product{
    display: flex;
	flex-wrap: wrap; /* 折返し指定 */
	gap: 12px 12px; /* 余白 */
	justify-content: center;
  }
 
.toumei_atag{
position:absolute;
top: 0px;
left:0;
display:block;
width:100%;
height:580px;
}



.ranking {
    max-width: 680px;
    margin: auto;
}

.rank-item {
    background: #fff;
    padding: 15px;
    margin: 15px 0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
	
}

.rank-number {
    font-size: 30px;
    font-weight: bold;
    margin-right: 15px;
    color: #000000;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"
}

.rank-item img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 35px;
	margin-left: 15px;
}

.info {
    text-align: left;
}

.info h2 {
    margin: 5px 0;
    font-size: 18px;
    color: #333;
}

.info p {
    margin: 2px 0;
    font-size: 14px;
    color: #666;
}

.bgaria{
	margin: auto;
	
}

figure {margin: 0;}
dd {margin: 0;}
nav ul {list-style: none;}
nav,ul,li,ol {margin: 0;padding: 0;}
section li {margin-left: 1rem;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}



/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	text-decoration: none;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*大きな画面で見た場合に両サイドに見える画像*/
header::before {
	background: url("images/bg_header.jpg") no-repeat center center / cover;	/*背景画像の読み込み*/
}

/*このブロック内のcontents*/
header .contents {
	color: #fff;	/*文字色*/
	padding: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	
}

header .contents a {color: inherit;}

/*ロゴ、謳い文句、ロゴ上の装飾画像を囲むボックス*/
header #logo-container {
	flex: 1;
	background: rgba(0,0,0,0.7);	/*背景色。0,0,0は黒の事で0.7は色が70%出た状態。写真そのまま出したいならこの１行を削除。*/
	padding: 30px 10px 25px;		/*上、左右、下への余白*/
	position: relative;
	text-align: center;
}

/*ロゴ画像*/
header .logo img {
	display: block;
	margin: 0 auto;
	width: 250px;		/*ロゴ画像の幅。お好みで。*/
}

/*謳い文句*/
header p {
	display: block;
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/*ロゴ上の装飾画像（New Open）*/
header .kazari {
	position: absolute;
	left: 20%;		/*ロゴが入ったボックスに対して左からの配置指定*/
	top: -50px;		/*ロゴが入ったボックスに対して上からの配置指定。マイナスがつくので、ボックスから飛び出る形になります。*/
	width: 140px;	/*画像の幅*/
}


/*ヘッダー下部のSCROLLアニメーション
---------------------------------------------------------------------------*/
/*アニメーション設定*/
@keyframes scroll-line {
  0% {transform: scaleY(1);}
  50% {transform: scaleY(0);}
  100% {transform: scaleY(0);}
}

/*ラインアニメーションを囲むブロック*/
.scroll-container {
	position: absolute;
	width: 100px;
	left: calc(50% - 50px);
	bottom: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 0.85rem;	/*SCROLLのテキストのサイズ。85%*/
}

/*「SCROLL」のテキスト部分*/
.scroll-container p {
	margin: 0;padding: 0;
	text-align: center;
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border: 1px solid rgba(255,255,255,0.5);	/*テキストの色。255,255,255は白のことで0.5は色が50%出た状態。*/
	border-radius: 50%;	/*枠を円形にする*/
}

/*ラインアニメーションの土台部分*/
.scroll-line {
	margin: 0 auto;
	position: relative;
	width: 1px;		/*ラインアニメーションの幅。お好みで。*/
	height: 50px;	/*ラインアニメーションの高さ。お好みで。*/
	background: rgba(255,255,255,0.5);	/*ラインアニメーションの土台部分の色。255,255,255は白のことで0.5は色が50%出た状態。*/
}

/*ラインアニメーション本体*/
.scroll-line span {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #fff;	/*ラインアニメーションの色*/
	animation: scroll-line 2s infinite;	/*2sがアニメーションにかける時間。2秒。*/
	transform-origin: bottom;
}


/*ヘッダーメニュー（大きな画面で見た場合に左側に固定表示されるメニュー）
---------------------------------------------------------------------------*/
/*1000px未満は非表示*/
#header-menu {
	display: none;
}

	/*画面幅1000px以上の追加指定*/
	@media screen and (min-width:1000px) {

	#header-menu {
		display: block;	
		position: fixed;z-index: 1;
		left: 30px;
		top: 26%;	/*上からの配置場所*/
	}
	
	/*メニュー１個あたり*/
	#header-menu li a {
		text-decoration: none;display: block;
		background: #222222;		/*背景色。冒頭のsecondary-colorを読み込む。*/
		color: #ffffff;	/*文字色。冒頭のsecondary-inverse-colorを読み込む。*/
		margin-bottom: 30px;					/*下に空けるスペース。メニュー同士の上下間の隙間。*/
		border-radius: 50px 50px 50px 50px;		/*角丸の指定。左上、右上、右下、左下への順。100pxの所はとりあえず大きな数字にしておけばOK。*/
		padding: 12px 40px 12px 40px;	/*ボタン内の余白。上、右、下、左への順番。*/
		font-size: 1.2rem;	/*文字サイズを120%に。*/
		text-align: center;
	}
	
	/*現在表示中のメニューの背景色と、マウスオン時共通*/
	#header-menu li.active a,
	#header-menu li a:hover {
		background: var(--accent-color);	/*css冒頭のaccent-colorを読み込む*/
	}

	}/*追加指定ここまで*/


/*背景画像共通（大きな画面で見た場合に両サイドに見える画像）
---------------------------------------------------------------------------*/
.section::before {
	opacity: 0;
	content: '';
	position: fixed;z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.section.active::before {
	opacity: 1;
}
.section.inactive::before {
	opacity: 0;
}


/*contents（各セクションブロック直下にあるボックス）
---------------------------------------------------------------------------*/
.contents {
	background: #ffffff;		/*背景色。冒頭のprimary-colorを読み込む。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込む。*/
	padding: var(--global-space);			/*ボックス内の余白。冒頭のglobal-spaceを読み込む。*/
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	overflow-x: hidden;
	box-shadow: -10px 12px 16px 1px rgba(0, 0, 0, .2);
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	.contents,
	#gallery .gallery-box {
		max-width: 560px;	/*大きな画面になった場合のコンテンツ幅*/
		margin: 0 auto;		/*画面の左右中央に配置*/
		overflow-x: visible;
	}

	}/*追加指定ここまで*/


/*h2見出し共通*/
.contents h2 {
	margin: 0;
	line-height: 1.8;	/*行間をデフォルトより狭くする。２行になった場合に間があきすぎるので。*/
	padding: 5px 0;	/*上下、左右への余白*/
	font-size: 1.8rem;	/*文字サイズ180%*/
	
}

/*h2内の小文字*/
.contents h2 span.hosoku {
	display: block;
	font-size: 0.7rem;		/*文字サイズを70%に*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	padding-bottom: 0.5rem;	/*下の見出しとの間の余白。0.5文字分。*/
}




/*大きな画面で見た場合に両サイドに見える画像*/
#sptop::before {
	background: url('images/bg_1.jpg') no-repeat center center / cover;	/*背景画像の読み込み*/
}

/*このブロック内のcontents*/
#sptop .contents {
	background: #ffffff ;/*背景色*/
	
	color: var(--accent-inverse-color);	/*文字色。冒頭のaccent-inverse-colorを読み込む。*/
}



#pickup::before {
	background: url('images/bg_1.jpg') no-repeat center center / cover;	/*背景画像の読み込み*/
}

/*このブロック内のh2見出し*/
#pickup h2 {
	position: relative;
	padding-left: 40px;		/*左に空けるスペース。文字と画像が重ならないように適当な余白を確保。*/
	padding-right: 40px;	/*右に空けるスペース。同上。*/
}

/*見出し左右の画像の共通設定*/
#pickup h2::before,
#pickup h2::after {
	content: "";
	position: absolute;
	width: 80px;	/*画像の幅*/
	height: 140px;	/*画像の高さ*/
	top: -30px;		/*上からの距離*/
	background: url("images/bg_1.jpg") no-repeat center center / contain;	/*画像の読み込み*/
}

/*左側の画像の追加設定*/
#pickup h2::before {
	left: -40px;	/*左からの配置場所*/
}

/*右側の画像の追加設定*/
#pickup h2::after {
	right: -40px;	/*右からの配置場所*/
	transform: scale(-1, 1);	/*画像を左右反転させる*/
}

/*こだわりテキストが入った背景色（bg1）*/
#pickup .bg1 {
	background: #F0ECE5;	/*背景色*/
	padding: 20px 60px;		/*上下、左右への余白*/
	margin: 0 calc(-1 * var(--global-space));	/*両サイドの余白を相殺して幅一杯に使う*/
}

/*このボックス内のイメージ写真*/
#pickup aside {
	margin: 0 calc(-1 * var(--global-space));	/*両サイドの余白を相殺して幅一杯に使う*/
	border-radius: 100px 100px 0px 0px;	/*角を丸くする指定。左上、右上、右下、左下への順番。普通に表示させたいならこの１行を削除。*/
	overflow: hidden;
}

#newregi.contents {
	background: #D6DFFF;
}

#newregi::before {
	background: url('images/bg_1.jpg') no-repeat center center / cover;	/*背景画像の読み込み*/
}

/*このブロック内のh2見出し*/
#newregi h2 {
	background: var(--secondary-color);		/*背景色。冒頭のsecondary-colorを読み込む。*/
	color: var(--secondary-inverse-color);	/*文字色。secondary-inverse-colorを読み込む。*/
	padding: 20px 0;	/*上下、左右への余白*/
	margin-bottom: var(--global-space);		/*見出しの下に空ける隙間。冒頭のglobal-spaceを読み込む。*/
	border-radius: 30px 30px 0px 0px;		/*角を丸くする指定。左上、右上、右下、左下への順番*/
}


.newregi img {display: block;}
.newregi {
	position: relative;
	margin-bottom: var(--global-space);	/*下に空けるスペース。冒頭のglobal-spaceを読み込む。*/
}

#posts::before {
	background: url('images/bg_1.jpg') no-repeat center center / cover;	/*背景画像の読み込み*/
}




@keyframes slide-rtl {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}


/*tableっぽいdl（「お知らせ」「店舗情報」「メニュー（menu.html）」）
---------------------------------------------------------------------------*/
dl.table {
	display: grid;
	grid-template-columns: 100px auto;	/*dtとddを横並びにし、dtの幅を100pxに、残りは自動。*/
	margin-bottom: 50px;
	line-height: 2;
}
dl.table dt,
dl.table dd {
	padding: 1rem;
}

/*menu.htmlのテキストのみのお品書きに使用*/
dl.table.reverse {
	grid-template-columns: auto 100px;	/*dtとddを横並びにし、dtの幅を自動に、残りは10px。*/
}
dl.table.reverse dd {
	text-align: right;
}

/*menuブロックのみ、奇数番目のメニューの行に薄く背景色をつける*/
#menu dl.table dt:nth-of-type(odd),
#menu dl.table dd:nth-of-type(odd) {
	background: rgba(0,0,0,0.04);
}



/*大きな画面で見た場合に両サイドに見える画像*/
#Ranking::before {
	background: url('images/bg_1.jpg') no-repeat center center / cover;	/*背景画像の読み込み*/
}


/*Follow Usの画像*/
#Ranking h3 img {
	display: block;
	width: 150px;	/*画像の幅*/
	margin: 0 auto;
}

/*Google Map*/
#Ranking iframe {
	width: 100%;
	height: 500px;	/*高さ*/
}


/*フッター設定（コピーライト部分）
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer {
	font-size: 0.8rem;		/*文字サイズ80%*/
	text-align: center;		/*内容をセンタリング*/
}






/*btn1（お品書きメニューブロックの一番下で使っているシンプルボタン）
---------------------------------------------------------------------------*/
.btn1 a {
	display: block;text-decoration: none;
	text-align: center;
	border: 1px solid #333;	/*枠線の幅、線種、色*/
	padding: 20px;			/*ボタン内の余白*/
	font-size: 1.2rem;		/*文字サイズ120%*/
	border-radius: 3px;		/*角を少しだけ丸く*/
}

/*右側の矢印アイコン設定*/
.btn1 a::after {
	transition: 0.3s;
	font-family: "Font Awesome 6 Free";
	content: "\f054";		/*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold;		/*この手の設定がないとアイコンが出ない場合があります*/
	margin-left: 10px;		/*アイコンとテキストとの間に空けるスペース*/
}	

/*マウスオン時に矢印の左側のスペースを広くする*/
.btn1 a:hover::after {
	margin-left: 15px;
}


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar a {display: block;text-decoration: none;}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}


/*開閉メニュー
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 90px 10vw 50px;				/*ブロック内の余白。上、左右、下への順番。*/
	background: var(--secondary-color);		/*背景色。css冒頭のsecondary-colorを読み込みます。*/
	color: var(--secondary-inverse-color);	/*文字色。css冒頭のsecondary-inverse-colorを読み込みます。*/
	animation: opa1 1s both;				/*opa1を実行する。1sは1秒の事。*/
}

/*メニュー１個あたりの設定*/
.small-screen #menubar nav ul li {
	border: 1px solid var(--secondary-inverse-color);	/*枠線の幅、線種、varは色の事でcss冒頭のsecondary-inverse-colorを読み込みます。*/
	margin: 1rem 0;			/*メニューの外側に空けるスペース。上下、左右への順番。*/
	border-radius: 5px;		/*角を丸くする指定*/
}
.small-screen #menubar a {
	color: inherit;
	padding: 1rem 2rem;	/*メニュー内の余白。上下、左右へ。*/
}

/*マウスオン時*/
.small-screen #menubar a:hover {
	color: var(--secondary-color);				/*文字色。css冒頭のsecondary-colorを読み込みます。*/
	background: var(--secondary-inverse-color);	/*背景色。css冒頭のsecondary-inverse-colorを読み込みます。*/
}


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

	.manual.margin-left {padding-left: 4vw;}


.clearfix::after {content: "";display: block;clear: both;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #000;border: 1px solid #fff;border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.color-check, .color-check a {color: var(--accent-color);}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}
pre {white-space: pre-wrap;word-wrap: break-word;overflow-wrap: break-word;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		.ws {width: 48%;display: inline;}
		.sh {display: none;}
		.pc {display: block;}

	}/*画面幅900px以上の追加指定ここまで*/