/*
Theme Name:swellchild
Theme URI:
Description:
Template:swell
Author URI:
Version:2.7.9

.page-id-7991 #body_wrap {
  position: static !important;
}
*/
/* メインビジュアル背景全体に白から透過 */
.fadein-wrap {
	background-color: #fff;
	animation: fadeWrap 3.5s ease-out forwards;
}
img.footer-dolphin{
	width:140PX}


@keyframes fadeWrap {
	from { background-color: #fff; }
	to   { background-color: transparent; }
}

/* 背景画像をふわっと表示 */
.fadein-img {
	opacity: 0;
	animation: fadein 2.5s ease-out forwards;
	animation-delay: 1s;
}
@keyframes fadein {
	to { opacity: 1; }
}
.section.green {
    background-color: white;
}
/* テキストエリア */
.p-mainVisual__textLayer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	z-index: 3;
}

/* 日本語キャッチコピー：中央からフェードイン */
.fadein-text {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeinJP 1.5s ease-out forwards;
	animation-delay: 1.5s;
	font-size: 3rem;
	font-weight: bold;
color:white;
 font-weight: bold;
    color: white;
   
}
.bgw{
	background-color:white;
}
@keyframes fadeinJP {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 英語テキスト：右からスライドイン */
.fadein-text2 {
	opacity: 0;
	transform: translateX(80px);
	animation: fadeinEN 1.8s ease-out forwards;
	animation-delay: 2.2s;
	font-size: 4rem;
	font-weight: bold;
    color: #21918fb0
}
@keyframes fadeinEN {
	to {
		opacity: 0.5;
		transform: translateX(0);
	}
}

/* 背景を流れるアルファベット装飾 */
.alphabet-stream {
	position: absolute;
	top: 50%;
	left: -50%;
	transform: translateY(-50%);
	white-space: nowrap;
	font-size: 3rem;
	color: rgba(255, 255, 255, 0.05);
	font-weight: bold;
	animation: stream 25s linear infinite;
	pointer-events: none;
	z-index: 0;
}
@keyframes stream {
	to {
		left: 150%;
	}
}.p-mainVisual__textLayer.l-parent.l-container.u-ta-center {
    color: white !important;
}
@media screen and (max-width: 768px) {
 .fadein-text2, .fadein-text{
    font-size: 2rem;
  }
}
.service-sections {
  max-width: 1280px;
  margin: 0 auto;
 
  display: grid;
  gap: 180px;
}

/* 各カード全体 */
.service-card {
  padding: 40px;
  color: #fff;
  transition: background 0.3s ease;
}

/* 奇数：濃いティール */
.service-card:nth-of-type(odd) {
  background: #128f9c; /* #12a0a059よりやや濃く */
  color: #fff;
}

/* 偶数：淡いティール */
.service-card:nth-of-type(even) {
  background: white; 
  color: #333;
	box-shadow:0 4px 12px rgba(0, 0, 0, 0.1);
}

/* -------------------------
   タイトル（カード上部）
------------------------- */
.service-header {
  text-align: center;
  margin-bottom: 40px;
}

.service-header h3 {
  font-size: 2rem;
  margin-bottom: 10px;
  font-weight: bold;
}

.service-card:nth-of-type(odd) .service-header h3 {
  color: #fff;
	text-align:center;
}

.service-card:nth-of-type(even) .service-header h3 {
  color: #128f9c;
	text-align:center;

}

.service-header .subtitle {
  font-size: 1rem;
  opacity: 0.85;
}

/* -------------------------
   本文エリア（左右2カラム）
------------------------- */
.service-body {
  display: flex;
  align-items: center;
  gap: 40px;
}

.service-card.right .service-body {
  flex-direction: row-reverse;
}

.service-content {
  flex: 1 1 50%;
  line-height: 1.8;
}

/* 偶数は文字色を濃く */
.service-card:nth-of-type(even) .service-content {
  color: #333;
}

.service-image {
  flex: 1 1 50%;
}

/* アニメ初期値（PC） */
.fade-in-img {
  opacity: 1;
  transform: translateX(-40px);
  transition: opacity 1s ease, transform 1s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* 右配置カードは右→中央へ */
.service-card.right .fade-in-img {
  transform: translateX(40px);
}

/* アクティブ時（PC） */
.fade-in-img.active {
  opacity: 1;
  transform: translateX(0);
}

/* -------------------------
   スマホ対応（縦並び時は下→上へ）
------------------------- */
@media (max-width: 768px) {
  .service-body,
  .service-card.right .service-body {
    flex-direction: column;
    text-align: center;
  }

  .service-header h3 {
    font-size: 1.6rem;
  }

  /* スマホは上下方向のスライドに切替 */
  .fade-in-img {
    transform: translateY(40px);
  }
  .service-card.right .fade-in-img {
    transform: translateY(40px);
  }
  .fade-in-img.active {
    transform: translateY(0);
  }


.service-card:nth-of-type(odd) .service-header h3 {

	text-align:center;
}

.service-card:nth-of-type(even) .service-header h3 {
  color: #128f9c;
	text-align:center;

}
	.service-sections {
		gap:60px;
	}
}
/* ▼ 関連記事：全体ラッパー */
.myRelatedPosts {
	margin-top: 3rem;
}

/* ▼ タイトル見出し */
.myRelatedPosts__title {
	font-size: 1.4rem;
	margin-bottom: 1.5rem;
	font-weight: bold;
	border-left: 4px solid #017a78;
	padding-left: 0.75rem;
}

/* ▼ 記事リスト（flex可） */
.myRelatedPosts__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}

/* ▼ カード単位 */
.myRelatedPosts__item {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 1rem;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* ▼ タイトル */
.myRelatedPosts__itemTitle {
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
	text-align: left;
}

/* ▼ 画像ラッパー（16:9） */
.myRelatedPosts__thumbWrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
}

.myRelatedPosts__thumbWrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ▼ 読み込みボタン */
.myRelatedPosts__moreBtn {
	display: block;
	margin: 2rem auto 0;
	padding: 0.75rem 2rem;
	background: #049483;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	cursor: pointer;
}

.myRelatedPosts__moreBtn:disabled {
	background: #ccc;
	cursor: not-allowed;
}

.category-archive-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px;
}

.category-archive-wrap h1 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  border-bottom: 2px solid #ccc;
  padding-bottom: 10px;
}

.category-post-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-post-list li {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
}

.category-post-list li:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.category-post-list li a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: #333;
}

.thumbnail-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  background: #eee;
}

.thumbnail-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-title {
  padding: 16px;
  font-size: 1.05rem;
  font-weight: bold;
  flex-grow: 1;
}
.custom-banner,
.custom-video {
  flex: 1 1 480px;
  max-width: 480px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

/* 中の画像やiframeを同じ比率で表示 */
.custom-banner img,
.custom-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* PCもスマホも共通 */
.custom-banner-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: stretch; /* ← これで高さを揃える */
  margin: 30px auto;
  max-width: 1200px;
  padding: 0 20px;
}
.custom-banner p,
.custom-video p {
  margin-bottom: 10px;
  font-weight: bold;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
  .custom-banner-wrap {
    flex-direction: column;
    padding: 0 10px;
  }
  .custom-banner,
  .custom-video {
    max-width: 100% !important;
  }
}
.wpcf7-sending-custom {
  text-align: center;
  margin-top: 1.5rem;
  color: #00918f;

}
.wpcf7 .wpcf7-spinner {
  display: none !important;
}
.page-template-thanks .contents_wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem 1rem;
  text-align: center;
}




/* thanks 専用コンテンツ幅と中央寄せ */
.page-template-thanks .contents_wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem 1rem;
  text-align: center;
}
.page-template-thanks h1 {
display:none;
}


.sending-spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto 10px;
  border: 4px solid #cceae9;
  border-top: 4px solid #00918f;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.page-id-8707 body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;!important;
	
}


.thanks-message {
  padding: 4rem 1rem;
  background: linear-gradient(to bottom, #e6f6f5, #ffffff);
  text-align: center;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.thanks-message h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #00918f;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.thanks-message p {
  font-size: 1rem;
  color: #333;
  margin-bottom: 2rem;
  line-height: 1.8;
}
.thanks-btn{
  display: inline-block;
  background-color: #00918f;
  color: #fff;
  padding: 0.8rem 2rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.thanks-btn:hover {
  opacity: 0.85;
}

h1.archive{
	text-align:center;
  width:100%;
	font-size: 1.5rem;
    margin: 5REM 0;
}
}

.custom-banner {
  position: relative;
  text-align: center;
  margin: 40px auto;
  overflow: hidden;
  max-width: 100%;
}
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)){
	background-color:#017a7800!important;
}
/* 光るアニメーションの線をバナー全体にかぶせる */
.custom-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shine 4s infinite;
  z-index: 1;
  pointer-events: none;
}

/* 中の画像は z-index: 0 で shine より後ろに */
.custom-banner a {
  display: inline-block;
  position: relative;
  z-index: 0;
}

.custom-banner a img {
  width: 100%;
  height: auto;
  display: block;
}

/* アニメーション定義 */
@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}

.l-mainContent__inner {
    margin-top: 3rem;
}
p{
	font-weight:400;
}
ul.t-c-w{
	color:white;
	text-align:center
}
.p-articleThumb {
 max-width: 80%;
  height: auto;
	margin:auto;
}
.p-articleThumb__img{
	max-width:100%;
margin:auto;
}
.p-breadcrumb__list{
	width:80%;
}

@media screen and (max-width: 767px) {
  .p-articleThumb {
    max-width: 90%; /* 画像を包む枠だけ少し広げる（任意） */
  }

  .p-articleThumb__img {
    max-width: 300px; /* スマホでは画像の横幅を小さくする */
    margin: 0 auto;
  }
}
.l-container,.l-mainContent {
    width: 100%;
    padding: 0;}

    .-sidebar-on .l-mainContent {
        /* width:calc(100% - var(--swl-sidebar_width) - var(--swl-sidebar_margin)); */
        width: 100%!important;
    }
.l-mainContent__inner>:first-child, .l-parent>:first-child, .post_content>:first-child{
	margin-top:5rem;
}
.l-mainContent__inner>.post_content
{
	margin-top:0 auto;
}
.-sidebar-on .l-content{
	width:100%;
}
.alignfull>.wp-block-cover__inner-container, .alignfull>.wp-block-group__inner-container{
        width: 100%!important;
    }
.c-shareBtns__message,section.l-articleBottom__section.-author {
  
	display:none;
}
.p-articleMetas{
	position:relative;
	
	

	
}

h3.section-heading {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333; /* ← あとで変更してOK */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
  position: relative;
}

h3.section-heading::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 2rem;
  height: 2px;
  background-color: #00918f; /* 仮カラー。後で変更可 */
  opacity: 0.5;
}
 .page-id-8707 .l-content {
    display: block !important;
  }


.post_content h3,h3.ourbusiness{
	margin:0 ;
}

.-sidebar-on .l-mainContent{
	margin:auto;
}
.mt-8{
	margin-top:5rem;
}  
.list-box-300 {
	background-color: white;}

.fw-b{
	font-weight:bold;
}
.br-16{
	border-radius:16px;
}
h2.list-box.text-center {
    top: 0;
	width:80%;
	margin:auto;
}
.mobilefooterwrap>div {
    width: 50%;
	text-align: center;}
h2.list-box.text-center:after{
	display:none;
}
li{
	list-style:none;
}
a.toplink.otoiawase.col-12.text-center.mini span {
    padding: 0.5rem 1rem;
    border: 16px;
}
.back-white{
	background-color:white;
}
a{
	color:black;
}
figure.wp-block-gallery.has-nested-images.columns-default.is-cropped.wp-block-gallery-1.is-layout-flex {
DISPLAY: FLEX!important;
    
}
li.list-heading {
    background-color: white;
    font-weight: 700;
}
figure.wp-block-gallery.has-nested-images.columns-3.is-cropped.wp-block-gallery-3.is-layout-flex {
    DISPLAY: flex;
}
.br-pc {
  display: inline;      /* デフォルトでPCで表示 */
}

.br-sp {
  display: none;        /* デフォルトで非表示 */
}

/* スマホ表示（768px以下）になったら切り替え */
@media screen and (max-width: 768px) {
  .br-pc {
    display: none;      /* スマホでは非表示 */
  }
  .br-sp {
    display: inline;    /* スマホでは表示 */
  }
}
@media screen and (max-width: 780px) {
figure.wp-block-gallery.has-nested-images.columns-3.is-cropped.wp-block-gallery-3.is-layout-flex {
    DISPLAY: flex;
	flex-direction:column;
}
}
.footer-company-info {
  padding: 20px;
 background-color:#00918f57;
  font-size: 14px;
  line-height: 1.6;

}

