@charset "UTF-8";

/*
Theme Name: sakuda
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.1
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............Clearings 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.
 * Columns..............Specific styles for the columns 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.
 * Media 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.
 */

/*----------------------------------------------------
	reset
----------------------------------------------------*/
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, figure, figcaption
{ margin: 0; padding: 0;}
input, textarea
{ margin: 0; font-size: 100%;}
label
{ cursor: pointer;}
table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}
fieldset, img
{ border: 0;}
img
{ max-width: 100%; width: 100%; height: auto; vertical-align: top;}
address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}
ol, ul
{ list-style: none;}
caption, th
{ text-align: left;}
h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: bold;}
q:after, q:before
{ content:'';}
a, input
{ outline: none; }
input, textarea
{ border-radius: 0; font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif; }
input[type="button"],input[type="submit"]
{ -webkit-appearance: none; background: none; border: none; padding: 0; cursor: pointer;}
abbr, acronym
{ border: 0;}
*
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

/*----------------------------------------------------
	common
----------------------------------------------------*/
body{
  font-size: 14px;
  line-height: 1.6;
  color: #000;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
  height: 100%;
  width: 100%;
  text-align: left;
  margin: 0px;
  padding: 0px;
  background-image: url(/wp-content/themes/sakuda/img/bg.jpg);
  -webkit-text-size-adjust: 100%;
}

body.fl.en{
  font-size: 16px;
  line-height: 1.6;
  color: #222;
  font-family: futura-pt,Futura PT, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  margin: 0px;
  padding: 0px;
  background-image: url(/wp-content/themes/sakuda/img/bg.jpg);
  -webkit-text-size-adjust: 100%;
}

a{
  color: #000;
  text-decoration: none;
}

.mincho  { 
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

::selection {
  background: #444;
  color: #fff;
  text-shadow: none;
}
::-moz-selection {
  background: #444;
  color: #fff;
  text-shadow: none;
}


/*----------------------------------------------------
	float,margin,padding
----------------------------------------------------*/
.fl-clear{ clear:both;}
.fl-L{ float:left;}
.fl-R{ float:right;}
.txtc{ text-align:center;}
.txtr{ text-align:right;}

.mgB0{ margin-bottom:0px;}
.mgB5{ margin-bottom:5px;}
.mgB10{ margin-bottom:10px;}
.mgB15{ margin-bottom:15px;}
.mgB20{ margin-bottom:20px;}
.mgB30{ margin-bottom:30px;}
.mgB40{ margin-bottom:40px;}
.mgB50{ margin-bottom:50px;}
.mgB80{ margin-bottom:80px;}
.mgB150{ margin-bottom:150px;}

.mgT0{ margin-top:0px;}
.mgT5{ margin-top:5px;}
.mgT10{ margin-top:10px;}
.mgT15{ margin-top:15px;}
.mgT20{ margin-top:20px;}
.mgT30{ margin-top:30px;}
.mgT40{ margin-top:40px;}
.mgT50{ margin-top:50px;}

.mgR0{ margin-right:0px;}
.mgR5{ margin-right:5px;}
.mgR10{ margin-right:10px;}
.mgR15{ margin-right:15px;}
.mgR20{ margin-right:20px;}
.mgR30{ margin-right:30px;}
.mgR40{ margin-right:40px;}
.mgR50{ margin-right:50px;}

.mgL0{ margin-left:0px;}
.mgL5{ margin-left:5px;}
.mgL10{ margin-left:10px;}
.mgL15{ margin-left:15px;}
.mgL20{ margin-left:20px;}
.mgL30{ margin-left:30px;}
.mgL40{ margin-left:40px;}
.mgL50{ margin-left:50px;}

.pdgL0{ padding-left:0px;}
.pdgL5{ padding-left:5px;}
.pdgL10{ padding-left:10px;}
.pdgL15{ padding-left:15px;}
.pdgL20{ padding-left:20px;}
.pdgL30{ padding-left:30px;}
.pdgL40{ padding-left:40px;}
.pdgL50{ padding-left:50px;}

.fS10{ font-size:10px;}
.fS14{ font-size:14px;}
.fS16{ font-size:16px;}
.fS18{ font-size:18px;}
.fS20{ font-size:20px;}


/*----------------------------------------------------
	other
----------------------------------------------------*/
.over{
	cursor: pointer;
}
.pagenav{
	font-family: Arial, Helvetica, sans-serif;
	overflow: hidden;
}
.tablenav{
	text-align: center;
	margin: 0 0 100px;
	font-size: 79%;
	clear: left;
}
.tablenav a{
	color: #000!important;
	text-align: center;
	text-decoration: none;
	line-height: 1;
	margin: 2px 3px 2px 0;
	padding: 6px;
	display: inline;
	border: 1px solid #806640;
	display: inline-block;
	vertical-align: top;
}
.tablenav a:hover{
	color: #FFF!important;
	text-decoration: none;
	background: #806640;
	border: 1px solid #806640;
	display: inline-block;
	vertical-align: top;
	text-decoration: none!important;
}
.tablenav span{
	font-style: normal;
	color: #FFF;
	text-align: center;
	line-height: 1;
	margin: 2px 3px 2px 0;
	padding: 6px;
	background: #806640;
	border: 1px solid #806640;
	display: inline-block;
	vertical-align: top;
	text-decoration: none;
}
#listback{
	text-align:center;
	margin: 40px 0;
	font-size: 79%;
	clear:left;
}
#listback a{
	color:black;
	text-align: center;
	line-height: 1;
	margin: 2px 3px 2px 0;
	padding: 6px;
	display: inline;
	border: 1px solid #806640;
	display: inline-block;
	vertical-align: top;
	text-decoration: none;
	color: #000!important;
}
#listback a:hover{
	color: white;
	text-decoration: none;
	background: #806640;
	border: 1px solid #806640;
	display: inline-block;
	vertical-align: top;
	text-decoration: none;
	color: #FFF!important;
	text-decoration: none!important;
}
#breadcrumb{
	margin-bottom: 30px;
	background: #eee;
}
#breadcrumb ul{
	width: 960px;
	margin: 0 auto;
	padding: 10px 0;
	overflow: hidden;
	background: #eee;
}
#breadcrumb li{
	float: left;
	margin-right: 10px;
}
.corner{
	border-radius: 10px; /* CSS3草案 */
	-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
	-moz-border-radius: 10px; /* Firefox用 */
	/*IEはJSで適用*/
}

