@charset "UTF-8";
/*
Theme Name: roofcover
Author: youplan
*/

@import url('https://fonts.googleapis.com/css2?family=Akshar:wght@500&family=Zen+Kaku+Gothic+Antique:wght@500;700&display=swap');

/* reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light;tab-size:2;scrollbar-gutter:stable}:where(html:has(dialog:modal[open])){overflow:clip}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(dialog){border:none;background:none;inset:unset;max-width:unset;max-height:unset}:where(dialog:not([open])){display:none!important}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

/* --------------------
   COMMON
-------------------- */
a { transition: .25s all;}
:where(html) { color-scheme: #fff;}
html {
  background: #fff;
  scroll-behavior: smooth;
  font-size: 100%;
  overflow-x: hidden;}
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.02rem;
  color: #382712;
  font-size: 100%;
  background: #FFF9EC;
  -webkit-font-smoothing: antialiased;}
a {
  color:inherit;
  display: block;
  text-decoration:none;}
img { max-width: 100%;}

@media screen and (max-width: 480px){
  body { letter-spacing: normal;}
}

/* text */
p { font-size: 1rem; line-height: 1.8;}

.txs-12 { font-size: 0.75rem;}
.txs-14 { font-size: 0.875rem;}
.txs-16 { font-size: 1rem;}
.txs-18 { font-size: 1.125rem;}
.txs-20 { font-size: 1.25rem;}
.txs-24 { font-size: 1.5rem;}
.txs-28 { font-size: 1.75rem;}
.txs-30 { font-size: 2rem;}
.txs-36 { font-size: 2.25rem;}
.txs-40 { font-size: 2.5rem;}
.txs-48 { font-size: 3rem;}
.txs-56 { font-size: 3.5rem;}
.txs-64 { font-size: 4rem;}

.l-1 { line-height: 1;}
.l-15 { line-height: 1.5;}
.l-18 { line-height: 1.8;}

.w-m { font-weight: 500;}
.w-b { font-weight: 700;}

.en {
  font-family: "Akshar", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;}

.center { text-align: center;}
.right { text-align: right;}
.left { text-align: left;}

.clor01 { color:#EB6120;}

@media screen and (max-width: 768px){
  .txs-12 { font-size: 0.75rem;}
  .txs-14 { font-size: 0.875rem;}
  .txs-16 { font-size: 1rem;}
  .txs-18 { font-size: 1rem;}
  .txs-20 { font-size: 1.25rem;}
  .txs-24 { font-size: 1.125rem;}
  .txs-28 { font-size: 1.25rem;}
  .txs-30 { font-size: 1.5rem;}
  .txs-36 { font-size: 1.5rem;}
  .txs-40 { font-size: 1.5rem;}
  .txs-48 { font-size: 1.75rem;}
  .txs-56 { font-size: 2rem;}
  .txs-64 { font-size: 2rem;}}

/* --------------------
   ALL
-------------------- */
.wrap {
  margin: 0 auto;
  max-width: 1280px;
  width: 100%;}
.contents {
  padding: 0 100px;
  position: relative;
  margin: 0 auto;
  width: 100%;}
.pc { display: block;}
.pd { display: none;}
.sp { display: none;}

@media screen and (max-width: 1280px){
  body { width: 100%; overflow: hidden;}
  .contents { padding: 0 40px;}}
@media screen and (max-width: 768px){
  .contents { padding: 0 30px;}
  .pc { display: none;}
  .pd { display: block;}
  .sp { display: none;}}
@media screen and (max-width: 480px){  .pc { display: none;}
  .pd { display: block;}
  .sp { display: block;}}

/* --------------------
   PARTS
-------------------- */
a.more {
  position: relative;
  margin: 60px auto;
  display: block;
  height: 80px;
  max-width: 360px;
  background: #EB6120;
  border-radius: 9999px;
  font-size: 18px;
  font-weight: bold;
  line-height: 80px;
  color: #fff;
  text-align: center;}
a.more::after {
  position: absolute;
  right: 26px;
  top: 35px;
  content: "";
  background: url("asset/images/arrow2.png") no-repeat center center;
  width: 10px;
  height: 8px;
  background-size: 8px 10px;
  display: block;}
@media screen and (max-width: 768px){
  a.more { width:90%; margin: 30px auto 0;font-size: 16px;}}

/* --------------------
   MOTION
-------------------- */
.js-fade.scroll {
	opacity: 1;
	animation-name:blurAnime;
	animation-duration:0.75s;
	animation-fill-mode:forwards;}
@keyframes blurAnime{
  0% {
    transform: translateY(50px);
	  opacity: 0;}
  50% { opacity: 0.1;}
  100% {
    transform: translateY(0);
	  opacity: 1;}}
.js-fade { opacity: 0;transform: translateY(50px);}

/* --------------------
   LAYOUT
-------------------- */
#spvar { display: none;}

@media screen and (max-width: 1080px){
#spvar {display: block;}
#spvar .spvar_nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-radius: 0 0 20px 20px;
  font-size: 18px;
  height: 60px;
  text-align: center;
  line-height: 58px;
  box-shadow: 0 2px 6px #E8DDC699;
  z-index: 2;}
#spvar .spvar_nav.spvar_close {
  background: #382712;
  color: #FFF9EC;}
#spvar .spvar_nav img {
  position: relative;
  top: 1px;
  display: inline-block;
  margin-right: 16px;}
