/*
Theme Name: AFFINGER Child
Template: affinger
Description: AFFINGER6 対応
Version: 20240601
*/

section {
	margin-bottom:0;
}

#content-w {
	overflow:hidden;
}

body.page #content-w {
	background-color:#FFFFF7;
}

body.page main {
	border: none !important;
	background-color:#FFFFF7;
	margin-bottom: 0px;
	padding-top: 0; 
	padding-bottom: 0;
}

@media (max-width: 599px) {
	body:not(.front-page) main {
		background-color: #FFFFF7 !important;
	}
}

body.page main .entry-content{
	margin-bottom: 0px;
}

body.page main .entry-content > div {
	margin-bottom: 0px;
}

body.page main .entry-title {
	display:none;
}

body.page main .blogbox  {
	display:none;
}

body.page-id-487 #breadcrumb {
	display:none;
}

#st-footer-under-widgets-box {
	padding:0 !important;
}


#nocopy h3.section-title {
	font-size:64px !important;
	letter-spacing:0.1em !important;
	line-height:2 !important;
	color:#000 !important;
	text-align:left !important;
	padding:0 0 0 40px !important;
	position:relative !important;
	margin:0 !important;
	background:none !important;
	font-weight: 700 !important;
}

@media (max-width: 767px) {
	#nocopy h3.section-title {
		font-size:32px !important;
		padding: 0 0 0 18px !important;
	}
}

#nocopy h3.section-title.custom-line {
	position:relative !important;
}

#nocopy h3.section-title.custom-line::after {
	position: absolute !important;
	content: "" !important;
	top: 50%;
	left:0px !important;
	transform: translateY(-50%);
	width: 5px;
	height: 80px;
	display: inline-block;
	background-color: #7CBEEA;
	bottom: auto !important;
	border-top: none !important;
	border-right: none !important;
	border-left: none !important;
}

@media (max-width: 767px) {
	#nocopy h3.section-title.custom-line::after {
		width: 3px;
		height: 40px;
	}
}

/* 子テーマの style.css 末尾 or 追加CSS に */
.post #nocopy .entry-content h3.section-title.section-title.section-title.section-title.section-title.section-title{
	padding-top: 0 !important;  
	padding-bottom: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
}

.section-title::before {
	display: none !important;
}


/*============================================
md
============================================*/

.md-capitalize,
.section.commitment h3.commitment__title span.md-capitalize {
	text-transform:capitalize;
}

.md-uppercase {
	text-transform:uppercase;
}

/*============================================
ヘッダー
============================================*/

#headbox {
	display: flex;
    justify-content: space-between;
    align-items: center;
	padding:0;
}

@media (max-width: 959px) {
	#header-full #headbox {
		flex-direction: row-reverse;
		padding:0 !important;
		width:90%;
		margin:auto;
	}
}

#st-mobile-logo {
	display:none;
}

.s-navi-right #s-navi dt.trigger {
	justify-content:start;
}

header .sitename.sitename-only {
	padding:0;
}

#headbox img.sitename-only-img {
	margin:0;
	padding:0;
}

#headbox-bg {
	height:64px;
}

@media (max-width: 959px) {
	#headbox-bg {
	height:48px;
}
}

#headbox,
#header-r,
#st-footer-link-design,
.footermenubox,
.footermenust,
.menu-item,
.menu-item a {
	height:inherit;
}

#header-r .footermenust.st-menu-side .menu-item {
	padding:0;
}

#header-r .footermenust.st-menu-side .menu-item a {
	padding:0 10px;
	display:flex;
	align-items:center;
	justify-content:center;
	
}


/*============================================
ボタン
============================================*/

.btn a::after {
	position: absolute;
	content: "";
	right: 32px;
	top: 50%;
	width: 16px;
	height: 16px;
	border-top: 1px solid white;
	border-right: 1px solid white;
	transform: translateY(-50%) rotate(45deg);
	transition: .3s;
}