.footer-info-wrap {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap; /* スマホ時は縦並び */

  max-width: 1000px;   /* コンテンツ幅を制限 */
  margin: 50px auto;      /* 中央寄せ */
}

.footer-info-left,
.footer-info-right {
  flex: 1;
  min-width: 250px;
}

.company-info-list,
.item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.company-info-list li,
.item-list li {
  margin-bottom: 6px;
  font-size: 14px;
}

.footer-info-right h4 {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
text-align:left;
}

/* お問い合わせボタン周り */
.footer-contact {
  margin: 20px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* イルカとボタンの間隔 */
}

.footer-dolphin {
  width:140px!important;
  height: auto;
  opacity: 1;              /* ずっと表示 */
  transform: scale(1);
  cursor: pointer;
}

.footer-dolphin:hover,
.footer-dolphin:active {
  animation: dolphinHover 0.8s ease;
}

@keyframes dolphinHover {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.08) rotate(-4deg); }
  50%  { transform: scale(0.95) rotate(4deg); }
  75%  { transform: scale(1.05) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.footer-contact-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 50px;
    /* background: linear-gradient(135deg, #0077cc, #00aaff); */
    color: #397397;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: -1px 4px 4px #909090;
    background-color: white;
}
.footer-contact-btn:hover {
  background: linear-gradient(135deg, #00918f, #0088cc);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  transform: translateY(-2px);
	color:white;
}

.footer-contact-btn i {
  margin-right: 8px;
}

/* コピーライト */
.footer-copy {
  font-size: 12px;
  color: #666;
  margin-top: 20px;
  text-align: center;
}
h3.arc {
    display: inline-block;
    text-align: center;
    width: 100%;
    font-size: 1.25rem;
}
h1.arc {
    background-color: aliceblue;
    color: black;
    font-size: 1rem;
    font-weight: bold;
}
article.post.wrap>li {
    list-style: none;
}
h1.top-h1{
	text-align:center;
    color: #292424;
    background-color:white;
    font-size: 1.5rem;
    padding: 1rem;
    font-weight: 600;
	
}

h1.top-h1 span {
    position: relative;
    padding: 0 1rem;
    border: 2px solid black;
    border-radius: 8px;
}
h1.top-h1>p {
    font-weight: 500;
    /* padding-top: 1.5rem; */
    /* border-bottom: 4px solid #00918f; */
    display: inline-block;
    /* font-size: 1.75rem; */
    text-align: center;
    margin: 0.5rem 1rem;
    background-color:#656b6b;
    border-radius: 16px;
    padding: 0.5rem;
    color: white;
}

article.post.wrap{
	background-color:white;
}
a.toplink.otoiawase span {
    background-color: #00918f;
    padding: 0.5rem;
    /* height: 3rem; */
    /* line-height: 3rem; */
    display: inline-block;
    position: relative;
   
    /* border-radius: 16px; */
    /* box-shadow: 2px 1px 5px 1px #83b5df; */
    color: white;
    border-radius: 16px;
}
a.toplink.otoiawase span:hover{
	transform: translate(0, 3px);}

.s-font{
	font-size:0.75rem;
}
.arcive>li {
    list-style: none;
    padding: 0.3rem 0.4rem;
    background-color: #00918f57;
    border-radius: 16px;
    margin: 0.3rem;
}
.arcive>li a{
	
}
li.list-heading {
    background-color: white;
    font-weight: 700;
}
ul{
	padding:0;
}
section.container.col-md-10.mx-auto.white {
    background-color: white;
}
.white{
	background-color:white;
}
.veu_followSet {
    display: none;
}
figure.blog {
    position:relative;
    padding: 1rem;
    border-radius: 16px;
}
figure.blog figcaption {
    color: #21918f;
    font-weight: bold;
    position: absolute;
  top:0rem;
}
.mobilefooterwrap>div>a {
    width: 100%;
	display:inline-block;
}

.mobilefooterwrap>div>a>img {
    width: 100%;
    height: auto;
	transition: filter 0.3s ease;
}
.fixed-bottom{
    opacity: 0;

}
.fixed-bottom.appeal{
    opacity: 1;
}

img.attachment-large.size-large.wp-post-image {
	display: none;}


section.archive-page {
    width: 100%;
    margin: auto;
   
}


.mobilefooterwrap>div>a {
    width: 100%;
}

.mobilefooterwrap>div>a>img {
    width: 100%;
    height: auto;
}
.single_thumbnail {
    text-align: center;
}
article.card-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
	margin-top:5rem;
}
h2.card__title::after {
    display: none;
}
/****
a.card {
    display: inline-block;
    border: 1px solid #bddddc;
    background-color: #ffffff85;
    box-shadow: 1px 7px #b3d7d4;
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 3rem;
    margin: 3rem;
	height:300px;
}
a.card>img{
	align-self: center;
}

/****投稿ページ*/
.linelink.wrap {
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

.linelink.wrap>div {
    width: 50%;
}
.new-info.container>ul{
list-style:none;	
}
section.mainaria.new-info.container {
    padding-bottom: 5rem;
}
a{
	text-decoration:none;
}
p.linkaria {
    /* background-color: beige; */
    padding: 1rem;
    /* display: inline-block; */
    /* width: 100%; */
    /* margin: auto; */
    color: #00918f;
    font-weight: 900;
}
.linkaria-page {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 90%;
    margin: auto;
    position: relative;
	color:black;
	text-align:center;
}
h1.single_title {
    text-align: start;
    color: #181212;
    background-color: #00918f;
    font-size: 1.5rem;
    background-color: #f9f9de;
    /* background-image: linear-gradient(48deg, #00918f 0%, #dcebeb73 100%, #d9dee3 100%); */
    width: auto;
    margin: auto;
    line-height: 2rem;
    font-weight: 700;
}
#singlepage h3 {
    font-weight: bold;
    border-bottom: 1px solid #21918f;
    padding: 0 0 3px 0px;
}
.single_content {
  
	margin:3rem auto;
	
	position:relative;
}
.veu_adminEdit {
    display: none;
}
@media screen and (max-width: 820px){
	.single_content{
		padding-bottom:0rem;
	}
	.item-list{
		text-align:center;
	}
	.footer-contact-btn{
		display:none;}
	}.footer-contact {
 
    margin-bottom: 80px;
}
	figure.blog figcaption {
    color: #21918f;
    font-weight: bold;
    position: absolute;
    top: -2rem;
}
}
.single-img.withtext {
    position: relative;
    margin-bottom: 3rem;
}

      
img.mercariimage {
    max-width: 300px;
}

.single-img.withtext p {
 
    width: max(300px,50%);
	 background-color: #fff; 
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), 
                    linear-gradient(180deg, #ccc 1px, transparent 1px); 
  background-size: 8px 100%, 
                   100% 2.5em;
  line-height: 2.5em; 
  padding-bottom: 1px; 
}
article.blog {
	
	
    width: 80%;
    display: flex;
    flex-direction: column;
	margin:auto;
	
}

@media screen and (max-width: 820px){
	
	article.blog {
    width: 90%;
	margin:3rem auto;
}
	.contents_wrap {
    padding-bottom: 10rem;
		margin-top:0rem;
}
	section.archive-page {
    width: 90%;
    margin: auto;
    padding-bottom: 10rem;
}
}
h2.single,#singlepage h2  {
    top: 0;
    color: black;
    display: inline-block;
    width: fit-content;
    border: 16px 16px 16px 16px solid black;
    border-style: solid;
    border-width: 0px 0px 2px 16px;
    line-height: 2rem;
    border-color: #21918f;
    left: 0rem;
padding: 0rem 1rem 0.1rem 0.5rem;
	font-size:1.25rem
}
.wrap{
	display:flex;
	flex-wrap:wrap;
}
h3.single {
    color: #289089;
    font-weight: 800;
	text-align:start;
}
h2.single::after {
    display: none;
}
#singlepage h2::after{
	display:none;
}
div.single-img {
    background-color: #ffffff5c;
    /* padding: 2rem; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

figure.singlle-img {
    position: relative;
    overflow: hidden;
    max-width: 300px;
    height: auto;
}

figure.singlle-img figcaption {
    position: absolute;
    text-align: center;
    color: black;
    bottom: 0;
    background-color: #ffffff9c;
    width: 100%;
}
article.single {
 position:relative;
}

article.single:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(-45deg, #03E5B7 0%, #037ADE 100% );
    transform: translate3d(0px, 20px, 0) scale(0.95);
    filter: blur(20px);
    opacity: var(0.7);
    transition: opacity 0.3s;
    border-radius: inherit;
}


article.single::after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    border-radius: inherit;
}
img.single {
 
    width: 100%;
    height: 100%;
    object-fit: cover;
}
a.mercrilink {
    text-decoration: none;
	text-align: center;
}

.-series .l-header__logo{
    padding: 0;
}
.c-gnav{
    font-weight: bold;
}
.c-gnav>.menu-item>.sub-menu {
    left: 0%;
    top: 100%;
    /* -webkit-transform: translateX(-50%); */
    /* transform: translateX(-50%); */
}
.fade-in-element {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    position: absolute;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
.c-pageTitle__inner {
  position: relative;
  display: inline-block;
  text-align: center;
}

.c-pageTitle__inner::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px; /* 線の太さ */
  background-color: #00918f; /* テーマカラー */
  margin: 0.5em auto 0;
}
.delayed-element {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    position: absolute;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .fade {
    opacity: 0.8;
    transform: translateY(30px);
    transition: opacity 1.5s, transform 1s;
}.fade.active {
    opacity: 1;
    transform: translateY(0px);
}
  .our-service h2,.our h2 {
    position: relative;
    color: black;
    
	  text-align:center;
   
    padding-left: 0;
}
.fottermenu-fixed {
    width: 100%;
    /* height: 100%; */
    background-color: #108080;
    background: rgb(255,255,255);
    /* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(111,232,230,1) 35%, rgba(16,128,128,1) 100%); */
    background: rgb(17,233,230);
    background: linear-gradient(49deg, rgba(17,233,230,1) 0%, rgba(15,187,185,1) 35%, rgba(16,128,128,1) 100%);
}


.our-service h2,
.our h2, h2.new {
  position: relative;
  color: black;
  text-align: center;
  padding-left: 0;
  display: inline-block;
  margin: 0 auto;
	font-family:fantasy;
	padding-bottom:5rem;
	font-size:1.5rem;
}

/* .our-service の疑似要素 */
.our-service h2::before {
  position: absolute;
  content: "service";
 font-size: 4rem;
    bottom:-1rem;
  left: 50%;
  transform: translateX(-50%);
  color:rgba(18, 160, 160, 0.35);
  font-weight: bold;
	font-size:4rem;

  white-space: nowrap;
}

/* .our の疑似要素 */
.our h2::before {
  position: absolute;
  content: "about us";
  bottom:-1rem;
  left: 50%;
  transform: translateX(-50%);
  color:rgba(18, 160, 160, 0.35);
  font-weight: bold;
	font-size:4rem;

  white-space: nowrap;
}


.back-color{
	background-color:#21d9eb0d;
}
body{
    width: 100%;
   background-color:white;
  
font-family: 'Noto Sans JP', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0 !important;
}
iframe {
    border-style: none;
    width:auto;
    height: 300px;
}


address{
    font-style: normal;
}
ul.company-information-list {
    list-style: none;
}
.dispriction-wrap.content.aboutus.fade.active {
   
    margin: auto;
    padding:1rem;
}
.dispriction-wrap.content.aboutus p {
    margin: 1rem 1rem 0rem 1rem;
}
.maincontainer.ourbusiness.companyinformation {
    height: auto;
    justify-content: space-evenly;
}
.fade {
  opacity: 1; /
  transform: translateY(20px); /
  transition: opacity 1.2s ease, transform 1s ease;
}

.fade.active {
  transform: translateY(0);
}
 
.fadein-left{

opacity:0.5;
transform:translateX(-200px);
transition:opacity 1s,transform 1s;
}

.fadein-left.is-show{
opacity: 1;
transform: translate(0);
}







nav.frontnav {

    display: flex;
     width: 100%;
     box-shadow: 1px solid white;   
     position: fixed;
    background-color: rgba(255, 255, 255, 0);
   
    justify-content: center;
    height: 80px;
    opacity: 1;
	transition:0.5s;
    }
    
   .scroll-nav{

    background-color: white;
}


    ul.frontnav-pc {
        width: 100%;
        position: fixed;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
         transition: 0.5s;
		
		height:80px;
    } 

nav.frontnav.background-white,nav.frontnav-mobile.background-white{
	background-color:#ffffff;
}
.scroll-nav {

  /* 背景を白にする */
  background: #fff;
  /* コンテンツの背景が白でもナビゲーションだと分かりやすいように影をつける */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}


    @media screen and (max-width:820px){
        nav.frontnav {
           display:none; 
        }

      
        
    } 

  
    
    ul.frontnav-pc li.frontnav-logo {
        height: auto;
        width: 100px;
       
    }
    li.frontnav-logo img {
        height: 100px;
        /**animation:fadeindorphin 1s linear 5s forwards;*/
       
       
        
        z-index:20;
    }
    li.frontnav-logo img:hover{
        
        z-index: 30;
    }

    ul.frontnav-pc li.frontnav-dispriction {
        width: 25%;
       /** animation:fadeindorphin 1s linear 5s forwards;*/
        
        margin-right: 15%;
    }
    ul.frontnav-pc li.frontnav-dispriction img {
        height:70px;
    }

    ul.frontnav-pc > li {
        width: 10%;
        height: 100px;
        text-align: center;
        display: flex;
        position: relative; 
        text-align: center;
        box-shadow: 1px solid white;
		justify-content:center;
       
       
       
        
    }

    .toplink span {
      
        display: inline-block;
    }

    ul.frontnav-pc li a{
    
        font-weight: 400;
        white-space: nowrap;
        align-self:center;
        color:rgb(38 40 40);
        text-shadow: 1px 1px 2px #78898b5e;
        /* border-bottom: 2px solid; */
        font-size: 1rem;
        /* background-color: white; */
        top:4rem;
        /**animation:fadeindorphin 1s linear 5s forwards;*/
       
        text-decoration: none;
        font-weight: 600;
    }
    ul.frontnav-pc li a:hover{
       
        color:#289089;
        transition: 0.3s;
    }
 

    /**/
nav.frontnav-mobile{
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 10vh;

}

ul.frontnav-mobile{
    width: 90%;
    position: relative;
    display: flex;
    height: calc(100vh* 1/7);
    justify-content: space-between;
   background-color: rgba(255, 255, 255, 0);
   margin-top: 0;
   list-style: none;

}    
ul.frontnav-mobile.hiddenpart ul:first-child {
    padding-top: 1.5rem;
}

.frontnav-mobile li.frontnav-logo {
    width: 20%;
}
ul.frontnav-mobile li.frontnav-logo img {
    height: 80px;
    padding: 1rem;
   /**animation: fadeindorphin 1s linear 2s forwards;*/
  
  
}
figure#img {
    height: 60px;
    animation:fadeindorphin 1s linear 2s forwards;
}

