/*!
Theme Name: Underscores
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: underscores
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Underscores is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: clamp(0.8rem, 0.436rem + 1.82vw, 1.8rem);
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in 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;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}




/*font フォント*/
big {
	font-size: 125%;
}

.b{
	font-weight: bold;
}
.line-yellow{
background: linear-gradient(transparent 50%, #fff499 50%);
}



/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 0em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/



.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}


.site-footer{
	border-top: solid 1px #b1b1b1;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}








/*add katsukawa */
/*.site-header {
  color: var(--header-text-color);
}

body {
  background-color: var(--site-background-color);
}*/

.ac{
	text-align: center;
}




.custom-logo-link {
	display: block;
	width: 180px;
	padding: 0.2em;
}
.site-title{
	margin: 0;
	padding: 0;
	line-height: 1em;

}
.site-title a:link{
	text-decoration: none;
	font-size: clamp(18px,2.2vw,32px);
}

.site-description{
	margin: 0;
}


.site{
	overflow: visible;
}
.site-header{
	background-color: rgb(255, 246, 248);
	top: 0;
	position: sticky;
	z-index: 1;

}

.site-branding{
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}


.header-operater{
	display: flex;
	align-items: center;

}
.header-operater a{
	display: block;
}
.header-operater a.tel{
	padding: 0.5em;
	background-color: #fff100;
	color: #252525;
	font-weight: bold;
	text-decoration: none;
	display: flex;
	align-items: center;
}
.header-operater a.tel span{
	font-size: 28px;
	white-space: nowrap;
}
.header-operater a.contact{
	padding: 0.5em;
	background-color: #252525;
	color: #FFFFFF;
	text-decoration: none;
	height: 100%;
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.header-operater a img{
	margin-right: 0.2em;
}


@media (max-width: 768px) {
	/* モバイル用のスタイル */
	.site-description{
		display: none;
	}
	.site-header{
		display: flex;
		justify-content: space-between;
	}



	.header-operater{
  display: grid;
  grid-template-columns: 1fr 1fr;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    text-align: center;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);

	}
	.header-operater a{
  display: flex;
  justify-content: center;
  align-items: center;
	}
	.header-operater a.tel span{
		font-size: 24px;
	}
}




.site-info{
	text-align: center;
	margin: 0 auto;
}
















/* ハンバーガーとメニューのスタイル */
.menu-toggle,
.menu-close {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #333;
  display: none;
}

/* メニュー全体 */
.site-navigation {
  position: relative;
}











/* モバイル対応 */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .menu-close {
	display: none !important;
	position: absolute;
	top: 0;
	right: 0;
	font-size: 2rem;
	background: none;
	border: none;
	color: #ffffff;
	z-index: 1100;
  }

  #primary-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    height: 100vh;
    background: #1d2088;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    z-index: 1000;
  }

  #primary-menu.open {
    display: flex;
	-ms-flex-direction: column;
	align-items: stretch;
  }
  #primary-menu.open{
	flex-direction: column;
	padding: 0;
}
  #primary-menu.open li{
	list-style: none;
	border-bottom: #ffffff solid 1px;
  }


  #primary-menu.open li a{
	font-size: 22px;
	text-decoration: none;
	display: block;
	margin: 0.5em 1em;
  }
  #primary-menu.open li a:visited{
	color:#FFFFFF;
   }

  #primary-menu.open li:hover{
	background-color: #6569e0;
  }


  #primary-menu.open li a::before {
  content: '▶';
  margin-right: 0.5em; /* 文字との間隔 */
  color: #c5d0c7; /* 色はお好みで */
  font-size: 0.5em; /* サイズ調整（必要なら） */
}



  #primary-menu.open li ul.sub-menu{
	display: flex;
	flex-wrap: wrap;
	margin: 0 0.5em 0.5em 0.5em;
	padding: 0;
	gap: 10px;
  }
        
  #primary-menu.open li ul.sub-menu li{
	border: #404040 solid 1px;
	border-radius: 8px;
	background-color: #f2f2f2;


}


   #primary-menu.open li#menu-item-51 ul.sub-menu li{
	background-color: #cfd8ff;
  }

   #primary-menu.open li#menu-item-51 ul.sub-menu li.furniture{
	background-color: #ffdece;
  }
 
   #primary-menu.open li#menu-item-51 ul.sub-menu li.etc{
	background-color: #dcffe5;
  }



  #primary-menu.open li ul.sub-menu li a{
	font-size: 14px;
	display: block;
  }


   #primary-menu.open li ul.sub-menu li a:visited{
	color:#1d2088;
   }


  .menu-close.show {
	display: block !important;
  }

article,aside{
	padding: 0 10px;
}
.mobile_padding{
	padding: 0 10px;
}



}









