@charset "UTF-8";

/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 5.6
Requires PHP: 5.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 * Fonts................Any font files, if the project needs specific fonts.
 * Global...............Project-specific, globally available variables.
 *
 * TOOLS
 * Functions............Global functions.
 * Mixins...............Global mixins.
 *
 * GENERIC
 * Normalize.css........Normalise browser defaults.
 * Breakpoints..........Mixins and variables for responsive styles
 * Vertical-margins.....Vertical spacing for the main components.
 * Reset................Reset specific elements to make them easier to style in other contexts.
 * Clearings............Clearnings for the main components.
 *
 * ELEMENTS
 * Blockquote...........Default blockquote.
 * Forms................Element-level form styling.
 * Headings.............H1–H6
 * Links................Default links.
 * Lists................Default lists.
 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
 *
 * BLOCKS
 * Audio................Specific styles for the audio block.
 * Button...............Specific styles for the button block.
 * Code.................Specific styles for the code block.
 * Collumns.............Specific styles for the collumns block.
 * Cover................Specific styles for the cover block.
 * File.................Specific styles for the file block.
 * Gallery..............Specific styles for the gallery block.
 * Group................Specific styles for the group block.
 * Heading..............Specific styles for the heading block.
 * Image................Specific styles for the image block.
 * Latest comments......Specific styles for the latest comments block.
 * Latest posts.........Specific styles for the latest posts block.
 * Legacy...............Specific styles for the legacy gallery.
 * List.................Specific styles for the list block.
 * Meda text............Specific styles for the media and text block.
 * Navigation...........Specific styles for the navigation block.
 * Paragraph............Specific styles for the paragraph block.
 * Pullquote............Specific styles for the pullquote block.
 * Quote................Specific styles for the quote block.
 * Search...............Specific styles for the search block.
 * Separator............Specific styles for the separator block.
 * Spacer...............Specific styles for the spacer block.
 * Table................Specific styles for the table block.
 * Verse................Specific styles for the verse block.
 * Video................Specific styles for the video block.
 * Utilities............Block alignments.
 *
 * COMPONENTS
 * Header...............Header styles.
 * Footer...............Footer styles.
 * Comments.............Comment styles.
 * Archives.............Archive styles.
 * 404..................404 styles.
 * Search...............Search styles.
 * Navigation...........Navigation styles.
 * Footer Navigation....Footer Navigation styles.
 * Pagination...........Pagination styles.
 * Single...............Single page and post styles.
 * Posts and pages......Misc, sticky post styles.
 * Entry................Entry, author biography.
 * Widget...............Widget styles.
 * Editor...............Editor styles.
 *
 * UTILITIES
 * A11y.................Screen reader text, prefers reduced motion etc.
 * Color Palette........Classes for the color palette colors.
 * Editor Font Sizes....Editor Font Sizes.
 * Measure..............The width of a line of text, in characters.
 */

/* Categories 01 to 03 are the basics. */

/**********************************************************************************
RESET
***********************************************************************************/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;
}

img, fieldset {
	border: 0;
}

/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}


/**********************************************************************************
CLEARFIX
***********************************************************************************/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }


/**********************************************************************************
GENERAL STYLING
***********************************************************************************/
html, body {
	font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック","Helvetica Neue","Helvetica","Arial",sans-serif;
	font-size:14px;
	line-height:20px;
	text-align:left;
	color:#fff;
	background-color:#000;
}

a {
	color: #fff;
	text-decoration: none;
	outline: none;
}
a:hover {
	text-decoration: underline;
}
a:hover img.link {
	filter: alpha(opacity=80);
	-webkit-opacity:0.8;
	-moz-opacity:0.8;
	-o-opacity:0.8;
	-ms-opacity:0.8;
	opacity:0.8;
}


/**********************************************************************************
wrapper
***********************************************************************************/
.wrapper {
	width:980px;
	margin:0 auto;
	overflow:hidden;
}