@media (max-width: 930px) {
	.btn a::after {
		width: 8px;
		height: 8px;
		right: 24px;
	}
}

.btn a {
	text-decoration:none;
	position: relative;
	font-size: 32px;
	border: 1px solid white;
	padding: 16px 72px 16px 16px;
	color: white;
	letter-spacing: 0.1em;
	line-height: 1;
	display: inline-block;
}

@media (max-width: 930px) {
	.btn a {
		font-size: 16px;
		padding: 8px 48px 8px 8px;
	}
}

.btn a:hover::after {
	right: 24px;
}

@media (max-width: 930px) {
	.btn a:hover::after {
		right: 16px;
	}
}

.btn.btn--blue a {
	border-color:#7CBEEA;
	font-size: 16px;
	border: 1px solid white;
	padding: 8px 24px 8px 8px;
}

.btn.btn--blue a::after {
	border-top: 1px solid #7CBEEA;
	border-right: 1px solid #7CBEEA;
	width: 8px;
	height: 8px;
	right: 16px;
}

.btn.btn--blue a {
	border: 1px solid #7CBEEA;
	color: #7CBEEA;
}

.btn.btn--blue a:hover::after {
	right: 13px;
}


/*============================================
MV
============================================*/

/* 1) MV領域をアンカーに */
#st-header { 
	position: relative;
	height:100vh;
}

/* 2) ウィジェット内のオーバーレイを中央に重ねる */
#st-header .mv-overlay{
	position: absolute;
	inset: 0;                           /* top/right/bottom/left:0 */
	display: flex;
	justify-content: center;
	text-align: center;
	z-index: 30;
	pointer-events: none;
}

#st-header .mv-overlay *{ 
	pointer-events: auto; 
}  /* ボタン等はクリック可 */

/* ===== MVオーバーレイ共通 ===== */
#st-header .mv-overlay{
	position:absolute; 
	inset:0;
	display:flex; 
	justify-content:center;
	text-align:left;
	z-index:30;
	pointer-events:none;
	padding-left: 72px;
	flex-direction:column;
}

@media (max-width: 768px) {
	#st-header .mv-overlay{
		padding-left:0;
		align-items:center;
	}
}

/* 視認性UP用の薄いマスク（強すぎたら.25に） */
#st-header .mv-overlay::before{
	content:""; 
	position:absolute; 
	inset:0;
	background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
	z-index:-1;
}

/* 中身だけクリック可能 */
#st-header .mv-overlay *{ 
	pointer-events:auto;
}

/* ===== タイポ ===== */
#st-header .mv-overlay .mv__title{
	color:#fff; margin:0 0 .6em;
	font-weight:800;
	letter-spacing:.0.02em;
	font-size:clamp(28px, 4.6vw, 56px);
	line-height:1.15;
	text-shadow:0 2px 14px rgba(0,0,0,.35); /* 文字が背景に負けにくい */
	width:90%;
}

#st-header .mv-overlay p {
	color:#fff; opacity:.92; margin:0 0 1.4em;
	font-size:clamp(14px, 2.2vw, 18px);
	line-height:1.6;
	width:90%;
}

/* ===== ボタン ===== */
#st-header .mv-btn {
	display:inline-block; margin:.25rem .4rem 0;
	padding:.75em 1.3em; border-radius:9999px;
	font-weight:700; text-decoration:none;
	background:#fff; color:#111; border:2px solid transparent;
	transition:transform .15s ease, background .15s ease, color .15s ease;
}

#st-header .mv-btn:hover { 
	transform:translateY(-1px);
}

#st-header .mv-btn.outline{
	background:transparent; color:#fff; border-color:#fff;
}

#st-header .mv-btn.outline:hover{
	background:#fff; color:#111;
}