@keyframes fadeindorphin {

    100% {
    
        opacity:1;
        
        }
        95%{
        
        opacity:0.8;
        }
        
        50%{
        
        opacity:0.5;
        }
        25%{
        
        opacity:0;
        }

       

}
    



.openingdolrphin {
    position: absolute;
    opacity: 0;
    animation: openingdorphin 2s linear 1s forwards;
   z-index: 10;
 width: 150px;
 height: auto;
}

@keyframes logo{
    
0%   { transform: rotate(0deg); 
}
100% { transform: rotate(360deg);
}
}

@keyframes openingdorphin{
    0% {
        transform: skew(5deg, 5deg); 
       
        bottom: 0%;
        left:50%;
        opacity: 1;
      }
      5% {
        transform: skew(5deg, 5deg); 
        
        bottom: 20%;
        left:50%;
        opacity: 1;

      }
      10% {
        transform: skew(-4deg, -4deg);
        opacity: 1;
        bottom: 10%;
        left:50%;
      }

      15% {
        transform: skew(3deg, 3deg);
        bottom: 0%;
        left:50%;
        opacity: 1;
      }

      20% {
        transform: skew(-2deg, -2deg);
        
        bottom: 10%;
        left:50%;
        opacity: 1;
      }

      25% {
        transform: skew(1deg, 1deg);
        left:50%;
        opacity: 1;
        bottom: 0%;
      }
      30% {
        transform: skew(-0.6deg, -0.6deg);
        left:40%;
        opacity: 1;
        bottom: 10%;
      }
      45% {
        transform: skew(0.3deg, 0.3deg);
        left:30%;
        opacity: 1;
        bottom: 15%;
      }
      60%{
        transform: skew(3deg, 3deg);
       left:20%;
        opacity: 1;
        bottom:25%;
      }

      75%{
        transform: skew(-4deg, -4deg);
        left: 15%;
        opacity: 1;
        bottom: 50%;
      }
    
      
      
      
     
      90%{
       
        left:0%;
     
        bottom: 80%;
        transform:scale(0.5);
        
    }
      
     100%{
        left: 0%;
        opacity: 0;
    bottom: 100%;
     padding: 1rem;
      
     }
        
      } 

      @media screen and (max-width:767px){
        .openingdolrphin {
            position: absolute;
            opacity: 0;
           width: 80px;
           height: auto;
        }

        @keyframes openingdorphin{
            0% {
                transform: skew(5deg, 5deg); 
                transform:rotate(deg);
                bottom: 20%;
                left:50%;
                opacity: 1;
              }
              5% {
                transform: skew(5deg, 5deg); 
                transform:rotate(deg);
                bottom: 20%;
                left:50%;
                opacity: 1;
        
              }
              10% {
                transform: skew(-4deg, -4deg);
                opacity: 1;
                bottom: 10%;
                left:50%;
              }
        
              15% {
                transform: skew(3deg, 3deg);
                bottom: 0%;
                left:50%;
                opacity: 1;
              }
        
              20% {
                transform: skew(-2deg, -2deg);
                
                bottom: 10%;
                left:50%;
                opacity: 1;
              }
        
              25% {
                transform: skew(1deg, 1deg);
                left:50%;
                opacity: 1;
                bottom: 0%;
              }
              30% {
                transform: skew(-0.6deg, -0.6deg);
                left:50%;
                opacity: 1;
                bottom: 0%;
              }
              35% {
                transform: skew(0.3deg, 0.3deg);
                left:50%;
                opacity: 1;
                bottom: 0%;
              }
              40%{
                transform: skew(3deg, 3deg);
               left:50%;
                opacity: 1;
                bottom:00%;
              }
        
              45%{
                transform: skew(-4deg, -4deg);
                left: 45%;
                opacity: 1;
                bottom: 20%;
              }
            
              
              
              
             
              90%{
               
                left:10%;
             
                bottom: 80%;
                transform:scale(0.5);
                
            }
              
             100%{
                left: 0%;
                opacity: 0;
            top: -100px;
            width: 99px;
            padding: 1rem;
             
              
             }

    }
}


      ul.frontnav-mobile li.frontnav-dispriction {
        width: 70%;
        padding-top: 10px;
        
    }
ul.frontnav-mobile li.frontnav-dispriction img {
    width: 100%;
    /**animation:fadeindorphin 1s linear 2s forwards;*/
    
    height: auto;
}

.menuwrap {
    position: relative;
    width: 6rem;
    height: 6rem;
   /** animation:fadeindorphin 1s linear 2s forwards;*/
   z-index:10;
   
}

.blogcontent-h2.wrapper h2::after {
    display: none;
}
ul.frontnav-mobile.hiddenpart {
    height: auto;
    position: relative;
    left: 100%;
    flex-wrap: wrap;
    list-style: none;
    top: -6rem;
}
ul.frontnav-mobile.hiddenpart.active {
    left: 0;
    background-color:white;
    padding: 2rem;
	box-shadow: 3px 7px 1px #0000003b;
}
ul.frontnav-mobile.hiddenpart ul {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

ul.frontnav-mobile.hiddenpart ul span {
    width: 100%;
    background-color: #00918f;
    color: white;
    text-align: center;
}

ul.frontnav-mobile.hiddenpart ul li {
    width: 100%;
    
}
ul.frontnav-mobile.hiddenpart ul li span {
 
    background-color: white;
    text-align: left;
    color: black;
    line-height: 2rem;
    font-weight: 600;
}
ul.frontnav-mobile.hiddenpart ul.full li span {
    color: white;
    width: 100%;
    background-color: #00918f;
    text-align: center;
    display: inline-block;
}
ul.full {
    width: 100%;
    text-align: center;
    /* background-color: black; */
}


ul.frontnav-mobile.hiddenpart ul li a {
    text-decoration: none;
}
ul.frontnav-mobile.hiddenpart>li {
    width: 100%;
    text-align: center;
}
ul.frontnav-mobile.hiddenpart>li>a {
    padding-top: 2rem;
    text-decoration: none;
    color: #00918f;
    font-weight: 800;
    font-size: 1.5rem;
}

button.navbutton {
    background-color: transparent;
    border-color: transparent;
    z-index: 9999;
    width: 100%;
    height: 10vh;
    padding-left: 1rem;
    padding-top: 1rem;
}

button.navbutton span {
    width: 2rem;
    height: 1px;
    background-color: #000;
    position: relative;
    transition: ease .4s; /*ハンバーガーメニュークリック時の三本線の動きを遅延*/
    display: block;
  }

  button.navbutton span:nth-child(1) {
    top: 0;
  }
  
  button.navbutton span:nth-child(2) {
    margin: 8px 0;
  }
  
  button.navbutton span:nth-child(3) {
    top: 0;
  }

  button.navbutton.active {
    transform: translateX(0);
  }
  
  button.navbutton.active span:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
  }
  
  button.navbutton.active span:nth-child(2) {
    opacity: 0;
  }
  
  button.navbutton.active span:nth-child(3) {
    top: -13px;
    transform: rotate(-45deg);
  }

@media screen and (min-width:821px){
    nav.frontnav-mobile {
       display:none; 
    }
} 
#hero {
    width: 100%;
    z-index: 10;
    display: flex;
    font-family: 'M PLUS Rounded 1c';
    background-size: cover;
    /* color: transparent; */
    /* margin: calc(100vh* 1/5) 0 0 0; */
    flex-wrap: wrap;
    position: relative;
    height: 500px;
    top: -100px;
    background-image: url(img/topimag.webp);
}
.background{
    position: absolute;
    top:-10rem;
    left:0;
    width: 100%;
    height: 500px;
    background-image: url("img/background-cover.jpg");
    background-position: center;
    animation: herofadein 1s linear 7s forwards;
    opacity: 0;
    background-size: cover;

}
@keyframes   herofadein {

    0%{
        opacity: 0;
    }
    99%{
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}



.frontvisual.copy img {
    width: 100%;
    padding: 3rem;
}
.frontvisual.copy {
    width: max(300px, 40%);
   opacity: 0;
   z-index: 40;
   animation: copyfadein 1s linear 5s forwards;
   top:calc((100% - 387px) * 1/2);
}
@media screen and (max-width:820px){
    #hero{
        height: 500px;
    }
    .frontvisual.copy{
        top:40%}
    }


@keyframes copyfadein{

    0%{
opacity: 0;
    }
    80%{

opacity: 0.5;
    }
    100%{
opacity: 1;
    }
}

   .frontvisual {
    position: absolute;
    width: 100%;
    top: 3rem;
    margin: auto;
    left: 0;
    right: 0;
    z-index: 15;
    top: 0;
    height: 500px;
   
} 




.frontvisual.child1 {
    position: absolute;
   
  
    opacity: 0;
   
    animation:visual1 1.5s linear 1s both;
}
   


.frontvisual.child2 {
    position: absolute;
  
    opacity: 0;
 
    animation:visual2 1.5s linear 2.5s both;
}

.frontvisual.child3 {

  opacity: 0;
  position: absolute;
  
  animation:visual3 2s linear 4s forwards;
}

.frontvisual.child4 {
    position: absolute;
  
    opacity: 0;
 
    animation:visual4 5s linear 5s forwards;
}
.frontvisual.child1 ,.frontvisual.child2,.frontvisual.child3,.frontvisual.child4{

    width: 100%;
    z-index: 30;
    left: 0;
    right: 0;
    margin: auto;
    top:0;
    
}

.frontvisual.child1 img, .frontvisual.child2 img, .frontvisual.child3 img,.frontvisual.child4 img{

    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
}


@keyframes visual1{

0%{
    transform: translateX(20px) translateY(0px)scale(0.2);
   opacity: 0;
}

25%{
    opacity: 0.5;
    transform: translateX(10px) translateY(20px)scale(0.3);
  
}
50%{
    opacity: 0.6;
    transform: translateX(5px) translateY(40px)scale(0.4);
  
}

100%{
    transform:translateX(0) translateY(60px)scale(0.5); 
opacity: 0; 
}

} 