/**********************************************************************************
background
***********************************************************************************/
#back_header {
	background-color:#f00;
	width:100%;
}

#back_footer {
	background-color:#f00;
}

.back_navi {
	background-color:#f00;
	width:100%;
	padding:10px 0;
}

#back_noodle {
	background-image: url(http://g-fujisawa.com/wp-content/uploads/2023/03/image_back01.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-size:contain;
}


/**********************************************************************************
h
***********************************************************************************/
h1.title {
	margin:0;
	padding:0;
	text-align:left;
	font-size:10px;
	color:#fff;
	padding:10px 0;
}

h2.logo {
	margin:0;
	padding:20px 0;
	text-align:left;
	color:#fff;
	font-size:25px;
}

h3.tel {
	margin:0;
	padding:20px 0;
	text-align:right;
	color:#fff;
	font-size:25px;
}
h3.title {
	margin:0;
	padding:20px 0;
	text-align:center;
	font-size:20px;
	background:rgba(255,0,0,0.7);
	width:100%;
}

h4.title {
	margin:0 0 20px 0;
	padding:0 0 0 15px;
	font-size:18px;
	color:#fff;
	line-height:25px;
	border-left:5px solid #f6ce00;
}

h4.title_menu {
	margin:0 auto 20px;
	overflow:hidden;
	padding:0 0 10px 0;
	font-size:20px;
	color:#f6ce00;
	text-align:center;
	border-bottom:5px solid #f6ce00;
	width:100%;
}


/************************************************************************************
breadcrumb
*************************************************************************************/
ul.bc {
	margin:0;
	padding:0 0 20px 0;
	list-style-type:none;
}
ul.bc li {
	float:left;
	font-size:12px;
	text-align:left;
	padding-right:10px;
}
ul.bc li a:link, ul.bc li a:visited {
	color:#f00;
	text-decoration: none;
}
ul.bc li a:hover {
	color:#f00;
	text-decoration: none;
}


/**********************************************************************************
header
***********************************************************************************/
#header_left {
	float:left;
}
#header_right {
	float:right;
}


/**********************************************************************************
navi
***********************************************************************************/
.main_navi {
	position: relative;
	overflow: hidden;
}
.main_navi a {
	color:#fff;
}
.main_navi ul {
  position: relative;
  left: 50%;
  float: left;
}
.main_navi ul li {
  position: relative;
  left: -50%;
  float: left;
  list-style: none;
}
.main_navi ul li.item {
	padding:0 30px;
	color:#fff;
}

/* 矢印つきリスト2 */
ul.list li a {
	position: relative;
	display: block;
	padding: 15px 25px 15px 10px;
	border-bottom: 1px solid #ccc;
}
ul.list li a::after {
	position: absolute;
	top: 50%;
	right: 10px;
	display: block;
	content: '';
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}


/************************************************************************************
button
*************************************************************************************/
.btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 300px;
	height: 60px;
	color: #f6ce00;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: 0.3s;
	border: 1px solid #f6ce00;
	border-radius: 30px;
}

.btn a:hover {
	color: #fff;
}

.button01 a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	transform: rotate(45deg) translateY(-50%);
	width: 6px;
	height: 6px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: #f6ce00;
}

.button01 a:hover {
	background-color: #f6ce00;
	border: 1px solid #f6ce00;
	color:#000;
}

.button01 a:hover::after {
	border-color: #000 #000 transparent transparent;
}


/**********************************************************************************
index
***********************************************************************************/
#notes_box {
	width:100%;
	border:2px solid #f00;
	text-align:center;
	background-color:#fff;
}

#index_box {
	position: relative;
	width:100%;
	height:520px;
}

#index_left {
	float:left;
	width:400px;
	margin-right:40px;
}
#index_right {
	margin-left:440px;
}