/* PC飲み */
@media (min-width: 769px) {
.area-breadcrumb{
	background-color: #f2f5eb;
	line-height: 3em;
}
.breadcrumb{
    max-width: 1200px;
    margin: 0 auto;
	font-size: 14px;
}
.wrapper{
    max-width: 1200px;
    margin: 0 auto;
	display: flex;
	flex-direction: row-reverse;
	gap: 30px;
}

.site-main{
    max-width: 1200px;
    margin: 0 auto;
}


main{
    flex: 3;
}
main {
  flex: 3; /* メインが全体の3/4 */
}

aside {
  flex: 1; /* サイドバーが全体の1/4 */
  margin-top: 1em;
}



article{
	padding: 0 10px;
}

.main-content {
    padding-top: 37.1%;
    margin-bottom: 20px;
    background: #9e9e9e;
}

aside {
    flex: 1;
}
.side-content {
    background-color: #333;
    padding-top: 65%;
}



/* デフォルト：メニュー表示 */
#primary-menu {
  display: flex;
  justify-content: center;
  margin: 0;
  background-color: #1d2088;
}


#primary-menu ul{
	display: flex;
	list-style: none;
	flex-direction: row;
	margin: 0;
	padding: 0;
}


#primary-menu li{
	list-style: none;
position: relative;
}
#primary-menu li a{
	color: #FFF;
	padding: 1em 2em;

}
#primary-menu li a:link{
	text-decoration: none;
	display: block;
	color: #FFF;
	border-right: dotted 3px #404040;
}
#primary-menu li a:hover{
	background-color: #60c7f7;
	color: #FFF;
}










	
  #primary-menu .sub-menu {
    position: absolute;
    top: 3em;
    left: 0;
    overflow: hidden;
    width: 250px;
    height: 0;
    transition: .8s;
    transform: translateY(-8%);
    opacity: 0;
	flex-direction: column;
  }
 
  #primary-menu li:hover .sub-menu {
    height: auto;
    transform: translateY(0);
    opacity: 1;
  }
 
  #primary-menu .sub-menu li {
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ddd;
	border-right: none;
    background-color: #2a3b75;
  }

  #primary-menu .sub-menu li.furniture{
	background-color: #75432a;
  }
 
  #primary-menu .sub-menu li.etc{
	background-color: #376443;
  }

  #primary-menu .menu-item-has-children:nth-last-child(1) .sub-menu,
  #primary-menu .menu-item-has-children:nth-last-child(2) .sub-menu {
    right: 0;
    left: auto;
  }
 
  #primary-menu .sub-menu li a {
    padding: 1em;
  }








}




.item_catch{
    	font-size: clamp(1.1rem, 0.955rem + 0.73vw, 1.5rem);
        font-weight: bold;
        background-color: #513f37;
        color: #fff;
        padding: 0.5em 1em;


}


/*アイテム　よくある質問*/
.qa dt {
    margin-bottom: 0.5em;
    color: #604219;
    font-weight: 600;
}

.qa dt::before,
.qa dd::before {
    margin-right: .4em;
	font-weight: 600;
    font-size: 1.3em;
}

.qa dt::before {
    content: "Q.";
}

.qa dd {
    margin: 0 0 1.5em;
    padding: 0.5em 1em;
    background-color: #d7cba1;
    color: #281010;
}

.qa dd::before {
    content: "A.";
}



/*アイテム　ブランド*/
.brand {
    position: relative;
    padding: 1.5em 1em 1em 2.5em;
    border: 2px solid #885611;
	margin: 2em 0;
}

.brand > div,
.brand h2
{
    position: absolute;
    top: -.75em;
    left: 1em;
    padding: 0 .5em;
    background-color: var(--site-background-color);
    color: #885611;
    font-weight: 600;
	margin: 0;
}

.brand ul {
    list-style-type: disc;
    margin: 0;
    padding: 0;
}

.brand li {
    padding: .3em .3em .3em 0;
}

.brand li::marker {
    color: #885611;
    font-size: 1.1em;
}



/*アイテム　タイプ*/
.type {
    position: relative;
    list-style-type: none;
	padding: 1.5em;
    border: 2px solid #2589d0;
	margin: 2em 0;
}


/* ダミー用で高さを稼ぐ */
.type::before {
    content: attr(data-title); /* 実際にはJSで取得してもOK */
    display: block;
    visibility: hidden;
    font-weight: 600;
    line-height: 1.4;
    padding: 0 0.5em;
    max-width: calc(100% - 2em);
    margin-bottom: 1em;
}


.type > div,
.type h2
{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 1em;
    transform: translateY(-50%); /* 半分浮かせてラベル風に */
    background-color: var(--site-background-color);
    color: #2589d0;
    font-weight: 600;
    padding: 0 0.5em;
    line-height: 1.4;
    margin: 0;
    max-width: calc(100% - 2em); /* はみ出し防止 */
}

