@charset "UTF-8";
/*
Theme Name: sane
Version: 2.0
Author: sane - https://saneyoshi.com
-------------------------------------------------*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
	font-size:100%;
	/*baseline→middleにアレンジ*/
  vertical-align:middle;
  /*background:transparent;*/
}

body {
  word-break: normal;
  overflow-wrap: break-word;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}
ul,ol {
  list-style:none;
}
blockquote, q {
  quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}
a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
table {
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
}
input, select {
  vertical-align:middle;
}
/*img*/
img {
  overflow: hidden;
  vertical-align: bottom;
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  max-width: 100%;
  min-height: 1px;
  height: auto;
  line-height: 1em;
}
iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
strong,b{
  vertical-align: baseline;
}
button{
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
}
/*========================================
*	fonts.css
*---------------------------------------*/
:root {
	font-size: 62.5%;
  /*ブランドカラー*/
  --brand-color:#000066;
  /*テキストカラー*/
  --text-color:#231815;
  /*基本カラー*/
	--white-color:#fff;
  --black-color:#003;
  --gray-color:#8d959c;
  --red-color:#e63700;
  --blue-color:#000066;
  /*基本ライトカラー*/
  --light-gray-color:#e1e1ea;
  --super-light-gray-color: #EAEAEA;
  --light-red-color:#FFB3B3;
	/*フォーム*/
	--form-input-color:#fffeee;
	--form-error-color:#00B36B;
	--form-border-color:#c9c9c9;
  --form-required-color:#c9a275;
  --form-submit-color:#ff7e00;
	/*ページ幅*/
	--widthMax : 1120px;
	--widthSubMax : 700px;
	/*フォントサイズ*/
  --fontsize-4l: 6.0rem;
  --fontsize-3l: 4.5rem;
  --fontsize-2l: 3.5rem;
  --fontsize-xl: 2.5rem;
  --fontsize-l: 2.0rem;
  --fontsize-m: 1.8rem;
  --fontsize-xm: 1.6rem;
  --fontsize-s: 1.5rem;
  --fontsize-xs: 1.3rem;
  --fontsize-xxs: 1rem;
  /*トランジション*/
  --ease02: cubic-bezier(0.6, 0.25, 0, 1);
}
body {
  font-size:var(--fontsize-m);
  color: var(--text-color);
	background-color: var(--white-color);
  font-family: 'Noto Sans JP', sans-serif;
  line-height:1.6;
  letter-spacing: 0.08em;
  background: url(/wp-content/uploads/img/common/texture.png);
}