/* ===== アニメ（任意） ===== */
@media (prefers-reduced-motion: no-preference){
	#st-header .mv-overlay{ animation:fadeUp .5s ease both; }
	@keyframes fadeUp{
		from{opacity:0; transform:translateY(8px);}
		to{opacity:1; transform:translateY(0);}
	}
}


/*============================================
   フッター部分
============================================*/

/* 全体の上下の余白を調整 */
#footer > #footer-wrapper {
  padding-top: 80px !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  #footer > #footer-wrapper {
    padding: 24px 0 !important;
  }
}


/* メニューのliタグの点を取り除く */
#footer-wrapper ul {
	display:grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0px;
    row-gap: 20px;
}


@media (max-width: 767px) {
	#footer-wrapper ul {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0px;
    row-gap: 20px;
}
}

#footer-wrapper li {
  list-style: none !important;
}

@media (max-width: 767px) {
  #footer-wrapper li {
}
}

#footer-wrapper li::marker {
  content: none !important;
}

/* コピーライト部分の余白を調整*/
.footer-bottom {
    margin-top: 10px; /* 上の余白 */
    margin-bottom: 10px; /* 下の余白 */
}


/* フッターロゴの大きさ調整（高さ基準） */
#footer h3.footerlogo.st-text-logo-bottom > a > img {
  max-height: 152px !important;
}

@media (max-width: 767px) {
  #footer h3.footerlogo.st-text-logo-bottom > a > img {
  max-height: 63px !important;
}
}

.footer-r {
	width:70%;
}

@media (max-width: 768px) {
  .footer-r {
	width:90%;
	margin-left:auto;
	margin-right:auto;  
}
}

/*============================================
About
============================================*/

.about {
	padding:100px 0;
}

@media (max-width: 767px) {
	.about {
		padding:50px 0;
    }
}

.about__text {
	font-size:24px;
	letter-spacing: 0.1em;
	line-height: 2;
	text-align: left;
	margin-bottom:0;
}

@media (max-width: 767px) {
	.about__text {
		font-size:16px;
	}
}

.about__text:first-of-type {
	margin-top: 64px;
}

.about__text +.about__text{
	margin-top: 48px;
}

@media (max-width: 767px) {
  .about__text +.about__text{
	  margin-top: 24px;
	}
}

.about__btn {
	margin-top: 32px;
	text-align:right;
}


/*============================================
COMMITMENT
============================================*/

.commitment {
	margin-inline: calc(50% - 50vw);
	position: relative;
	height:100vh;
}

/* マスク */
.commitment::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 1;
}

.layout-commitment {
	margin-bottom: 0px;
}

.commitment__inner {
	height:inherit;
}


.commitment__img {
	height:inherit;
}

.commitment__img img{
	aspect-ratio: 1440/959;
	object-fit: cover;
	height:inherit;
	width: 100%;
}

.commitment__content {
	position: absolute;
	top: 60%;
	left: 10%;
	transform: translatey(-50%);
	text-align: left;
	z-index: 2; /* ← マスクより上に */
}

@media (max-width: 930px) {
	.commitment__content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: left;
		width:70%;
		z-index: 2; /* ← マスクより上に */
	}
}

.commitment__content.commitment__content--reverse {
	left: 40%;
}

@media (max-width: 930px) {
	.commitment__content.commitment__content--reverse {
		left: 50%;
	}
}

.post #nocopy .entry-content h3.commitment__title {
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: none !important;
	font-size: 64px !important;
	line-height: 1.5 !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-align: left !important;
	padding: 0 !important;
	color: #fff !important;
}

@media (max-width: 767px) {
	.post #nocopy .entry-content h3.commitment__title {
		font-size: 32px !important;
		padding-left: 18px !important;
	}
}

.post #nocopy .entry-content h3.commitment__title::before,
.post #nocopy .entry-content h3.commitment__title::after {
	display: none !important;
}

.commitment__text {
	font-size: 32px;
	margin-top: 50px;
	color: white;
	line-height:1.5;
	letter-spacing:0.01em;
}