@keyframes visual2{

    0%{
        transform: translateX(-20px) translateY(0px) scale(0.2);
        opacity: 0;
    }
    25%{
        opacity: 0.5;
        transform: translateX(-20px) translateY(20px) scale(0.3);

    }

    50%{
        opacity: 0.6;
        transform: translateX(-10px) translateY(40px) scale(0.4);
      
    }
    80%{
        transform:translateX(0px) translateY(60px) scale(0.5);   
         opacity: 0.7; 
         }
    100%{
   transform:translateX(0px) translateY(60px) scale(0.5);   
    opacity: 0; 
    }
    
    } 
    @keyframes visual3{

        0%{
            transform: translateX(20px) translateY(0px)scale(0.2);
           opacity: 0;
        }
        
        25%{
            opacity: 0.5;
            transform: translateX(10px) translateY(20px)scale(0.3);
          
        }
        50%{
            opacity: 0.6;
            transform: translateX(5px) translateY(40px)scale(0.4);
          
        }
        
        100%{
            transform:translateX(0) translateY(60px)scale(0.5); 
        opacity: 0; 
        }
        
        } 
       

        span.frontvisualtext.text1 {
            bottom: 6rem;
            position: absolute;
            left: -2rem;
            color: black;
            writing-mode: vertical-rl;
            display: inline-block;
            font-size: 2rem;
            background: white;
           
        }
        span.frontvisualtext.text2 {
            bottom: -1rem;
            position: absolute;
            left: 2rem;
            color: black;
            /* writing-mode: vertical-rl; */
            display: inline-block;
            font-size: 2rem;
            background: white;
         
            text-align: center;
        }

ul.herologo {
    margin:2vh auto;
    font-size: 4rem;
    font-family: fantasy;
   
  width: max(350px,35%);
    
    display: flex;
    flex-wrap: wrap;
    list-style: none;
   
}
ul.herologo.right img {
    width: 100%;
}
ul.herologo.right {
    width: max(350px,35%);
    color:black;
   /*** background-image: url("https://closehauled.online/wp-content/uploads/2022/10/topimagpc.jpg");*/
    background-position: right;
    font-size: 2rem;

        
        align-self: self-end;
    }
ul.herologo span {
    
    font-size: 8rem;
}
ul.herologo li{
    width: 100%;
}

ul.herologo li:nth-child(2) {
    width: max(362px,100%);
}
ul.herologo li:nth-child(3) {
    width: max(300px,100%);
}


@media screen and (max-width:820px){
    
 ul.herologo span {
       
    font-size:calc(6rem + ((1vw - 0.4875rem) * 5.614));
    min-height: 0vw;


    }
    ul.herologo{
    font-size: calc(3rem + ((1vw - 0.4875rem) * 1.4035));
    }

}

div#svgback{
    width: 100%;
    position: relative;
   z-index: 20;
    margin: 0%;
     
}


@keyframes svgfade 
{
    0%{
opacity: 1;
    }
    50%{
        opacity: 0.5;
    }
    100%{
opacity: 0;
    }
}





img.city {
    position: absolute;
    top: calc((100% - 125px) *1/2);
    right: calc((100% - 300px) * 1/2);
    width: 300px;
    animation:svgfade 2s cubic-bezier(0.4, 0, 1, 1) 2s both;
    
}
img.smile {
    position: absolute;
    top: calc((100% - 75px) *1/2 + 50px);
    right:calc((100% - 300px) * 1/2);
    width: 300px;
    animation:svgfade 2s cubic-bezier(0.4, 0, 1, 1) 2s both;
   
}


section.maincontent {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 5rem auto;
	
   
    
}

section#branch {
    width: max(80%,300px);
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 0 auto;
}

a.branch {
    align-items: center;
  background-image: linear-gradient(144deg,#00918f, #23c483 50%,#23c4837a);
  border: 0;
  border-radius: 14px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 1rem;
  justify-content: center;
  padding: 10px 33px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  flex-direction: column;
  cursor: pointer;
  width: 280px;
  line-height: 1rem;
  margin: 1rem;

}
a.branch span {
    font-size: calc(1rem + ((1vw - 3.5px) * 2.0382));
    min-height: 0vw;
 
   padding: 0.5rem 0rem;
   font-weight: bold;
}
a.branch p {
    line-height: 0.5rem;
}


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


@media (min-width: 768px) {
  a.branch {
    font-size: 1rem;
    min-width: 196px;
    line-height: 3rem;
  }
}

.maincontainer.ourbusiness {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    /* height: 300px; */
 /*  margin: 3rem 0;
   
    padding: 3rem 0;*/
	border-radius:16px;
	background-color:white;
}

.map {
    display: flex;
    justify-content: center;
    align-items: center;
}
.maincontainer.ourbusiness.service{
    width: 90%;
    height: auto;
    
}
.maincontainer.ourbusiness.dispriction {
    display: block;
}

.dispriction-wrap {
    width: 100%;
    background-size: cover;
    background-position: center;
   
    position: relative;
   margin-right: 10%;
    padding:5rem 0rem 0rem 5rem;

 background-color:#00918f00;
}

.dispriction-wrap.aboutus.fadein-left.is-show {
  
    background-size: cover;
    width: 100%;
    margin-right: 0;
}

.backdrop {
    position: absolute;
    right: 2%;
    top: 3%;
    width: max(60%,347px);
    padding: 20px 0;
    height: max(10vw, 11rem);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-right-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 20px rgb(79 101 102 / 30%);
    text-align: center;
}
span.dispriction-wrap-text {
    display: inline-block;
    color: #111212;
    vertical-align: bottom;
    margin: 1rem 0rem 0rem 0rem;
    font-weight: 400;
    /* width: 100%; */
    left: 3rem;
    position: relative;
    padding: 1rem;
}

    @media screen and (max-width:820px){
        span.dispriction-wrap-text{
  margin:0rem;
			left:0;
  
    
    
    
    
    
}
   .dispriction-wrap{
    
  width: 100%;
  margin-right: 0;
 padding: 1rem;
   }

}

span.dispriction-wrap-text > p{
    line-height: 1.5rem;
}
.dispriction-wrap.content{
    height: auto;
    background-color: #f9fafb6b;
    background-image: none;
    margin-top: 0;
   
    display: flex;
    flex-wrap: wrap;
 
   
    
}

.dispriction-wrap-inner {
   
        flex-wrap: wrap;
        width: 80%;
        /* border-radius: 0px 292px 0px 16px; */
        margin: auto;
        justify-content: center;
        flex-direction: column;
        height: max(30%,300px);
   
}


.dispriction-wrap.content.ourbusiness{
   
    
   
}
@media screen and (max-width:820px){

    .dispriction-wrap.content.ourbusiness {
     
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top;
    }
    span.dispriction-wrap-text > p{
        line-height: 1rem;
    }
}



@media screen and (max-width:820px){
    
    .dispriction-wrap.content.maincase {
     
        background-repeat: no-repeat;
        background-position: top;
        background-size: contain;
    }


}



.maincontainer.ourbusiness.service

{   
    display: grid;
    grid-template-columns: minmax(1rem, 24px) 1fr 1fr 1fr 1fr;
    grid-auto-rows: minmax(3rem, 10px) minmax(25rem,22%) minmax(3rem, 16px);
    grid-template-areas:
        ". title title title title"
        ". info info figure figure"
        ". list list list list";
    position: relative;
    margin: auto;
    padding: 8vw 5rem;
    align-items: center;
    background-color: white;
    border:#28908924 2px solid;

}




figure.backgroundbox {
    width: max(300px,70%);
    overflow: hidden;
    margin: 0;
    position: absolute;
    margin-top: 0rem;
    text-align: center;
    /* margin-top: 8rem; */
    height: 100%;
    opacity: 0.3;
    transition: all 3s;
    right: 0;
}
figure.backgroundbox:hover{
    opacity: 0.8;
}
@media screen and (max-width:767px){

    figure.backgroundbox{
        width: 100%;
        opacity: 0.3;
    }
}
figure.backgroundbox img {
    width: 100%;
    height: auto;
   
    overflow: hidden;
    
    
}
.contentwrappaer {
    position: relative;
  
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: space-around;
}

@media screen and (max-width:820px){
    .contentwrappaer{
        width: 100%;
       
    }
}

.contentwrappaer.case {
    margin-top: 0rem;
}
.hoverwrapper {
    width: 30%;
    position: relative;
    margin:auto;

}
.hoverwrapper:nth-child(2) {
    left: 0%;
    width: 30%;
    position: relative;
   
}
.hoverwrapper:nth-child(3) {
    position: relative;
   
    left: 0%;
    width: 30%;
}











 




@keyframes wrapperhover {
    100% {
    
    opacity:1;
    
    }
    75%{
    
    opacity:1;
    }
    
    50%{
    
    opacity:0.9;
    }
    25%{
    
    opacity:0.8;
    }
    0%{
    
    opacity:0.7;
    }
    }


    
@media screen and (max-width:820px){
.maincontainer.ourbusiness.service
{
    display: grid;
    grid-template-columns: minmax(350px, 100%)1fr 1fr;
    grid-auto-rows: auto;
    grid-template-areas:
        "title title title"
        "list list list"
        "figure figure figure"
        "info info info"
        "etclist etclist etclist";
    margin: auto;
    padding: 10vw 0;
    width: 100%;


}



} 



.gridaria-title {
    grid-area: title;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    
}
.gridaria-title.hover {
    align-items: normal;
    position: relative;
    top:5vw;

}
.gridaria-title p {
   
}


.info-text {
    font-size: 1rem;
    margin-top: 0;
   
 
    color: #0d0d0e;/***
    border-bottom: 1px solid #22a3b6;
    border-image: linear-gradient(to right, rgb(25 124 123) 0%, #1bc9c1 50%, #e7efe8 100%) 1;
    */
   padding:1rem;
    align-self:center;
    background-color: #ffffff70;
    position: relative;
}

 h3.ourbusiness span {
    display: inline-block;
    position: relative;
    transition: transform 0.3s, text-decoration 0.3s;
	  color: inherit;
  }
h3.ourbusiness span::after{
  content: ''; /* 疑似要素のコンテンツを空にする */
  position: absolute;
  bottom: -2px; /* テキストの下に配置 */
  left: 0;
  width: 100%;
  height: 2px; /* アンダーラインの太さを指定 */
  background-color: rgb(25, 124, 123); /* アンダーラインの色を指定 */
  transform: scaleX(0); /* 初期状態では非表示 */
  transition: transform 0.3s ease-in-out; /* アニメーションを設定 */
}

h3.ourbusiness span:hover::after,h3.ourbusiness:hover span::after{
  transform: scaleX(1); /* ホバーまたはスクロール時にアンダーラインを表示 */
}


.linkaria {
    display: flex;
    width: 100%;
    flex-direction: column;
}
a.button.link.back {
    text-align: center;
}

.link {
    display: inline-block;
    width: fit-content;
    margin: auto;
    position: absolute;
    bottom: -4rem;
    /* margin: auto 30%; */
    right:0;
    border-radius: 16px;
    font-weight: 600;
    font-size: large;
    padding: 4px 6px;
    background-color: #21918f;
    border: 1px solid #197c7b;
    padding: 4px 12px 6px 16px;
    text-decoration: none;
    transition: 0.5s;
	left:0;
}
.link.case{
    bottom: 2rem;
}

.link span {
    color: white;
    transition: 0.5s;
    font-weight: 100;
  
}
.link:hover{

    background-color:white;
}
.link span:hover{
   color: #21918f;
}



@media screen and (max-width:820px){


p.info-text.sp-none {
    display: none;
}

}


figure.closecontetnt{
    grid-area: close;
}

.gridaria-info {
    grid-area: info;
    width: 100%;
}

li.gridaria-list-lastchild {
    grid-area: etclist;
    list-style: none;
    margin: 2rem auto;
    width: 80%;
}


.gridaria-info p:first-child {
    margin-top: 3rem;
}
.gridaria-info p {
    padding: 0rem 2rem 0rem 2rem;
}


figure.gridaria-figure {
    grid-area: figure;
    margin: 2rem auto;
    text-align: center;
    position: relative;


}
figure.gridaria-figure.pcnone {
    display: none;
}
figure.gridaria-figure.spnone {
    display: block;
}

@media screen and (max-width:820px){

    figure.gridaria-figure.pcnone {
        display: block;
    }
    figure.gridaria-figure.pcnone figucaption {
        position: absolute;
        top: -16vw;
        width: 100%;
        left: 0;
    }
    figure.gridaria-figure.spnone {
        display: none;
    }
}


figure.gridaria-figure img {
    width: 70%;
}
.gridaria-list {
    grid-area: list;
    list-style: none;
    width: 100%;
    position: relative;
    text-align: right;
    display: flex;
    padding-left: 0rem;
   
    height: auto;
    margin:0;
   

   flex-wrap: wrap;
}
ul.gridaria-list li>ul{
    
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        width: 100%;
        margin-bottom: 0;
        font-size: 0.5;
        text-align: left;
        
}

.gridaria-list li {
    font-size: 1rem;
    position: relative;
    padding-top: 1rem;
    list-style: none;
    width: max-content;
    text-align: center;
    padding-left: 1rem;
}
  
ul.gridaria-list li>ul>li{
    width: 100%;
  

    left: 0;
}
ul.gridaria-list li span {
    color: #020202;
    position: relative;
    font-size: 1rem;
    font-weight: 600;
    display: inline-block;
    /* background-color: #909377; */
    line-height: 2rem;
    padding: 10px 24px 10px 24px;
    width: max-content;
    border-radius: 16px;
    border: black 1px solid;
}

@media screen and (max-width:820px){
    .gridaria-info {
        grid-area: info;
       margin: auto;
    }
    .gridaria-list {
        justify-content: center;
        margin: auto;
}
}

p.sp-none {
    background-color: #fff;
    background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),  linear-gradient(180deg, #ccc 1px, transparent 1px);
    background-size: 8px 100%,  100% 2rem;
    line-height: 2rem;
    padding-bottom: 1px;
}
/***case-grid*/

.maincontainer.casestudy {
    display: grid;
    grid-template-columns: minmax(300px,30%) minmax(50px,30%) minmax(300px,30%) minmax(300px,30%);
    grid-auto-rows: minmax(136px,10%) minmax(338px,63%) minmax(112px,19%);
    grid-template-areas:
        "title title title title"
        "figure figure info info"
        "point point point point";
    background-color: white;
    margin: auto;
    /* padding: 8vw 5rem 0 5rem; */
}

 
@media screen and (max-width:820px){
    .maincontainer.casestudy {
        display: grid;
        grid-template-columns: minmax(0,1%);
        grid-auto-rows: minmax(100px, auto);
        grid-template-areas:
            "title title title title"
            "info info info info"
            "figure figure figure figure"
            "point point point point";
        padding: 0;
    }
  
}
figure.casestudey {
    max-width:300px; 
    height: auto;
    margin: auto;
    overflow: hidden;
    position: relative;
}

figure.casestudey img {
    width: 100%;
    height: auto;
    margin: auto;
    padding: 2rem 2rem 6rem 2rem;
}

.maincontainer.casestudy.content1.before,
.maincontainer.casestudy.content2.before,
 .maincontainer.casestudy.content3.before
  {
    opacity: 1;
    width: max(30%,300px);
    border-radius: 10px;
    /* background-color: #edf9f5bd; */
    display: block;
    padding: 0;
    margin: 1rem auto;
    display: flex;
    height: auto;
    flex-direction: column;
    border: #8d8484 1px solid;
}

 


.gridaria2-title {
    grid-area: title;
    display: flex;
    
   
  
    align-items:center;
  flex-wrap: wrap;
}

.gridaria2-icon {
    grid-area: icon;
}

figure.gridaria2-figure {
    grid-area: figure;
    display: flex;
    flex-wrap: wrap;
   justify-content: center;
    margin: auto;
    width: 100%;
}
figure.gridaria2-figure img {
    max-width: 279px;
    padding: 1rem;
    height: auto;
}
    
figure.gridaria-figure figcaption {
    position: absolute;
    bottom: -3rem;
    color: #293434;
    width: 100%;
    padding-left: 2rem;
    text-align: left;
    right: 0;
    display: inline-block;
}
.gridaria2-info {
    grid-area: info;
    width:80%;
    margin: auto;
}

span.point {
    color: #eff5f5;
    position: relative;
    font-size: 1rem;
    font-weight: 600;
    display: inline-block;
    background-color: #909377;
    line-height: 2rem;
    padding: 6px 15px 2px 15px;
    width: max-content;
    border-radius: 16px;
    margin-top: 6px;

}



span.point>p {
    color: #262020;
    font-weight: 300;
    font-size: 1rem;
}
span.exsample {
    
    display: inline-block;
    margin: auto;
   
    padding: 1rem;
   
    border-radius: 27px;
    color: #64615d;
    font-size: 0.5rem;
}
h2 {
    position: relative;

    font-size: 1rem;
    color: #0d0e0e;
    margin: 0rem;
    font-size: 1rem;
    font-weight: 900;
    /* text-align: center; */
    border: none;
 
    position: relative;
    width:100%;
    margin-bottom: 2rem;
    left: 0;
    display: inline-block;
    top:0rem;
}

    h2.service::after{ 
content: "SERVICE";
font-size: 4rem;
position: absolute;
font-family: fantasy;
z-index: 2;
top: -5rem;
left: 0rem;
color:#d3dbdb;
}

#ourbusiness h2:afetr{
    content: "Service";
}
#maincase h2::after{
    content: "Case";
	font-size: 4rem;
position: absolute;
font-family: fantasy;
z-index: 2;
top: -5rem;
left: 0rem;
color:#d3dbdb;
}
#aboutus h2::after {
    content: "About us";
    color:#00918f;
	font-size: 4rem;
