@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=60); opacity: 0.6;}}
*: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.6rem,1.8vw,1.8rem); font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; word-break: normal; color: #222;}
#container { position: relative; width: 100%; overflow: clip;}
figure { margin: 0;}
.zen-maru-gothic { font-family: "Zen Maru Gothic", sans-serif;}


/*HEADER*/
/*******************************************************************/
#header { position: sticky; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 100px; background: #FFF; z-index: 1000;}
#logo { width: 270px; margin-left: 24px;}
.menu a, .h-btn a { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; min-height: 100px; font-size: clamp(1.2rem,1.2vw,1.6rem); font-weight: 700; color: #45A829; white-space: nowrap;}
.menu a img { min-width: 40px;}
.h-btn { display: grid; grid-template-columns: 1fr 1fr;}
.h-btn a { min-width: 110px; padding: 0 16px; background: #FFA600; color: #FFF;}
.h-btn a img { width: auto; height: 32px;}
.h-btn a.line { background: #0A9F49;}
.h-btn a[href^="tel"] { background: #45A829;}
@media screen and (min-width: 1201px) {
	#nav { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 4px 32px;}
	.menu { display: flex; align-items: center; gap: 4px 32px;}
	.h-icon { display: none;}
	.h-btn .line { display: none;}
	#open { display: none;}
}
@media only screen and (max-width: 1200px){
	#header { min-height: 50px; gap: 0;}
	#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: 24px; width: 100%; height: 100svh; padding: 64px 30px; background: #f3f3f3; overflow-y: auto; overscroll-behavior: contain; z-index: 1000; transition: .2s ease-out;}
	.menu a { align-items: flex-start; min-height: initial; padding: 12px 40px 12px 12px; background: url(img/common/arrow_circle_on.svg) right 12px center no-repeat; border-bottom: 1px solid #000; font-size: 1.4rem; font-weight: 500; color: #000;}
	.menu li:last-child a { border-bottom: none;}
	.menu a figure { display: none;}
	.h-btn { grid-template-columns: 1fr; gap: 5px; margin-top: 40px;}
	.h-btn a { flex-direction: row; min-height: 55px; font-size: 1.6rem;}
	.h-btn img { max-width: 30px;}
	.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; padding-bottom: 160px; background: #45A829; z-index: 200;}
#cta { position: relative; margin-top: 40px; padding: 50px 0 150px; background: #F4FDF1;}
#cta::before { content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); width: 120vw; height: 160px; background: #F4FDF1; border-radius: 50%; z-index: -1;}
#cta ul { position: relative; width: 92%; max-width: 1440px; display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 0 auto; text-align: center; border-radius: 15px; overflow: hidden;}
#cta li a { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 24px 16px; text-align: center; color: #FFF;}
#cta li a:hover { opacity: 1;}
#cta li figure { display: flex; align-items: center; height: 58px;}
#cta li:nth-child(1) figure { background: url(img/common/tel_circle_on.svg) center no-repeat;}
#cta li:nth-child(2) figure { background: url(img/common/mail_on.svg) center no-repeat;}
#cta li:nth-child(1) a { background: #45A829;}
#cta li:nth-child(2) a { background: #FFA600;}
#cta li:nth-child(3) a { background: #0A9F49;}
#cta li figure { margin-bottom: 16px;}
#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;}
#info::before { content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); width: 120vw; height: 160px; background: #45A829; border-radius: 50%; z-index: -1;}
#info a { color: #FFF;}
.logo { order: -1; display: grid; gap: 16px;}
.sitemap ul { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); gap: 8px 40px;}
#footernav { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 56px; 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 ul { display: flex; align-items: center; gap: 16px;}
#pt { position: absolute; bottom: 80px; right: 40px; width: 6%; text-align: right;}
#pt a img { cursor: pointer; height: auto; transition: transform 1s; width: 100%;}
#sns { position: fixed; top: 120px; right: 0; z-index: 100;}
#sns ul { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 80px; text-align: center;}
@media screen and (min-width: 1001px) {
	#cta li:nth-child(1) a:hover { background: #F4FDF1; color: #45A829;}
	#cta li:nth-child(2) a:hover { background: #FFF3E2; color: #FFA600;}
	#cta li:nth-child(3) a:hover { background: #B1E6C8; color: #0A9F49;}
	#cta li:nth-child(1) a:hover figure img, #cta li:nth-child(2) a:hover figure img { opacity: 0; transition: .2s;}
	#pt a:hover { opacity: 1;}
	#pt a:hover img { transform: rotate(360deg);}
	body:not(.home) #sns img { transition: .2s ease-out;}
	body:not(.home) #sns a { display: block; background-position: center; background-size: contain;}
	body:not(.home) #sns.change a.line { background-image: url(img/common/line_black.svg);}
	body:not(.home) #sns.change a.x { background-image: url(img/common/x_black.svg);}
	body:not(.home) #sns.change a.instagram { background-image: url(img/common/instagram_black.svg);}
	body:not(.home) #sns.change img { opacity: 0;}
}
@media only screen and (max-width: 1000px){
	#cta ul { grid-template-columns: 1fr;}
	#cta li figure { width: 30px; height: auto;}
	#cta li h3 { line-height: 1;}
	.sitemap ul { font-size: 1.2rem;}
	#pt { bottom: 40px; width: 80px;}
	#sns { top: auto; bottom: 0; width: 100%;}
	#sns ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; width: 100%;}
	#sns li a { display: flex; justify-content: center; align-items: center; gap: 8px; height: 50px; font-size: 1.4rem; font-weight: 700; color: #FFF; white-space: nowrap;}
	#sns li a.line { background: #0A9F49;}
	#sns li a.x { background: #FFA600;}
	#sns li a.instagram { background: #45A829;}
	#sns li img { width: 1.5em;}
}



/*CONTENTS*/
/*******************************************************************/
article { position: relative; padding: 100px 80px 200px;}
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 { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 100px; text-align: center; font-family: "Zen Maru Gothic", sans-serif; font-size: clamp(2.8rem,3.4vw,5.2rem); color: #45A829;}
.title::after { content: ''; display: inline-block; width: 64px; height: 3px; margin-top: 16px; background: url(img/common/bar.svg) center no-repeat;}
.title.orange::after { background: #FFA600;}
.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;}
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;}
p, dl, ul, ol { line-height: 2;}
.bg-round-green { margin-top: 40px; background: #F4FDF1; z-index: 10;}
.bg-round-green::before { content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); width: 120vw; height: 160px; background: #F4FDF1; border-radius: 50%; z-index: -3;}
.bg-round-orange { margin-top: 40px; background: #FFF3E2; z-index: 10;}
.bg-round-orange::before { content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); width: 120vw; height: 160px; background: #FFF3E2; border-radius: 50%; z-index: -3;}
.bg-round-white { margin-top: 40px; background: #FFF; z-index: 10;}
.bg-round-white::before { content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); width: 120vw; height: 160px; background: #FFF; border-radius: 50%; z-index: -3;}
.bg-round-grey { margin-top: 40px; background: #F4F4F0; z-index: 10;}
.bg-round-grey::before { content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); width: 120vw; height: 160px; background: #F4F4F0; border-radius: 50%; z-index: -3;}
.wp-block-buttons { display: flex; flex-direction: column; align-items: center; gap: 20px 40px; margin-top: 80px;}
.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: #FFA600 url(img/common/arrow.svg) right 24px center no-repeat; border-radius: 64px; font-size: clamp(1.8rem,2.0vw,2.4rem); font-weight: 700; color: #FFF !important;}
.wp-block-button a.green { background-color: #45A829;}
.wp-block-button a.white { min-width: initial; background-color: #FFF; font-size: 1.4rem; color: #5B6783 !important; box-shadow: 0 0 6px rgba(91,103,131,.15);}
.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;}
.wp-block-button a.mail::before { content: ''; width: 2em; height: 1em; background: url(img/common/mail.svg) center no-repeat; background-size: contain;}
.wp-block-button a.line { background-color: #0A9F49;}
.wp-block-button a.line::before { content: ''; width: 2em; height: 1.5em; background: url(img/common/line.svg) center no-repeat; background-size: contain;}
.wp-block-button a .phone { display: flex; align-items: center;}
.wp-block-button a .phone::before { content: ''; display: inline-block; width: 2em; height: 1.5em; background: url(img/common/tel.svg) center no-repeat; background-size: contain;}
@media screen and (min-width: 1001px) {
	.wp-block-button a:hover, .pagination a.top:hover { background-color: #FFF !important; background-image: url(img/common/arrow_on.svg); color: #45A829 !important; box-shadow: 0 0 5px #45A829; opacity: 1;}
	.submit input[type="submit"]:hover { background-color: #FFF !important; background-image: url(img/common/arrow_on.svg); color: #45A829 !important; box-shadow: 0 0 5px #45A829; opacity: 1;}
	.submit input[type="button"]:hover { background-color: #FFF !important; background-image: url(img/common/arrow_on.svg); color: #45A829 !important; box-shadow: 0 0 5px #45A829; opacity: 1;}
	.wp-block-button a.mail:hover::before { background-image: url(img/common/mail_on.svg);}
	.wp-block-button a.line:hover::before { background-image: url(img/common/line_on.svg);}
	.wp-block-button a.phone:hover::before { background-image: url(img/common/tel_on.svg);}
}
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;}
.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;}
.fs96 { font-size: clamp(4.2rem,7.2vw,9.6rem) !important;}
.fs200 { font-size: clamp(8.0rem,10vw,200rem) !important; line-height: 1.2;}
.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;}
.white { color: #FFF !important;}
.orange { color: #FFA600 !important;}
.green { color: #45A829 !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: linear-gradient(45deg,rgba(69, 168, 41, 1) 0%, rgba(10, 159, 73, 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; background: #4caf50; overflow: hidden; border-radius: 4px;}
.bar-inner { width: 0%; height: 100%; background: #FFF; transition: width 0.2s;}
.home #container { display: none;}
.home #main { position: relative;}
.home #main::after { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 100%; background: linear-gradient(0deg,rgba(69, 168, 41, 1) 0%, rgba(10, 159, 73, 1) 100%); pointer-events: none; z-index: 20;}
.marquee, .marquee2 { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; z-index: -1;}
.marquee .swiper-wrapper, .marquee2 .swiper-wrapper { transition-timing-function: linear;}
.marquee .swiper-slide, .marquee2 .swiper-slide { width: auto;}
.marquee img, .marquee2 img { width: auto; display: block;}
#mv { height: calc(100svh - 100px); padding: 30px 0; background: #F4FDF1; z-index: 50; overflow: hidden;}
#mv .swiper-wrapper { transition-timing-function: linear;}
#mv .swiper-slide { height: 100%; border-radius: 15px; overflow: hidden;}
#mv section { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 30px 80px; background: url(img/top/mv_t.webp) center top no-repeat, url(img/top/mv_b.webp) center bottom no-repeat; background-size: 100% auto; z-index: 10;}
#mv h1 { width: 90%;}
#mv ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px;}
.scroll { position: absolute; bottom: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 80px; z-index: 50;}
.scroll-text { writing-mode: vertical-rl; font-weight: 700; color: #FFF;}
.scroll-border { position: relative; width: 10px; height: 240px; overflow: hidden;}
.scroll-border::before { content: ""; display: block; position: absolute; width: 1px; height: 100%; top: 0; left: 0; right: 0; background: #FFF; margin: auto;}
.scroll-border::after { content: ""; display: block; position: absolute; width: 12px; height: 12px; left: 0; right: 0; background: #FFF; border-radius: 50%; animation: scrollbar 2.0s ease-in-out infinite; margin: auto;}
@keyframes scrollbar { 0% { bottom: 252px; opacity: 0;} 50% { opacity: 1;} 100% { bottom: -12px; opacity: 0;}}
.banner { display: grid; gap: 50px; text-align: center;}
.youtube { position: relative; margin-top: 40px; padding-top: 56.25%; border-radius: 15px; overflow: hidden;}
.youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#philosophy { padding: 160px 80px; overflow: hidden;}
#philosophy .contents { position: relative; width: 50%; z-index: 10;}
#philosophy .contents::before { content: ''; position: absolute; top: -160px; right: calc(100% + 20px); width: 237px; height: 250px; background: url(img/top/deco01.svg) center top no-repeat; background-size: contain; z-index: -1;}
#philosophy .contents::after { content: ''; position: absolute; bottom: -240px; right: calc(100% - 40px); width: 340px; height: 343px; background: url(img/top/deco03.svg) center top no-repeat; background-size: contain; z-index: -1;}
#philosophy h3 { white-space: nowrap;}
#philosophy p { padding-top: 1em; border-top: 3px solid #0A9F49;}
.philosophy-visual { position: absolute; top: -30%; right: calc(50% - 50vw); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 40vw; height: 160%; transform: rotate(7.6deg);}
.philosophy-visual::after { content: ''; position: absolute; top: 15%; right: calc(100% - 100px); width: 262px; height: 271px; background: url(img/top/deco02.svg) center top no-repeat; background-size: contain; z-index: -1;}
.philosophy-visual .swiper-wrapper { transition-timing-function: linear;}
.philosophy-visual .swiper-slide { height: auto;}
.service-list { position: relative; display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 50px;}
#service .service-list::before { content: ''; position: absolute; top: -300px; left: calc(100% - 300px); width: 389px; height: 410px; background: url(img/top/deco04.svg) center no-repeat; background-size: contain; z-index: -1;}
#service .service-list::after { content: ''; position: absolute; bottom: -70px; right: calc(100% - 160px); width: 457px; height: 461px; background: url(img/top/deco05.svg) center no-repeat; background-size: contain; z-index: -1;}
.service-list.alt li { grid-template-rows: 1fr;}
.service-list.alt li a { display: grid; grid-template-rows: auto 1fr; height: 100%; background: #FFA600; border-radius: 15px; color: #FFF; overflow: hidden;}
.service-list.alt li:nth-child(2) a { background: #0A9F49;}
.service-list.alt .contents { background: url(img/common/arrow_circle.svg) right 20px bottom 20px no-repeat; background-size: 40px auto;}
.service-list li { display: grid; grid-template-rows: auto 1fr auto; height: auto;}
.service-list .contents { padding: 2em; background: #FFF;}
.service-list h3 { display: flex; align-items: center; gap: 16px;}
.service-list .num { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; line-height: 1; white-space: nowrap;}
#reason, #form { background: url(img/common/tree_l.webp) left top 40% no-repeat, url(img/common/tree_r.webp) right bottom -40% no-repeat, #FFF; background-size: 30% auto, 30% auto, auto;}
#reason .title { margin-top: -2em;}
.reason-list { display: grid; gap: 80px;}
.reason-list li { display: grid; grid-template-columns: 1fr 1fr; gap: 50px;}
.reason-list li figcaption { position: absolute; top: -10%; left: -10%;}
.reason-list li:nth-child(even) figure { order: 1;}
.reason-list li:nth-child(even) figcaption { left: auto; right: -10%;}
.worries { width: 80%; padding: 2em; background: #FFF; z-index: 10;}
.worries::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,50%); width:0; height:0; border-style:solid; border-width: 44px 34px 0 34px; border-color: #FFFFFF transparent transparent transparent;}
.worries ul { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 20px; max-width: 1100px; margin: 0 auto;}
.worries + section { margin-top: 0;}
#worries .form::before { content: ''; position: absolute; top: -150px; left: calc(100% - 300px); width: 523px; height: 528px; background: url(img/top/deco06.svg) center no-repeat; background-size: contain; z-index: -1;}
#worries .form::after { content: ''; position: absolute; bottom: 0; right: calc(100% - 100px); width: 262px; height: 271px; background: url(img/top/deco07.svg) center no-repeat; background-size: contain; z-index: -1;}
#company { padding-top: 200px; background: url(img/top/company01.webp) right 86% top 6% no-repeat, url(img/top/company02.webp) left 95% top no-repeat, url(img/top/company03.webp) right 100% bottom no-repeat, url(img/top/company04.webp) left 95% bottom no-repeat, linear-gradient(0deg,rgba(244, 253, 241, 1) 0%, rgba(244, 253, 241, 0) 100%); background-size: 22% auto, 20% auto, 30% auto, 25% auto, auto;}
#company::before { content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); width: 120vw; height: 160px; background: #F4F4F0; border-radius: 50%; z-index: 1;}
.copy-slides { position: relative; margin-top: -40px; z-index: 10;}
#blog { background: url(img/top/mark.svg) left bottom no-repeat; background-size: 26%;}
#blog .swiper { overflow: visible;}
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: #EBEBEB; border-radius: 15px; overflow: hidden;}
.list figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.list h3 { margin-top: 0.5em;}
#blog h2 { margin-left: calc(50% - 50vw + 20px); margin-bottom: 2em;}
#blog .swiper-scrollbar { position: absolute; left: 0; bottom: 28px; width: 56%; height: 8px;}
#blog .swiper-scrollbar-drag { background: #FFA600; cursor: grabbing;}
#blog .wp-block-buttons { align-items: flex-end;}
.faq { position: relative;}
#topfaq .faq::before { content: ''; position: absolute; top: -100px; right: calc(100% - 100px); width: 430px; height: calc(100% + 140px); background: url(img/top/deco10.svg) left bottom no-repeat, url(img/top/deco08.svg) right top no-repeat; z-index: -1;}
#topfaq .faq::after { content: ''; position: absolute; top: 0; left: calc(100% - 100px); width: 312px; height: 100%; background: url(img/top/deco09.svg) center no-repeat; z-index: -1;}
.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.8rem,2.0vw,2.4rem); 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: #45A829; border-radius: 10px; font-family: "Zen Maru Gothic", sans-serif; font-size: 2.4rem; 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: #FFA600; border-radius: 10px; font-family: "Zen Maru Gothic", sans-serif; font-size: 2.4rem; color: #FFF;}


/*PAGE*/
#lptitle { position: relative; z-index: 50;}
#lptitle .breadcrumb { bottom: -80px;}
#lptitle { height: calc(100svh - 100px); background-position: center; background-repeat: no-repeat; background-size: cover;}
#lptitle h1 { position: absolute; width: 50%;}
#lptitle p { position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%); width: 60%; text-align: center;}
#lptitle.title-belt { background-image: url(img/belt/mv.webp);}
#lptitle.title-belt h1 { top: 5vh; left: 22%;}
#lptitle.title-pharmacy { background-image: url(img/pharmacy/mv.webp);}
#lptitle.title-pharmacy h1 { top: 25vh; right: 16%; text-align: right;}

#title { position: relative;}
#title h1 { position: absolute; top: 40%; left: 12%; transform: translateY(-50%); display: grid; font-size: clamp(2rem,3.2vw,4.8rem); line-height: 1.2; color: #FFF; z-index: 10;}
#title h1 i { font-size: clamp(4rem,6vw,15rem);}
.breadcrumb { position: absolute; bottom: 40px; left: 0; width: 92%; max-width: 1440px; text-align: right;}
.breadcrumb li { display: inline; font-weight: 700; word-break: break-all;}
.breadcrumb li:not(:first-child)::before { content: ''; display: inline-block; width: 21px; height: 2px; margin: 0 8px; vertical-align: middle; background: #1F1F1F;}

#problem { padding-top: 200px; background: url(img/belt/worries_bg.jpg) center no-repeat; background-size: cover;}
#solution { background: url(img/belt/dot.svg) left 95% top 5% no-repeat, url(img/belt/dot.svg) right 95% top 15% no-repeat, #FFF3E2; background-size: 26% auto;}
#solution.alt { background-color: #F4FDF1;}
#solution.alt .experience { margin-top: 0;}
.solution { padding: 50px 0;}
.solution h2 { position: absolute; top: -100px; left: 50%; transform: translate(-50%, -50%); padding: 1em; text-align: center; background: #FFF; border: 3px solid #FFA600; border-radius: 15px; white-space: nowrap;}
.solution h2::after { content: ''; position: absolute; bottom: -37px; left: 50%; transform: translateX(-50%); width: 39px; height: 51px; background: url(img/belt/arrow.svg) center no-repeat; z-index: 10;}
.solution ul { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); justify-content: center; gap: 40px 80px; text-align: center;}
.solution li { position: relative;}
.solution li div { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0.5em; background: #45A829; border-radius: 10px; line-height: 1.4; color: #FFF;}
.experience { background: url(img/belt/check.png) center repeat;}
.experience h2 { padding: 0.5em; text-align: center; background: #FFA600; font-size: clamp(3.2rem,4.0vw,6.4rem) !important; color: #FFF;}
.experience-contents { width: 92%; max-width: 1100px; margin: 0 auto; padding: 80px 0;}
.experience .col { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 30px;}
.experience .shop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 1em; background: #FFF;}
.mapbtn a { padding: 0.2em 30px 0.2em 40px; background: #45A829 url(img/belt/pin.svg) 16px center no-repeat; background-size: auto 1em; color: #FFF;}
.experience .wp-block-buttons { flex-direction: row; justify-content: center; margin-top: 40px;}
.experience .wp-block-button { width: 100%;}
.experience .wp-block-button a { min-height: 90px; font-size: clamp(2.2rem,2.4vw,3.2rem); white-space: nowrap;}
#cause { margin-top: 50px; padding-top: 0; background: url(img/common/tree_l2.webp) right top 50% no-repeat, url(img/common/tree_r2.webp) left bottom -10% no-repeat, #FFF; background-size: 30% auto, 30% auto, auto; z-index: 10;}
#cause::before { content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%,-100px); width: 300vw; height: 800px; background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(143, 143, 143, 1) 100%); border-radius: 50%; z-index: -3;}
.cause-list { display: grid; grid-template-columns: 1fr 1fr; gap: 30px;}
.cause-list li { position: relative; display: grid; gap: 20px 0; justify-content: space-between; background: #FFF; border: 3px solid #FFA600; border-radius: 15px;}
.cause-list li .contents { padding: 1em 1.5em;}
.cause-list li p { line-height: 1.2;}
.cause-list li figure { margin-top: auto; text-align: center; border-radius: 0 0 8px 8px; overflow: hidden;}
.cause-list li.cause03 { grid-column: 1 / 3; grid-template-columns: 1fr 1fr;}
.cause-list li.cause03::after { content: ''; position: absolute; bottom: -37px; left: 50%; transform: translateX(-50%); width: 39px; height: 51px; background: url(img/belt/arrow.svg) center no-repeat; z-index: 10;}
.cause-list li.cause03 figure { border-radius: 0 8px 8px 0;}
.cause-list li.cause04 figure { border-radius: 0;}
.cause-list li.cause04 { grid-column: 1 / 3;}
#cause .solution h3::after { content: ''; display: block; width: 39px; height: 51px; margin: 24px auto; background: url(img/belt/arrow.svg) center no-repeat; z-index: 10;}
.solution h3 .fs64 { font-size: clamp(3.2rem,4.0vw,6.4rem) !important;}
.bubble span { position: relative; display: inline-block; padding: 0.2em 1em; background: #FFA600; border-radius: 40px; color: #FFF;}
.bubble span::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width:0; height:0; border-style:solid; border-width: 16px 8px 0 8px; border-color: #FFA600 transparent transparent transparent;}
.bubble.green span { background: #0A9F49; border-radius: 40px; color: #FFF;}
.bubble.green span::after { border-color: #0A9F49 transparent transparent transparent;}
#use { margin-top: -80px; background: url(img/belt/use_bg.webp) center top no-repeat; background-size: 100% auto; z-index: 10;}
#use.alt { background-image: url(img/pharmacy/use_bg.webp);}
#use.alt .use li .num { background: linear-gradient(120deg,rgba(69, 168, 41, 1) 0%, rgba(10, 159, 73, 1) 100%);}
.use { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 40px;}
.use li { position: relative; height: auto; background: #FFF; overflow: hidden;}
.use li .num { display: flex; justify-content: center; align-items: flex-end; width: 130px; height: 130px; margin: -80px auto 0; background: #FFA600; border-radius: 50%; font-size: 2.4rem; font-weight: 700; color: #FFF;}
.use li h3 { margin: 16px 0; padding: 0 1em;}
.use li p { margin: 16px 0; padding: 0 1.5em;}
#voice.alt .voice li figcaption { background-color: #FFA600;}
#voice.alt .voice li p { background-image: repeating-linear-gradient(90deg, #FFA600, #FFA600 10px, transparent 10px, transparent 20px);}
.voice h2 { display: flex; justify-content: center; align-items: center; gap: 16px; text-align: center; line-height: 1;}
.voice h2::before, .voice h2::after { content: ''; width: 1em; height: 2em; background: url(img/belt/voice.svg) center no-repeat; background-size: contain;}
.voice h2::after { transform: scaleX(-1);}
.voice ul { display: grid; gap: 30px;}
.voice li { position: relative; background-color: #FFF; border-radius: 15px; overflow: hidden;}
.voice li .contents { position: relative; width: 55%; padding: 1em 2em; z-index: 10;}
.voice li figure { position: absolute; top: 0; right: 0; width: 55%; height: 100%;}
.voice li figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-position: left center; object-fit: cover;}
.voice li figcaption { position: absolute; bottom: 20px; right: 40px; display: flex; justify-content: center; align-items: center; width: 120px; height: 120px; text-align: center; background: #45A829; border-radius: 50%; font-size: 2.8rem; font-weight: 700; line-height: 1.2; color: #FFF;}
.voice li:nth-child(2) .contents { margin-left: auto;}
.voice li:nth-child(2) figure { right: auto; left: 0;}
.voice li:nth-child(2) figure img { object-position: right center;}
.voice li:nth-child(2) figcaption { right: 100px;}
.voice li p { padding-top: 24px; background-image: repeating-linear-gradient(90deg, #45a829, #45a829 10px, transparent 10px, transparent 20px); background-position: left top; background-repeat: repeat-x; background-size: 100% 3px;}
#chosen { margin-top: 40px; background: #FFA600; z-index: 10;}
#chosen::before { content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); width: 120vw; height: 160px; background: #FFA600; border-radius: 50%; z-index: -3;}
#chosen section { padding: 100px 0; background: #FFF; border-radius: 15px;}
#chosen section::after { content: ''; position: absolute; inset: 10px; border: 3px solid #FFA600; border-radius: 10px; pointer-events: none;}
#chosen h2 { width: 80%; margin-left: auto; margin-right: auto;}
#chosen.alt { background-color: #0A9F49;}
#chosen.alt::before { background-color: #0A9F49;}
#chosen.alt section::after { border-color: #0A9F49;}
#chosen.alt .chosen-list h3 span { background-color: #FFA600;}
#chosen.alt .chosen-list h3 span::before { border-color: #FFA600;}
.chosen-list { display: grid; gap: 100px; width: 88%; max-width: 1100px; margin: 0 auto;}
.chosen-list li { display: flex;}
.chosen-list figure { width: 47%;}
.chosen-list li:nth-child(odd) figure { order: 1;}
.chosen-list .contents { position: relative; flex: 1;}
.chosen-list .num { position: absolute; top: -80px; right: -2%; width: 50%; text-align: right;}
.chosen-list h3 { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; line-height: 1.2;}
.chosen-list h3 span { position: relative; display: inline-block; padding: 0.2em 0.5em; background: #45A829; border-radius: 10px; color: #FFF;}
.chosen-list h3 span::before { content: ''; position: absolute; top: 6px; left: 6px; display: inline-block; width: 100%; height: 100%; border: 3px solid #45A829; border-radius: 10px;}
.item-list { display: grid; gap: 30px;}
.item-list li { display: grid; grid-template-columns: 47% 1fr; background: #FFF;}
.item-list .catch { grid-column: 1 / 3; padding: 0.2em; text-align: center; background: #0A9F49; font-size: clamp(3rem,4.0vw,6.4rem) !important; line-height: 1.4; color: #FFF;}
.item-list .contents { padding: 1em 2em; text-align: center;}
.item-list h3 { line-height: 1.4;}
.price { position: relative; display: inline-block; line-height: 1.4; white-space: nowrap;}
.price .tax { position: absolute; top: 0; right: -1em; font-size: clamp(1.4rem,2.2vw,2.8rem) !important;}
#flow { margin-top: -80px; padding-bottom: 40px; background: url(img/belt/flow_bg.webp) center top no-repeat; background-size: 100% auto; z-index: 10;}
#flow.alt { background-image: url(img/pharmacy/flow_bg.webp);}
#flow2 .flow-list li { border-radius: 0;}
.flow-list li.alt { border-color: #0A9F49;}
.flow-list li.alt2 { border-color: #45A829;}
.flow-list li.alt:not(:first-child)::before, .flow-col::before { border-color: #0A9F49 transparent transparent transparent !important;}
.flow-list li.alt2:not(:first-child)::before { border-color: #45A829 transparent transparent transparent;}
.flow-list { display: grid; gap: 60px;}
.flow-list li { position: relative; display: grid; grid-template-columns: 20% 1fr; align-items: center; gap: 40px; padding: 2em; background: #FFF; border: 3px solid #FFA600; border-radius: 15px;}
.flow-list li:not(:first-child)::before, .flow-col::before { content: ''; position: absolute; top: -46px; left: 50%; transform: translateX(-50%); width:0; height:0; border-style:solid; border-width: 22px 25px 0 25px; border-color: #FFA600 transparent transparent transparent;}
.flow-list figure { text-align: center;}
.flow-list .column { padding-right: 40%;}
.flow-list .abs { position: absolute; top: 0; right: 0; width: 40%; height: 100%;}
.flow-list .abs img { position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.flow-col { position: relative; display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 40px 20px; margin-top: 60px;}
.flow-col > .contents > h3 { padding: 1em; text-align: center; background: #FFA600; color: #FFF;}
.flow-col > .contents > h3.alt2 { background: #45A829;}

#about .swiper-slide { display: flex; align-items: center; height: auto;}
#business { padding-top: 0; background: linear-gradient(0deg,rgba(255, 243, 226, 1) 0%, rgba(255, 243, 226, 1) 30%, rgba(255, 255, 255, 1) 100%);}
#message { background: url(img/top/mark.svg) left bottom no-repeat; background-size: 27% auto;}
#message .col { display: grid; grid-template-columns: 40% 1fr; gap: 40px 80px;}
#history { background: url(img/belt/dot.svg) left 95% bottom 5% no-repeat, url(img/belt/dot.svg) right 95% top 5% no-repeat, #F4FDF1; background-size: 26% auto;}
.history { display: grid; grid-template-columns: auto 1fr;}
.history dt { position: relative; margin-right: 60px; padding: 0 80px 32px 0; text-align: right; font-family: "Zen Maru Gothic", sans-serif; font-size: clamp(4.2rem,7.2vw,9.6rem); font-weight: 700; line-height: 1; color: #B1E6C8; white-space: nowrap;}
.history dt::after { content: ''; position: absolute; top: 0.5em; right: 0; width: 14px; height: 14px; background: #0A9F49; border-radius: 50%; z-index: 10;}
.history dt::before { content: ''; position: absolute; top: 0.5em; right: 5px; width: 3px; height: 100%; background:#0A9F49;}
.history dd { padding: 32px 0; font-size: clamp(1.8rem,2.0vw,2.4rem);}
#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: 240px; margin: 0 24px; padding: 0.6em 2em; text-align: center; background: #FFA600 url(img/common/arrow.svg) right 24px center no-repeat; border-radius: 64px; font-size: clamp(1.6rem,2.0vw,2.4rem); font-weight: 700; color: #FFF !important;}
.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-size: clamp(1.5rem,1.7vw,1.8rem);}
.cat { display: flex; flex-wrap: wrap; gap: 8px; margin: 0;}
.cat li a { display: inline-block; padding: 8px 1em; text-align: center; background: #45A829; border-radius: 10px; font-size: clamp(1.8rem,2.0vw,2.4rem); line-height: 1; color: #FFF;}
.cat li a.blog { background: #FFA600;}
.cat li a.column { background: #0A9F49;}
.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 { margin-bottom: 100px;}
.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%; height: 100%; padding: 16px 48px; background-position: right 24px center !important; background-image: url(img/common/down.svg) !important; background-repeat: no-repeat !important; line-height: 1.4; white-space: nowrap;}

.tel { width: 100%; max-width: 812px; margin: 0 auto; padding: 1em 0.5em; text-align: center; background: #45A829; border: 3px solid #FFF; border-radius: 10px;}
.tel a { display: inline-block; padding-left: 1.5em; background: url(img/common/tel_circle.svg) left center no-repeat; background-size: auto 1em; font-weight: 700; color: #FFF; white-space: nowrap;}
.tel a p { white-space: nowrap;}
.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 { display: flex; justify-content: space-between; align-items: center; 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: #E6E6E6; border: none; border-radius: 10px; vertical-align: middle; color: #1F1F1F;}
#form .form input:not([type="submit"]) { max-width: 350px;}
.form textarea:read-only, .form input[type="text"]:read-only { background: #F4F4F4!important;}
.form select { padding: 12px 48px 12px 12px; background: #EFEFEF 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: #EFEFEF; border: none; border-radius: 3px; color: #1F1F1F;}
.form label { display: inline-block;}
.form input[type="checkbox"] { display: none;}
.form input[type="checkbox"] + span { position: relative; display: inline-block; padding: 16px 0 16px 40px; line-height: 1.4; 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: #FFA600;}
.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: #FFA600; border-radius: 50%;}
.form ::-webkit-input-placeholder { font-weight: 400; color: #A4A7AF;}
.form ::-moz-placeholder { font-weight: 400; color: #A4A7AF;}
.form :-ms-input-placeholder { font-weight: 400; color: #A4A7AF;}
.form .inputTextShort { width: 75% !important;}
.form .inputTextShortest { width: 50% !important;}
.must { margin-left: 8px; padding: 1px 6px; background: #FF383C; font-size: 1.2rem; color: #FFF; white-space: nowrap;}
.any { margin-left: 8px; padding: 1px 6px; 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; margin: 24px auto 0; text-align: center;}
.submit input[type="submit"] { width: 100%; max-width: 350px; min-height: 60px; padding: 0.5em 1em; background: #FFA600 url(img/common/arrow.svg) right 24px center no-repeat; border-radius: 40px; font-size: clamp(1.8rem,2vw,2rem); font-weight: 700; color: #FFF; transition: .2s ease-out;}
.submit input[type="button"] { width: 100%; max-width: 350px; min-height: 60px; padding: 0.5em 1em; background: #1F1F1F url(img/common/arrow_re.svg) 24px center no-repeat; border-radius: 40px; font-size: clamp(1.8rem,2vw,2rem); font-weight: 700; color: #FFF; transition: .2s ease-out;}
.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-list-item { margin: 0;}
.wpcf7-spinner { position: absolute; top: 100%; left: 50%; transform: translate(-50%,16px);}
.form.alt { display: flex; flex-direction: column; align-items: center; margin-top: 0; padding: 3em 1.5em; background: #0A9F49; border-radius: 15px; color: #FFF;}
.form.alt a { color: #FFF;}
.form.alt input:not([type="submit"]) { background-color: #FFF;}
.form .fs52 { font-size: clamp(2.8rem,3.4vw,5.2rem) !important;}
.form .fs28 { font-size: clamp(1.2rem,2.2vw,2.8rem) !important;}
.form p { font-size: clamp(1.4rem,1.8vw,1.8rem) !important;}
.form dl + p { display: flex; justify-content: center; text-align: left;}
.form dl + p .wpcf7-list-item { text-align: left;}
#faq, .faq-title { background: #F4FDF1;}
#faq h3 { display: inline-block; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;}






@media only screen and (max-width: 1000px){
article { padding: 50px 0 100px;}
section + section { margin-top: 50px;}
.title { margin-bottom: 50px;}
.wp-block-buttons { justify-content: center !important; margin-top: 50px;}
.wp-block-button { width: 100%; max-width: 320px;}
.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 { display: block;}
.pc { display: none;}


/*TOP*/
.home #main::after { display: none;}
.marquee img { height: 100px;}
#mv { height: auto; padding-bottom: 40vw;}
#mv section { padding: 0 4%; background-position: center top, left -10vw bottom 35vw; background-size: 100% auto, 150% auto;}
#mv ul { grid-template-columns: 1fr;}
.scroll { display: none;}
.banner { gap: 20px;}
#philosophy { padding: 50px 0 80vw;}
#philosophy .contents { width: auto;}
#philosophy .contents::before { top: -50px; right: -15%; width: 20%;}
#philosophy .contents::after { width: 34%;}
#philosophy h3 { white-space: normal;}
.philosophy-visual { top: auto; bottom: -80vw; gap: 5px; width: 80vw; height: 85vw;}
.philosophy-visual::after { top: 50%; width: 40%;}
#service .service-list::before { left: 90%; width: 35%;}
#service .service-list::after { right: 90%; width: 40%;}
#reason, #form { background-position: left top 50px, right bottom; background-size: 40% auto, 40% auto, auto;}
.reason-list li { grid-template-columns: 1fr; gap: 24px;}
.reason-list li figcaption { left: 5%; width: 20%;}
.reason-list li:nth-child(even) figure { order: -1;}
.reason-list li:nth-child(even) figcaption { left: auto; right: 5%;}
#worries { padding-bottom: 50px;}
.worries { width: 86%;}
#worries .form::before { width: 80%;}
#worries .form::after { width: 30%;}
#company { padding-top: 50vw; padding-bottom: 50vw; background-size: 40vw auto, 35vw auto, 40vw auto, 40vw auto, auto;}
.copy-slides { position: relative; margin-top: -20px; z-index: 10;}
.copy-slides .marquee img { height: 200px;}
ul.list { grid-template-columns: repeat(auto-fill,minmax(260px,1fr));}
#blog .swiper-scrollbar { position: relative; bottom: 0; width: 100%; margin-top: 40px;}
#blog .wp-block-buttons { align-items: center;}
.faq { position: relative;}
.faq::before { width: 30%; background-size: contain;}
.faq::after { width: 30%; background-size: contain;}
.faq dt { margin-top: 20px; padding: 24px 80px; background-position: right 16px center;}
.faq dt::before { left: 24px;}
.faq dd { padding: 0 24px 24px 80px;}
.faq dd::before { left: 24px;}


/*PAGE*/
#lptitle .breadcrumb { bottom: -50px;}
#lptitle { height: calc(100svh - 95px);}
#lptitle h1 { width: 96%; text-align: center;}
#lptitle p { width: 96%;}
#lptitle.title-belt { background: url(img/belt/mv_bg_sp.webp) center bottom no-repeat, url(img/belt/mv_sp.webp) center no-repeat; background-size: 100% auto, cover;}
#lptitle.title-belt h1 { top: 2vh; left: 2%;}
#lptitle.title-pharmacy { background: url(img/pharmacy/mv_bg_sp.webp) center bottom no-repeat, url(img/pharmacy/mv_sp.webp) center no-repeat; background-size: 100% auto, cover;}
#lptitle.title-pharmacy h1 { top: 2vh; right: auto; left: 2%; text-align: center;}

#title figure img { max-width: 130%;}
.breadcrumb { bottom: 0; font-size: 1.2rem;}
#problem { padding-top: 100px;}
#solution { padding-top: 0; background-size: 40% auto;}
.solution h2 { position: relative; top: 0; left: 0; transform: translate(0,0); margin-top: -80px; z-index: 10;}
.solution li figure { width: 70%; margin: 0 auto;}
.experience .wp-block-buttons { flex-direction: column; margin-top: 20px;}
.experience .wp-block-button a { width: 100%;}
.experience .wp-block-button a[href^="tel"] { flex-direction: column; gap: 0;}
.experience .wp-block-button { max-width: 100%;}
.cause-list { grid-template-columns: 1fr;}
.cause-list li { position: relative; display: grid; gap: 20px 0; justify-content: space-between; background: #FFF; border: 3px solid #FFA600; border-radius: 15px;}
.cause-list li.cause03 { grid-column: auto; grid-template-columns: 1fr;}
.cause-list li.cause03 figure { border-radius: 0 0 8px 8px;}
.cause-list li.cause04 figure { border-radius: 0;}
.cause-list li.cause04 { grid-column: auto;}
.voice li .contents { position: relative; width: 100%; padding: 1em 2em; z-index: 10;}
.voice li figure { position: relative; width: 100%; height: auto;}
.voice li figure img { position: relative; object-fit: initial; width: 100%; height: auto;}
.voice li figcaption { bottom: 20px; right: 20px !important; width: 80px; height: 80px; font-size: 2.2rem;}
#chosen section { padding: 50px 0;}
.chosen-list { gap: 50px;}
.chosen-list li { flex-direction: column;}
.chosen-list figure { width: 70%; margin: 0 auto;}
.chosen-list li:nth-child(odd) figure { order: -1;}
.item-list li { grid-template-columns: 1fr;}
.item-list .catch { grid-column: auto;}
#flow { margin-top: -40px;}
.flow-list li { grid-template-columns: 1fr;}
.flow-list .column { padding-right: 2em;}
.flow-list .abs { position: relative; width: auto; height: auto;}
.flow-list .abs img { position: relative;}

#message { background-size: 40% auto;}
#message .col { grid-template-columns: 1fr;}
.history dt { margin-right: 20px; padding-right: 40px;}
.history dd { padding-top: 8px;}
#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-bottom: 50px;}
.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;}
.form dl { grid-template-columns: 1fr; gap: 16px;}
.submit { flex-direction: column;}
.wpcf7-list-item { display: block;}
.confirm dt { padding: 0; border-bottom: none;}
.confirm dd { padding: 0 0 24px;}
}





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