/*========================================

*	header

*---------------------------------------*/
/*全体*/
.header_wrapper{
  grid-area: header;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 125px;
  border-bottom: 1px solid var(--light-gray-color);
  background-color:var(--white-color);
  padding: 0 20px;
}
.header_wrapper:before {
  position: absolute;
  z-index: -1;
  left: 0;
  display: inline-block;
  width: 100vw;
  height: 100%;
  background-color: var(--white-color);
  content: "";
}
.header_contaier{
  max-width: var(--widthMax);
  height: 100%;
  margin: 0 auto;
}
.headerTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.headerLogo_wrapper{
  display: flex;
  height: 40px;
  align-items: center;
  column-gap: 15px;
}
.header_logo {
  width: 250px;
  height: auto;
}
.headerLogo_txt{
  display: flex;
  flex-direction: column;
  color: var(--gray-color);
  font-size: var(--fontsize-xs);
  line-height: 1.2;
}
/*========================================

*	headerBtn

*---------------------------------------*/
.headerBtn {
  display: flex;
  width: 140px;
  height: 44px;
  background-color: var(--blue-color);
  align-items: center;
  transition: .3s ease;
  font-size: var(--fontsize-m);
  border-radius: 2px;
}
.header-btn:hover {
  opacity: .8
}
.headerBtn a{
  color: var(--white-color);
  font-weight: 700;
  flex-grow: 1;
  text-align: center;
}
/*========================================

*	header_nav

*---------------------------------------*/
.header_nav{
  width: 100%;
}
.header_links{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  font-size: var(--fontsize-m);
  line-height: 2;
}
/*メインメニューのli*/
.header_mainItem {
  display: grid;
  width: 100%;
  height: 68px;
  margin-top: -7px;
  cursor: default;
  font-weight: 700;
  line-height: 1.4;
  place-content: center;
}
.header_mainItem>* {
  color: var(--text-color);
}
.header_mainItem a{
  position: relative;
  top: 0;
}
.header_mainItem:not(:first-child)::before  {
  position: absolute;
  top: 45%;
  display: inline-block;
  width: 1px;
  height: 42px;
  background-color: var(--light-gray-color);
  content: "";
  transform: translateY(-50%);
}
/*▲*/
.header_mainItemLink{
  pointer-events: none;
}
.header_mainItemLink:before {
  position: absolute;
  bottom: -10px;
  left: 50%;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 0 6.5px 11.3px;
  border-style: solid;
  border-color: transparent transparent var(--black-color);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0s ease .3s,bottom 0s ease .3s;
  transition-delay: -.3s;
}
.header_mainItemLink[data-is-open="true"]:before {
  bottom: -21px;
  opacity: 1;
  transition-delay: .1s
}
/*メインメニューの線分アニメーション*/
.header_mainItem:hover .header_mainItemLink:after,
.header_mainItem:hover .header_mainItemLinks:after {
    transform: scale(1)
}
.header_mainItemLink:after,
.header_mainItemLinks:after {
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 3px;
  background-color: var(--black-color);
  content: "";
  transform: scaleX(0);
  transition: transform .3s ease
}
/*inrLinks*/
.header_innerLinks {
  position: fixed;
  z-index: -10;
  top: 0;
  left: 0;
  width: 100vw;
  height: 80px;
  background-color: var(--black-color);
  list-style: none;
  margin: calc(50% - 50vw);
  transition: visibility .5s ease,top .5s ease;
  visibility: hidden;
}
.header_mainItem:hover .header_innerLinks {
  top: 125px;
  visibility: visible;
}
.header_innerLinksList{
  display: flex;
  max-width: var(--widthMax);
  align-items: center;
  justify-content: flex-start;
  gap: 0 40px;
  margin:  0 auto;
  padding: 0 20px;
}
.header_innerItem {
  display: flex;
  width: fit-content;
  height: 92px;
  align-items: center;
  column-gap: 4px;
}
.header_innerItem:before {
  display: inline-block;
  content:  url(/wp-content/uploads/img/common/icon-arrow-right-white.svg);
  transform: translateY(3px);
  vertical-align: middle;
}
.header_innerItem a{
  color:var(--white-color);
  padding-right: 30px;
}
/*========================================

*	header_subLinks

*---------------------------------------*/
.header_subLinks {
  display: none;
}
.header_subLinks li {
  display: block;
  width: calc(100% - 40px);
  border-bottom: 1px solid var(--light-gray-color);
  line-height: 1;
}
.header_subLinks li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px 0;
}
.header_subLinks .header_link {
  color: var(--text-color);
  font-size: var(--fontsize-s);
}
/*========================================

*	header_spOnly

*---------------------------------------*/
.header_spOnly {
  display: none;
}
.header_snsLinks {
  width: 180px;
  margin: 0 auto;
  padding: 22px 0 56px;
}
.SnsLinks_wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.SnsLinks_wrapper img{
  width: 40px;
  height: 40px;
}
/*========================================

*	humberger

*---------------------------------------*/
.header_drawerToggle {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 20px;
}
.header_drawerToggle .header_row {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--black-color);
  transition: transform .3s ease;
}
.header_drawerToggle .header_row:not(:last-child) {
  margin-bottom: 7px;
}
.header_drawerToggle[data-is-open="true"] .header_row:first-of-type {
  transform: rotate(45deg) translate(6px,6px)
}
.header_drawerToggle[data-is-open="true"] .header_row:nth-of-type(2) {
  opacity: 0
}
.header_drawerToggle[data-is-open="true"] .header_row:last-of-type {
  transform: rotate(-45deg) translate(7px,-7px)
}
/*========================================

*	formBanner_link

*---------------------------------------*/
.formBanner_link {
  font-weight: 700;
  font-size: clamp(10px,1.6rem,16px);
  line-height: 1.5;
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 50%;
  display: none;
  width: 100%;
  height: 60px;
  background-color: var(--white-color);
  box-shadow: 0 -3px 6px rgba(0,0,0,.1);
  color: var(--black-color);
  line-height: 60px;
  place-content: center;
  text-align: center;
  transform: translateX(-50%);
}
/*========================================

*	formBanner

*---------------------------------------*/
.formBanner_text {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
}
.formBanner_text:before {
  display: inline-block;
  content: url(/wp-content/uploads/img/common/icon-doc-blue.svg);
  transform: translateY(2px);
}
/*========================================

*	footer

*---------------------------------------*/
.footer{
  grid-area: footer;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
/*========================================

*	footerBanner

*---------------------------------------*/
.footerBanner_wrapper {
  padding: 25px 20px;
}
.footerBanner_list {
  display: flex;
  width: min(100%,var(--widthMax));
  justify-content: center;
  gap: 25px;
  margin: 0 auto;
}
.footerBanner_item {
  width: calc((100% - 54px)/3);
}
.footerBanner_img {
  position: relative;
  width: 100%;
}
.footerBanner_logo {
  display: flex;
  height: 65px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--light-gray-color);
  background: var(--white-color);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.footerBanner_logo img{
  max-width: 180px;
}
/*========================================

*	footer_wrapper

*---------------------------------------*/
.footer_wrapper {
  position: relative;
  width: 100%;
  background-color:var(--brand-color);
}
.footer_contaier {
  width: 85vw;
  margin: 0 auto;
  color: var(--white-color);
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: 60px 0;
}
.footer_contaier a {
  color: var(--white-color);
}
/*========================================

*	footer_nav

*---------------------------------------*/
.footer_nav {
  width: clamp(0px, 36vw, 496px);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fontsize-m);
  line-height: 1.35;
  letter-spacing: .03em;
}
.footer_nav a{
  font-weight: 500;
}
.footer_nav ul:nth-of-type(1) {
  width: clamp(0px, 13.6vw, 186px);
}
.footer_nav ul:nth-of-type(1) li {
  margin-bottom: 13px;
}
.footer_nav ul:nth-of-type(2) {
  width: clamp(0px, 13.6vw, 186px);
}
.footer_nav ul:nth-of-type(2) li {
  margin-bottom: 15px;
}
.footer_nav .onlysp {
  display: none;
}
.footer_nav ul.sns li {
  display: inline-block;
  margin-right: 20px;
}
.footer_nav ul.sns li:last-child {
  margin-right: 0;
}
.footer_nav ul.sns li.youtube {
  width: 20px;
}
/*========================================

*	footer_nav_sub

*---------------------------------------*/
.footer_nav_sub {
  width: 100%;
  font-size:var(--fontsize-xs);
  line-height: 1.35;
  letter-spacing: .03em;
  margin: 20px 0 70px;
}
.footer_nav_sub li {
  margin-bottom: 10px;
}
/*========================================

*	footerCopy

*---------------------------------------*/
.footerCopy {
  position: relative;
  flex: 1;
  padding-top: 4px;
  font-size:var(--fontsize-3l);
  line-height: 1.24;
  letter-spacing: .03em;
  font-weight: 700;
}
.footerCopy span{
  display: block;
}
.footerCopy .indent1 {
  margin-left: 0;
}
.footerCopy .indent2 {
  margin-left: 0.4em;
}
.footerCopy .indent3 {
  margin-left: 0.8em;
}
/*footerLogo*/
.footerLogo{
  padding-top: 30px;
}
.footerLogo img{
  width: 180px;
}
/*copyright*/
.copyright {
  padding: 20px 0;
  text-align: center;
}
.copyright_sns {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  margin: auto;
}
.copyright_sns img{
  width: 30px;
  height: 30px;
}
.copyright p {
  color: var(--gray-color);
  font-size: var(--fontsize-xxs);
}
/*========================================

*	Layout

*---------------------------------------*/
/*content_layout*/
.content_layout {
  display: grid;
  min-height: 100svh;
  margin: 0 auto;
  grid-template-areas:
      "header"
      "page"
      "footer";
  grid-template-rows: 125px auto auto;
}
/*content_wrapper*/
.content_wrapper{
  padding: 0 20px;
  grid-area: page;
  overflow: hidden;
}
.content_contaier{
  width: 100%;
	max-width: var(--widthMax);
	margin: 0 auto 20px;
}
/*========================================

*	Subページ

*---------------------------------------*/
/*Single.php*/
.title_wrapper {
  height: 50px;
  background-position: 50%;
  background-size: auto;
  margin: 0 calc(50% - 50vw) 20px;
  background-color: var(--brand-color);
}
.title_contaier {
  display: grid;
  height: 100%;
  color: var(--white-color);
  font-size: var(--fontsize-l);
  place-content: center;
  text-align: center;
}
/*========================================

*	Singleページ

*---------------------------------------*/
.blog_wrapper {
  width: min(100%,896px);
  margin: 40px auto 80px;
}
.blog_topInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.blog_article {
  border-top: 1px solid var(--light-gray-color);
  border-bottom: 1px solid var(--light-gray-color);
  padding: 40px 0;
  margin-bottom: 60px;
}
.blog_date {
  color: var(--gray-color);
  font-size: var(--fontsize-xm);
}
.detail_category {
  font-size: var(--fontsize-xm);
}
.blog_article_ttl {
  color: var(--black-color);
  padding: 30px 0;
  text-align: center;
  font-size: var(--fontsize-xl);
  line-height: 1.5;
}
.blog_thum_wrapper {
  margin-bottom: 60px;
}
.blog_article_txt p {
  font-size: var(--fontsize-l);
  line-height: 1.7;
  margin-bottom: 30px;
}
@media screen and (max-width:768px) {
/*========================================

*	header

*---------------------------------------*/
.header_wrapper {
  height: 60px;
}
.header_wrapper:before {
  display:none
}
.headerLogo_wrapper {
  flex-wrap: wrap;
}
.headerBtn{
  display: none;
}
.header_mainItem:not(:first-child)::before  {
  display: none;
}
.header_mainItemLink{
  pointer-events: auto;
}
.header_mainItemLink:after,
.header_mainItemLinks:after {
  display: none;
}
.header_mainItemLink:before {
  position: absolute;
  z-index: 100;
  right: 10px;
  bottom: auto;
  left: auto;
  display: block;
  width: auto;
  height: auto;
  border: none;
  content: url(/wp-content/uploads/img/common/icon-arrow-right-rounded-blue.svg);
  opacity: 1;
  transform: rotate(90deg) translateX(0);
  transform-origin: center;
  transition: transform .3s ease;
}
.header_mainItemLink[data-is-open="true"]:before {
  transform: rotate(270deg);
  bottom: auto;
  transition: transform .3s ease;
}
.header_links {
  display: block;
  width: calc(100% - 40px);
  height: auto;
}
.header_mainItem {
  display: block;
  overflow: hidden;
  height: auto;
  border-right: none;
  border-bottom: 1px solid var(--light-gray-color);
  margin-top: 0;
  line-height: 1;
  text-align: left;
}
/*メインメニューのli*/
.header_mainItemLinks {
  display: block;
  width: 100%;
  color: var(--black-color);
  padding: 20px 0;
}
.header_mainItemLink {
  display: block;
  width: 100%;
  color: var(--black-color);
  padding: 20px 0;
}
.header_nav {
  position:absolute;
  left: 100%;
  width: calc(100% + 40px);
  height: 100vh;
  height: 100dvh;
  background-color: var(--white-color);
  margin-inline:calc(50% - 50vw);overflow-x: scroll;
  padding: 0 20px;
  transition: left .3s ease
}
.header_nav[data-is-open="true"] {
  left:0;
}
.header_innerLinks {
  position: static;
  display: block;
  height: 100%;
  margin: 0;
  background-color: var(--white-color);
  padding: 0;
  transition: .3s ease;
  visibility: visible;
}
.header_innerLinksList {
  display: block;
  padding: 0;
  margin: 0;
}
.header_innerItem {
  width: 100%;
  height: auto;
  margin: 0;
}
.header_innerItem:before {
  content: url(/wp-content/uploads/img/common/icon-arrow-right-blue.svg);
}
.header_innerItem a {
  color: var(--text-color);
}
.header_innerItem .header_innerLink {
  display: block;
  width: 100%;
  border-top: 1px solid var(--light-gray-color);
  color: var(--text-color);
  line-height: 1;
  padding: 20px 0;
}
/*サブリンク*/
.header_subLinks {
  display: block;
}
/*sns*/
.header_spOnly {
  display: block;
}
/*humberger*/
.header_drawerToggle {
  display: block;
}
/*========================================

*	formBanner_link

*---------------------------------------*/
.formBanner_link {
  display: none;
}
/*========================================

*	footerBanner

*---------------------------------------*/
.footerBanner_list {
  flex-direction: column;
}
.footerBanner_item {
  width: min(100%,800px);
}
/*========================================

*	Footer

*---------------------------------------*/
.footer_contaier {
  display: block;
}
.footer_nav {
  width: auto;
}
.footer_nav .onlypc {
  display: none;
}
.footer_nav ul:nth-of-type(1) {
  width: 50vw;
}
.footer_nav ul:nth-of-type(2) {
  flex: 1;
}
.footer_nav ul:nth-of-type(2) li.sns-cont {
  margin-top: 35px;
}
.footer_nav .onlysp {
  display: block;
}
/*========================================

*	Layout

*---------------------------------------*/
.content_layout {
  grid-template-rows: 60px auto auto;
}
}