table.store_detail {
	width:100%;
	border:0;
}
table.store_detail th {
	color:#f6ce00;
	padding:5px 0;
	width:100px;
	text-align:left;
}
table.store_detail td {
	padding:5px 0;
	text-align:left;
}

ul.photo {
	margin:0;
	padding:0;
	list-style-type:none;
}
ul.photo li, ul.photo li.item {
	float:left;
	width:300px;
}
ul.photo li.item {
	margin-right:40px;
}


/**********************************************************************************
menu
***********************************************************************************/
ul.menu_list {
	margin:0;
	padding:0;
	list-style-type:none;
}
ul.menu_list li {
	float:left;
	width:230px;
	margin-right:20px;
}
ul.menu_list li:last-child {
	margin:0;
}
ul.menu_list li span {
	color:#f6ce00;
}

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f6ce00;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}


/**********************************************************************************
access
***********************************************************************************/
table.access {
	width:100%;
	border:none;
	border-collapse:collapse;
}
table.access th.cell1 {
	width:100px;
	padding:20px 0;
	text-align:left;
	color:#f6ce00;
	border-top:1px solid #f6ce00;
	border-bottom:1px solid #f6ce00;
}
table.access td.cell1 {
	padding:20px 0;
	border-top:1px solid #f6ce00;
	border-bottom:1px solid #f6ce00;
}
table.access th.cell2 {
	width:100px;
	padding:20px 0;
	text-align:left;
	color:#f6ce00;
	border-bottom:1px solid #f6ce00;
}
table.access td.cell2 {
	padding:20px 0;
	border-bottom:1px solid #f6ce00;
}


/**********************************************************************************
sitemap
***********************************************************************************/
ul.sitemap {
	margin:0;
	padding:0 0 0 25px;
	font-size:16px;
}
ul.sitemap li {
	padding-bottom:20px;
}
ul.sitemap li:last-child {
	padding:0;
}


/**********************************************************************************
footer
***********************************************************************************/
#footer {
	clear: both;
}
#footer a {
	color: #fff;
	text-decoration:none;
}

.footer_navi {
	position: relative;
	overflow: hidden;
}
.footer_navi ul {
  position: relative;
  left: 50%;
  float: left;
}
.footer_navi ul li {
  position: relative;
  left: -50%;
  float: left;
  list-style: none;
}
.footer_navi ul li.item {
	padding:0 30px;
}

.footer_sns {
	position: relative;
	overflow: hidden;
}
.footer_sns ul {
  position: relative;
  left: 50%;
  float: left;
}
.footer_sns ul li {
  position: relative;
  left: -50%;
  float: left;
  list-style: none;
}
.footer_sns ul li.item {
	padding:0 20px;
}


/**********************************************************************************
copyright
***********************************************************************************/
#copyright {
	clear: both;
	width:100%;
	padding:0 0 20px 0;
	font-size:10px;
	color:#fff;
	text-align:center;
	font-weight:bold;
}


/**********************************************************************************
hr
***********************************************************************************/
.hr01 {
	width:100%;
	height:1px;
	background-color:#f6ce00;
	border:none;
	color:#f6ce00;
}

.hr02 {
	color:#444;
	display:flex;
	align-items:center;
}
.hr02:before, .hr02:after {
	content: "";
	flex-grow:1;
	height:1px;
	background:#444;
	display:block;
}
.hr02:before {
	margin-right:20px;
}
.hr02:after {
	margin-left:20px;
}


/**********************************************************************************
padding
***********************************************************************************/
.pd20 {
	padding:20px;
}

.pd_tb10 {
	padding:10px 0;
}
.pd_tb20 {
	padding:20px 0;
}
.pd_tb30 {
	padding:30px 0;
}


/**********************************************************************************
height
***********************************************************************************/
.height10 {
	height:10px;
}
.height20 {
	height:20px;
}
.height30 {
	height:30px;
}
.height40 {
	height:40px;
}
.height50 {
	height:50px;
}