@media (max-width: 930px) {
	.commitment__text {
		font-size: 16px;
		margin-top: 24px;
	}
}

.commitment__btn {
	margin-top: 48px;
}

.commitment__btn.commitment__btn--reverse {
	margin-top: 48px;
	text-align:right;
}

@media (max-width: 930px) {
	.commitment__btn.commitment__btn--reverse {
		margin-top: 48px;
		text-align:left;
	}
}


/*============================================
Product
============================================*/

.product__list .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-9d6595d7 {
	gap: 3em !important;
}

.layout-product{
	margin-top:96px;
}

.product__heading {
	font-size: 20px;
	letter-spacing: 0.1em;
	line-height: 1.5;
	margin-bottom:0;
}

.product__list {
	margin-top:48px;
}

@media (max-width: 767px) {
	.product-list {    
		width: 80%;    
		margin-inline: auto;	
		padding-left:0;
	}
}

.product-list {
    display: grid;
    gap: 70px;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
	.product-list {    
		gap: 30px;   
		grid-template-columns: repeat(1, 1fr);
	}
}

.product-list__item {
	list-style:none;
}

.product-list__item a{
    position: relative;
    display: block;
    height: 100%;
    text-decoration: none;
}

.product-list__item a br{
    display: none;
}


.product-list__item-img {
	display:block;
	width: 100%;
}

.product-list__item-img img{
    width: 100%;
    aspect-ratio: 360/360;
    object-fit: cover;
}

.product-list__item-content {
	display:block;
	padding-top: 16px;
}

@media (max-width: 767px) { 
	.product-list__item-content {
		padding-top: 8px;
	}
}

.product-list__item-title {
	display:block;
	font-size: 16px;
	color:#000;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-align: left;
}
	
@media (max-width: 767px) {
	.product-list__item-title {   
		text-align: center;
	}
}

.product__btn {
	text-align: right;
	margin-top: 32px;
}


/*============================================
VOICE
============================================*/

.layout-voice {
	margin-top:96px;
}

.voice-card { 
	display: grid;  
	grid-template-columns: 100px 1fr;  
	gap: 16px;  
	align-items: start;
}

.voice-card.voice-card2 { 
	display: block;  
}

.voice-card__head {  
	text-align: center;
}

.voice-card__head img {  
	width: 100px;  
	height: 100px;  
	border-radius: 50%;  
	object-fit: cover;  
	margin-bottom: 8px;
}

.voice-card__balloon {  
	background: #DCE1C5;  
	border-radius: 16px;  
	padding: 18px;  
	box-shadow: 0 4px 20px rgba(0,0,0,.08);  
	border: 1px solid #eee;
}

.voice-card__balloon h3 {  
	color: #e34a6f;  
	margin-bottom: 8px;
}

.swiper {
	margin-top:48px;
	padding: 0px 10px 40px;
}

.swiper.swiper2 {
	width:80%
}

@media (max-width: 768px) { 
	.voice-card {    
		grid-template-columns: 1fr;
	}
}

.voice__btn {
	margin-top:32px;
	text-align: right;
}


/*============================================
COLUMN
============================================*/
.layout-column {
	margin-top:100px;
}

.column__content {
	margin-top:50px;
}

.column__btn {
	text-align:right;
	margin-top:32px;
}


/*============================================
CTA
============================================*/
.cta {  
	position: relative;  
	height: 493px;  
	margin-inline: calc(50% - 50vw);
}

.cta::before {  
	content: "";  
	position: absolute;  
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 1;
}

@media (max-width: 768px) {
	.cta::before {  
		background: rgba(0, 0, 0, 0.5);
	}
}


.cta__img {
	height: inherit;
}

.cta__img img {
	aspect-ratio: 1440/986;
	object-fit: cover;
	width: 100%;
	height: inherit;
}

