/**
 * uaplus.css version 0.3.1
 */

/**
 * Wrapping everything in an anonymous layer ensures that selectors
 * in UA+ have the lowest specificty or the highest when using
 * !important.
 */
@layer {
	/**
   * Different box model
   * 
   * We use the traditional box model, where the padding and border 
   * of the element is drawn inside and not outside the specified 
   * width and height. That makes combining relative and absolute 
   * units in properties like <code>inline-size</code> and 
   * <code>block-size</code> easier.
   * 
   * See https://en.wikipedia.org/wiki/CSS_box_model
   */
	*,
	*::after,
	*::before {
		box-sizing: border-box;
	}

	/**
   * Improve focus styles
   *
   * Add spacing between content and its focus outline.
   */
	:focus-visible {
		outline-offset: 3px;
	}

	/**
   * Disable text size adjustment
   * 
   * To improve readability on non-mobile optimized websites, browsers
   * like mobile Safari increase the default font size when you switch
   * a website from portrait to landscape. We don't want that for our 
   * optimized sites.
   *
   * See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
   */
	html {
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}

	/**
   * Increase line height
   *
   * Long paragraphs are easier to read if the line height is higher.
   */
	html {
		line-height: 1.5;
	}

	/**
   * Add scrollbar gutter
   *
   * Prevent the page from “jumping” when switching from a long to a short page.
   *
   */
	html {
		scrollbar-gutter: stable;
	}

	/**
   * Remove UA styles for h1s nested in sectioning content
   *
   * Nesting h1s in section, articles, etc., shouldn't influence the 
   * styling of the heading since nesting doesn't influence 
   * semantics either.
   * 
   * See https://github.com/whatwg/html/issues/7867#issuecomment-2632395167
   * See https://github.com/whatwg/html/pull/11102
   * See https://html.spec.whatwg.org/#sections-and-headings
   */
	h1 {
		font-size: 2em;
		margin-block: 0.67em;
	}

	/**
   * Improve abbreviations with titles
   * 
   * The abbr element with the title isn't helpful regarding 
   * accessibility because support is inconsistent, and it's only 
   * accessible to some users. Still, it's commonly used. 
   * This rule shows a dotted underline on abbreviations in all 
   * browsers (there's a bug in Safari) and changes the cursor.
   * 
   * See https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
   */
	abbr[title] {
		cursor: help;
		text-decoration-line: underline;
		text-decoration-style: dotted;
	}

	/**
   * Optimize mark element in Forced Colors Mode
   *
   * The colors of the mark element don't change in Forced Colors Mode,
   * which can be problematic. Use system colors instead.
   * 
   * See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
   */
	@media (forced-colors: active) {
		mark {
			color: HighlightText;
			background-color: Highlight;
		}
	}

	/**
   * Avoid overflow caused by embedded content
   * 
   * Ensure that embedded content (audio, video, images, etc.) 
   * doesn't overflow its container.
   */
	audio,
	iframe,
	img,
	svg,
	video {
		max-block-size: 100%;
		max-inline-size: 100%;
		width: 100%;
    height: auto;
	}

	/**
   * Prevent fieldsets from causing overflow
   *
   * Reset the default `min-inline-size: min-content` to prevent
   * children from stretching fieldsets
   *
   * See https://github.com/twbs/bootstrap/issues/12359
   * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
   */
	fieldset {
		min-inline-size: 0;
	}

	/**
   * Turn labels into block elements
   * 
   * Labels for inputs, selects, and textarea should be block 
   * elements.
   */
	label:has(+ :where(input:not([type="radio"], [type="checkbox"]), select, textarea)) {
		display: block;
	}

	/**
   * Increase the block-size of textareas
   *
   * The default height of textareas is small. We increase it a bit.
   */
	textarea:not([rows]) {
		min-block-size: 6em;
	}

	/**
   * Inherit font styling in form elements
   * 
   * buttons, inputs, selects, and textarea should have the same font
   * family and size as the rest of the page.
   */
	button,
	input,
	select,
	textarea {
		font-family: inherit;
		font-size: inherit;
	}

	/**
   * Normalize search input styles
   *  
   * Remove the rounded corners of search inputs on macOS and IOS 
   * and normalize the background color
   */
	[type="search"] {
		-webkit-appearance: textfield;
	}

	/* iOS only */
	@supports (-webkit-touch-callout: none) {
		[type="search"] {
			border: 1px solid -apple-system-secondary-label;
			background-color: canvas;
		}
	}

	/**
   * Maintain direction in some input types
   * 
   * Some input types should remain left-aligned in right-to-left
   * languages,but only if the value isn't empty because the 
   * placeholder should be right-aligned.
   *
   * See https://rtlstyling.com/posts/rtl-styling#form-inputs
   */
	input:where([type="tel"], [type="url"], [type="email"], [type="number"]):not(:placeholder-shown) {
		direction: ltr;
	}

	/**
   * Improve table styling
   *  
   * With the default styling, tables are hard to scan. These rules 
   * add padding and collapsed borders.
   */
	table {
		border-collapse: collapse;
		border: 1px solid;
	}

	th,
	td {
		border: 1px solid;
		padding: 0.25em 0.5em;
		vertical-align: top;
	}

	/**
   * Fading dialogs
   *  
   * Add fade in and fade out transitions for the dialog element
   * and backdrops
   */
	dialog::backdrop {
		background: oklch(0% 0 0 / 0.3);
	}

	dialog,
	[popover],
	dialog::backdrop {
		opacity: 0;
		transition: opacity 150ms ease-out, display 150ms allow-discrete,
			overlay 150ms allow-discrete;
	}

	dialog[open],
	:popover-open,
	dialog[open]::backdrop {
		opacity: 1;
	}

	@starting-style {
		dialog[open],
		:popover-open,
		dialog[open]::backdrop {
			opacity: 0;
		}
	}

	/**
   * Increase specificity of [hidden]
   *  
   * Make it harder to accidentally unhide elements with the 
   * [hidden] attribute while still maintaining the until-found 
   * functionality.
   */
	[hidden]:not([hidden="until-found"]) {
		display: none !important;
	}

	/**
   * Turn images into block elements
   */
	img {
		display: block;
	}

	/**
   * Change cursor of <summary>
   *
   * By default, only the ::marker inside the summary uses the 
   * default cursor.
   */
	summary {
		cursor: default;
	}

	/**
   * Remove the default border from iframes
   */
	iframe {
		border: none;
	}

  
  /**
   * By default popovers look like modals without a backdrop.
   * This makes use of the implicit anchor in popvers to position
   * it closely to the trigger.
   */
  @supports(position-area: end) {
    [popover] {
      margin: 0;
      position-area: end span-end;
      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    }
  }
}