/*========================================


*	以下からコンテンツ


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



/*========================================

*	keywords

*---------------------------------------*/
#tags {
  font-size: var(--fontsize-xm);
  display: flex;
  padding: 20px 0px 20px 10px;
  background: var(--brand-color);
}
#tags .reset-container {
  flex-shrink: 0;
}
#tags .tags-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
}
#tags .tag-tag {
  padding: 4px 12px;
  margin: 0 6px;
  border-radius: 1px;
  cursor: pointer;
  background: var(--gray-color);
  font-weight: 500;
}
#tags .tag-tag.selected {
  background-color: var(--white-color);
  color: var(--text-color);
}
#tags .tag-tag.reset {
  border-radius: 99px;
  margin-right: 10px;
  margin-left: 0;
}
/*========================================

*	Category

*---------------------------------------*/
#tags .category-category {
  padding: 4px 12px;
  margin: 0 6px;
  border-radius: 1px;
  cursor: pointer;
  background: var(--gray-color);
  font-weight: 500;
}
#tags .category-category.selected {
  background-color: var(--white-color);
  color: var(--text-color);
}
#tags .category-category.reset {
  border-radius: 99px;
  margin-right: 10px;
  margin-left: 0;
}
/*========================================

*	Pagination

*---------------------------------------*/
#results_blog .pagination {
  display: flex;
  justify-content: center;
  margin: 15px 0 0;
  font-size: var(--item-fontsize-m);
  font-weight: 700;
}
#results_blog .page_number {
  background-color: var(--gray-color);
  border: solid 1px var(--gray-color);
  color: var(--text-color);
}
#results_blog .now_page_number {
  background-color: var(--white-color);
  border: solid 1px var(--white-color);
  color: var(--text-color);
  width: 50px;
  margin: 0 10px;
  padding: 5px;
  text-align: center;
  border-radius: 4px;
}
#results_blog .from_to{
  color: var(--white-color);
  font-size: var(--fontsize-s);
  text-align: center;
  margin-top: 5px;
}
/*========================================

*	Flickity 共通

*---------------------------------------*/
.flickity-page-dots {
  position: initial;
}
.flickity-page-dots .dot.is-selected {
  background: var(--black-color)!important;
}
.flickity-page-dots .dot {
  width: 10px!important;
  height: 10px!important;
  background: var(--gray-color);
  opacity: .4;
  margin: 0 4px;
}
/*========================================

*	Flickity Sub

*---------------------------------------*/
.carousel-sub .carousel-cell{
  width: 20%;
	margin-right: 10px;
}
/*========================================

*	News

*---------------------------------------*/
.news_wrapeer {
  padding: 20px;
  background-color: var(--brand-color);
}
.news_wrapeer article{
  border-bottom: 1px solid var(--light-gray-color);
  padding: 15px 0;
}
.news_wrapeer article:first-of-type{
  padding-top: 0;
}
.news_link_wrapper {
  display: block;
  color: var(--white-color);
}