.type ul{
	padding: 0;
	margin: 0;
}
.type li {
    display: flex;
    align-items: center;
    gap: 0 5px;
    padding: .3em;
	font-size: 1.2em;
	font-weight: bold;

}

.type li::before {
    flex-shrink: 0;
    align-self: center; /* または flex-start */
    width: 18px;
    height: 8px;
    border-bottom: 3px solid #2589d0;
    border-left: 3px solid #2589d0;
    transform: rotate(-45deg) translateY(-1.5px);
    content: '';
}




/*チェックポイント*/
.checkpoint {
    position: relative;
    list-style-type: none;
	padding: 1.5em;
    border: 2px solid #d02525;
	border-radius: 8px;
	margin: 3em 0;
}






/* ダミー用で高さを稼ぐ */
.checkpoint::before {
    content: attr(data-title); /* 実際にはJSで取得してもOK */
    display: block;
    visibility: hidden;
    font-weight: 600;
    line-height: 1.4;
    padding: 0 0.5em;
    max-width: calc(100% - 2em);
    margin-bottom: 1em;
}


.checkpoint > div,
.checkpoint h2
{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 1em;
    transform: translateY(-50%); /* 半分浮かせてラベル風に */
    background-color: var(--site-background-color);
    color: #d02525;
    font-weight: 600;
    padding: 0 0.5em;
    line-height: 1.4;
    margin: 0;
    max-width: calc(100% - 2em); /* はみ出し防止 */
}

.checkpoint ul{
	padding: 0;
	margin: 0;
}
.checkpoint li {
    display: flex;
    align-items: center;
    gap: 0 5px;
    padding: .3em;
	font-size: 1.2em;
	font-weight: bold;

}

.checkpoint li::before {
    flex-shrink: 0;
    align-self: center; /* または flex-start */
    width: 18px;
    height: 8px;
    border-bottom: 3px solid #d02525;
    border-left: 3px solid #d02525;
    transform: rotate(-45deg) translateY(-1.5px);
    content: '';
}

.checkpoint h2 img{
	margin: 5px 20px 0 0;
}



/*アイテム　NG*/
.ng {
  list-style: none;
  padding: 0em;
}


.ng li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
}

/* ❌を構成する線（その1） */
.ng li::before,
.ng li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 1em;
  height: 2px;
  background-color: red;
}

/* 45度回転 */
.ng li::before {
  transform: rotate(45deg);
}

/* -45度回転（もう1本の線） */
.ng li::after {
  transform: rotate(-45deg);
}



a.button-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0 auto;
    padding: .9em 2em;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
    background-color: #18649a;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
	text-decoration: none;
	width: fit-content;
}

a.button-1::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
}

a.button-1:hover {
    background-color: #08548a;
}




.area ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1em; /* 要素間の隙間 */
  justify-content: flex-start; /* 左寄せ */

}

.area ul li.no_link{
	color: #bbc7d7;
    padding: .9em 2em;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
}


.area ul li a{
    display: flex;
	list-style: none;
    justify-content: center;
    align-items: center;
	color: #fff;
    font-weight: 600;
    font-size: 1em;
	text-decoration: none;
    background-color: #18649a;
    padding: .9em 2em;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);

}
.area ul li a::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
}

.area ul li a:hover {
    background-color: #1f87d1;
}











/*必要な情報*/
.required_info{
	background-color: #bbdbee;
	padding: 10px 20px;
	border-radius: 8px;
}

/*リスト デザイン02*/
.list_style02,
.list_style02 ol{
	counter-reset: num;
}

.list_style02{
	margin-left: 22px;
	padding: 0;
}

.list_style02 li{
	position: relative;
	list-style-type: none;
	margin-bottom: 15px;
	padding-left: 10px;
}

.list_style02 li::before{
	position: absolute;
	top: 5px;
	left: -7px;
	width: 22px;
	height: 22px;
	margin-right: 1em;
	margin-left: -1em;
	border-radius: 1em;
	background: #191970;
	color: #fff;
	font-size: 14px;
	line-height: 22px;
	text-indent: 0;
	text-align: center;
	vertical-align: middle;
	counter-increment: num;
	content: counter(num);
}

.label-position{
  background-color: #FFF;
  border: #191970 solid 3px;
  padding: 16px;
  border-radius: 10px;
  overflow: auto;
}
.label-position h3{
	border-bottom: solid 1px #191970;
	margin: 0;

}

.tellme{
	padding: 16px;
	background-color: #f1f1f1;
	border: solid 3px #191970;
	border-radius: 8px;
	font-size: 110%;
}









/*画像の横並び*/
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  justify-items: center;
}

.image-grid img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}




/* ページ内リンク　固定ヘッダーの高さ分下げる */
.anchor-target {
  scroll-margin-top: 120px; 
}