body {
	color:#333333;
	margin:auto;
}
.sec1{
   padding: 0 0 64px 0;
  background: #FFF;
  position: relative;
}
.sec1::before{/* beforeでもafterでも*/
    content: "";
    position: absolute;
    height: 60px;
    width: 100%;
    clip-path: polygon(0 0,50% 100%,100% 0);/* ココ */
    background-color: #FFF;/* デモは青色の部分 */
　　left: 0;
    bottom: -60px; /* bottomにピッタリくっつけたいので三角の高さ分下にずらす */
}
.sec2{
   padding: 40px 0;
}
.Col-green {
	color: #1F7646;
}
.Col-orange {
	color: #FF6F00;
}
.Col-red {
	color:#FF0000;
}
.Bg02 {
  background: #F2FAF6;
  padding-top: 64px;
}
/* ========================================
   Contact Form 7 Reset / Base
   ======================================== */

/* フォーム内だけ box-sizing を統一 */
.wpcf7,
.wpcf7 *,
.wpcf7 *::before,
.wpcf7 *::after {
  box-sizing: border-box;
}

/* CF7全体の横はみ出し防止 */
.wpcf7,
.wpcf7 form,
.wpcf7 p,
.wpcf7 label,
.wpcf7-form-control-wrap {
  max-width: 100%;
}

/* デフォルト余白の整理 */
.wpcf7 form {
  margin: 0;
}

.wpcf7 p {
  margin: 0 0 16px;
}

.wpcf7 p:last-child {
  margin-bottom: 0;
}

.wpcf7 label {
  display: block;
  width: 100%;
  margin: 0;
}

/* hidden フィールド群を完全非表示 */
.wpcf7 .hidden-fields-container,
.wpcf7 form > fieldset.hidden-fields-container {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* ========================================
   Form Controls
   ======================================== */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 0;
  background: #fff;
  font: inherit;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
}

/* textarea のみ高さを確保 */
.wpcf7 textarea {
  min-height: 140px;
  resize: vertical;
}

/* placeholder の見え方調整 */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: #999;
  opacity: 1;
}

/* フォーカス時 */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: #333;
}

/* ========================================
   Submit Button
   ======================================== */

.wpcf7 input[type="submit"],
.wpcf7 button,
.wpcf7 .wpcf7-submit {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #333;
  background: #333;
  color: #fff;
  font: inherit;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button:hover,
.wpcf7 .wpcf7-submit:hover {
  opacity: 0.85;
}

/* ========================================
   Validation / Messages
   ======================================== */

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.5;
}

.wpcf7 form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 14px;
  line-height: 1.6;
}

/* ========================================
   Layout Safety
   ======================================== */

/* Flex親の中でも縮められるように */
.site-header__contact-form,
.site-header__contact-form .wpcf7,
.site-header__contact-form .wpcf7 form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* 改行不可指定の巻き込み防止 */
.site-header__contact-form {
  white-space: normal;
}

/* ========================================
   Mobile
   ======================================== */

@media screen and (max-width: 767px) {
  .wpcf7 p {
    margin-bottom: 14px;
  }

  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 input[type="url"],
  .wpcf7 input[type="number"],
  .wpcf7 input[type="date"],
  .wpcf7 select,
  .wpcf7 textarea {
    padding: 12px;
    font-size: 16px;
  }

  .wpcf7 input[type="submit"],
  .wpcf7 button,
  .wpcf7 .wpcf7-submit {
    padding: 14px 12px;
    font-size: 16px;
  }
}