.news_link_info {
  display: flex;
  align-items: center;
  gap:10px;
}
.news_link_cat {
  display: flex;
  align-items: center;
}
.news_link_cat li {
  font-size: var(--fontsize-xs);
  padding: 5px;
  background-color: var(--white-color);
  color: var(--black-color);
  line-height: 1;
  font-weight: 700;
}
.news_link_date {
  font-size: var(--fontsize-xs);
}
.news_link_ttl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fontsize-l);
  position: relative;
}
.news_link_ttl::after{
  content: "";
  display: inline-block;
  width: 10px;
  height: 20px;
  margin-left: 15px;
  background-image: url(/wp-content/uploads/img/common/icon-arrow-right-angular-white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}
/*========================================

*	layout_1c

*---------------------------------------*/
.layout_1c {
  margin: 100px 0;
}
/*========================================

*	layout_2c

*---------------------------------------*/
.layout_2c {
  display: flex;
  width: min(100%,var(--widthMax));
  margin: 100px 0;
  gap: 30px;
}
.layout_2c_left {
  width: 50vw;
}
.layout_2c_right {
  width: min(100%,500px);
}
/*========================================

* layout_table

*---------------------------------------*/
.layout-table {
  font-size: var(--fontsize-m);
  padding: 25px 0;
  border-bottom: 1px solid var(--light-gray-color);
  display: flex;
  justify-content: flex-start;
  gap: 30px;
}
.layout-table .layout-table-ttl{
  font-weight: 700;
}
.layout-table ul {
  list-style-type: none;
  counter-reset: li-counter;
}
.layout-table ul li{
  line-height: 1.15;
  padding: 10px 0;
}
.layout-table ul li::before {
  counter-increment: li-counter;
  content: counter(li-counter) ". ";
  margin-right: 8px;
}
.layout-table ul li:first-of-type{
  padding: 0;
}
/*========================================

*	Box

*---------------------------------------*/
div.parent {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  position: relative;
}
div.box {
  position: relative;
}
div.box-type2 {
  overflow: hidden;
  margin: 60px 0 60px 5.5vw;
  padding: 30px 0 30px 5.5vw;
  background: var(--super-light-gray-color);
  border-radius: 1px 0 0 1px;
}
div.box-type4 {
  position: relative;
  border-radius: 50px;
  box-shadow: 6px 6px 20px rgb(0 0 0 / 16%), 0px 0px 4px rgb(0 0 0 / 16%);
}
div.box-type4-inr {
  padding: 50px 5vw;
  display: flex;
  flex-wrap: wrap;
}
div.box-type4-inr:before {
  content: "";
  display: block;
  width: 100vw;
  height: 30vw;
  position: absolute;
  top: 13vw;
  left: 0vw;
  background-image: url(/wp-content/uploads/img/common/message.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  z-index: -1;
}
/*========================================

*	見出し

*---------------------------------------*/
.dns {
  display: block;
  font-size: var(--fontsize-s);
  font-weight: 700;
  text-transform: uppercase;
}
.ttl {
  /*width: fit-content;*/
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 6px solid var(--brand-color);
  margin-bottom: 25px;
  font-size: var(--fontsize-2l);
  line-height: 1.4;
}
.cat {
  display: table;
  background: var(--white-color);
  color: var(--gray-color);
  padding: 3px 12px;
  margin: 0 0 8px 9px;
  border-radius: 12px;
  font-size: var(--fontsize-s);
  line-height: 1;
  letter-spacing: .03em;
  font-weight: 500;
}
.sub-ttl{
  font-size: var(--fontsize-m);
  color: var(--text-color);
  font-weight: 500;
}
.txt {
  margin-bottom: 15px;
  font-size: var(--fontsize-m);
  line-height: 2;
}
/*========================================

*	ボタン

*---------------------------------------*/
.btn {
  position: relative;
  display: grid;
  overflow: hidden;
  width: min(100%,390px);
  padding: 25px 0;
  border-radius: 100vmax;
  background-color: var(--blue-color);
  color: var(--white-color);
  place-content: center;
  font-size: var(--fontsize-l);
  line-height: 1;
  font-weight: 700;
  margin: 0 auto;
}
.btn_icon.next {
  position: absolute;
  top: 50%;
  right: 20px;
  display: block;
  background-position: 50%;
  background-size: contain;
  transform: translateY(-50%);
  width: 10px;
  height: 20px;
  background-image: url(/wp-content/uploads/img/common/icon-arrow-right-angular-white.svg);
  background-repeat: no-repeat;
}
.btn_icon.prev {
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  background-position: 50%;
  background-size: contain;
  transform: translateY(-50%);
  width: 10px;
  height: 20px;
  background-image: url(/wp-content/uploads/img/common/icon-arrow-left-angular-white.svg);
  background-repeat: no-repeat;
}
/*========================================

*	サークルボタン

*---------------------------------------*/
.btn-circle-type1 {
  width: 236px;
  height: 95px;
  line-height: 1;
  overflow: hidden;
}
.btn-circle-type1 a {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  color: var(--red-color);
}
.btn-circle-type1 a:hover .arrow:after {
  transform: translate(100%, -100%);
  opacity: 0
}
.btn-circle-type1 a:hover .arrow:before {
  transform: translate(4px, -4px);
  opacity: 1
}
.btn-circle-type1 a:hover .circle-main svg use {
  stroke-dashoffset: 0
}
.btn-circle-type1 .txt {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--fontsize-s);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  overflow: hidden;
  white-space: nowrap;
}
.btn-circle-type1 .arrow {
  position: relative;
  display: inline-block;
  margin-left: 12px;
  width: 10px;
  height: 10px;
  overflow: hidden;
}
.btn-circle-type1 .arrow:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 4px;
  right: 4px;
  background-image: url(/wp-content/uploads/img/common/ico-arrow-diag-red.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  transform-origin: left bottom;
  transition: opacity .3s, transform .3s;
  opacity: 0;
}
.btn-circle-type1 .arrow:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(/wp-content/uploads/img/common/ico-arrow-diag-red.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  transform-origin: left bottom;
  transition: opacity .3s, transform .3s;
}
.btn-circle-type1 .circle-bk {
  width: 100%;
  height: 100%;
}
.btn-circle-type1 .circle-main {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.btn-circle-type1 .circle-main svg use {
  stroke-dasharray: 523px;
  stroke-dashoffset: 523px;
  transition: stroke-dashoffset .8s
}
/*========================================

*	History

*---------------------------------------*/
.history-list-year-group {
  display: flex;
  width: 100%;
  padding: 0 0 47px 0;
  position: relative;
}
.history-list-year {
  width: 217px;
  position: relative;
}
.history-list-year1 {
  font-size: var(--fontsize-2l);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
.history-list-year2 {
  font-size:var(--fontsize-xs);
  letter-spacing: -.03em;
}
.history-list-year:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border: 4px solid var(--light-gray-color);
  background-color: var(--white-color);
  border-radius: 9px;
  position: absolute;
  top: 10px;
  right: 44px;
  box-sizing: border-box;
  z-index: 1;
}
.history-list-year-event-group {
  flex: 1;
}
.history-list-year-event {
  display: flex;
  align-items: flex-start;
  margin: 0 0 60px 0;
}
.history-list-year-event-list li {
  font-size: var(--fontsize-m);
  line-height: 1.3;
  letter-spacing: .03em;
  padding: 0 0 5px 10px;
  position: relative;
}
.history-list-year-event-list li:after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  position: absolute;
  top: 9px;
  left: 0;
  background-color:var(--black-color);
}
.history-list-year-group:after {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  position: absolute;
  top: 24px;
  left: 162px;
  border-left: 4px solid var(--light-gray-color);
}
/*========================================

*	figure

*---------------------------------------*/
.product figure {
  margin-bottom: 10px;
  background: var(--white-color);
  border-radius: 1.7vw;
}
/*========================================
*	ul
*---------------------------------------*/
/*Colors*/
ul.colors {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 10px;
  align-content: center;      /* 縦方向の中央揃え（複数行の場合） */
}

ul.colors li {
  flex: 0 0 calc(20% - 10px);
  display: flex;              /* 子要素を中央揃えにするためのflex */
  justify-content: flex-start;    /* 子要素の横方向の左寄せ */
  align-items: center;        /* 子要素の縦方向の中央揃え */
  padding: 0 5px;             /* テキストとカラーサークルの間のスペースを設定 */
}

ul.colors li .color {
  display: block;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  margin-right: 10px;         /* カラーサークルの右側のスペースを設定 */
}
/*========================================

*	Message

*---------------------------------------*/
.message-item {
  flex: 1 0 50%; /* PCでは2段組に */
}
.message-item-inr {
  position: sticky;
  top: 50px;
  bottom: 50px;
  overflow: visible;
}
.message-item-ttl {
  font-size: var(--fontsize-2l);
  font-weight: 700;
  line-height: 1.45;
}
.message-item p {
  font-size: var(--fontsize-m);
  line-height: 2;
  letter-spacing: .03em;
  margin: 0 0 2em 0;
}
/*========================================
*	Contact
*---------------------------------------*/
.contact-wrapper {
  padding: 30px 0 15vw;
  margin: 0 -6.5vw;
  position: relative;
  overflow: hidden;
}
.contact-container {
  text-align: center;
  margin-bottom: 30px;
}
.contact-container p{
  font-size: var(--fontsize-m);
  line-height: 1.8;
  letter-spacing: .03em;
}
.contact-fig {
  position: absolute;
  width: 18vw;
}
.contact-fig-01 {
  top: 80px;
  right: 3vw;
}
.contact-fig-inr {
  overflow: hidden;
}
.contact-fig-01 .contact-fig-inr {
  border-radius: 9vw 9vw 1.5vw 1.5vw;
}
.contact-fig-02 {
  top: 150px;
  left: 3vw;
}
.contact-fig-02 .contact-fig-inr {
  border-radius: 10vw;
}
/*========================================
*	Contact form 7
*---------------------------------------*/
.grecaptcha-badge {
  visibility: hidden;
}
.wpcf7 label{
  font-size:var(--fontsize-m);
  padding-top: 30px;
  display: block;
}
input[type="text"],
input[type="email"],
input[type="tel"]{
  font-size:var(--fontsize-m);
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 3px;
	border: 1px solid var(--form-border-color);
	height:44px;
	width: 100%;
	padding-left: 5px;
	margin-top: 10px;
}
textarea {
  font-size:var(--fontsize-m);
  border: 1px solid var(--form-border-color);
  width: 100%;
  height: 200px;
  overflow: scroll;
  padding: 5px;
  font-family: inherit;
	padding-left: 5px;
	margin-top: 10px;
}
.wpcf7 input[type="submit"] {
	-webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  border-radius: 2px;
  padding: 30px 10px;
	width: 100%;
	max-width: 100%;
	font-family: inherit;
  font-size:var(--fontsize-m);
	font-weight: 700;
  background-color: var(--form-submit-color);
	color: var(--white-color);
	margin: 0 auto;
	line-height: 1;
	height: 80px;
  margin-top: 50px;
}
.wpcf7-validates-as-required{
	background: var(--form-input-color);
}
/* 必須項目 */
.wpcf7 .required {
  font-size:var(--fontsize-s);
  color: var(--white-color);
  background: var(--form-required-color);
  font-weight: bold;
  padding: 1px 6px 3px;
  border-radius: 1px;
	display: inline-block;
	margin-left: 10px;
	vertical-align: bottom;
}
/* 送信後のメッセージ */
.wpcf7 form .wpcf7-response-output {
    display: none;
}
/* 添付ファイル  */
label.up_link {
  display: block;
  cursor: pointer;
  background: var(--gray-color);
  color: var(--white-color);
  font-size: var(--fontsize-xxl);
  line-height: 1;
  text-align: center;
  padding: 20px;
  height: 80px;
  border-radius: 10vw;
}
.up_link::before{
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  content: "\f030";
}
label.up_link + img{
  width: 100%;
}
label.up_link input{
  display: none;
}
.img_form {
  position: relative;
  max-width: 300px;
  margin: 0 auto;
}
a.del{
  text-decoration: none;
}
a.del::after{
  position: absolute;
  top: 5px;
  right: 5px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f057";
  font-size: 2.0em;
  color: var(--red-color);
}
a.del::before{
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 1.8em;
  height: 1.8em;
  background: #fff;
  border-radius: 50%;
}
@media screen and (max-width:768px) {
:root {
/*フォントサイズ*/
--fontsize-4l: 5.0rem;
--fontsize-3l: 3.0rem;
--fontsize-2l: 2.6rem;
--fontsize-Xl: 2.2rem;
--fontsize-l: 2.0rem;
--fontsize-m: 1.8rem;
--fontsize-xm: 1.7rem;
--fontsize-s: 1.5rem;
--fontsize-xs: 1.3rem;
--fontsize-xxs: 1.2rem;
}
/*========================================

*	layout_2c

*---------------------------------------*/
.layout_2c {
  flex-direction: column;
  margin-bottom: 100px;
  width: calc(100% + 40px);
  margin-inline: calc(50% - 50vw);
}
.layout_2c_left {
  width: 100%;
  max-width: 100%;
}
.layout_2c_right {
  width: 100%;
  max-width: 100%;
  padding: 0 20px;
}
/*========================================

*	flickity

*---------------------------------------*/
/*sub*/
.carousel-sub .carousel-cell{
  width: 60%;
}
/*========================================

*	Table

*---------------------------------------*/
.layout-table {
  flex-direction: column;
  gap:0;
}
/*========================================

*	History

*---------------------------------------*/
.history-list-year-group {
  display: block;
}
.history-list-year {
  padding-left: 8.2vw;
}
.history-list-year:after {
  left: -1px;
}
.history-list-year-event-group {
  margin: 0 0 0 8.2vw;
}
.history-list-year-event {
  display: block;
}
.history-list-year-group:after {
  left: 6px;
}
/*========================================

*	Message

*---------------------------------------*/
.message-item {
  flex: 1 0 100%; /* SPでは1段組に */
}
}