position: absolute;
font-family: fantasy;
z-index: 2;
top: -5rem;
left: 0rem;
color:#d3dbdb;
}
#companyinformation h2::after{
    content: "#d3dbdb";
}
.point {
    grid-area: point;
    text-align: end;

}

@media screen and (max-width:820px){
    h2.service::after{
        font-size: 2rem;
        min-height: 0vw;
		top:-2rem;
    }
	
	
    .point {
        grid-area: point;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 1rem;
        padding-left: 10%;
    }
	
}
span.dispriction-wrap-text.aboutus {
    color: #00918f;
    font-weight: 600;
}
.ourbusiness.textcontent {
    flex-wrap: wrap;
    width: 100%;
    display: flex;
    height: 100%;
    justify-content: start;
    align-items: center;
	padding:1rem;
}
h2.grid{
    
        position: relative;
        content: "";
        font-size: 1rem;
        display: inline-block;
       
         width:max(300px,30%);
       
        color: #3e4141;
        text-align: center;
        margin: 0;
        flex-grow: 1;
       
      
     
    }    
    h2.grid::after {
        display: none;
    }
    .yoast-breadcrumbs {
        width: 90%;
        margin: auto;
        padding: 1r;
        color: #289089;
    }
    .yoast-breadcrumbs:hover {
       
        color: white;
    }
    
    .yoast-breadcrumbs >span {
        background-color: #ffffff00;
        padding: 6px;
		
    }
    .yoast-breadcrumbs >span>span:hover {
        background-color: #289089;
		transition: all 0.5s ease;
       
    }
    .yoast-breadcrumbs >span>span>span:hover {
        background-color: #289089;
		transition: all 0.5s ease;
    }


    .yoast-breadcrumbs >span >span >a {
        text-decoration: none;
    }
