@charset 'utf-8';
/*
Theme Name: prof-s
*/
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Noto+Sans+JP:wght@100..900&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}
figure { margin: 0;}
a { color: #222; transition: all .2s ease-out; text-decoration: none;}
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%; -webkit-overflow-scrolling: touch; height: 100%; font-family: "Noto Sans JP", serif; font-optical-sizing: auto; font-size: clamp(1.5rem,1.8vw,1.8rem); line-height: 1.4; color: #222; }
#container { width: 100%; overflow: hidden;}
i, .en, .tel a { vertical-align: baseline; font-family: "Figtree", sans-serif; font-optical-sizing: auto; font-style: normal;}


/*HEADER*/
/*******************************************************************/
#header { position: relative;}
#logo a { display: flex; align-items: center; gap: 24px; min-height: 64px; margin: 0 8px; font-size: clamp(1.1rem,1.2vw,1.2rem); font-weight: 700;}
.contact { display: flex; align-items: center; gap: 16px;}
.contact dt { background: linear-gradient( transparent 60%, #FFEC5D 60%); font-size: 1.4rem; font-weight: 700;}
.contact .tel a { display: block; padding-left: 40px; background: url(../img/freedial.svg) left center no-repeat; font-size: 3.3rem; font-weight: 700; line-height: 0.6; color: #C32323;}
.contact .tel span { font-size: 1.2rem; font-weight: 700;}
.contact .tel span i { font-size: 1.4rem; font-weight: 600;}
@media only screen and (min-width: 1000px){
	#open { display: none;}
	#nav { display: flex; align-items: center; min-height: 54px; background: #FCFFEA; border-top: 1px solid #009763;}
	#nav .menu { display: flex; align-items: center; width: 92%; max-width: 1000px; margin: 0 auto; border-left: 1px solid #BCC7AD;}
	#nav .menu li { flex: 1;}
	#nav .menu li a { display: flex; justify-content: center; align-items: center; min-height: 30px; border-right: 1px solid #BCC7AD; font-size: 1.6rem; font-weight: 700;}
	#nav .contact { position: absolute; top: 5px; right: 8px;}
	#nav .contact .btn a { max-width: 178px;}
	.spbtn { display: none;}
}
@media only screen and (max-width: 999px){
	#header { display: flex; align-items: center; gap: 5px;}
	#logo a { gap: 8px;}
	#logo img { max-width: 126px;}
	#nav { pointer-events: none; opacity: 0; position: fixed; top: 0; right: 0; transform: translateX(100%); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; width: 100%; height: 100svh; background: #FCFFEA; z-index: 1000; transition: .4s cubic-bezier(.645,.045,.355,1); overflow-y: auto; overscroll-behavior: contain;}
	#nav .menu { display: grid; gap: 40px; width: 100%; padding-bottom: 80px; background: url(../img/deco_sp.svg) center bottom no-repeat;}
	#nav .menu li { text-align: center; font-size: 2rem; font-weight: 500;}
	#open { pointer-events: auto; position: fixed; top: 10px; right: 8px; width: 44px; height: 44px; margin-right: 8px; background: #009763; border-radius: 5px; box-shadow: 0 2px 0 #006A46; cursor: pointer; z-index: 2000;}
	#open span { position: absolute; left: 12px; display: block; width: 20px; height: 2px; background: #FFEC5D; border-radius: 2px; transition: .2s linear;}
	#open span:nth-child(1) { top: 13px;}
	#open span:nth-child(2) { top: 21px;}
	#open span:nth-child(3) { top: 29px;}
	.open #nav { pointer-events: auto; transform: translateY(0); opacity: 1; transition: opacity .4s cubic-bezier(.23,1,.32,1) .1s, transform 1s cubic-bezier(.23,1,.32,1) .0s;}
	.open #open span:nth-child(1) { top: 21px; transform: rotate(135deg);}
	.open #open span:nth-child(2) { width: 0;}
	.open #open span:nth-child(3) { top: 21px; transform: rotate(-135deg);}
	.contact { flex-direction: column; display: flex; align-items: center;}
	.contact dt { font-size: 1.8rem;}
	.contact .tel span { display: block; margin-top: 0.5em; text-align: center;}
	#nav .contact .btn a { font-size: 2.4rem;}
	.spbtn { margin: 0 65px 0 auto;}
	.spbtn a { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; text-align: center; background: #009763; border-radius: 5px; box-shadow: 0 2px 0 #006A46; font-size: 1.2rem; font-weight: 700; color: #FFEC5D; z-index: 2000;}
}


/*FOOTER*/
/*******************************************************************/
#footer { border-top: 3px solid #009763;}
.sitemap { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 92%; max-width: 1000px; margin: 0 auto; padding: 16px 0;}
.sitemap .logo span { display: block; margin-top: 0.5em; font-size: 1.2rem; font-weight: 700;}
.sitemap ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 24px; font-size: 1.5rem;}
.copyright { padding: 16px; text-align: center; background: #FAFAFA; font-size: clamp(1.3rem,1.5vw,1.5rem);}
#floating { display: none;}
@media only screen and (max-width: 999px){
	.sitemap { justify-content: center;}
	.sitemap ul { display: none;}
	.copyright { padding-bottom: 96px;}
	#floating { position: fixed; bottom: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; z-index: 500;}
	#floating .free { width: 100%; padding: 4px; background: #F9FFD8; text-align: center;}
	#floating a { flex: 1; display: flex; justify-content: center; align-items: center; width: 100%; min-height: 70px; padding: 0 8px;}
	#floating a.f-tel { background: #009763;}
	#floating a.f-contact { background: #FF821A;}
}


/*CONTENTS*/
/*******************************************************************/
article { position: relative; clear: both; padding: 80px 0;}
article header { width: 92%; max-width: 1000px; margin: 0 auto; padding-bottom: 40px; text-align: center;}
article header h2 { font-size: clamp(3.6rem,6vw,6rem); font-weight: 900; color: #008E5D;}
article header i { font-size: clamp(1.6rem,2vw,2rem); font-weight: 700; color: #442E00; white-space: nowrap;}
section { width: 92%; max-width: 1000px; margin: 0 auto;}
section + section { margin-top: 60px;}
.narrow { max-width: 880px;}
h3 { margin-bottom: 0.5em;}
h4 { margin-bottom: 0.5em;}
h5 { margin-bottom: 0.5em;}
p { line-height: 1.8;}
p:not(:last-child) { margin-bottom: 1em;}
figure { position: relative;}
figcaption { display: block; margin-top: 8px; text-align: center;}
.center { text-align: center!important;}
.right { text-align: right!important;}
.left { text-align: left!important;}
.clear { clear: both;}
.btn a { display: flex; justify-content: center; align-items: center; gap: 16px; width: 100%; padding: 12px 24px; text-align: center; background: #009763; border-radius: 5px; font-weight: 900; color: #FFF; box-shadow: 0 4px 0 #006A46; white-space: nowrap;}
.btn a:hover { opacity: 1; transform: translateY(3px); box-shadow: 0 1px 0 #006A46;}
.btn a.quote { color: #FFEC5D;}
.btn a.quote::after { content: ''; display: inline-block; width: 16px; min-width: 16px; height: 22px; background: url(../img/calculator.svg) center no-repeat;}
.btn a.line { background-color: #00CC30;}
.underline { text-decoration: underline;}
.red { color: #C32323;}
.green { color: #318165;}
.fs12 { font-size: clamp(1rem,1.2vw,1.2rem);}
.fs20 { font-size: clamp(1.8rem,2vw,2rem);}
.fs24 { font-size: clamp(1.8rem,2.4vw,2.4rem);}
.fs28 { font-size: clamp(2.2rem,2.8vw,2.8rem);}
.fs32 { font-size: clamp(2.6rem,3.2vw,3.2rem);}
.fs48 { font-size: clamp(3.2rem,4.8vw,4.8rem);}
.fs60 { font-size: clamp(3rem,6vw,6rem);}
.regular { font-weight: 400;}
.bold { font-weight: 700;}
.mt24 { margin-top: 24px;}
.marker { display: inline; background: linear-gradient( transparent 60%, #FFEC5D 60%);}
.sp { display: none;}
.fadeInUp{ animation-name: fadeInUp;}
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0);} to { opacity: 1; transform: translate3d(0, 0, 0);}}
.animated { opacity: 0; animation-duration: 0.7s; animation-delay: 0.2s; animation-fill-mode: both;}

#mv { padding: 0;}

#campaign { padding-bottom: 0;}
#campaign section picture { margin-left: -40px;}

.strengths ul { display: grid; gap: 50px;}
.strengths li { display: grid; grid-template-columns: 45% 1fr; gap: 30px;}
.strengths li .contents { position: relative;}
.strengths li .contents i { position: absolute; top: -0.5em; left: -0.5em; font-size: clamp(10.5rem,14vw,14rem); font-weight: 700; color: #008E5D; opacity: 0.15; z-index: -1;}
.strengths li h3 { display: inline-block; margin: 1em 0; font-size: clamp(2.2rem,3.2vw,3.2rem); font-weight: 900; color: #442E00;}

#service { background: #FCFFEA;}
.service ul { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;}
.service li { background: #FFF; border: 3px solid #008E5D;}
.service li .contents { padding: 16px 24px;}
.service li h3 { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 3em; font-weight: 900;}

@media (min-width: 768px) {
#beforeafter .swiper { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px;}
#beforeafter .swiper-wrapper { display: contents;}
#beforeafter .swiper-slide { width: auto !important;}
#beforeafter .swiper-pagination { display: none;}
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { position: relative; margin-top: 24px;}
.swiper-pagination-bullet-active { background: #318165;}

#area { min-height: 680px; padding-bottom: 160px; background: #F6FBF9 url(../img/area.jpg) center bottom no-repeat; background-size: auto 100%;}
.area p { max-width: 500px;}

.flow ul { display: grid; gap: 50px;}
.flow li { display: grid; grid-template-columns: 28% 1fr; align-items: flex-start; gap: 32px;}
.flow li picture { position: relative;}
.flow li:not(:last-child) picture::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-color: #008e5d transparent transparent transparent; border-width: 30px 28px 0px 28px;}
.flow li h3 { display: flex; align-items: center; gap: 16px;}
.flow li h3 i { display: flex; align-items: center; font-size: clamp(3.5rem,6vw,6rem); color: #FF821A;}
.flow li h3 i span { font-size: clamp(1.2rem,2vw,2rem); writing-mode: vertical-rl;}
.flow li h3 em { font-size: clamp(2.2rem,3.2vw,3.2rem); font-weight: 900;}
.flow li .contact { margin: 1em 0;}
.flow li h5 { font-size: 1.5rem;}

#voice { background: #FCFFEA;}
#voice header { background: url(../img/deco01.svg) left bottom no-repeat, url(../img/deco02.svg) right bottom no-repeat;}
#voice .swiper { height: 820px; padding-bottom: 10px; overflow: visible;}
.voice { display: grid; grid-template-columns: 160px 1fr; gap: 25px; height: 340px; padding: 25px; background: #FFF; border-top: 5px solid #FF821A; overflow: auto; box-shadow: 0 1px 6px rgba(0,0,0,.1);}
.voice p { line-height: 1.4;}

#contact header { background: url(../img/deco03.svg) right bottom no-repeat;}
#form-iframe { height: 2977px;}

#company { padding-top: 0;}
.company { padding: 40px; background: #FCFFEA;}
.company dl { display: grid; grid-template-columns: auto 1fr; gap: 16px 24px;}
.company dt { font-weight: 400; color: #009763;}





@media only screen and (max-width: 999px){
article { padding: 48px 0;}
section + section { margin-top: 48px;}
.btn { width: 100%;}
.btn a { width: 100%; max-width: 640px; margin: 0 auto; font-size: 1.8rem;}
.sp { display: block;}
.pc { display: none!important;}

#campaign section picture { margin-left: 0;}

.strengths li { grid-template-columns: 100%; gap: 0;}
.strengths li figure { margin-left: 14%;}

#service p.center.fs24 { text-align: left !important;}
.service ul { grid-template-columns: 100%;}
.service li { display: grid; grid-template-columns: 42% 1fr;}
.service li figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.service li .contents { padding: 16px;}
.service li h3 { display: inline-block; min-height: initial; text-align: left !important;}

#beforeafter .swiper { overflow: visible;}

#area { min-height: initial; padding-bottom: 80vw; background-image: url(../img/area_sp.jpg); background-size: 100% auto;}

.flow li { position: relative; grid-template-columns: 100%; gap: 8px;}
.flow li:not(:last-child)::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translate(-50%,10px); width: 0; height: 0; border-style: solid; border-color: #008e5d transparent transparent transparent; border-width: 30px 28px 0px 28px;}
.flow li picture { margin: 0 calc(50% - 50vw);}
.flow li picture::after { display: none;}
.flow li .contact { align-items: flex-start; margin: 1em 0;}

#voice header { background-size: 24% auto, 22% auto;}
#voice .swiper { height: auto;}
#voice .swiper-slide { height: auto;}
.voice { grid-template-columns: 100%; align-items: flex-start; gap: 8px; height: calc(100% - 50px);}
.voice figure { align-self: flex-start; text-align: center;}

#contact header { background-size: 24% auto;}

.company { padding: 24px;}
.company dl { grid-template-columns: 100%;}
}





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