/************************************************************************************
WooCommerce
*************************************************************************************/
.woocommerce-breadcrumb {
	margin:30px 0;
}

h3.woocommerce_title {
	margin:0 0 20px 0;
	padding:10px 0 10px 15px;
	font-size:25px;
	color:#fff;
	border-left:5px solid #f6ce00;
}


/************************************************************************************
WooCommerce shop
*************************************************************************************/
ul.products li.product {
	float:left;
	margin-right:20px;
	max-width:300px;
}
ul.products li.product:last-child {
	margin:0;
}


/************************************************************************************
WooCommerce product
*************************************************************************************/
h1.product_title {
	margin-bottom:20px;
}
p.price {
	font-size:18px;
	margin-bottom:20px;
}
.woocommerce-product-details__short-description {
	margin-bottom:10px;
}
p.stock {
	display:none;
}
.quantity {
	margin-bottom:20px;
}
.single_add_to_cart_button {
	padding:10px;
	margin-bottom:10px;
}
span.sku_wrapper {
	display:none;
}

section.related {
	border-top:1px solid #fff;
	padding-top:30px;
}
section.related h2 {
	padding:10px 0 10px 15px;
	border-left:5px solid #f6ce00;
}
section.related h2.woocommerce-loop-product__title {
	padding:0;
	border:none;
}

.wc-forward {
	padding:10px;
}


/************************************************************************************
WooCommerce cart
*************************************************************************************/
#post-180 {
	margin-top:30px;
}

table.shop_table th, table.shop_table td {
	padding:10px;
}

.checkout-button {
	border:1px solid #fff;
}

div.cart_totals h2 {
	margin-top:30px;
}
#select2-calc_shipping_country-container, .select2-results__option, #select2-calc_shipping_state-container {
	color:#000;
}


/************************************************************************************
WooCommerce checkout
*************************************************************************************/
#order_review_heading {
	margin-top:30px;
	padding:10px 0 10px 15px;
	border-left:5px solid #f6ce00;
}

div.woocommerce-billing-fields__field-wrapper label {
	padding-top:10px;
}
div.woocommerce-billing-fields__field-wrapper label:last-child {
	padding:0;
}
div.woocommerce-additional-fields__field-wrapper label {
	padding-top:10px;
}
div.woocommerce-additional-fields__field-wrapper label:last-child {
	padding:0;
}

.payment_box label {
	color:#000;
}
.payment_box p {
	color:#000;
}

.woocommerce-checkout-review-order button#place_order {
	width:300px;
	padding:10px;
}


/************************************************************************************
WooCommerce order-received
*************************************************************************************/
.woocommerce-order {
	margin-top:30px;
}


/************************************************************************************
WooCommerce my-account
*************************************************************************************/
.entry-content {
	margin-top:30px;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link {
	padding-bottom:10px;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link:last-child {
	padding:0;
}


/************************************************************************************
WooCommerce service
*************************************************************************************/
ol.woocommerce_service {
	margin:0;
	padding:0 0 0 25px;
}
ol.woocommerce_service li {
	padding-bottom:10px;
}
ol.woocommerce_service li:last-child {
	padding:0;
}

ul.woocommerce_service {
	margin:0;
	padding:0 0 0 25px;
}
ul.woocommerce_service li {
	padding-bottom:5px;
}
ul.woocommerce_service li:last-child {
	padding:0;
}


/************************************************************************************
WooCommerce transactions
*************************************************************************************/
table.transactions {
	width:100%;
	border-collapse:collapse;
}
table.transactions th {
	width:180px;
	padding:20px;
	text-align:left;
	color:#fff;
	background-color:#f00;
	border:1px solid #b71c1c;
}
table.transactions td {
	padding:20px;
	border:1px solid #b71c1c;
}

ul.transactions {
	margin:0;
	padding:0 0 0 25px;
}
ul.transactions li {
	padding-bottom:10px;
}
ul.transactions li:last-child {
	padding:0;
}