table.about-us {
  margin: 0 auto;
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* 1項目ごとをカードのように */
table.about-us tr {
  display: block;

  padding: 2rem 1.5rem;
}

table.about-us tr:last-child {
  border-bottom: none;
}

/* thとtdを縦並び＆中央揃え */
table.about-us th {
  display: block;
 color:black;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.4rem 0.8rem;
  margin-bottom: 0.6rem;
  border-radius: 6px;
 
}

table.about-us td {
  display: block;
  color: #333;
  line-height: 1.6;
	text-align:center;
}

table.about-us td p {
  margin: 0.3em 0;
}

table.about-us th {
  position: relative;
  display: block;             
  text-align: center;
  color: #00918f;               /* ← テキストはブランドカラー系 */
  background: #fff;             /* ← 白背景 */
  padding: 0.5em 0.8em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

/* 左右にグラデーションライン */
table.about-us th::before,
table.about-us th::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30%;
  height: 2px;
  background: linear-gradient(135deg, #00918f, #0088cc); /* ← グラデ線 */
}

table.about-us th::before {
  left: 5%;
}

table.about-us th::after {
  right: 5%;
}
section.maincontent.nomargin {
    margin-top: 0;
}



.veu_socialSet.veu_socialSet-position-after.veu_contentAddSection {
    display: none;
}
h3 {
    position: relative;
    content: "";
    font-size: 1.25rem;
    display: inline-block;
    font-weight: bold;
    width: 100%;
    padding: 1rem 0;
    color: #020202;
    text-align: start;
    margin: 0;
  
	padding-left:1rem;
}

  h3.content1 {
    padding: 1rem 0;
}

h3.ourbusiness::before,h1.page-display.assessment:before {
    position: absolute;
    font-size: 1rem;
    color: #afb9b91c;
    width: auto;
    right: 0;
    left: 0;
    margin: 0;
    bottom: 4rem;
    font-family: serif;
}


h3.ourbusiness.assessment::before,h1.page-display.assessment::before{
    content: "Assessment";
}

h3.ourbusiness.sale::before{
    content: "Sale";
}


h3.ourbusiness.appraisal.tenpo::before,h1.appraisal.tenpo::before{
    content: "Appraisal for corporate";
}

h3.ourbusiness.appraisal.kozin::before{
    content: "Appraisal for";
}
h3.ourbusiness.others::before{
    content: "Others";
}
.fa-2x{
    color:#081a18;
    padding-right: 1.5rem;
}
.fa-solid, .fas {
    font-weight: 900;
    padding: 0rem 1rem 0rem 1rem;
}
span.h3-under {
    font-size: 4rem;
    writing-mode: vertical-rl;
    right: 0rem;
    display: inline-block;
    position: absolute;
    height: 24rem;
    top: 2rem;
    background: linear-gradient(90deg, rgb(1 4 4 / 18%) 0%, rgb(18 219 163 / 3%) 43%, rgb(70 169 65 / 11%) 89%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    font-family: serif;
}
button.contents {
    padding: 1.3em 1em;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: #f9fafb;
    background-color: #00918fb3;
    border: none;
    border-radius: 45px;
    box-shadow: 0px 8px 15px rgb(0 0 0 / 10%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    margin: 1rem;
    transition: all 0.3s;
    position: relative;
   top:-2rem;
    z-index: 20;
   
}
.gridaria2-title button {
    top: 0rem;
}
button.contents.open {
    width: 10rem;
}
button.contents.close{

    width: 6rem;
}
   
   button.contents :hover {
    background-color: #23c483;
    box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
    color: #fff;
    transform: translateY(-7px);
   }
   
   button.contents.active {
    transform: translateY(-1px);
   }
   

   
    

    section.mobilefooter {
        width: 100%;
        position: fixed;
       /* height: 7rem;*/
        background-color:white;
		        bottom: 0;
		z-index:1000;
    }
  .mobilefooterwrap{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
  
  
.mobilefooter.mail>a>img, .mobilefooter.tel>a>img{
  

}
  .mobilefooter.mail>a>img:hover,.mobilefooter.tel>a>img:hover{
   
    filter: brightness(110%); /* ホバー時に若干明るくする */
  animation: shine 1s forwards;
	  
    }
@keyframes shine {
  from {
    background-position: -100%;
  }
  to {
    background-position: 200%;
  }
}
 

    .fa-3x {
        font-size: 3em;
        color: #00918f;
    }

    .fa-3x:hover{
color:white;
    }

    @media screen and (min-width: 821px){
     
        
            section.mobilefooter {
                display:none;
            }
        
    }

.fottermenu-notfixed,.fottermenu{
	 width: 100%;
        height: auto;
        position: relative;
        text-align: center;
        padding-top: 3rem;
        margin-top: 3rem;
        background-color: #289089;
        color: white;
	
	
}


    @media screen and (max-width: 820px)
{.fottermenu,.fottermenu-notfixed {
    display:none;
}
}
.mobilefooter {
 
  background: #f9f9f9;
}

.mobilefooterwrap {
  display: flex;

}

/* 共通 */
.btn {

  text-decoration: none;
  color: #fff;
  transition: background 0.3s ease;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn.tel {
  flex: 2;
  background: linear-gradient(135deg, #04b89b, #049483);
	transition: background 0.3s ease, transform 0.2s ease;
}
.btn.tel:hover {
background: linear-gradient(135deg, #03766a, #04a68f);  
  transform: translateY(-2px);
}
.btn.tel .btn-inner {
  display: flex;
  align-items: center;   /* アイコンとテキストを縦位置で揃える */
  justify-content: center;
  gap: 12px;             /* アイコンとテキストの間隔 */
  text-align: left;      /* テキストは左揃え */
}

.btn.tel .mainrow {
  display: flex;
  align-items: center;      /* アイコンと文字を上下揃え */
  justify-content: center;  /* 横方向も中央寄せ */

}

.btn.tel i {
  font-size: 34px;       /* アイコン大きめ */
  line-height: 1;
}

.btn.tel .texts {
  display: flex;
  flex-direction: column; /* 小→大テキストを縦に積む */
  align-items: flex-start; /* 左揃え（中央にしたければ center に） */
  justify-content: center;
}

.btn.tel .subtext {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.btn.tel .maintext {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}


/* メールボタン */
.btn.contact {
  flex: 1;
    background: linear-gradient(135deg, rgba(27,127,204,0.8), rgba(27,127,204,1));
	background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.btn.contact:hover {
;
	 background: linear-gradient(135deg, rgba(15,90,160,1), rgba(27,127,204,1)); /* 濃いめ青へ */
  transform: translateY(-2px);
}
.btn.contact .btn-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
}
.btn.contact i {
  font-size: 32px;
}
.btn.contact .subtext {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.9;
}

ul.sitefooter {
    display: flex;
    justify-content: space-around;
    list-style: none;
    width: 100%;
    margin: 1rem auto;
	padding-top:2rem;
}

section.maincontent.cpntact {
    width: 100%;
    margin: auto;
    text-align: center;
}
    
p.otoiawase {
    width: 100%;
    display: inline-block;
}
div#contactForm {
    text-align: center;
}
ul.sitefooter > li > a{
    text-decoration: none;
}
img.closehauedgirl {
    width: auto;
    height: 200px;
}
.contactform.link {
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    border-radius: 0;
    background-color: white;
}

span.thanks {
    font-size: 2rem;
    width: 100%;
    font-weight: 500;
    color: #00918f;
}

section.maincontent.thanks {
    width: 80%;
    margin: auto;
    text-align: center;
}

.linelink {
    width: max(330px,10%);
    display: flex;
  flex-wrap:wrap;
    justify-content: center;
    text-align: center;
}


h2.heading.sec__heading_contact {
    display: none;
}
p.closehauedgirl {
    font-weight: 500;

}
p.closehauedgirl3 {
    position: absolute;
    bottom: 0;
    color: #232a2a;
    background-color: #edf3f3a8;
    font-weight: 100;
    display: inline-block;
}
figure.closehauedgirl {
    height: 200px;
    margin: 0;
    width: max(320px,50%);
    position: relative;
}
img.closehauedgirl {
    width: auto;
    height: 200px;
   
    bottom: 0%;
    right: 0;
}

figcaption.closehauedgirl {
    
    bottom: 50%;
    position: absolute;
   background-color: #00918f;
}

ul.sitefooter span{
    color: white;
    border-radius: 14px;
    padding: 1rem;
    transition: all 1s;
}
ul.sitefooter span:hover{
background-color: white;
color: #00918f;

}
/*******投稿ページカスタム************************************************************/
 article.blogcontent {
    width: 100%;
    margin: auto;
	     font-family: 'Kosugi', sans-serif;
}
.blogcontent-h2.wrapper {
    position: relative;
}
.blogcontent-h2.wrapper h2 {
    border-top: none;
    position:fixed;
    z-index: 100;
    color: white;
    background-color: #2ca48ba6;
    display: inline-block;
    padding: 1rem;
	top:2rem;
}
.blogcontent {
    width: 80%;
    margin: auto;
	height:auto;
}
div.blogcontent.top {
    display: flex;
    flex-wrap: wrap;
	justify-content:center;
	margin-bottom:5rem;
}
.blogcontent.top.caption {
    width: max(30%,400px);
}
ul.blogcontent-pickup {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    width: max(350px,52%);
    margin: auto;
}
ul.blogcontent-pickup li {
    margin: 1rem;
    background: #63b19f9e;
	box-shadow: 28px 14px 68px -39px #1ec878;
    border-radius: 10px;
}
figure.blogcontent.top.img {
    width: max(30%,500px);
}
.blogcontent.link {
    /* border: 1px dotted blue; */
    display: flex;
    flex-wrap: wrap;
    margin-top: 5rem;
    position: relative;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 0;
    padding: 0;
    background: white;
    width: 90%;
    justify-content: center;
    text-align: center;
}


ul.blogcontent-prduct {
    width: 90%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

ul.blogcontent-prduct li {
    width: max(30%,335px);
	padding:1rem;
}

ul.blogcontent-prduct li img {
    height: auto;
    width: 100%;
    max-height: 229px;
}

.dolphinintro.blogcontent {
    width: max(30%,400px);
	    border: none;
}
.dolphinintro.blogcontent:after{
	display:none;
}

figure.dolphin.blogcontent{
	width: max(50%,100px);
}

a.twinkle-button.blogcontent {
    width: auto;
	margin-top:3rem;
	animation: menu 0s linear 1s both running;
}

section.greeting {
    width: 90%;
    margin: auto;
}

.sign p {
    width: max(300px,50%);
    margin-top: 0;
}
.sign img {
    height: 1.5rem;
}

.introductionimg {
    width: max(400px,30%);
    margin: auto;
}

.introductionimg figure > img {
    width: 100%;
    height: auto;
}

.arialist {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 90%;
    margin: auto;
}

.blognews {
    width: 80%;
    margin: 3rem auto;
    border: 1px solid black;
}


h2.aria {
    position: relative;
    margin-top: 5rem;
    width: 100%;
    margin: 5rem auto;
    text-align: center;
}
h2.aria::after{
    display:none;
} 
figure.aria {
    width: max(300px,40%);
}
figure.aria img{
    width: 100%;
}
ul.aria {
    list-style: none;
    width: max(350px,40%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 0;
    text-align: center;
    height: 10rem;
    background-color: white;
    padding: 0rem 1rem 2rem 1rem;
    border-radius: 12px;
    border: 1px solid rgb(38 40 40);
    color: #21918f;
}

ul.aria > li {
    list-style: none;
    height: 2rem;
    padding: 1rem;
}

.introduction {
    margin-top: 5rem;
}

.introductionimg figure {
    width: 100%;
    margin: 0;
}

figure.sign {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

    
    /* 入力項目を見やすく */
    input.wpcf7-form-control.wpcf7-text,
    textarea.wpcf7-form-control.wpcf7-textarea {
        width: 100%;
        padding: 8px 15px;
        margin-right: 10px;
        margin-top: 10px;
        border: 1px solid #d0d5d8;
        border-radius: 3px;
        background-color: #eff1f5;
    }
  
    
    /* 「送信する」ボタン */
    input.wpcf7-submit {
        display: block;
        padding: 15px;
        width: 200px;
        background: #00918f;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        border-radius: 2px;
        margin: 15px auto 0
    }
    @media screen and (max-width:768px){
    input.wpcf7-submit {
    width: 250px;
    }
		.contactform.link{
			padding-bottom:10rem;
		}
		h1.top-h1{
			text-align:left;
			font-size:1rem;
		}
    }
    
    input.wpcf7-submit:hover {
        box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
        transform: translateY(-4px);
        opacity:0.7;
    }
    /* エラーメッセージを見やすく */
    span.wpcf7-not-valid-tip,
    .wpcf7-response-output.wpcf7-validation-errors {
        color: red;
        font-weight: 600;
    }

  .side {
    width: 90%;
    margin: auto;
    /* height: 350px; */
    /* margin-bottom: 120px; */
    text-align: center;
    align-items: center;
    padding-bottom: 8rem;
}
.side li{

    list-style: none;
}
    li#block-51 {
        list-style: none;
    }

a.col-12.col-md-3.text-center {
  
    border-radius: 16px;
}
    ul.newinformation {
        width: 100%;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
        justify-content: space-evenly;
        align-items: center;
    }
    img.attachment-full.size-full.wp-post-image {
        width: 30%;
        height: auto;
    }
div#splide01 {
    margin-top: 3rem;
}
    .mainwrapper {
       
        margin:  auto;
       
		background-color:white;
    }
    ul.newinformation>li {
        width:100%;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0.5rem;
    }
h2.new,h2.service,h2.case,h2.about,h2.kanzaikaitori,h2 .kataduke,h2 .kozin {
    /* background-color: #00918f; */
   padding-bottom:4rem;
    margin-bottom: 0;
    color: #121414;
    position: relative;
    top: 1rem;
    font-size: 1.25rem;
    left: 0rem;
	text-align:center;
}
h2.new::after {
    content: "News";
    font-size: 4rem;
    position: absolute;
    color:rgba(18, 160, 160, 0.35);
    right: 1;
  bottom:-1rem;
    right: 0%;
    left: 0rem;
	font-family:fantasy;
}
h2.kozin::after {
    content: "House Refresh";
    font-size: 4rem;
    position: absolute;
    color:rgba(18, 160, 160, 0.35);
    right: 1;
 top:0rem;
    right: 0%;
    left: 0rem;
	font-family:fantasy;
}
h2.kanzaikaitori::after {
    content: "Acquisition";
    font-size: 4rem;
    position: absolute;
    color:rgba(18, 160, 160, 0.35);
    right: 1;
 top:0rem;
    right: 0%;
    left: 0rem;
	font-family:fantasy;
}
h2.kataduke::after {
    content: "Store Decom";
    font-size: 4rem;
    position: absolute;
    color:rgba(18, 160, 160, 0.35);
    right: 1;
 top:0rem;
    right: 0%;
    left: 0rem;
	font-family:fantasy;
}

ul.newinformation.wrap li {
    display: inline-block;
    list-style: none;
	text-align:center;
}
h2.list-box.text-center::before{
	display:none!important;
}
h2.service::before, h2.case::before, h2.about::before {
    content: "";
    font-size: 4rem;
    position: absolute;
    color: #6c757d1a;
    right: 1;
    top: 1.75rem;
    right: 0%;
    left: 12rem;
    width: calc(100% - 15rem);
    background-color: black;
    height: 1px;
}
 .underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(to right, rgb(25 124 123), #1bc9c1 50%, #e7efe8);
    transition: width 0.3s ease-in-out;
  }
h2.service2{
display:inline-block;
padding-bottom:5rem;}
  /* スクロール時にアンダーラインを表示 */
  .scroll-underline h2:hover .underline,
  .scroll-underline h2.active .underline {
    width: 100%;
  }
 .underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(to right, rgb(25 124 123), #1bc9c1 50%, #e7efe8);
    transition: width 0.3s ease-in-out;
  }
h2.service2:after{
	display:none;
}
    ul.newinformation li a {
        text-decoration: none;
        color:#111212;
        font-weight: 700;
    }

    a.button.link.case.blog {
        bottom: -3rem;
        padding: 1px 1px 1px 8px;
        position: relative;
    }

.splide__arrow {
    -ms-flex-align: center;
    align-items: center;
	background: #00918f6e;}
.splide__pagination__page {
    background: #00918f57;
}
.splide__arrow svg {
	fill: #00918f;}

figure.merukari {
    text-align: center;
    position: relative;
    border: 1px solid #cdc4c4;
 
    box-shadow: #cfc2c2 5px 8px 5px;
	margin:auto;
	width:300px;
	background-color:white;
}
figure.merukari>figcaption {
    position: absolute;
    left: 0;
    right: 0;
	bottom:-2rem;
}
h1.top{
	
    text-align: center;
    color: #333232;
    /* background-color: #00918f; */
    font-size: 1.5rem;
    padding: 1rem 0;
    font-weight: 600;
}
figure.h1-top{
	position:relative;
}
figure.h1-top>figcaption {
    position: absolute;
    bottom: -2rem;
    left: 0;
    right: 0;
    display: inline-block;
    text-align: center;
    font-weight: 400;
    color: black;
    font-size: 1rem;
    /* background-color: #0000007a; */
    /* font-family: 'Sawarabi Mincho', sans-serif; */
}
.top-dis {
    padding: 1rem;
    margin-bottom: 5rem;
 
    border-radius: 8px;
}
ul.frontnav-pc > li:last-child {
	width: 15%;}


h1.page{
	display:none;
}

h1.page-display {

    background-color: white;
    color: black;
    font-weight: 900;
    position: relative;
    display: inline-block;
	padding:1rem;
}
h1.page-display::after{
	position:absolute;
	width:100%;
	background-color:white;
	height:6px;
}
.b-b-3{
	border:3px solid #01918f;
}

h2.service2 {
    display: inline-block;
    align-items: center;
    font-size: 1.25rem;
    text-align: center;
    padding: 1rem 0;
    background-color: #00918f00;
    color: black;
    margin-bottom: 0: margin:0 auto;
    position: relative;
    margin-bottom: 0;
    margin: 1rem 0;
}


h1.page-display {
   
    background-color: white;
    color: black;
    font-weight: 900;
    position: relative;
    display: inline-block;
    padding: 1rem;
    border-bottom: 7px solid #22a3b6;
    border-image: linear-gradient(to right, rgb(25 124 123) 0%, #1bc9c1 50%, #e7efe8 100%) 1;
    text-align: center;
    background-color: #ffffff70;
}
.b-shadow{
	 box-shadow: 1px 2px 4px 2px #21918f61; 
}
.f-f-m{
	font-family: 'Sawarabi Mincho', sans-serif;
}
h3.itemlist {
    position: revert;
    text-align: center;
    width: 100%;
}

h2.service2::before {
    content: "";
    font-size: 4rem;
    position: absolute;
    color: #6c757d1a;
    right: 1;
    top: 2.75rem;
    right: 0;
    left: 0;
    width: 80%;
    background-color: #21918f;
    height: 6px;
    margin: auto;
}
section.newinfo {
    margin-top: 5rem;
    padding-top: 5rem;
}
.container.border {
    position: relative;
}
.u-b-b {
    position: absolute;
    width: 100%;
    background-color: aliceblue;
    height: 1rem;
    content: "";
    bottom: 0;
    border-bottom: 7px solid #22a3b6;
    border-image: linear-gradient(to right, rgb(25 124 123) 0%, #1bc9c1 50%, #e7efe8 100%) 1;
    text-align: center;
    background-color: #ffffff70;
}
figure.service
{
	position:relative;
	text-align:center;
}
figure.service figcaption {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    text-align: center;
	font-weight:800;
}
.grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            grid-gap: 20px;
        }

        .containeitem {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            text-align: center;
			background-color:white;
        }

        .containeitem img {
            max-width: 100%;
            height: auto;
            margin-bottom: 10px;
        }
.card-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
   
        width: calc(33.33% - 20px); /* 3つのカードを1行に配置 */
    
    margin: 10px;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box; /* ボックスサイジングを調整して内側のパディングを含める */
}

.card-content {
    text-align: center;
}

.card__title {
    font-size: 1.2rem;
    margin-top: 10px;
    white-space: normal; /* タイトルが長い場合に折り返す */
    overflow: hidden; /* タイトルのはみ出しを隠す */
    text-overflow: ellipsis; /* タイトルのはみ出し部分を省略記号で表示 */
}

.card__time {
    font-size: 0.8rem;
    color: #888;
}


/* スマートフォン以上の画面幅 */
@media (max-width: 575px) {
    .card {
        width: 100%; /* 1つのカードを1行に配置 */
        margin: 10px 0; /* カード間のマージンを調整 */
    }
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.image-item {
  width: 100%; /* スマホでは100%幅 */
  max-width: 300px; /* PC, タブレットでは最大300px幅 */
  margin: 10px;
  text-align: center;
}

.image-item img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto; /* 画像を中央寄せ */
}

@media (min-width: 768px) {
  /* タブレット以上の画面幅 */
  .image-item {
    width: calc(50% - 20px); /* PC, タブレットでは横並び */
  }
}
h3.ourbusiness {
    position: relative;
    font-size: 1rem;
    width: 100%;
	padding:0;
	text-align:center;
}


.tab-button {
  border: none;


  cursor: pointer;


	 border: none;
	 background-color: var(--light-gray);
  padding: 10px 15px;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s; /* テキスト色と背景色の変化を追加 */
  white-space: nowrap;
  border-radius: var(--border-radius); /* 角丸を適用 */
}

/* ホバー時のスタイル */
.tab-button:hover {
 color: var(--accent-color); /* テキスト色をアクセントカラーに変更 */
  background-color: var(--light-gray); /* 背景色をライトグレーに保持 */
}

/* アクティブなタブボタンのスタイル */
.tab-button.active {
color: var(--accent-color); /* テキスト色をアクセントカラーに変更 */
  background-color:#21918f82;
	
}

/* タブメニューのスタイル */
.tab-menu {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 10px;
	--accent-color: #289089;
  --light-gray: #f2f2f2; /* 背景色のライトグレー */
  --border-radius: 10px; /* 角丸の半径 */
	justify-content:center;
	margin-bottom:1em;
}

/* アニメーション */
.tab-button {
  transition: transform 0.3s;
}

.tab-button:hover {
  transform: scale(1.1);
}


.tab-content {
  display: none;
  padding: 20px;
	flex-wrap:wrap;
	 position: relative;
    padding: 20px; /* Add padding to create space for text */
    justify-content:center;
    animation: fadeIn 1s ease-in-out;
	background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
    background-position: right;
	background-color:white;
	padding-top:1rem;
	
}

.tab-content.active{
	display:flex;
}
 @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
.tab-content p {
  margin: 0;
}
.container-img {
    /* max-width: 100%; */
    /* filter: grayscale(100%); */
    /* transform: translateX(100%); */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    height: 200px;
    width: auto;
    overflow: hidden;
    position: relative;
    /* right: -100%; */
    /* top: 0; */
    align-self: end;
    display: inline-block;
	
   
}

@keyframes fadeInr {
  0% {
    opacity: 0;
   
  }
  100% {
    opacity: 1;
    
  }
}
a.button.link.topp{
	bottom:-2rem;
	height:2rem;
}
section#maincase{
	margin-top:7rem;
}
.pad5{
	padding:5rem 0;
}
@media screen and (max-width: 768px) {
  .tab-menu {
    gap: 10px;
    justify-content: flex-start; /* 中央寄せを解除して左揃えに変更 */
  }
	h2.new::after,.our-service h2::before,.our h2::before,h2.kaitor{
		font-size:4rem;
		top:-5rem;
	}
	.footer-info-right h4{
		text-align:center;
	}
	.tab-content {
	
    background-size: contain;
    background-repeat: no-repeat;
   padding-top:0;
    background-position: bottom;

	}
	.container-img{
		padding-top:1rem;
	}
	section#maincase{
		margin-top:0rem;
	}
a.button.link.topp {
    /* bottom: -400px; */
    z-index: 10;
    top: 0;
    /* padding: 1rem; */
    height: 2rem;
    /* margin: 0; */
    left: 0;
    right: 0;
    bottom: -22rem;
}
	h2.new, h2.service, h2.case, h2.about {
   
    width: 100%;
    text-align: center;
}
	
h2:after,h2.service::after, #maincase h2::after,#aboutus h2::after,h2 kataduke{
    font-size: 2rem;
    min-height: 0vw;
    top: -2rem;
    left: 0;
    right: 0;
	position:absolute;
}
	h2.new::before, h2.service::before, h2.case::before, h2.about::before{
		display:none;
	}
	
	section.maincontent{
		margin-top:3rem;
		padding-top:0;
	}
}



@keyframes fadeInr {
  0% {
    opacity: 0;
   
  }
  100% {
    opacity: 1;
    
  }
}
.containerbox {
 display:flex;
	flex-wrap:wrap; 
	gap:20px;
 
}

.container-item {

  text-align: center;
  display: flex;
 flex-wrap:wrap;
  justify-content: center;
  align-items: center;
	position:relative;
}

.container-item h3 {
    font-size: 1.5rem;
    margin-top: 10px;
    position: absolute;
    /* top: -18rem; */
    left: 0;
    right: 0;
    margin: auto;
    color: #212529;
    position: relative;
   padding-left:100px;
   align-self:baseline;
    /* text-shadow: 2px 1px black; */
   
}

.container-item h3:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-image: url(https://closehauled.online/wp-content/uploads/2023/08/capdolphin.png);
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
	animation: swing 2s ease-in-out infinite alternate; /* 2秒かけて往復するアニメーション */
}
@keyframes swing {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(10deg); /* 10度だけ右に回転 */
    }
}
.container-item p {
  font-size: 1rem;
  margin-top: 5px;
}

.item h2 {
  margin-top: 10px;
  font-size: 1.5rem;
}

.item p {
  margin-top: 5px;
  font-size: 1rem;
}

figure.containerimg img {
    border: 3px solid #36878a;
	position:relative;
}
span.red {
    color: red;
    font-weight: 800;
}
span.f-b-u {
    font-weight: 800;
    border-bottom: 1px solid #36878a;
}

h1.naname {
  position: relative;
  text-align: center;
  font-weight: bold;
  line-height: 1.3;
  font-size: 1.5rem;
	background-color:white;
	color:black;
}
h2.naname{
  position: relative;
  text-align: center;
  font-weight: bold;
  line-height: 1.3;
  font-size: 1rem;
	background-color:white;
	color:black;}

h1.naname:before, h1.naname:after,h2.naname:before, h2.naname:after {
    position: relative;
    display: inline-block;
    content: "";
    background: #21918f;
    width: 9px;
    height: 2em;
    margin: 0 1em;
    margin-top: -0.2em;
    vertical-align: middle;
}
h1.naname:before,h2.naname:before {
  transform: rotate(-35deg);
}
 
h1.naname:after,h2.naname:after {
  transform: rotate(35deg);
}
.back-p-b{
background-color:#00918f3b;}

h2.kozin-hiyou {
    background-image: url(https://closehauled.online/wp-content/uploads/2023/08/e1551_1.png);
    background-size: 20rem 6rem;
    background-position: center;
    padding: 3rem 2rem 4rem 2rem;
    background-repeat: no-repeat;
    /* width: auto; */
	
}
h2.service2.mx-auto.naname{
	font-size:1rem;
}
h2.service2.col-12.col-md-8.mx-auto.kozin-hiyou::before{

	display:none;
}
.b-g-g{
	background-color:#21918f8c;
}

.wrap.container.hiyou{
	padding-bottom:10rem;
}
.li-auto{
	list-style:auto;
}
.bold{
	font-weight:bold;
}
.pb-10{
	padding-bottom:10rem
}

iframe.contactframe {
    width: 100%;
    margin: auto;
	overflow: hidden;}
a.contact {
    FONT-SIZE: 1REM;
    BACKGROUND-COLOR: #00918f;
   
    PADDING: 0 0.5REM;
    COLOR: WHITE;
}

.linhe{line-height:3rem;
}

h2.service2.naname::before,h2.service2.naname::after {
    font-size: 1.5rem;
    position: relative;
    display: inline-block;
    content: "";
    background: #21918f;
    width: 9px;
    height: 2em;
    /* margin: 0 1em; */
    margin-top: -0.2em;
    vertical-align: middle;
    top: 0;
}
.b-b-b{
	border:1px solid black;
}


/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){
.inquiry th,.inquiry td {
 display:flex!important;
 width:100%!important;
 border-top:none!important;
 -webkit-box-sizing:border-box!important;
 -moz-box-sizing:border-box!important;
 box-sizing:border-box!important;
	flex-wrap:wrap;
}
.inquiry tr:first-child th{
 border-top:1px solid #d7d7d7!important;
}
/* 必須・任意のサイズ調整 */	
.inquiry .haveto,.inquiry .any {	
font-size:10px;
}}
/*見出し欄*/
.inquiry th{
 text-align:left;
 font-size:14px;
 color:#444;
 padding-right:5px;
 width:30%;
 background:#f7f7f7;
 border:solid 1px #d7d7d7;
}
/*通常欄*/
.inquiry td{
 font-size:13px;
 border:solid 1px #d7d7d7;	
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
 border:solid 1px #d7d7d7;	
}
/*必須の調整*/
.haveto{
 font-size:7px;
 padding:5px;
 background:#ff9393;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*任意の調整*/
.any{
 font-size:7px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:1em 0;
 margin-top:30px;
 width:100%;
 background:#ffaa56;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 border: none;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#fff;
 color:#ffaa56;
}
span.CF7_req {
    color: #f7f5f5;
    background-color: orange;
    padding: 0.1rem 1rem;
	margin-right:1rem;
}

    /* Optional fields styling */
  span.CF7_unreq {
    color: #f4f4f7;
    background-color: #00918f;
    padding: 0.1rem 1rem;
	  margin-right:1rem;
}
@media screen and (max-width: 768px) {
  .CF7_table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
	.footer-info-left{
		display:none;}
	
  .CF7_table th,
  .CF7_table td {
    padding: 10px;
    vertical-align: top;
    white-space: normal;
  }
}
.wave {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #f0f8f8; /* 背景色 */
  }

  .wave::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, #aedce0, #86c5c7, #5caeb0); /* 波の色（3色） */
    border-radius: 50%;
    animation: wave-animation 10s infinite linear;
  }

  @keyframes wave-animation {
    0% {
      transform: translateX(0) translateZ(0) scaleY(1);
    }
    50% {
      transform: translateX(-50%) translateZ(0) scaleY(0.5);
    }
    100% {
      transform: translateX(-100%) translateZ(0) scaleY(1);
    }
  }

.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
     background: #ffffff03; 
    padding: .75em 1em;
    color: #06665b;
    font-weight: bolder;
}

/* 要素が最初は透明で下方向に移動するアニメーション */
@keyframes slideIn {
  from {
    opacity: 0.8; /* 開始時の透明度 */
    transform: translateY(100%); /* 下方向に移動 */
  }
  to {
    opacity: 1; /* 終了時の透明度 */
    transform: translateY(0); /* 移動終了後の位置 */
  }
}

/* アニメーションを要素に適用 */
.cssfade {
  animation: slideIn 1.5s ease forwards; /* アニメーションの設定 */
  opacity: 0.8; /* 初期状態の透明度 */
}



.filtered-image {
  width: 100%;
  height: auto;
  filter:grayscale(123%) brightness(36%); /* フィルターを指定 */
}
.p-articleMetas.-top .p-articleMetas__termList {
  display: none;
}

time.c-postTimes__posted.icon-posted{
	display:none;
}
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.l-mainContent {
  flex: 1;
}

.kaitori-card-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.kaitori-card {
  display: block;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.3s;
}

.kaitori-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.kaitori-card__img-wrap {
  aspect-ratio: 8 / 3; /* 16:6比率 */
  width: 100%;
  overflow: hidden;
  position: relative;
}

.kaitori-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kaitori-card__img--dummy {
  object-fit: contain;
  background-color: #f3f3f3;
}

.kaitori-card__title {
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0.75rem 1rem 0.25rem;
  color: #333;
width:auto;
}

h2.section-title {
    font-size: 2rem;
    color: #049483;
    /* background-color: white; */
    /* width: fit-content; */
    box-shadow: 1px 1px #65cb3c;
    width: 80%;
    margin: 1rem;
}
.kaitori-card__time {
  display: block;
  font-size: 0.85rem;
  color: #666;
  margin: 0 1rem 1rem;
}
section.archive-page{
text-align:center;}

.hero-message {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #fff;
  padding: 80px 0px;
  min-height: 100vh;
  overflow: hidden; /* 水たまはみ出し防止 */
}

/* 水たま共通 */
.hero-bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(233,30,99,0.08);
  z-index: 0;
  animation: float 10s ease-in-out infinite alternate;
}

/* 位置や大きさを変えて3つ配置 */
.hero-bubble.b1 {
  width: 300px;
  height: 300px;
  top: 10%;
  left: 15%;
  animation-delay: 0s;
}

.hero-bubble.b2 {
  width: 200px;
  height: 200px;
  top: 60%;
  left: 70%;
  animation-delay: 2s;
}

.hero-bubble.b3 {
  width: 250px;
  height: 250px;
  top: 30%;
  left: 50%;
  animation-delay: 4s;
}

/* 揺れ・ふわふわ動くアニメーション */
@keyframes float {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.4; }
  50%  { transform: translate(-20px, 10px) scale(1.1); opacity: 0.6; }
  100% { transform: translate(10px, -20px) scale(0.95); opacity: 0.3; }
}
.hero-message--sharp,
.hero-message--sharp.b-1,
.hero-message--sharp.b-2,
.hero-message--sharp.b-3,
.hero-message--sharp.b-4 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #fff;
  padding: 80px 0px;
  overflow: hidden;
  height: 100vh;
}

.hero-message--sharp {
  background: url(https://closehauled.online/wp-content/uploads/2026/01/パートナー募集.webp) no-repeat center top;
  background-size: cover;
}

.hero-message--sharp.b-1 {
  background: url(https://closehauled.online/wp-content/uploads/2026/01/6-3-1024x410.png) no-repeat center top;
  background-size: cover;
}

.hero-message--sharp.b-2 {
  background: url(https://closehauled.online/wp-content/uploads/2026/01/7-2-1024x410.png) no-repeat center top;
  background-size: cover;
}

.hero-message--sharp.b-3 {
  background: url(https://closehauled.online/wp-content/uploads/2026/01/8-3-1024x410.png) no-repeat center top;
  background-size: cover;
}

.hero-message--sharp.b-4 {
  background: url(https://closehauled.online/wp-content/uploads/2026/01/9-1024x410.png) no-repeat center top;
  background-size: cover;
}
/* テキスト前面＆フェードアップ */
.hero-message h1,.hero-message--sharp,
.hero-message p {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.5s ease forwards;
}

.hero-message h1,.hero-message--sharp h1{
  font-size: 2.2rem;
  font-weight: bold;
  color: #e91e63;
  margin: 0 0 30px;
  animation-delay: 0s;
}
.hero-message--sharp h1,h2 .bosyuu {
  font-size: 4rem;
  font-weight: bold;
  color: black; 
  margin: 0 0 30px;
  line-height: 1.4;

  opacity: 0; /* 最初は消しておく */
  transform: translateY(20px) scale(0.98); /* 少し下＆少し小さく */
  animation: fadeUpReveal 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 1s; /* ページを読み込んで一瞬置いてから動く */
}
h2 .bosyuu {
	
}
/* アニメーションの中身 */
@keyframes fadeUpReveal {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bosyuu,.bosyuu.whit {
    font-size: 4rem;
    font-weight: bold;
	 animation: fadeUpReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.3s; 
	padding:2rem 0;
	color: #017a78;
}
.bosyuu.whit{
	color:white;
}
h2.bi {
    font-size: 4rem;
}
@media screen and (max-width: 768px) {
  .hero-message--sharp h1,h2 .bosyuu,.bosyuu.whit {
    font-size: 1.8rem;
  }
  .br-sp {
    display: block;
  }
	h2.bi {
    font-size: 2.2rem;
}
	.bosyuu {
    font-size: 2.2rem;
    font-weight: bold;
	 animation: fadeUpReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.3s; 
	

	}
}

@keyframes slow-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-60px); }
}

.hero-message ruby rt {
  font-size: 0.6em;
  color: #e91e63;
}

/* ──────────────
 セクション（画像＋テキスト）
────────────── */
.section {
  position: relative;
  text-align: center;
  overflow: hidden;
  
  background: #e91e63;      /* ピンク背景 */
      /* 下の余白 */
}

.section img:first-of-type {
  width: 100%;
  height: 300px;               /* 高さ統一（スマホ） */
  object-fit: cover;            /* 中央部分を切り抜いて表示 */
  object-position: center;
  display: block;
  opacity: 0;
  transform: scale(1.2);
  transition: opacity 1.5s ease, transform 2.5s ease;
}

/* 画像上にかぶる大きい文字（見出し） */
.section h2 {
  position: absolute;
  top: 30%;                    /* スマホでは上下中央 */
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;               /* スマホ用サイズ */
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
  margin: 0;
  opacity: 0;
  z-index: 2;
  text-align: center;
  white-space: nowrap;
  transition: opacity 1.5s ease 0.5s, transform 1.5s ease 0.5s;
}

/* 本文テキスト */
.section p {
  max-width: 800px;
  margin: 50px auto 50px; 
  font-size: 1.1rem;
  color: #fff;                  /* 白文字 */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s ease 1s, transform 1.5s ease 1s;
  position: relative;
  z-index: 3;
  padding: 0 20px;
}

/* セクション内ロゴ */
.section-logo {
  display: block;
 width: 90%;
  margin: 60px auto 0;          /* 本文との間に余白 */

  transform: scale(0.8);
  
}

/* ──────────────
 アクティブ時（スクロール後）
────────────── */
.section.active img {
  opacity: 1;
  transform: scale(1);
}
.section.active h2 {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}
.section.active p {
  opacity: 1;
  transform: translateY(0);
}
.section-text {
  display: flex;
  align-items: center;      /* 縦中央 */
  justify-content: center;  /* 横中央 */
  min-height: 300px;         /* ★ 高さを確保（お好みで調整） */
  
}

.section-text p {
  margin: 0;

}
.section.green.fade-block p {
    color: black;
}


/* セクション全体 */
.promo-banner {
  text-align: center;

  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* タイトル */
.banner-title {
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  word-break: keep-all; 
	  color: #333;
}

/* 内部ラッパー：スマホは縦並び */
.banner-inner {
  display: block;
}

/* 左画像 */
.banner-image-area {
  background: url("https://closehauled.online/wp-content/uploads/2023/10/closehauled-top-2-1024x683.webp") center 10%/cover no-repeat;
  min-height: 300px;
  margin-bottom: 20px;
}

/* 右テキスト */
.banner-accent {
    background: #fff;
    color: #000000;
    padding: 30px 30px 30px 40px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    word-break: keep-all;
    font-weight: bold;
}

/* PC表示：左右2カラム */
@media (min-width: 769px) {
  .banner-inner {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 左2/3 右1/3 */
 ;
    align-items: stretch;
  }
	.pc-none{
		display:none;
	}

  .banner-image-area {
    margin-bottom: 0;
    min-height: 400px;
  }

  .banner-accent {
    display: flex;
    flex-direction: column;
    justify-content: center;
	  padding:20px;
  }
}

h2.p-postList__title {
  position: relative;
  padding-left: 2em; 
  display: flex;
  align-items: center;
  
}

/* アイコンを前に表示 */
h2.p-postList__title::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  background: url("https://closehauled.online/wp-content/uploads/2025/09/DOLPHIN-1.png") no-repeat center/contain;
  position: absolute;
	left: 0;}


@media (max-width: 768px) {
.hero-message--sharp,.hero-message--sharp.b-1,.hero-message--sharp.b-2,.hero-message--sharp.b-3,.hero-message--sharp.b-4 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  padding: 80px 0px;
  overflow: hidden;
	height: 100vh;
	background-size: cover;
}


.sp-40{
	height:40px;
	clear:both;
	}
	.promo-banner{
		padding:0;
	}
	.sp-none{
		display:none;
	}
}
.closing-message {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.closing-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

/* =========================
   PC表示（全文が画像上）
========================= */
.closing-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  color: #fff;
  padding: 20px;
}

.closing-inner .strong {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.5);
  margin-bottom: 15px;
}

.closing-body {
  margin-top: 30px;
  line-height: 2;
}

.closing-body .line {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 5px;
}
	.swell-block-step{
		margin:auto;
		width:80%;
	}
/* =========================
   スマホ（768px以下）
========================= */
@media (max-width: 768px) {
  .closing-message {
    height: auto;
    overflow: visible;
  }
	.swell-block-step{
		width:90%;
		margin:auto;
	}
  .closing-bg img {
    height: 60vh;
    display: block;
  }

  /* スマホは最初の2行だけ画像上に白文字 */
  .closing-text {
    position: relative;
    color: #333;
    text-align: left;
    padding: 0;
    max-width: 100%;
	  top:-20vh;
  }

  .closing-inner {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.5);
    width: 100%;
  }

  .closing-inner .strong {
    font-size: 1.8rem;
  }

  /* 本文は画像の下に白背景 */
  .closing-body {
    position: relative;
  
    color: #333;
   top:20vh;
    padding: 30px 20px;
    line-height: 2;
  }


}

aside.news.active {
    max-width: 1280px;
    margin: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.intro-section.kanzai {
  background: 
    linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
    url("https://closehauled.online/wp-content/uploads/2025/09/case1-1024x576.png");
  background-size: cover;
  background-position: center;
}
	/* ──────────────
 PC表示用（768px以上）
────────────── */
@media screen and (min-width: 768px) {
  .hero-message h1,.hero-message--sharp h1,
  .section h2 {
    font-size: 4rem;             /* PCでは大きく */
  }
	.hero-message p,.hero-message--sharp p {font-size:1.5rem;}
	
  .section img:first-of-type {
    height: 100vh;               /* PCでは高く大きく */
  }

  .section h2 { top: 50%;                    /* PCではやや上に配置 */
    transform: translate(-50%, -30%);
  }
	.section p{
		margin:100px auto 100px;
		font-size:1.5rem;	}
	.section.top-message img:first-of-type {
  object-position: 50% 30%;
}
}