.cta__content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: solid 3px #f2f2f2;
	padding: 40px;
	z-index: 2;
	width: 50%;
}

@media (max-width: 767px) {
	.cta__content {
		border:none;
		padding: 10px;
		width: 90%;
		max-width: 600px;
	}
}

.cta__box {
	border: solid 3px #f2f2f2;
}

@media (max-width: 767px) {  
	.cta__box {
		border: solid 2px #f2f2f2;
	}
}

.cta__box a{
	display: block;
	padding: 20px;
	text-decoration:none;
	transition:0.3s;
}

.cta__box a:hover{
	transition:0.3s;
	background: rgba(242, 242, 242, 0.25);
}

@media (max-width: 767px) {
	.cta__box a{
		padding: 10px;
   }
}

.cta__box-title {
	font-size: 32px;
	letter-spacing: 0.1em;
	line-height: 1.5;
	color: #f2f2f2;
	text-align: left;
	display: block;
}

@media (max-width: 767px) {
	.cta__box-title {
		font-size: 30px;
		margin-bottom:10px;
	}
}

.cta__box-text {
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 1.5;
	color: #f2f2f2;
	text-align: left;
	display: block;
}

@media (max-width: 767px) {
	.cta__box-text {
		font-size: 16px;
	}
}

.cta__row {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
	gap: 40px;
}

@media (max-width: 767px) {
	.cta__row {
		flex-direction: column;
		margin-top: 20px;
		gap: 20px;
	}
}

.cta__row-box {
	border: solid 3px #f2f2f2;
}

@media (max-width: 767px) {
	.cta__row-box {
		border: solid 2px #f2f2f2;
	}
}

.cta__row-box a{
	display: inline-block;
	padding: 20px;
	text-decoration:none;
	transition:0.3s;
}

.cta__row-box a:hover{
	transition:0.3s;
	background: rgba(242, 242, 242, 0.25);
}



@media (max-width: 767px) {
	.cta__row-box a{
		padding: 10px;
	}
}

.cta__row-box-title {
	display: block;
	font-size: 32px;
	letter-spacing: 0.1em;
	line-height: 1.5;
	color: #f2f2f2;
	text-align: left;
}

@media (max-width: 767px) {
	.cta__row-box-title {
		font-size: 30px;
		margin-bottom:10px;
	}
}

.cta__row-box-text {
	display: block;
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 1.5;
	color: #f2f2f2;
	text-align: left;
}

@media (max-width: 767px) {
	.cta__row-box-text {
		font-size: 16px;
	}
}

body.page-id-487 #headbox-bg {
	background:#fffff9;
}

body.page-id-487 #header-r .footermenust a {
	color:#000 ;
}

body.page-id-487 #footer-wrapper {
	background:#DCE1C5 !important;
}

body.page-id-487 #footer-wrapper a {
	color:#000 !important;
}


/*============================================
編集用！案件終了時に消す！
============================================*/
.home.blog #st-footer-under-widgets-box-wrap,
.home.blog #st-header-link,
.single-post #st-footer-under-widgets-box-wrap,
.archive.category #st-footer-under-widgets-box-wrap,
.archive.date #st-footer-under-widgets-box-wrap,
.home.blog #gazou-wide,
.single-post #gazou-wide,
.archive.category #gazou-wide,
.archive.date #gazou-wide,
.home.blog #st-footer-link-design,
.single-post #st-footer-link-design,
.archive.category #st-footer-link-design,
.archive.date #st-footer-link-design,
.home.blog .footer-r,
.single-post .footer-r,
.archive.category .footer-r,
.archive.date .footer-r
{
	display:none !important;
}

.home.blog #header-full {
	height:auto !important;
}



/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {


	/*-- ここまで --*/
}
	
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {


	/*-- ここまで --*/
}	
	
/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {


	/*-- ここまで --*/
}

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {


	/*-- ここまで --*/
}

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {

	
	/*-- ここまで --*/
}