@charset "utf-8";
/*
Theme Name: 松田染物店
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic&display=swap');


/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield;appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button;appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none;appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i,em{font-style:normal}
html.has-scroll-smooth { overflow: hidden; position: fixed; left: 0; right: 0; top: 0; bottom: 0;}
a { color: #222; text-decoration: none;}
@media only screen and (min-width: 769px){ a { transition: all .2s ease-out;} a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7;}}
*:focus { outline: none;}


/*LAYOUT*/
/*******************************************************************/
html { font-size: 62.5%;}
body { -webkit-text-size-adjust: 100%; touch-action: manipulation; font-family: "Noto Sans JP", sans-serif; font-size: clamp(1.4rem,1.4vw,1.6rem); font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; word-break: normal; color: #222;} 
#container { position: relative; width: 100%; overflow: clip;}
#container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #F7F8EA url(img/common/bg.png) center repeat;}


/*HEADER*/
/*******************************************************************/
#header { position: fixed; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 80px; z-index: 1000; transition: .2s ease-out;}
#header.is-fixed { background: #FFF;}
#logo { width: 279px; margin-left: 24px;}
.h-tel a { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; height: 80px; padding-left: 40px; background: url(img/common/tel.svg) left center no-repeat; font-size: clamp(1rem,0.8vw,1.4rem); font-weight: 700; white-space: nowrap;}
.h-tel a i { font-family: "bahnschrift", sans-serif; font-size: clamp(1.6rem,1.4vw,3.2rem);}
.h-btn a, .h-telbtn a { display: flex; justify-content: center; align-items: center; gap: 8px; height: 80px; padding: 0 2em; background: #DD543F; font-family: "ten-mincho-text", serif; font-size: clamp(1.2rem,1vw,2.0rem); color: #FFF; white-space: nowrap;}
.h-btn a::before, .h-telbtn a::before { content: ''; width: 2em; height: 100%; background: url(img/common/mail.svg) center no-repeat; background-size: contain;}
.h-telbtn a { background: #90251F;}
.h-telbtn a::before { background-image: url(img/common/tel_white.svg); background-size: 22px auto;}
@media only screen and (min-width: 1201px){
	.h-btn a:hover { opacity: 1; background-color: #FFF; color: #DD543F;}
	.h-btn a:hover::before { background-image: url(img/common/mail_on.svg);}
	#nav { display: flex; justify-content: center; gap: 24px; background: url(img/common/border.svg) left bottom no-repeat;}
	#nav > ul { display: flex;}
	#nav > ul > li { position: relative;}
	#nav > ul > li > a { position: relative; display: flex; align-items: center; height: 80px; padding: 0 1em; font-size: clamp(1.1rem,1.1vw,1.6rem); font-weight: 700; line-height: 1; white-space: nowrap;}
	#nav > ul > li > a:hover, #nav > ul ul a:hover, #nav > ul > li:hover > a { opacity: 1; color: #DD543F;}
	#nav > ul ul { pointer-events: none; opacity: 0; position: absolute; top: 100%; left: 0; display: grid; min-width: 216px; padding: 0 1em; background: #F7F8EA; transition: .2s ease-out;}
	#nav > ul ul a { position: relative; display: block; padding: 1.5em 1em; background: url(img/common/border_short.svg) left bottom no-repeat; background-size: 100% auto; font-size: clamp(1.1rem,1.1vw,1.6rem); font-weight: 700; line-height: 1; white-space: nowrap;}
	#nav > ul ul li:last-child a { background: none;}
	#nav > ul > li:hover ul { pointer-events: auto; opacity: 1; top: 100%;}
	.h-telbtn { display: none;}
	.h-icon { display: none;}
	#open { display: none;}
}
@media only screen and (max-width: 1200px){
	#header { position: fixed; min-height: 50px;}
	.home #header { position: sticky;}
	#logo { width: 160px; margin-left: 16px;}
	#nav { pointer-events: none; opacity: 0; position: fixed; top: 0; right: 0; transform: translateX(100%); display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100svh; padding: 64px 30px; background: #FFF; overflow-y: auto; overscroll-behavior: contain; z-index: 1000; transition: .2s ease-out;}
	#nav > ul > li > a { display: flex; align-items: flex-start; min-height: initial; padding: 12px 40px 12px 12px; border-bottom: 1px solid #000; font-size: 1.4rem; font-weight: 500; color: #000;}
	#nav > ul > li:not(.navfirst) > a { background: url(img/common/arrow_circle2.svg) right 8px center no-repeat;}
	#nav > ul > li:last-of-type > a { border-bottom: none;}
	.navfirst { position: relative;}
	.navopen { position: absolute; top: 8px; right: 0;  display: block; width: 40px; height: 40px;}
	.navopen::before, .navopen::after { content: ''; position: absolute; top: 50%; left: 12px; display: block; width: 16px; height: 1px; background: #90251F; transition: transform .2s ease-in;}
	.navopen::after { transform: rotate(90deg);}
	.navopen.on::before { transform: rotate(135deg);}
	.navopen.on::after { transform: rotate(225deg);}
	#nav .navsecond { display: none; padding: 12px 0;}
	#nav .navsecond ul a { display: block; padding: 6px 0 6px 24px; font-size: 1.4rem;}
	.h-tel { display: none;}
	.h-btn a, .h-telbtn a { height: 55px; padding: 0 1em; border-radius: 10px; font-size: 1.6rem;}
	.h-icon { display: flex; gap: 8px; margin-left: auto;}
	.h-icon img { width: 30px; min-width: 30px;}
	#open { position: relative; width: 50px; height: 50px; z-index: 5000; cursor: pointer; pointer-events: auto;}
	#open span { position: absolute; left: 10px; display: block; width: 30px; height: 1px; background: #000; border-radius: 2px; transition: .2s linear;}
	#open span:nth-child(1) { top: calc(50% - 8px);}
	#open span:nth-child(2) { top: 50%;}
	#open span:nth-child(3) { top: calc(50% + 8px);}
	.open #open span:nth-child(1) { top: 50%; transform: rotate(135deg);}
	.open #open span:nth-child(2) { width: 0;}
	.open #open span:nth-child(3) { top: 50%; transform: rotate(-135deg);}
	.open #nav { pointer-events: auto; transform: translateY(0); opacity: 1;}
}


/*FOOTER*/
/*******************************************************************/
#footer { position: relative; margin-top: -200px; padding-bottom: 160px; background: url(img/common/footer_bg.webp) center top no-repeat; background-size: cover; z-index: 200;}
.cta { position: relative; padding: 56px 4%; background: url(img/common/cta.png) center no-repeat; background-size: cover; border-radius: 20px; color: #FFF;}
.cta i { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 12.8rem; font-style: italic; line-height: 1.1; opacity: 0.2;}
.cta h2 { margin: 0; text-align: center;}
.cta-tel { display: flex; justify-content: center; align-items: center; gap: 0 16px; max-width: 700px; margin: 32px auto; padding: 8px 0; border-top: 3px solid #FFF; border-bottom: 3px solid #FFF;}
.cta-tel a { display: block; padding-left: 1.2em; background: url(img/common/tel_alt.svg) left center no-repeat; background-size: 1em auto; font-size: clamp(2.8rem,4.8vw,4.8rem); font-weight: 700; white-space: nowrap; color: #FFF;}
.cta-tel a i { font-family: bahnschrift, sans-serif; font-size: clamp(1.6rem,1.4vw,3.2rem);}
.cta-btn { max-width: 700px; margin: 0 auto;}
.cta-btn a { display: flex; justify-content: center; align-items: center; gap: 8px; height: 110px; padding: 1em; background: #DD543F; border: 2px solid #FFF; font-size: clamp(1.6rem,3.2vw,3.2rem); font-weight: 700; color: #FFF; white-space: nowrap;}
.cta-btn a::before { content: ''; display: block; width: 55px; height: 35px; background: url(img/common/mail.svg) center no-repeat; background-size: contain;}
.cta-btn a::after { content: ''; display: block; width: 53px; height: 10px; background: url(img/common/arrow_white.svg) center no-repeat; background-size: contain;}
#cta { width: 92%; max-width: 1440px; margin: 0 auto; background-image: url(img/common/cta_alt.png); color: #000;}
#cta i, #cta h2 { color: #C6A357;}
#cta .cta-tel { border-color: #000;}
#cta .cta-tel a { background-image: url(img/common/tel.svg); color: #000;}
#info { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 56px; width: 92%; max-width: 1100px; margin: 0 auto 0; padding: 80px 0 0; font-weight: 700; color: #FFF; z-index: 10;}
.logo { order: -1; display: grid; gap: 16px;}
.logo img { width: 275px;}
.sitemap ul { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); gap: 8px 40px;}
.sitemap a { color: #FFF;}
#footernav { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 40px; width: 92%; max-width: 1100px; margin: 0 auto 0; padding: 56px 0; border-bottom: 3px solid #FFF; font-weight: 700; color: #FFF; z-index: 10;}
#footernav dl { display: flex; align-items: center; gap: 16px;}
#footernav dt:last-of-type { margin-left: 16px;}
.pt { margin-left: auto;}
.pt a { display: flex; align-items: center; gap: 8px; color: #FFF;}
.pt a::before { content: ''; transform: rotate(45deg) translateY(50%); display: block; width: 13px; height: 13px; border-top: 3px solid #FFF; border-left: 3px solid #FFF; transition: .2s ease-out;}
#copyright { width: 92%; max-width: 1100px; margin: 0 auto 0; padding-top: 1em; font-weight: 700; color: #FFF;}
#floating { position: fixed; bottom: 3%; right: 3%; width: 16%; text-align: right; z-index: 100;}
@media screen and (min-width: 1001px) {
	.pt a:hover, .sitemap a:hover { color: #F8B500; opacity: 1;}
	.pt a:hover::before { border-color: #F8B500;}
	#floatingsp { display: none;}
}
@media only screen and (max-width: 1000px){
	#footer { margin-top: -300px; padding-bottom: 48px;}
	.cta { padding-top: 48px; padding-bottom: 24px;}
	.cta i { font-size: 7.2rem;}
	.cta-tel { flex-direction: column;}
	.cta-btn a { height: 80px;}
	#footernav { flex-direction: column; align-items: flex-start;}
	#floating { bottom: 56px; width: 28%;}
	#floatingsp { position: fixed; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr 1fr; width: 100%; z-index: 100;}
	#floatingsp a { height: 45px; border-radius: 0; font-size: 1.4rem;}
	#floatingsp .h-telbtn a::before { background-size: 14px auto;}
}



/*CONTENTS*/
/*******************************************************************/
article { position: relative; padding: 200px 0;}
#main article:last-of-type { padding-bottom: 400px;}
section { opacity: 0; position: relative; width: 92%; max-width: 1100px; margin: 0 auto;}
section + section { margin-top: 100px;}
.tight { max-width: 680px;}
.narrow { max-width: 1100px;}
.wide { max-width: 1440px;}
.full { width: auto; max-width: initial;}
.title { margin-bottom: 56px;}
.title::after { content: ''; display: block; width: 100px; height: 3px; margin-top: 16px; background: url(img/common/bar.svg) center no-repeat;}
.title.center::after { margin-left: auto; margin-right: auto;}
.title.orange::after { background: #FFA600;}
.title.gold-bar::after { background: #C6A357;}
.title.black-bar::after { background: #1F1F1F;}
.title.left { align-items: flex-start; text-align: left;}
.subtitle { position: relative; padding: 0.5em 1em; text-align: center; background: linear-gradient(50deg,rgba(24, 105, 186, 1) 0%, rgba(0, 50, 136, 1) 100%); border-radius: 5px; color: #FFF;}
.vertical-title { display: flex; justify-content: center; align-items: center; gap: 8px; width: 91px; padding-top: 88px; text-align: center; background: url(img/common/logomark.webp) center top no-repeat; background-size: 91px auto; font-size: clamp(1.6rem,2.0vw,2.4rem); writing-mode: vertical-rl; white-space: nowrap;}
.vertical-title::after { content: ''; display: block; width: 2px; height: 55px; background: #FFF;}
.vertical-title.black { background-image: url(img/common/logomark_black.webp);}
.vertical-title.black::after { background: #1F1F1F;}
.scroll-title { position: relative; padding-top: 80px;}
.marquee { position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; line-height: 1; z-index: -1;}
.marquee .swiper-wrapper { transition-timing-function: linear;}
.marquee .swiper-slide { width: auto;}
.marquee .swiper-slide span { font-family: "ten-mincho-text", serif; font-size: clamp(8rem,15vw,15rem); font-weight: 400; text-transform: uppercase; line-height: 1; color: #C6A357; opacity: 0.3; white-space: nowrap;}
.marquee img { width: auto; display: block;}
article * + h2, article * + h3, article * + h4, article * + h5, article * + ul, article * + ol, * + .wp-block-list, * + .wp-block-table , * + .wp-block-buttons, * + .wp-block-image, * + .wp-block-gallery, * + form { margin-top: 1.5em;}
article * + p { margin-top: 1em;}
figure { position: relative; margin: 0;}
p, dl, ul, ol { line-height: 2;}
.wp-block-buttons { display: flex; flex-direction: column; align-items: center; gap: 20px 40px; margin-top: 80px;}
.wp-block-buttons.left { align-items: flex-start;}
.wp-block-button a { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; min-width: 400px; padding: 0.6em 2em; text-align: center; background: #DD543F; border: 2px solid #1F1F1F; font-size: clamp(1.8rem,2.0vw,2.4rem); font-weight: 700; color: #FFF;}
.wp-block-button a::after { content: ''; position: absolute; top: calc(50% - 8px); right: -27px; width: 54px; height: 12px; background: url(img/common/arrow.svg) center no-repeat; background-size: contain; transition: .2s ease-out;}
.wp-block-button a.white { border-color: #FFF;}
.wp-block-button a.white::after { background-image: url(img/common/arrow_white.svg);}
.wp-block-button a.black { background-color : transparent; color: #1F1F1F;}
.wp-block-button a.invertion { background-color: rgba(255,255,255,.0); border-color: #FFF; color: #FFF;}
.wp-block-button a.invertion::after { background-image: url(img/common/arrow_white.svg);}
.wp-block-button a.more::after { content: ''; transform: rotate(45deg) translateY(-25%); width: 10px; height: 10px; border-right: 2px solid #FFF; border-bottom: 2px solid #FFF;}
@media screen and (min-width: 1001px) {
	.wp-block-button a.invertion:hover { background: #FFF; border-color: #DD543F; color: #DD543F !important;}
	.wp-block-button a.invertion:hover::after { background-image: url(img/common/arrow_red.svg);}
	.submit input[type="submit"]:hover { opacity: 0.7;}
	.submit input[type="button"]:hover { opacity: 0.7;}
}
ul.wp-block-list { display: grid; gap: 0.5em; margin-left: 1.5em; list-style: disc;}
ol.wp-block-list { display: grid; gap: 0.5em; margin-left: 1.5em; list-style: decimal;}
.wp-block-table { display: flex; justify-content: center; font-weight: 400;}
.wp-block-table th { padding: 16px 32px 16px 0; text-align: left; vertical-align: top; border: none; border-bottom: 1px solid #CCCCCC; font-weight: 400;}
.wp-block-table td { padding: 16px 0; text-align: left; vertical-align: top; border: none; border-bottom: 1px solid #CCCCCC;}
.center { text-align: center!important;}
.right { text-align: right!important;}
.left { text-align: left;}
.marker { display: inline; padding: 0 1px 5px; background: linear-gradient(transparent 60%, rgba(0,159,232,.2) 0%);}
.mt8 { margin-top: 8px !important;}
.mt16 { margin-top: 16px !important;}
.mt24 { margin-top: 24px !important;}
.mt40 { margin-top: 40px !important;}
.mt64 { margin-top: 64px !important;}
.mt80 { margin-top: 80px !important;}
.mt160 { margin-top: 160px !important;}
.ten-mincho-text { font-family: "ten-mincho-text", serif; font-weight: 400 !important; letter-spacing: 0.08em;}
.ten-mincho-text.bold { text-shadow: 1px 0 0 #222, -1px 0 0 #222, 0 1px 0 #222, 0 -1px 0 #222;}
.ten-mincho-text.bold.white { text-shadow: 1px 0 0 #FFF, -1px 0 0 #FFF, 0 1px 0 #FFF, 0 -1px 0 #FFF;}
.ten-mincho-text.bold.gold, .ten-mincho-text.bold .gold { text-shadow: 1px 0 0 #C6A357, -1px 0 0 #C6A357, 0 1px 0 #C6A357, 0 -1px 0 #C6A357;}
.ten-mincho-text.bold.orange, .ten-mincho-text.bold .orange { text-shadow: 1px 0 0 #DD543F, -1px 0 0 #DD543F, 0 1px 0 #DD543F, 0 -1px 0 #DD543F;}
.ten-mincho-text.bold.red { text-shadow: 1px 0 0 #90251F, -1px 0 0 #90251F, 0 1px 0 #90251F, 0 -1px 0 #90251F;}
.fs11 { font-size: clamp(0.9rem,1.1vw,1.1rem) !important;}
.fs12 { font-size: clamp(1.0rem,1.2vw,1.2rem) !important;}
.fs13 { font-size: clamp(1.1rem,1.3vw,1.3rem) !important;}
.fs14 { font-size: clamp(1.2rem,1.4vw,1.4rem) !important;}
.fs15 { font-size: clamp(1.3rem,1.5vw,1.5rem) !important;}
.fs16 { font-size: clamp(1.4rem,1.6vw,1.6rem) !important;}
.fs18 { font-size: clamp(1.5rem,1.7vw,1.8rem) !important;}
.fs20 { font-size: clamp(1.6rem,1.8vw,2.0rem) !important;}
.fs22 { font-size: clamp(1.7rem,1.9vw,2.2rem) !important;}
.fs24 { font-size: clamp(1.8rem,2.0vw,2.4rem) !important;}
.fs26 { font-size: clamp(1.9rem,2.1vw,2.6rem) !important;}
.fs28 { font-size: clamp(2.0rem,2.2vw,2.8rem) !important;}
.fs30 { font-size: clamp(2.1rem,2.3vw,3.0rem) !important;}
.fs32 { font-size: clamp(2.2rem,2.4vw,3.2rem) !important;}
.fs34 { font-size: clamp(2.3rem,2.5vw,3.4rem) !important;}
.fs36 { font-size: clamp(2.4rem,2.6vw,3.6rem) !important;}
.fs38 { font-size: clamp(2.5rem,2.7vw,3.8rem) !important;}
.fs40 { font-size: clamp(2.6rem,2.8vw,4.0rem) !important;}
.fs42 { font-size: clamp(2.7rem,2.9vw,4.2rem) !important;}
.fs44 { font-size: clamp(2.8rem,3.0vw,4.4rem) !important;}
.fs46 { font-size: clamp(2.9rem,3.1vw,4.6rem) !important;}
.fs48 { font-size: clamp(3.0rem,3.2vw,4.8rem) !important;}
.fs50 { font-size: clamp(3.1rem,3.3vw,5.0rem) !important;}
.fs52 { font-size: clamp(3.2rem,3.4vw,5.2rem) !important;}
.fs54 { font-size: clamp(3.3rem,3.5vw,5.4rem) !important;}
.fs56 { font-size: clamp(3.4rem,3.6vw,5.6rem) !important;}
.fs58 { font-size: clamp(3.5rem,3.7vw,5.8rem) !important;}
.fs60 { font-size: clamp(3.6rem,3.8vw,6.0rem) !important;}
.fs62 { font-size: clamp(3.7rem,3.9vw,6.2rem) !important;}
.fs64 { font-size: clamp(3.8rem,4.0vw,6.4rem) !important;}
.fs72 { font-size: clamp(4.0rem,7.2vw,7.2rem) !important;}
.fs76 { font-size: clamp(4.1rem,7.6vw,7.6rem) !important;}
.fs80 { font-size: clamp(4.2rem,8.0vw,8.0rem) !important;}
.fs96 { font-size: clamp(4.2rem,7.2vw,9.6rem) !important;}
.fs128 { font-size: clamp(8.0rem,10vw,12.8rem) !important;}
.fs200 { font-size: clamp(8.0rem,10vw,200rem) !important;}
.light { font-weight: 300;}
.regular { font-weight: 400;}
.medium { font-weight: 500;}
.semi-bold { font-weight: 600;}
.bold { font-weight: 700;}
.black { font-weight: 900;}
.ls { letter-spacing: 0.1em;}
.lh { line-height: 2;}
.vertical { writing-mode: vertical-rl;}
.white { color: #FFF !important;}
.gold { color: #C6A357 !important;}
.yellow { color: #F8B500 !important;}
.orange { color: #DD543F !important;}
.red { color: #90251F !important;}
.darkgreen { color: #0A9F49 !important;}
.underline { text-decoration: underline;}
.underline-green { text-decoration: underline; text-decoration-color: #45A829; text-decoration-thickness: 3px;}
.underline-orange { text-decoration: underline; text-decoration-color: #FFA600; text-decoration-thickness: 3px;}
.sp { display: none;}
.fadeInUp { animation-name: fadeInUp;}
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 30px, 0);} to { opacity: 1; transform: translate3d(0, 0, 0);} }
.animated { opacity: 0; animation-duration: 1s; animation-fill-mode: both;}


/*TOP*/
#loading { position: fixed; inset: 0; background: url(img/common/loading.webp) center no-repeat, linear-gradient(0deg,rgba(144, 37, 31, 1) 0%, rgba(221, 84, 63, 1) 100%); z-index: 9999; display: flex; justify-content: center; align-items: center;}
.loading-inner { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; width: 92%; max-width: 800px; text-align: center; font-weight: 700; color: #FFF;}
.loading-text { font-size: clamp(2.0rem,2.8vw,2.8rem);}
.bar { width: 100%; height: 8px; overflow: hidden; border-radius: 4px;}
.bar-inner { width: 0%; height: 100%; background: #FFF; transition: width 0.2s;}
.column { display: flex; justify-content: space-between; align-items: flex-start;}
.column h2 { width: 20%;}
.column section { flex-shrink: 1; width: 80%; max-width: initial; margin: 0;}
[class^="deco"] { position: absolute; z-index: 0; animation-timing-function: ease-in-out; animation-iteration-count: infinite; transform-origin: center;}
[class^="deco"] img { display: block; width: 100%;}
@keyframes floatA { 0% { transform: translate(0px, 0px) scale(1) rotate(0deg);} 25% { transform: translate(12px, -18px) scale(1.04) rotate(1deg);} 50% { transform: translate(-10px, -28px) scale(0.96) rotate(-1deg);} 75% { transform: translate(14px, -12px) scale(1.02) rotate(0.5deg);} 100% { transform: translate(0px, 0px) scale(1) rotate(0deg);}}
@keyframes floatB { 0% { transform: translate(0px, 0px) scale(1);} 20% { transform: translate(16px, -10px) scale(1.03);} 40% { transform: translate(10px, -22px) scale(0.97);} 60% { transform: translate(-12px, -18px) scale(1.02);} 80% { transform: translate(-8px, -6px) scale(0.98);} 100% { transform: translate(0px, 0px) scale(1);}}
@keyframes floatC { 0% { transform: translate(0px, 0px) scale(1);} 33% { transform: translate(-22px, 12px) scale(1.05);} 66% { transform: translate(18px, -14px) scale(0.95); } 100% { transform: translate(0px, 0px) scale(1);}}
.deco01 { top: 18svh; left: 39%; width: 19%; animation: floatA 13s infinite ease-in-out; animation-delay: -2s;}
.deco02 { bottom: 22svh; right: 1%; width: 13%; animation: floatB 18s infinite ease-in-out; animation-delay: -6s;}
.deco03 { top: 10svh; left: -1%; width: 12%; animation: floatC 15s infinite ease-in-out; animation-delay: -4s;}
.deco04 { top: 35svh; left: 53%; width: 6%; animation: floatA 21s infinite ease-in-out; animation-delay: -11s;}
.deco05 { top: 10svh; left: 51%; width: 16%; animation: floatB 17s infinite ease-in-out; animation-delay: -8s;}
.deco06 { bottom: 2svh; left: 29%; width: 17%; animation: floatC 23s infinite ease-in-out; animation-delay: -13s;}
.deco07 { top: 14%; left: 8%; width: 15%; animation: floatA 13s infinite ease-in-out; animation-delay: -2s;}
.deco08 { bottom: 19%; left: -5%; width: 21%; animation: floatB 18s infinite ease-in-out; animation-delay: -6s;}
.deco09 { top: 51%; right: -1%; width: 14%; animation: floatC 15s infinite ease-in-out; animation-delay: -4s;}
.deco10 { top: 20%; left: 11%; width: 13%; animation: floatA 13s infinite ease-in-out; animation-delay: -2s;}
.deco11 { top: 55%; right: 3%; width: 19%; animation: floatB 18s infinite ease-in-out; animation-delay: -6s;}
.deco12 { top: 30%; right: -2%; width: 12%; animation: floatC 15s infinite ease-in-out; animation-delay: -4s;}
.deco13 { bottom: 20%; left: 15%; width: 12%; animation: floatA 21s infinite ease-in-out; animation-delay: -11s;}
.deco14 { top: 24px; right: -2%; width: 23%; animation: floatA 13s infinite ease-in-out; animation-delay: -2s; opacity: 0.5;}
.deco15 { top: 200px; left: -2%; width: 18%; animation: floatB 18s infinite ease-in-out; animation-delay: -6s; opacity: 0.5;}
.deco16 { bottom: 30%; left: -2%; width: 23%; animation: floatC 15s infinite ease-in-out; animation-delay: -4s; opacity: 0.5;}
.deco17 { bottom: 25%; right: -2%; width: 18%; animation: floatA 21s infinite ease-in-out; animation-delay: -11s; opacity: 0.5;}

#mv { min-height: 100svh; z-index: 50;}
#mv .swiper-wrapper { transition-timing-function: linear;}
.mv01 { position: absolute; top: 50%; left: 0.5%; transform: translateY(-50%); width: 64%; height: 88%; z-index: -1;}
.mv01::after { content: ''; position: absolute; inset: -5px; background: url(img/top/mask_line.svg) center no-repeat; background-size: contain; z-index: 10;}
.mv01 .swiper { width: 100%; height: 100%; -webkit-mask-image: url("img/top/mask.svg"); mask-image: url("img/top/mask.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center;}
.mv01 img { width: 100%; height: 100%; object-fit: cover;}
.mv02 { position: absolute; top: 5%; right: -5%; width: 25%; z-index: 5;}
.mv03 { position: absolute; bottom: -4%; left: -2%; width: 18%; z-index: 5;}
#mv section { position: absolute; inset: 0; z-index: 10;}
#mv h1 { position: absolute; top: 50%; right: 10%; transform: translateY(-50%); text-align: right; z-index: 10;}
#mv h1 img { height: 82svh; max-height: 806px;}
#mv p { position: absolute; bottom: 10%; left: 4%; width: 56%; max-width: 1081px; z-index: 10;}
#intro { background: url(img/top/intro_l.webp) left -4% bottom 300px no-repeat, url(img/top/intro_r.webp) right -4% center no-repeat, url(img/common/loading.webp) center no-repeat, url(img/top/intro_bg.webp) center top no-repeat; background-size: 18% auto, 28% auto, auto, 99% 100%;}
#intro.alt { background: url(img/service/intro_l.png) left 4% center repeat-y, url(img/service/intro_r.png) right 4% center repeat-y, #90251F; background-size: 21% auto, 21% auto, auto;}
#intro section { display: flex; flex-direction: column; justify-content: center; gap: 80px 24px;}
#intro p { font-size: clamp(1.4rem,2.0vw,2.4rem); line-height: 1.6;}
#products { margin-top: -200px; background: url(img/top/products_bg.webp) center no-repeat; background-size: 100% 100%; color: #FFF; z-index: 20;}
.swiper-control { display: grid; grid-template-columns: 1fr auto; align-items: center; padding-right: 6%; margin-top: 56px;}
.swiper-control .wp-block-buttons { align-items: flex-end; margin: 0;}
.swiper-scrollbar { width: 100%; height: 8px; background: #FFF; border-radius: 0;}
.swiper-scrollbar-drag { background: #DD543F; border-radius: 0; cursor: grabbing;}
.swiper-nav { display: flex; gap: 24px;}
.swiper-prev, .swiper-next { display: inline-block; width: 83px; height: 83px; background: url(img/common/arrow_circle.svg) center no-repeat;}
.swiper-prev { transform: scaleX(-1);}
#other { margin-top: -200px; padding: 300px 0 400px; background: url(img/top/other_bg.webp) center top no-repeat; background-size: cover;}
.img-list { display: grid; gap: 56px;}
.img-list li { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px;}
.img-list li.reverse figure { order: 1;}
.img-list figure img { border-radius: 20px;}
.img-list figcaption { position: absolute; top: 0; left: 0; transform: translateY(-50%); line-height: 1; white-space: nowrap; font-style: italic;}
.img-list li i { line-height: 1;}
.img-list li h3 { line-height: 1.4;}
.img-list.feature figure { margin-right: -24%;}
#flow:not(.alt) { margin-top: -400px; padding: 400px 0 400px; background: url(img/top/flow_bg.webp) center top no-repeat; background-size: cover; z-index: 10;}
#flow.alt { background: url(img/service/flow_bg.png) center repeat;}
#flow section { display: grid; grid-template-columns: 1fr 54%; gap: 40px 80px;}
.flow-list { display: flex; flex-direction: column-reverse; gap: 30px; margin: 0;}
.flow-list li { display: flex; align-items: center; width: calc(20% - 24px); padding: 80px 0; background: #DD543F; border-radius: 10px; font-weight: 700; color: #FFF;}
.flow-list li figure { display: flex; justify-content: center; align-items: center; width: 60%; height: 78px;}
.arch { width: 100%;}
.arch-swiper { overflow: visible;}
.arch-swiper .swiper-slide { width: 24%; transition: transform 0.6s ease;}
.arch-swiper img { width: 100%; display: block;}
#philosophy { flex-wrap: wrap; margin-top: -300px; padding: 0 0 400px; background: url(img/top/philosophy02.webp) left bottom 25% no-repeat, url(img/top/philosophy_bg.webp) center top no-repeat; background-size: 12% auto, cover; z-index: 20;}
#philosophy .arch { margin-bottom: 150px;}
#philosophy section { display: grid; grid-template-columns: 36% 1fr; gap: 40px;}
#service { margin-top: -200px; padding-bottom: 400px; background: url(img/top/service_bg.webp) center top no-repeat; background-size: cover; z-index: 20;}
#service section { padding-right: 12%;}
.service-list { position: relative; display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 100px 50px;}
.service-list li { display: grid; grid-template-rows: auto 1fr auto; height: auto; background: #FFF; border-radius: 20px;}
.service-list figure { border-radius: 20px 20px 0 0; overflow: hidden;}
.service-list .contents { padding: 2em 2em 0;}
.service-list h3 { display: flex; align-items: center; gap: 24px; margin-bottom: 2em;}
.service-list .num { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; line-height: 1; white-space: nowrap;}
.service-list .wp-block-buttons { transform: translateY(50%); margin: 0;}
.service-list .wp-block-button { width: 100%;}
.service-list .wp-block-button a { width: 80%; max-width: 400px; min-width: initial; margin: 0 auto;}
#reason { margin-top: -200px; padding-bottom: 300px; background: url(img/top/reason_bg.webp) center top no-repeat, url(img/top/reason_bg2.png) center bottom no-repeat; background-size: 100% auto, 100% 95%; z-index: 20; overflow: clip;}
#reason h2 { position: sticky; top: 9.75rem;}
#reason section { padding-right: 12%;}
.reason-list li { position: sticky; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; background: #FFF; border-radius: 20px; overflow: hidden;}
.reason-list li:nth-child(1) { top: 9.75rem; margin-bottom: -2.5rem;}
.reason-list li:nth-child(2) { top: 12.25rem; margin-bottom: -1.875rem; margin-top: 15rem;}
.reason-list li:nth-child(3) { top: 14.75rem; margin-bottom: -1.25rem; margin-top: 12.5rem;}
.reason-list li:nth-child(4) { top: 17.25rem; margin-bottom: -0.625rem; margin-top: 10rem;}
.reason-list li:nth-child(5) { top: 19.75rem; margin-top: 7.5rem;}
.reason-list .contents { padding: 1em 3em;}
.reason-nav { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding-right: 2em;}
.reason-nav span { display: block; width: 14px; height: 14px; background: #D9D9D9; border-radius: 50%;}
.reason-nav span.current { background: #DD543F;}
#voice { margin-top: -200px; padding: 100px 0 300px; background: url(img/top/voice_bg.webp) center top no-repeat; background-size: cover; z-index: 20;}
#voice section { width: 96%; max-width: initial;}
.voice .swiper-slide { height: auto; margin-top: 60px; background: #FFF; border-radius: 10px; opacity: 0.5; transition: opacity 0.3s ease;}
.voice figure { width: 33%; max-width: 120px; margin: -40px auto 0;}
.voice .contents { padding: 1em 2em 2em;}
.voice h3 { margin-top: 0.5em; padding-bottom: 0.5em; border-bottom: 3px solid #DD543F;}
.voice .swiper-prev, .voice .swiper-next { position: absolute; top: 50%; width: 57px; height: 57px; background: url(img/common/next.svg) center no-repeat; background-size: contain; z-index: 10;}
.voice .swiper-prev { left: 18%; transform: scaleX(-1);}
.voice .swiper-next { right: 18%;}
#blog { margin-top: -200px; background: url(img/top/blog_bg.webp) center no-repeat; background-size: 100% 100%; color: #FFF; z-index: 20;}
ul.list { display: grid; display: grid; grid-template-columns: repeat(auto-fill,minmax(400px,1fr)); gap: 50px 30px;}
.list .swiper-slide, .list li { height: auto; cursor: pointer;}
.list figure { position: relative; margin-bottom: 1em; padding-top: calc(301 / 535 * 100%); background: #90251F url(img/common/logo_white.webp) center no-repeat; background-size: 60% auto; overflow: hidden;}
.list figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: .4s ease-out;}
.list li:hover figure img { transform: scale(1.1);}
.list h3 { margin-top: 0.5em;}
#topfaq { padding-top: 100px; background: url(img/common/deco08.svg) left -7% bottom 0 no-repeat; background-size: 45% auto;}
.faq dt { position: relative; margin-top: 30px; padding: 32px 100px; background: #FFF url(img/common/plus.svg) right 32px center no-repeat; border-radius: 15px; font-size: clamp(1.6rem,1.8vw,2.0rem); font-weight: 700; transition: .2s ease-out; cursor: pointer;}
.faq dt::before { content: 'Q'; position: absolute; top: 50%; left: 32px; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #F8B500; font-size: 2rem; font-weight: 700; color: #FFF;}
.faq dt.on { background-image: url(img/common/minus.svg); border-radius: 15px 15px 0 0;}
.faq dd { display: none; position: relative; padding: 0 32px 32px 100px; background: #FFF; border-radius: 0 0 15px 15px;}
.faq dd::before { content: 'A'; position: absolute; top: 0; left: 32px; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #90251F; font-size: 2rem; font-weight: 700; color: #FFF;}
#company { padding-top: 200px; background: url(img/top/company_bg.webp) center top no-repeat; background-size: cover;}


/*PAGE*/
#title { position: relative; min-height: 650px; z-index: 10;}
#title h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; text-align: center; font-size: 4.8rem; line-height: 1.4; z-index: 10;}
#title h1::after { content: attr(data-en); font-size: 15rem; color: #C6A357; opacity: 0.3; white-space: nowrap;}
#title h1::before { content: attr(data-en); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); white-space: nowrap;}
#title h1.white { color: #FFF;}
#title h1.white::after { color: #F7F8EA;}
#title figure { position: absolute; inset: 0;}
#title figure::after { content: ''; position: absolute; inset: 0; background: url(img/common/title.svg) center no-repeat; background-size: cover;}
#title figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.breadcrumb { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); width: 92%; max-width: 1100px;}
.breadcrumb li { display: inline; font-weight: 700; line-height: 1.2; word-break: break-all;}
.breadcrumb li:not(:first-child)::before { content: ''; display: inline-block; width: 16px; height: 2px; margin: 0 8px; vertical-align: middle; background: #1F1F1F;}
.breadcrumb.white li:not(:first-child)::before { background: #FFF;}
.breadcrumb li img { vertical-align: middle;}
.bg::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; background: #FFF url(img/common/bg.png) center repeat; z-index: -1;}

#matsudasomemonoPrice { padding: 0;}
#zuisendo { background: url(img/common/deco08.svg) right 0 bottom 5% no-repeat; background-size: 46% auto;}
.products { display: grid; grid-template-columns: 1fr 50%; align-items: center; gap: 40px 80px; margin-top: 0; padding-bottom: 100px;}
.products figure { margin-right: calc(100% - 50vw); border-radius: 20px 0 0 20px; overflow: hidden;}
.products .ex { grid-column: 1 / 3;}
.products .ex h3 { display: inline-block; padding: 0.5em 2em; background: #90251F; border-radius: 40px; color: #FFF;}
.products .ex ul { display: grid; grid-template-columns: repeat(3,1fr); align-items: center; gap: 30px;}
.products .ex li { border-radius: 20px; overflow: hidden;}
.products.reverse { grid-template-columns: 50% 1fr;}
.products.reverse figure { order: -1; margin-right: 0; margin-left: calc(100% - 50vw); border-radius: 0 20px 20px 0;}
.price-table { width: 100%; border-collapse: separate; border-spacing: 4px; text-align: center; border-radius: 20px; overflow: hidden;}
.price-table th { padding: 0.5em; background: #90251F; font-size: clamp(1.6rem,1.8vw,2.0rem); font-weight: 700; color: #FFF;}
.price-table td { padding: 0.5em; background: #FFF;}
.item-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; text-align: center;}
.item-list li { position: relative; background: #FFF; border-radius: 10px; overflow: hidden;}
.item-list figcaption { position: absolute; bottom: 0; right: 0; font-family: "ten-mincho-text", serif; font-size: clamp(2.4rem,2.6vw,3.6rem); font-weight: 400; line-height: 1; color: #C6A357; opacity: 0.5; white-space: nowrap;}
.item-list p { margin: 0; padding: 0.8em 0.5em; line-height: 1.2;}
.item-list a { display: block;}
.item-list.alt figure { padding-top: calc(259 / 345 * 100%);}
.item-list.alt figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.item-list.alt p { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; background: #ffffff; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0.9) 55%, rgba(255, 255, 255, 0) 100%);}
.item-list-contact { grid-column: 2 / 4;}
.item-list-contact a { display: flex; flex-direction: column; justify-content: center; gap: 1em; height: 100%; padding: 1em; background: url(img/common/contact.png) center repeat; color: #FFF;}
.item-list-contact .arrow { padding-right: 64px; text-align: right; background: url(img/common/arrow_white.svg) right center no-repeat;}
#history { background: #FFF url(img/common/cta_alt.png) center repeat;}
#zuisendo.alt { padding: 0; background: none;}
#zuisendo .col { display: grid; grid-template-columns: 40% 1fr; gap: 40px 80px;}
#zuisendoItems { background: url(img/common/deco08.svg) left -7% bottom 0 no-repeat; background-size: 45% auto;}
.link { display: inline-block; padding-left: 24px; background: url(img/common/link.svg) left center no-repeat; text-decoration: underline;}

#message .col { display: grid; grid-template-columns: 40% 1fr; gap: 40px 80px;}
#message figure { margin-left: calc(120% - 50vw);}
#overview { background: #F8B500;}
#overview .contents { padding: 100px 0; background: #FFF; border-radius: 15px;}
.overview { display: grid; grid-template-columns: auto 1fr; width: 80%; max-width: 1100px; margin: 0 auto;}
.overview dt, .overview dd { padding: 24px 50px; text-align: left; border-bottom: 2px solid #B3B3B3;}
.overview dt { white-space: nowrap;}
.map { width: 80%; max-width: 1100px; margin: 0 auto;}

.screen-reader-text { display: none;}
.pagination { margin-top: 56px; text-align: center; white-space: nowrap;}
.pagination span { height: auto;}
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px;}
.pagination a:not(.top):not(.prev):not(.next):not(.single-prev):not(.single-next) { display: flex; justify-content: center; align-items: center; border: none; border-radius: 2px; font-size: 2.4rem; font-weight: 700;}
.pagination a:not(.top):not(.single-prev):not(.single-next) { width: 33px; height: 33px;}
.pagination a.prev, .pagination a.next { position: relative; text-indent: -9999px; overflow: hidden;}
.pagination a.prev { transform: scaleX(-1);}
.pagination a.prev::before, .pagination a.next::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 12px; height: 12px; border-top: 2px solid #222; border-right: 2px solid #222;}
.pagination a.single-prev, .pagination a.single-next { display: flex; align-items: center; gap: 8px;}
.pagination a strong { position: relative; display: none; width: 21px; height: 21px; text-align: center; vertical-align: middle; background: #44AA71; border-radius: 50%; font-size: 1.6rem; line-height: 1.2; color: #FFF; text-indent: -9999px; overflow: hidden;}
.pagination a strong::before { content: ''; position: absolute; top: 50%; left: 48%; transform: translate(-50%,-50%) rotate(45deg); width: 6px; height: 6px; border-top: 2px solid #FFF; border-right: 2px solid #FFF;}
.pagination a.single-prev strong { transform: scaleX(-1);}
.pagination a.top { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; min-width: 400px; padding: 0.6em 2em; text-align: center; background: #DD543F; border: 2px solid #1F1F1F; font-size: clamp(1.8rem,2.0vw,2.4rem); font-weight: 700; color: #FFF;}
.pagination span { line-height: 50px;}
.pagination span.current { display: flex; justify-content: center; align-items: center; width: 33px; height: 33px; background: #FFF; border-radius: 2px; font-size: 2.4rem; font-weight: 700; color: #FFA600;}
#single .pagination { padding-top: 50px; border-top: 2px solid #1F1F1F;}
#single h1 { padding: 1em 0; font-size: clamp(2rem,2.4vw,2.4rem);}
.content h2 { padding-bottom: 0.5em; border-bottom: 2px solid #44AA71; font-size: clamp(2rem,2.2vw,2.2rem);}
.content h3 { margin-bottom: 0; padding-bottom: 0.5em; text-align: left; border-bottom: 1px solid #44AA71; font-size: clamp(1.7rem,2vw,2rem);}
.content h3::after { display: none;}
.content p + p { margin-top: 0.5em;}
.content a { text-decoration: underline; color: #2660EF;}
.content a[target="_blank"]:not(.pdf):not(.wp-block-button__link) { display: inline; padding-right: 20px; background: url("img/common/blank.svg") right center no-repeat;}
.content img { margin-bottom: 8px;}
.content li:not(:first-of-type) { margin-top: 4px;}
.content ul { margin-left: 2em;}
.content ul > li { list-style: disc;}
.content ol { margin-left: 2em;}
.content ol > li { list-style: decimal;}
.content table { width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; border-collapse: separate; border-spacing: 16px 0; border-top: none!important; border-left: none!important; overflow: hidden;}
.content th, .content td { padding: 24px 0; text-align: left; vertical-align: top; border: none !important;}
.content th { width: 25%; border-bottom: 2px solid #222 !important;}
.content td { border-bottom: 2px solid #D1D1D1 !important;}
.content * + p, .content > * + ul, .content * + ol, .content * + .wp-block-image, .content * + .wp-block-table, .content * + blockquote, .content * + table, .content * + .wp-block-columns, .content * + .wp-block-buttons { margin-top: 2em;}
.content * + h2, .content * + h3, .content * + h4, .content * + h5 { margin-top: 3em!important;}
.content h1 + *, .content h2 + *, .content h3 + *, .content h4 + *, .content h5 + *, .mainimg + * { margin-top: 2em!important;}
.content .youtube { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin: 1em auto 0;}
.content .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;}
.meta time { font-weight: 700;}
.meta .cat { width: auto; margin: 0;}
.cat { display: flex; flex-wrap: wrap; gap: 8px; width: 92%; max-width: 1100px; margin: 0 auto;}
.cat li a { display: inline-block; min-width: 155px; padding: 8px; text-align: center; background: #90251F; border-radius: 50px; font-size: clamp(1.6rem,1.8vw,2.0rem); font-weight: 700; line-height: 1; color: #FFF !important;}
.cat li a.blog, .cat li a.yellow { background: #F8B500;}
.cat li a.news, .cat li a.orange { background: #DD543F;}
.content .alignright { float: right; margin-left: 2em; margin-bottom: 2em;}
.content .alignleft { float: left; margin-right: 2em; margin-bottom: 2em;}
.content .aligncenter { display: block; margin: 2em auto; text-align: center;}
.size-thumbnail { max-width: 400px;}
.anchor { position: relative; margin-top: 200px;}
.anchor .cat { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px;}
.anchor .cat a { display: flex; justify-content: center; align-items: center; width: 100%; min-width: initial; height: 100%; padding: 16px 48px; background-position: right 24px center !important; background-image: url(img/common/down.svg) !important; background-repeat: no-repeat !important; border-radius: 10px; line-height: 1.4; white-space: nowrap;}
.anchor.inner .cat { grid-template-columns: repeat(auto-fill,minmax(196px,1fr)); gap: 10px;}
.anchor.inner .cat a { background-color: #FFF; background-image: url(img/common/down_orange.svg) !important; background-position: right 16px center !important;  font-size: clamp(1.6rem,1.8vw,2.0rem) !important; color: #DD543F !important;}
.anchor-link { display: flex; justify-content: center; gap: 15px;}
.anchor-link li { width: calc(20% - 12px); position: relative; padding-top: calc(20% - 12px);}
.anchor-link a { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; background: #F8B500; border-radius: 50%; line-height: 1; color: #FFF;}
.anchor-link a::after { content: ''; width: 18px; height: 9px; background: url(img/common/down.svg) center no-repeat;}

.tel { padding-bottom: 1em; text-align: center; background: #FFF; border: 3px solid #F8B500; border-radius: 20px;}
.tel h3 { padding: 0.5em; background: #F8B500; font-size: clamp(2rem,2.6vw,3.6rem); color: #FFF;}
.tel a { display: inline-block; margin: 0.2em; padding-left: 1.5em; background: url(img/common/tel_alt2.svg) left center no-repeat; background-size: auto 1em; font-weight: 700; color: #F8B500;}
.form { font-size: clamp(1.6rem,2.4vw,2.4rem);}
.form form { max-width: 1100px; margin: 0 auto;}
.form dl { display: grid; grid-template-columns: auto 1fr; gap: 40px; margin: 40px 0;}
.form dt { padding-top: 8px; text-align: left; font-size: clamp(1.8rem,2.8vw,2.8rem); font-weight: 500;}
.form .contactform dt { padding-top: 0;}
.form input:not([type="submit"]) { display: inline-block; width: 100%; padding: 12px; background: #D9D9D9; border: none; border-radius: 10px; vertical-align: middle; color: #1F1F1F;}
.form textarea:read-only, .form input[type="text"]:read-only { background: #F4F4F4!important;}
.form select { padding: 12px 48px 12px 12px; background: #D9D9D9 url(img/common/select.svg) right 16px center no-repeat; border: none; border-radius: 3px;}
.form textarea { width: 100%; min-height: 240px; padding: 12px; background: #D9D9D9; border: none; border-radius: 3px; color: #1F1F1F;}
.form label { display: inline-block; padding: 8px 0;}
.form input[type="checkbox"] { display: none;}
.form input[type="checkbox"] + span { position: relative; display: inline-block; padding: 16px 0 16px 40px; line-height: 1; cursor: pointer;}
.form input[type="checkbox"] + span::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 30px; height: 30px; background: #EEE; border: 2px solid #CCCCCC; border-radius: 6px;}
.form input[type="checkbox"] + span::after { content: ''; position: absolute; top: 50%; left: 9px; transform: translateY(-50%) rotate(-45deg); width: 12px; height: 5px; border-left: 2px solid #CCC; border-bottom: 2px solid #CCC;}
.form input[type="checkbox"]:checked + span::before { background: #DD543F;}
.form input[type="checkbox"]:checked + span::after { border-color: #FFF;}
.form input[type="radio"] { display: none;}
.form input[type="radio"] + span { position: relative; display: inline-block; margin-right: 24px; padding-left: 28px; vertical-align: middle; line-height: 2;}
.form input[type="radio"] + span::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: 24px; height: 24px; background: #FFF; border: 2px solid #B3B3B3; border-radius: 50%;}
.form input[type="radio"]:checked + span::before { background-color: #FFF;}
.form input[type="radio"]:checked + span::after { content: ''; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); display: block; width: 14px; height: 14px; background: #DD543F; border-radius: 50%;}
.form ::-webkit-input-placeholder { font-size: clamp(1.4rem,2vw,2rem); font-weight: 400; color: #A4A7AF;}
.form ::-moz-placeholder { font-size: clamp(1.4rem,2vw,2rem); font-weight: 400; color: #A4A7AF;}
.form :-ms-input-placeholder { font-size: clamp(1.4rem,2vw,2rem); font-weight: 400; color: #A4A7AF;}
.form .inputTextShort { width: 75% !important;}
.form .inputTextShortest { width: 50% !important;}
.must { margin-left: 16px; padding: 4px 12px; background: #90251F; font-size: 1.2rem; color: #FFF; white-space: nowrap;}
.any { margin-left: 16px; padding: 4px 12px; background: #FFEFE0; border-radius: 40px; font-size: 1.3rem; color: #E47428; white-space: nowrap;}
.privacy { height: 240px; padding: 24px; border: 1px solid #DDDDDD; overflow: auto;}
.submit { clear: both; position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; width: 80%; max-width: 400px; margin: 24px auto 0; text-align: center;}
.submit input[type="submit"] { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; padding: 0.6em 2em; text-align: center; background: #DD543F; border: 2px solid #1F1F1F; font-size: clamp(1.8rem,2.0vw,2.4rem); font-weight: 700; color: #FFF; transition: .2s ease-out;}
.submit .submit-arrow { position: relative; width: 100%;}
.submit .submit-arrow::after { content: ''; position: absolute; top: calc(50% - 8px); right: -27px; width: 54px; height: 12px; background: url(img/common/arrow.svg) center no-repeat; background-size: contain; transition: .2s ease-out;}
.submit input[type="button"] { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; padding: 0.6em 2em; text-align: center; background: #1F1F1F; border: 2px solid #1F1F1F; border-radius: 0; font-size: clamp(1.8rem,2.0vw,2.4rem); font-weight: 700; color: #FFF; transition: .2s ease-out;}
.form .zip { display: flex; align-items: center; gap: 8px; white-space: nowrap;}
.form .zip span[data-name="your-zip1"] { width: 20%;}
.form .zip span[data-name="your-zip2"] { width: 30%;}
.confirm dl { gap: 0;}
.confirm dt { padding: 24px 24px 24px 0; border-bottom: 2px solid #B3B3B3;}
.confirm dd { padding: 24px 0; border-bottom: 2px solid #B3B3B3;}
.confirm .confirm-hide { display: none;}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { font-size: 1.6rem;}
.wpcf7-spinner { position: absolute; top: 100%; left: 50%; transform: translate(-50%,16px);}






@media only screen and (max-width: 1000px){
article { padding: 100px 0;}
.vertical-title { width: auto; min-height: 35px; padding: 0 0 0 64px; text-align: center; background-position: left center; background-size: 52px 35px; writing-mode: horizontal-tb;}
.vertical-title::after { display: block; width: 100%; height: 2px;}
.scroll-title { padding-top: 40px;}
.marquee img { height: 80px;}
.wp-block-buttons { justify-content: center !important; margin-top: 50px;}
.wp-block-button { width: 80%; max-width: 320px; margin: 0 auto;}
.wp-block-button a { min-width: initial; padding: 0.8em 1em;}
.wp-block-table th { display: block; padding: 16px 0 0;}
.wp-block-table td { display: block; padding: 16px 0;}
.wp-block-table td .name { display: inline-block; margin: 8px 0; padding: 2px 16px; background: #E4EBE3;}
.sp-center { text-align: center;}
.sp { display: block;}
.pc { display: none;}


/*TOP*/
#loading { background-size: 90% auto, auto;}
.column { flex-direction: column; align-items: stretch; gap: 32px; padding-left: 4%; padding-right: 4%;}
.column h2 { width: auto;}
.column section { width: auto;}
.deco01 { top: 4%; left: 16%; width: 34%;}
.deco02 { bottom: 18%; right: 7%; width: 24%;}
.deco03 { top: 14%; left: 43%; width: 12%;}
.deco04 { display: none;}
.deco05 { top: 0; left: 39%; width: 30%;}
.deco06 { bottom: 48%; left: -5%; width: 32%;}
.deco07 { top: 53%; left: -9%; width: 25%;}
.deco08 { bottom: 3%; left: -4%; width: 36%;}
.deco09 { top: 12%; right: 4%; width: 14%;}
.deco10 { top: 13%; left: 4%; width: 26%;}
.deco11 { top: 55%; right: 3%; width: 19%;}
.deco12 { top: 30%; right: -2%; width: 24%;}
.deco13 { bottom: 12%; left: 2%; width: 24%;}

#mv { min-height: calc(100svh - 50px);}
.mv01 { top: auto; bottom: 4%; left: -45%; transform: translateY(0); width: 123%; height: 54%;}
.mv02 { top: 4%; right: 60%; width: 50%;}
.mv03 { bottom: 34%; left: 68%; width: 40%;}
#mv h1 { top: 2%; right: 10%; transform: translateY(0);}
#mv h1 img { width: 61%; height: auto; max-height: 90svh;}
#mv p { bottom: auto; top: 61%; left: auto; right: 6%; width: 62%;}
#intro { background-position: left -12% bottom 64px, right -4% top, center, center top; background-size: 30% auto, 28% auto, 90% auto, 99% 100%;}
#intro.alt { background-position: left center, right center, center; background-size: 16% auto, 16% auto, auto;}

#intro section { flex-direction: row; align-items: center;}
#intro h2 { display: flex; justify-content: center; writing-mode: horizontal-tb;}
#intro p { line-height: 1.2;}
#products { margin-top: -100px; background-size: auto 100%;}
#products section { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);}
.swiper-control { grid-template-columns: 1fr; gap: 24px; padding-right: 0; margin-top: 32px;}
.swiper-control .wp-block-buttons { align-items: flex-end; margin: 0;}
.swiper-prev, .swiper-next { width: 38px; height: 38px; background-size: contain; z-index: 20;}
.swiper-prev { position: absolute; top: 40%; left: 4%;}
.swiper-next { position: absolute; top: 40%; right: 4%;}
#other { padding: 300px 0;}
.img-list li { grid-template-columns: 1fr;;}
.img-list li.reverse figure { order: -1;}
.img-list.feature figure { margin-right: 0;}
#flow:not(.alt) { padding: 300px 0;}
#flow section { grid-template-columns: 100%;}
.flow-list { gap: 10px;}
.flow-list li { width: calc(20% - 8px); padding: 40px 0;}
.arch-swiper .swiper-slide { width: 40%;}
#philosophy { flex-wrap: wrap; margin-top: -400px; padding: 200px 0 300px; background: url(img/top/philosophy_bg.webp) center top no-repeat; background-size: cover;}
#philosophy .arch { margin-bottom: 16px;}
#philosophy section { grid-template-columns: 1fr;}
#philosophy h2 { margin: 0 4%;}
#philosophy .contents { padding: 0 4%;}
#service { padding-bottom: 300px;}
#service section { padding-right: 0;}
#reason { background-size: 200% auto, 100% 95%;}
#reason h2 { position: relative; top: 0;}
#reason section { padding-right: 0;}
.reason-list li { grid-template-columns: 1fr; top: 60px !important; margin-bottom: 0 !important; border-radius: 10px;}
.reason-list figure { padding-top: calc(9 / 16 * 100%);}
.reason-list figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.reason-list .contents { padding: 1em 2em;}
.reason-nav { position: absolute; top: 50%; right: 0; gap: 10px; padding-right: 1em;}
.reason-nav span { width: 7px; height: 7px;}
#voice section { width: 92%;}
.voice .swiper-slide { height: auto; margin-top: 60px; background: #FFF; border-radius: 10px; opacity: 0.5; transition: opacity 0.3s ease;}
.voice figure { width: 33%; max-width: 120px; margin: -40px auto 0;}
.voice .contents { padding: 1em 2em 2em;}
.voice h3 { margin-top: 0.5em; padding-bottom: 0.5em; border-bottom: 3px solid #DD543F;}
.voice .swiper-prev, .voice .swiper-next { top: 10%; width: 38px; height: 38px;}
.voice .swiper-prev { left: 2%;}
.voice .swiper-next { right: 2%;}
#blog { background-size: auto 100%;}
ul.list { grid-template-columns: repeat(auto-fill,minmax(260px,1fr));}
.faq dt { margin-top: 20px; padding: 24px 48px 24px 80px; background-size: 20px auto; background-position: right 16px center;}
.faq dt::before { left: 24px;}
.faq dd { padding: 0 24px 24px 80px;}
.faq dd::before { left: 24px;}
#company { padding-top: 100px; background: url(img/top/company_bg.webp) center top no-repeat; background-size: cover;}


/*PAGE*/
#title { min-height: initial; padding: 100px 0;}
#title h1 { position: relative; top: 0; left: 0; transform: translate(0,0); font-size: clamp(2.4rem,3.2vw,4.8rem);}
#title h1::after { font-size: clamp(6rem,6vw,15rem);}
.breadcrumb { font-size: 1.2rem;}
.products { display: block;}
.products figure { margin-top: 40px; margin-bottom: 40px; margin-right: calc(50% - 50vw);}
.products.reverse figure { margin-right: 0; margin-left: calc(50% - 50vw);}
.products .ex ul { grid-template-columns: repeat(auto-fill,minmax(180px,1fr));}
.products .ex li { border-radius: 5px;}
.item-list { grid-template-columns: 1fr;}
.item-list-contact { grid-column: auto;}
#zuisendo .col { grid-template-columns: 1fr;}

#message .col { grid-template-columns: 1fr;}
#message .col figure { margin: 0;}
#overview .contents { padding: 50px 0;}
.overview { grid-template-columns: 1fr;}
.overview dt { padding: 24px 0 0; border-bottom: none;}
.overview dd { padding: 8px 0 24px;}

.pagination a.top { min-width: 160px; margin: 0 8px;}
.anchor { margin-top: 100px;}
.anchor .cat { gap: 10px;}
.anchor .cat a { padding: 16px 20px 16px 8px; background-position: right 8px center !important; background-size: 10px auto !important; font-size: 1.4rem;}
.vertical-anchor .cat { display: flex; flex-direction: column;}
.anchor.inner .cat { grid-template-columns: repeat(auto-fill,minmax(120px,1fr));}

.anchor-link { flex-wrap: wrap;}
.anchor-link li { width: calc(100% / 3 - 12px); padding-top: calc(100% / 3 - 12px);}

.form dl { grid-template-columns: 1fr; gap: 16px;}
.submit { flex-direction: column;}
.confirm dt { padding: 0; border-bottom: none;}
.confirm dd { padding: 0 0 24px;}
}





@media print {
#container { width: 1024px;}
}