/*----------------------------------------------------
	ie8
----------------------------------------------------*/
.ie7 #about-kanazawahaku h2 img{
  width: 326px;
}
.ie7 #product h2 img{
  width: 185px;
}
.ie7 #product .about h3 img,
.ie7 #product .centered h3 img{
  width: 318px;
}
.ie7 #product .building h3 img,
.ie7 #product .material h3 img,
.ie7 #product .food h3 img{
  width: 281px;
}
.ie7 #product .sticker h3 img{
  width: 210px;
}
.ie7 #product .centered img{
  width: 350px;
}
.ie7 #trial .flow h3 img{
  width: 175px;
}
.ie7 #trial .product h3 img{
  width: 139px;
}
.ie7 #trial .calender h3 img{
  width: 139px;
}
.ie7 #trial .form h3 img{
  width: 208px;
}
.ie7 #trial .product .item{
  float: left;
  display: block;
}
.ie8 #trial .flow .arw{
  background: none;
  width: 33px
}
#trial .flow .arw{
  width: 33px!important;
}
#trial .product .item .last{
  width: 229px!important;
}
.ie7 #onlineshop h2 img{
  width: 423px;
}
.ie7 #recomended-spot h2 img{
  width: 654px;
}
.ie7 #purchase h2 img{
  width: 428px;
}
.ie7 #blog h2 img{
  width: 129px;
}
.ie7 #news h2 img{
  width: 185px;
}
.ie7 #faq h2 img{
  width: 273px;
}
.ie7 #faq .block li,
.ie8 #faq .block li{
  display: inline;
  padding: 0 20px;
}
.ie7 #faq .block ul,
.ie8 #faq .block ul{
  width: 515px;
  margin: 0 auto;
}
.ie7 #staff h2 img{
  width: 373px;
}
.ie7 #recruit h2 img{
  width: 185px;
}
.ie7 #csr h2 img{
  width: 376px;
}
.ie7 #privacy h2 img{
  width: 470px;
}
.ie7 #contact h2 img{
  width: 277px;
}
.ie7 #contact .tel h3 img{
  width: 356px;
}
.ie7 #contact .number img{
  width: 419px;
}
.ie7 #contact .form h3 img{
  width: 462px;
}
.ie7 #contact .tab li{
  width: 20%;
  float: left;
}
.ie7 #contact #submit,
.ie8 #contact #submit{
  background-image: none;
  padding: 0 40px;
}
.ie7 .btn a,
.ie8 .btn a{
  background-image: none;
  padding-left: 20px;
  padding-right: 20px;
}
.ie7 nav {
  margin: 0 auto;
  padding-top: 70px;
}
.ie7 #index .top-image .inr{
  padding: 0 20px;
}
.ie7 #index .ttl{
  overflow: visible!important;
}
.ie7 header .info,
.ie7 header .language{
  top: 20px;
}
.ie7 .content .remarks ul li,
.ie8 .content .remarks ul li{
  background: none;
}
.ie7 #index .top-image .catch-main{
  width: 728px;
  padding-top: 170px;
  text-align: center;
}
.ie7 nav li{
  width: 168px;
}
.ie7 footer .left-col .contact a{
  width: 140px;
}
.ie8 #index .contents .darken:hover{
  opacity: 0.6;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
  }
.ie7 #house,
.ie8 #house{
    display: none;
  }
.ie7 #container,
.ie8 #container{
    background: url(/wp-content/themes/sakuda/img/bg-house.png) repeat-y top left;
  }
.ie7 #index .top-image,
.ie8 #index .top-image{
    background: url(/wp-content/themes/sakuda/img/top1.jpg) no-repeat center center;
  }
.ie7 #index .top-slide,
.ie8 #index .top-slide{
    display: none;
  }
.ie7 #index .contents ul,
.ie8 #index .contents ul{
    width: 1020px;
    margin: 0 auto;
  }
.ie7 #index .contents li,
.ie8 #index .contents li{
    height: 201px!important;
  }
.ie7 #index .contents p,
.ie8 #index .contents p{
    padding-top: 75px!important;
  }
.ie7 #map-canvas,
.ie7 #map-about,
.ie8 #map-canvas,
.ie8 #map-about{
    width: 1020px!important;
    margin: 0 auto 40px!important;
  }

#btn_cosme {
  
  margin: 20px;
}

#btn_food {
  margin-bottom: 20px;
}

.uq_spFixedLink{
  display: none;
  position: fixed;
  z-index: 1001;
  right: 82px;
  top: 15px;
  font-size: 10px;
  background-color: #ab4713;
  color: #F9F7F8;
  padding: 7px 12px;
  text-align: center;
  line-height: 1.3;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

@media screen and (max-width:1020px){
  .uq_spFixedLink{
    display: block;
  }
}

.hp_coverLink{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.tet{

}

.p-shop__inner{
  width: 90%;
  max-width:1050px;
  margin-left: auto;
  margin-right: auto;
}