#spvar .spvar_open::after,#spvar .spvar_close::after{
  position: absolute;
  content: "";
  display: block;
  right: 16px;
  top: 50%;
  height: 26px;
  width: 26px;
  margin-top: -13px;
  background: url("asset/images/icon-menu-arrow.png") no-repeat;
  background-size: contain;}
#spvar .spvar_close::after{ transform: rotate(180deg);}
#spvar .circle-right {
  display: inline-block;
  vertical-align:text-bottom;
  line-height: 1;
  position: relative;
  width: 26px;
  height: 26px;
  background: #E8DDC6;
  border-radius: 50%;
  box-sizing: content-box;}
#spvar .circle-right::before {
  content: '';
  color: #fff;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 4px 6px;
  border-left-color: currentColor;
  border-right: 0;
  transform: translateX(15%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;}
#mainnav {
  padding-top: 60px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #FFF9EC;
  z-index: 4;
  display: none;}
#mainnav .menu {
  padding: 0 30px 40px;
  overflow-y: scroll;
  height: 100%;}
#mainnav.active { display: block;}
body.active, html.active { overflow-y: hidden;}
#mainnav .menu ul a {
  padding: 8px 0;
  font-weight: bold;
  font-size: 20px;}
#mainnav .menu ul a span { margin-right: 14px;}
#mainnav .menu a.more {
  font-size: 18px;
  height: 50px;
  margin: 0 auto 20px;
  line-height: 50px;
  width: 100%;}
#mainnav .menu a.more::after { top:22px;}  
#mainnav .menu .tel {
  margin-top: 10px;
  line-height: 1;
  font-size: 40px;
  text-align: center;}
#mainnav .menu .time {
  margin-bottom: 10px;
  font-size: 18px;
  text-align: center;}
#mainnav .sns {
  justify-content: center;
  gap:8px;
  border-top: 1px solid #E8DDC6;
  margin-top: 20px;
  padding-top: 20px;
  display: flex;
  align-items: center;}
#mainnav .sns .txs-18  {
  font-weight: bold;
  padding-right: 8px;
  font-size: 18px;}}

/* --------------------
   HEADER
-------------------- */
#header p.copy { line-height: 50px;}
#hd_bar {
  position: relative;
  padding: 20px 20px 0;
  gap: 20px;
  display: flex;}
#hd_bar h2 span {
  padding-right: 8px;
  vertical-align: bottom;}
#hd_bar .company { padding-top: 4px;}
#hd_bar .branch { padding-top: 14px;}
#hd_bar .branch h3 { line-height: 1;}
#hd_bar .branch h3 span + span::before {
  content: "｜";
  display: inline-block;}
#hd_bar .sns {
  align-items: center;
  margin-left: 10px;
  padding: 0 0 0 30px;
  height: 80px;
  gap: 4px;
  display: flex;
  border-left: 1px solid #E8DDC6;}
#hd_bar .sns h4 { padding-right: 8px;}
#hd_bar .tel {
  margin-left:auto;
  padding-top: 4px;}

@media screen and (min-width: 1081px){
  #hd_bar {
    padding: 20px 30px 0;
    background: #fff;
    height: 120px;
    border-radius: 20px;
    box-shadow: 0 3px 0 0 #E8DDC6;}}

@media screen and (max-width: 1400px){
  #hd_bar { margin: 0 15px;}
  #hd_bar .branch h3 {
    padding-left: 16px;
    border-left: 1px solid #E8DDC6;}
  #hd_bar .branch h3 span { display: block; padding: 5px 0;}
  #hd_bar .branch h3 span + span::before { display: none;}}

@media screen and (max-width: 1080px){
  #header { padding-top: 60px;}
  #header .copy { display: none;}
  #hd_bar .tel,#hd_bar .sns { display: none;}}

@media screen and (max-width: 768px){
  #hd_bar {  margin: 0;padding: 20px;}
  #hd_bar .branch h3 { padding-bottom: 4px;}
  #hd_bar .company h2 { font-size: 18px;}
  #hd_bar .company h2 span { font-size: 12px;padding-right: 5px;}
  #hd_bar .branch h3{ font-size: 16px;}
  #hd_bar .branch h3 span { display: block; padding: 2px 0;}}

@media screen and (max-width: 480px){
  #hd_bar .company h1 { max-width: 170px;}
  #hd_bar .branch h3 { padding-left: 14px;}
  #hd_bar {gap:10px;}}

#spfixedmenu { display: none;}
@media screen and (max-width: 480px){
#spfixedmenu {
  position: fixed;
  z-index: 3;
  bottom: 0;
  height: 10vw;
  align-items: flex-end;
  background: #fff;
  display: flex;
  width: 100%;}}

/* --------------------
   FOOTER
-------------------- */
#footer {
  margin-top: 60px;
  background: #fff;
  text-align: center;
  height: 80px;}
#footer p { line-height: 80px;}
#footer .label {
  position: absolute;
  top: -90px;
  margin-left: -57px;
  left: 50%;}

/* --------------------
   HOVER
-------------------- */
@media screen and (min-width: 480px){
  a:hover{ opacity: 0.6;}}