@charset "utf-8";
/* =========================================================
   リニューアルページ用リセット #mainWrapper--new 内だけ適用
========================================================= */
#mainWrapper--new{
  font-family: var(--ff-base);
  color: var(--c-black);
}
#mainWrapper--new header{
  font-family: initial;
  color: var(--c-black);
}
#mainWrapper--new h1,#mainWrapper--new h2,#mainWrapper--new h3,#mainWrapper--new h4,#mainWrapper--new h5,#mainWrapper--new h6{
  position: static;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.7;
  background: none;
  border: none;
  z-index: auto;
  color: var(--c-black);
}
#mainWrapper--new h1::before,#mainWrapper--new h1::after,#mainWrapper--new h4::before,#mainWrapper--new h4::after,#mainWrapper--new h5::before{
  content: none;
  display: none;
}
#mainWrapper--new a:hover{
  color: inherit;
}
#mainWrapper--new a:hover img{
  opacity: 1;
  filter: none;
  -ms-filter: none;
  background: none;
}
#mainWrapper--new footer div a,#mainWrapper--new div a{
  display: block;
  text-decoration: inherit;
  text-align: inherit;
}
#mainWrapper--new img{
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* -----CSS関数設定----- */
:root{
  /* color */
  --c-white: #FFFFFF;
  --c-gray-100: #F0F0F0;
	--c-gray-200: #A7A7A7;
	--c-gray-300: #666;
  --c-black: #1D1D1D;
	--c-main-100: #829000;
	--c-main-200: #6C6F3A;
	--c-bgColor-100: #F7F8EC;
	--c-bgColor-200: #ECEFD5;
	--c-bgColor-300: #D0D696;

  /* letter-spacing */
	--ls-default: .1em;

  /* font-family */
	--ff-base: "Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",
"Yu Gothic","YuGothic","Meiryo",sans-serif;
  --ff-ja: "Noto Serif JP","Hiragino Mincho ProN","Hiragino Serif","Yu Mincho","YuMincho","MS PMincho",serif;

  /* font-weight */
	--fw-base: 400;

/* font-size */
	--fz-12: clamp(10px, 1.1vw, 12px);
	--fz-14: clamp(12px, 1.2vw, 14px);
	--fz-16: clamp(13px, 1.5vw, 16px);
	--fz-18: clamp(15px, 1.6vw, 18px);
	--fz-20: clamp(16px, 1.8vw, 20px);
	--fz-22: clamp(18px, 2vw, 22px);
	--fz-26: clamp(20px, 2vw, 26px);
	--fz-28: clamp(22px, 2.5vw, 28px);
	--fz-30: clamp(25px, 3vw, 30px);
	--fz-35: clamp(25px, 3vw, 35px);
	--fz-38: clamp(30px, 3.5vw, 38px);
	--fz-40: clamp(30px, 3.5vw, 40px);
	--fz-44: clamp(30px, 4vw, 44px);
	--fz-50: clamp(30px, 4vw, 50px);

  /* space */
	--spc-10: clamp(5px, 1.1vw, 10px);
	--spc-15: clamp(10px, 1.2vw, 15px);
	--spc-20: clamp(15px, 1.7vw, 20px);
	--spc-25: clamp(15px, 1.7vw, 25px);
	--spc-35: clamp(20px, 2.5vw, 35px);
	--spc-30: clamp(20px, 2.5vw, 30px);
	--spc-40: clamp(30px, 3.5vw, 40px);
	--spc-50: clamp(35px, 4.5vw, 50px);
	--spc-60: clamp(40px, 5vw, 60px);
	--spc-65: clamp(40px, 5.5vw, 65px);
	--spc-75: clamp(55px, 6.5vw, 75px);
	--spc-80: clamp(60px, 7vw, 80px);
	--spc-90: clamp(70px, 8vw, 90px);
	--spc-100: clamp(80px, 9vw, 100px);
	--spc-120: clamp(100px, 11vw, 120px);
}
@media screen and (min-width: 768px){
  :root{
    /* inner-width */
    --inner-w: 90%;
    /* section-space */
    --sec-spc: clamp(80px, 9vw, 100px);
    --sec-spc-half: clamp(50px, 6vw, 70px);
    --sec-spc-quarter: clamp(30px, 3.5vw, 40px);
  }
}
@media screen and (max-width: 767px){
  :root{
    /* inner-width */
    --inner-w: 92%;
    /* section-space */
    --sec-spc: clamp(50px, 6vw, 70px);
    --sec-spc-half: clamp(30px, 3.5vw, 40px);
    --sec-spc-quarter: clamp(20px, 2.2vw, 25px);
  }
}

/* -----リセットCSS----- */
*{margin:0;padding:0;min-height: 0;min-width: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html {height:100%;scroll-behavior: smooth;}
ul li ,ol li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-weight: var(--fw-base);font-size: 100%;margin: 0;}
p{margin: 0;}
strong{font-weight: inherit;}
a:focus, *:focus{ outline:none; }
article, header, footer, aside, figure, figcaption, nav, section,main{ 
  display:block;
}
#mainWrapper--new .imgauto{
	height: auto;
	width: 100%;
	box-sizing: unset;
	line-height: 1rem;
	display: block;
	object-fit: cover;
	object-position: 50% 50%;
}

/* -----共通----- */
body{
	font-family: var(--ff-base);
	font-weight: var(--fw-base);
	font-size: var(--fz-16);
	font-feature-settings: "palt" 1;
	letter-spacing: var(--ls-default);
	line-height: 1.7;
	width:100%;
	color: var(--c-black);
	position:relative;
	z-index: 0;
	overflow-x: clip;
}
#mainWrapper--new a{
	text-decoration: none;
	outline: none;
	word-wrap: break-word;
	color: var(--c-black);
}
#mainWrapper--new img{
	height: auto;
	max-width: 100%;
	box-sizing: unset;
	vertical-align: bottom;
}
#mainWrapper--new button{
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
@media screen and (min-width: 768px){
  #mainWrapper--new .sp{
    display: none;
  }
	#mainWrapper--new a:hover{
		opacity: .7;
	}
}
@media screen and (max-width: 767px){
  #mainWrapper--new .pc{
    display: none;
  }
}

/* =========================================================
   Layout
========================================================= */
@media screen and (min-width: 768px){
  #mainWrapper--new main{
    margin-top: clamp(140px, 15vw, 160px);
  }
}
@media screen and (max-width: 767px){
  #mainWrapper--new main{
    margin-top: clamp(70px, 9vw, 110px);
  }
}
/* inner */
@media screen and (min-width: 768px){
	#mainWrapper--new .l-inner{
		width: 95%;
		max-width: 1200px;
		margin-inline: auto;
	}
  #mainWrapper--new .l-inner--s{
		width: 95%;
		max-width: 1000px;
		margin-inline: auto;
	}
}
@media screen and (max-width: 767px){
	#mainWrapper--new .l-inner,.l-inner--s{
		width: 90%;
		margin-inline: auto;
	}
}
/* margin */
#mainWrapper--new .l-mgt{
  margin-top: var(--sec-spc);
}
#mainWrapper--new .l-mgt--half{
  margin-top: var(--sec-spc-half);
}
#mainWrapper--new .l-mgt--quarter{
  margin-top: var(--sec-spc-quarter);
}
#mainWrapper--new .l-mgb{
  margin-bottom: var(--sec-spc);
}
#mainWrapper--new .l-mgb--half{
  margin-bottom: var(--sec-spc-half);
}
#mainWrapper--new .l-mgb--quarter{
  margin-bottom: var(--sec-spc-quarter);
}
#mainWrapper--new .l-pdt{
  padding-top: var(--sec-spc);
}
#mainWrapper--new .l-pdt--half{
  padding-top: var(--sec-spc-half);
}
#mainWrapper--new .l-pdt--quarter{
  padding-top: var(--sec-spc-quarter);
}
#mainWrapper--new .l-pdb{
  padding-bottom: var(--sec-spc);
}
#mainWrapper--new .l-pdb--half{
  padding-bottom: var(--sec-spc-half);
}
#mainWrapper--new .l-pdb--quarter{
  padding-bottom: var(--sec-spc-quarter);
}
/* font */
#mainWrapper--new .l-txt--s{
  font-size: var(--fz-14);
}
#mainWrapper--new .l-txt--m{
  font-size: var(--fz-18);
}
#mainWrapper--new .l-txt--l{
  font-size: var(--fz-20);
}
#mainWrapper--new .l-txt--ll{
  font-size: clamp(20px, 2.5vw, 30px);
}
#mainWrapper--new .l-txt--b{
  font-weight: 600;
}
#mainWrapper--new .l-txt--ja{
  font-family: var(--ff-ja);
}
#mainWrapper--new .l-txt--center{
  text-align: center;
}
/* color */
#mainWrapper--new .l-clr--white{
  color: var(--c-white);
}
#mainWrapper--new .l-clr--main-100{
  color: var(--c-main-100);
}
#mainWrapper--new .l-clr--main-200{
  color: var(--c-main-200);
}
#mainWrapper--new .l-bgClr--white{
  background-color: var(--c-white);
}
#mainWrapper--new .l-bgClr--100{
  background-color: var(--c-bgColor-100);
}
#mainWrapper--new .l-bgClr--200{
  background-color: var(--c-bgColor-200);
}
#mainWrapper--new .l-bgClr--300{
  background-color: var(--c-bgColor-300);
}
#mainWrapper--new .l-bgClr--main--100{
  background-color: var(--c-main-100);
}

/* =========================================================
   Component
========================================================= */
/* button */
#mainWrapper--new .c-btn{
  width: 100%;
  max-width: clamp(220px, 26vw, 300px);
  height: clamp(40px, 5vw, 55px);
}
#mainWrapper--new .c-btn--center{
  margin-inline: auto;
}
#mainWrapper--new .c-btn a{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-black);
}
#mainWrapper--new .c-btn span{
  font-size: var(--fz-14);
}
#mainWrapper--new .c-btn span::after{
  position: absolute;
  content: "＞";
  font-size: var(--fz-16);
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
/* -----contact----- */
#mainWrapper--new .c-contact__ttl{
  font-size: clamp(16px, 2vw, 25px);
}
#mainWrapper--new .c-contact__btn{
  display: grid;
  width: 90%;
  margin-inline: auto;
}
#mainWrapper--new .c-contact__btn a{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 70px;
  padding: 0 var(--spc-10);
  line-height: 1.2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#mainWrapper--new .c-contact__btn--common a::after{
  position: absolute;
  content: "";
  display: inline-block;
  right: 0;
  bottom: 0;
  width: 20px;
  aspect-ratio: 1 / 1;
  z-index: 1;
}
#mainWrapper--new .c-contact__btn--order a{
  border: 2px solid var(--c-main-100);
  background-image: url(/assets_sbe/image/common/contact-order.jpg);
}
#mainWrapper--new .c-contact__btn--fax a{
  border: 2px solid var(--c-black);
  background-image: url(/assets_sbe/image/common/contact-fax.jpg);
}
#mainWrapper--new .c-contact__btn--sample a{
  border: 2px solid #DDB553;
  background-image: url(/assets_sbe/image/common/contact-sample.jpg);
}
#mainWrapper--new .c-contact__btn--common .c-contact__btn--order a::after{
  background: url(/assets_sbe/image/common/arrow-order.svg) no-repeat center center / contain;
}
#mainWrapper--new .c-contact__btn--common .c-contact__btn--fax a::after{
  background: url(/assets_sbe/image/common/arrow-fax.svg) no-repeat center center / contain;
}
#mainWrapper--new .c-contact__btn--common .c-contact__btn--sample a::after{
  background: url(/assets_sbe/image/common/arrow-sample.svg) no-repeat center center / contain;
}
@media screen and (min-width: 768px){
  #mainWrapper--new .c-contact__btn{
    grid-template-columns: repeat(3,1fr);
    gap: var(--spc-30);
    max-width: 820px;
  }
}
@media screen and (max-width: 767px){
  #mainWrapper--new .c-contact__btn{
    gap: var(--spc-15);
    max-width: 400px;
  }
}
/* -----contact-soNav----- */
@media screen and (max-width: 767px){
  #mainWrapper--new .p-header__spNav--contact{
    margin-bottom: var(--spc-100);
  }
  #mainWrapper--new .p-header__spNav--contact .c-contact__btn{
    row-gap: var(--spc-60);
  }
  #mainWrapper--new .p-header__spNav--contact .c-contact__btn a{
    min-height: 80px;
  }
  #mainWrapper--new .p-header__spNav--contact .c-contact__btn a::after{
    position: absolute;
    color: var(--c-white);
    display: block;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    width: 100%;
    text-align: center;
    font-size: .8em;
    font-weight: 600;
    font-family: "Noto Sans JP","Noto Sans",Arial,sans-serif;
    letter-spacing: .2em;
    padding: 5px 0;
  }
  #mainWrapper--new .p-header__spNav--contact .c-contact__btn .c-contact__btn--order a::after{
    content: "ご依頼はこちら";
    background-color: var(--c-main-100);
    border: 2px solid var(--c-main-100);
  }
  #mainWrapper--new .p-header__spNav--contact .c-contact__btn .c-contact__btn--fax a::after{
    content: "FAXでのご注文はこちら";
    background-color: var(--c-black);
    border: 2px solid var(--c-black);
  }
  #mainWrapper--new .p-header__spNav--contact .c-contact__btn .c-contact__btn--sample a::after{
    content: "お取り寄せはこちら";
    background-color: #DDB553;
    border: 2px solid #DDB553;
  }
  #mainWrapper--new .p-header__spNav--contactBtn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
  }
  #mainWrapper--new .p-header__spNav--contactBtn .c-contact__btn--txt{
    font-size: 26px;
  }
  #mainWrapper--new .c-contact__btn--img{
    width: var(--spc-50);
  }
}
/* button--top */
#mainWrapper--new .c-button--top{
	position: fixed;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
#mainWrapper--new .c-button--top.is-show{
  opacity: 1;
  visibility: visible;
}
#mainWrapper--new .c-button--top a{
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--c-bgColor-100);
  position: relative;
}
#mainWrapper--new .c-button--top a::before,.c-button--top a::after{
  content: "";
  position: absolute;
  background: var(--c-main-200);
  top: 50%;
  left: 50%;
}
#mainWrapper--new .c-button--top a::before{
  transform: translate(-50%, -50%) rotate(-45deg);
  margin-left: -5px;
}
#mainWrapper--new .c-button--top a::after{
  transform: translate(-50%, -50%) rotate(45deg);
  margin-left: 5px;
}
@media screen and (min-width: 768px){
	#mainWrapper--new .c-button--top{
		right: 3%;
		bottom: 30px;
	}
	#mainWrapper--new .c-button--top a{
		width: 60px;
		border: 2px solid var(--c-main-200);
	}
	#mainWrapper--new .c-button--top a::before,#mainWrapper--new .c-button--top a::after{
		width: 13px;
		height: 2px;
	}
	#mainWrapper--new .c-button--top a::before{
		margin-left: -4px;
	}
	#mainWrapper--new .c-button--top a::after{
		margin-left: 5px;
	}
}
@media screen and (max-width: 767px){
	#mainWrapper--new .c-button--top{
		right: 2%;
		bottom: 25px;
	}
	#mainWrapper--new .c-button--top a{
		width: 45px;
		border: 1px solid var(--c-main-200);
	}
	#mainWrapper--new .c-button--top a::before,#mainWrapper--new .c-button--top a::after{
		width: 9px;
		height: 1px;
	}
	#mainWrapper--new .c-button--top a::before{
		margin-left: -3px;
	}
	#mainWrapper--new .c-button--top a::after{
		margin-left: 3px;
	}
	body.is-menu-open #mainWrapper--new .c-button--top{
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}
/* -----size-order-button----- */
#mainWrapper--new .c-sizeOrder__btn a{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spc-30) 0 var(--spc-10);
  row-gap: clamp(2px, .3vw, 5px);
  border-bottom: 2px solid var(--c-bgColor-300);
}
#mainWrapper--new .c-sizeOrder__btn a::before{
  position: absolute;
  content: "";
  display: inline-block;
  background: url(/assets_sbe/image/sub/measure.svg) repeat top / cover;
  width: 100%;
  height: 20%;
  left: 0;
  top: 0;
}
#mainWrapper--new .c-sizeOrder__btn a::after{
  position: absolute;
  content: "";
  display: inline-block;
  background: var(--c-bgColor-300);
  width: var(--spc-25);
  aspect-ratio: 1 / 1;
  right: 0;
  bottom: 0;
}
#mainWrapper--new .c-sizeOrder__btn img{
  width: var(--spc-15);
}
@media screen and (min-width: 768px){
  #mainWrapper--new .c-sizeOrder__btn{
    width: 500px;
  }
}
@media screen and (max-width: 767px){
  #mainWrapper--new .c-sizeOrder__btn{
    width: 90%;
  }
  #mainWrapper--new .c-sizeOrder__btn span{
    font-size: 1em;
  }
}
/* size-order-contact__btn */
#mainWrapper--new .c-SO-contact__btn{
  border-bottom: 2px solid var(--c-bgColor-300);
  position: relative;
}
#mainWrapper--new .c-SO-contact__btn::after{
  position: absolute;
  content: "";
  display: inline-block;
  background: url(/assets_sbe/image/common/arrow-SO-contact.svg) no-repeat center center / contain;
  width: clamp(20px, 2.2vw, 25px);
  aspect-ratio: 1 / 1;
  right: 0;
  bottom: 0;
}
#mainWrapper--new .c-SO-contact__btn a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 768px){
  #mainWrapper--new .c-SO-contact__btn{
    width: 500px;
  }
  #mainWrapper--new .c-SO-contact__btn a{
    height: 90px;
  }
}
@media screen and (max-width: 767px){
  #mainWrapper--new .c-SO-contact__btn{
    width: 300px;
  }
  #mainWrapper--new .c-SO-contact__btn a{
    height: 70px;
  }
  #mainWrapper--new .c-SO-contact__btn span{
    line-height: 1.4;
    text-align: center;
  }
}
/* buy__btn */
#mainWrapper--new .c-buy__btn{
  border-bottom: 2px solid #DDB553;
  position: relative;
}
#mainWrapper--new .c-buy__btn::after{
  position: absolute;
  content: "";
  display: inline-block;
  background: url(/assets_sbe/image/common/arrow-buy.svg) no-repeat center center / contain;
  width: clamp(20px, 2.2vw, 25px);
  aspect-ratio: 1 / 1;
  right: 0;
  bottom: 0;
}
#mainWrapper--new .c-buy__btn a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #DE8935;
}
@media screen and (min-width: 768px){
  #mainWrapper--new .c-buy__btn{
    width: 500px;
  }
  #mainWrapper--new .c-buy__btn a{
    height: 90px;
  }
}
@media screen and (max-width: 767px){
  #mainWrapper--new .c-buy__btn{
    width: 300px;
  }
  #mainWrapper--new .c-buy__btn a{
    height: 70px;
  }
  #mainWrapper--new .c-buy__btn span{
    line-height: 1.4;
    text-align: center;
  }
}
/* breadcrumb */
#mainWrapper--new .c-breadcrumb{
  padding-bottom: var(--spc-30);
}
#mainWrapper--new .c-breadcrumb__list{
  display: flex;
  align-items: center;
  gap: var(--spc-10);
}
#mainWrapper--new .c-breadcrumb__item{
  line-height: 1;
}
#mainWrapper--new .c-breadcrumb__item:not(:last-child)::after{
  content: "＞";
  margin-left: var(--spc-10);
}
/* title */
#mainWrapper--new .c-sec-ttl{
  display: flex;
  flex-direction: column;
  gap: var(--spc-10);
  margin-bottom: var(--spc-40);
}
#mainWrapper--new .c-sec-ttl__line--center{
  position: relative;
  display: inline-block;
  width: clamp(50px, 7vw, 90px);
  height: 2px;
  background: var(--c-bgColor-300);
  margin-inline: auto;
}
#mainWrapper--new .c-sec-ttl__line--center::after{
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: clamp(25px, 3.5vw, 45px);
  height: 2px;
  background: var(--c-main-100);
}
#mainWrapper--new .c-sec-ttl__line{
  position: relative;
  display: inline-block;
  width: 100%;
  height: 2px;
  background: var(--c-main-100);
}
#mainWrapper--new .c-sec-ttl__line::after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: clamp(25px, 3.5vw, 45px);
  height: 2px;
  background: var(--c-bgColor-300);
}
/* page-title */
#mainWrapper--new .c-pageTtl{
  display: flex;
}
#mainWrapper--new .c-pageTtl img{
  height: 100%;
}
#mainWrapper--new .c-pageTtl__cnt{
  position: relative;
  display: flex;
  align-items: center;
  background: var(--c-main-100);
  border-bottom: clamp(8px, 1.4vw, 20px) solid var(--c-bgColor-300);
  border-top: clamp(8px, 1.4vw, 20px) solid var(--c-bgColor-300);
}
#mainWrapper--new .c-pageTtl__cnt::before{
  position: absolute;
  content: "";
  background: url(/assets_sbe/image/sub/pattern.png) no-repeat center center / cover;
  display: inline-block;
  width: 100%;
  height: 100%;
  z-index: 0;
}
#mainWrapper--new .c-pageTtl__cnt h1{
  font-size: clamp(22px, 3vw, 40px);
  letter-spacing: .2em;
  z-index: 1;
}
#mainWrapper--new .c-pageTtl__cnt p{
  z-index: 1;
}
@media screen and (min-width: 768px){
  #mainWrapper--new .c-pageTtl{
    align-items: center;
    height: clamp(230px, 28vw, 330px);
    overflow: hidden;
  }
  #mainWrapper--new .c-pageTtl__imgL{
    width: 35%;
    height: 100%;
    border-bottom: clamp(8px, 1.4vw, 20px) solid var(--c-bgColor-300);
  }
  #mainWrapper--new .c-pageTtl__imgR{
    width: 35%;
    height: 100%;
    border-top: clamp(8px, 1.4vw, 20px) solid var(--c-bgColor-300);
  }
  #mainWrapper--new .c-pageTtl__cnt{
    width: 30%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
  }
  #mainWrapper--new .c-pageTtl__cnt h1{
    margin-bottom: var(--spc-20);
    padding-bottom: var(--spc-20);
    border-bottom: 1px solid var(--c-white);
    width: 90%;
  }
  #mainWrapper--new .c-pageTtl__cnt p{
    text-align: center;
  }
}
@media screen and (max-width: 767px){
  #mainWrapper--new .c-pageTtl{
    flex-direction: column;
  }
  #mainWrapper--new .c-pageTtl__imgL,#mainWrapper--new .c-pageTtl__imgR{
    height: 80px;
  }
  #mainWrapper--new .c-pageTtl__cnt{
    height: 100px;
  }
  #mainWrapper--new .c-pageTtl__cnt h1{
    width: 40%;
  }
  #mainWrapper--new .c-pageTtl__cnt p{
    line-height: 1.4;
    font-size: 12px;
  }
}
/* page-sub-title */
#mainWrapper--new .c-pageIntro{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#mainWrapper--new .c-pageSub-ttl{
  position: relative;
  border-bottom: 1px solid var(--c-bgColor-300);
  display: inline-block;
  padding: 0 var(--spc-60);
}
#mainWrapper--new .c-pageSub-ttl::after{
  position: absolute;
  content: "";
  display: inline-block;
  background: var(--c-bgColor-300);
  width: var(--spc-25);
  aspect-ratio: 1 / 1;
  right: 0;
  bottom: 0;
}
/* section-sub-title */
#mainWrapper--new .c-secSub-ttl{
  border-bottom: 1px solid var(--c-bgColor-300);
  padding-bottom: clamp(3px, .4vw, 5px);
  margin-bottom: var(--spc-10);
}
/* item-title */
#mainWrapper--new .c-item-ttl h2{
  position: relative;
  padding: clamp(3px, .4vw, 5px) 0 clamp(3px, .4vw, 5px) var(--spc-20);
  margin-bottom: var(--spc-15);
}
#mainWrapper--new .c-item-ttl h2::before{
  position: absolute;
  content: "";
  display: inline-block;
  background: var(--c-bgColor-300);
  width: clamp(7px, .8vw, 10px);
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}


/* =========================================================
   Project
========================================================= */
/* -----header----- */
#mainWrapper--new .p-header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
}

@media screen and (min-width: 768px){
  #mainWrapper--new .p-header{
    padding: var(--spc-30) 0;
  }
  #mainWrapper--new .p-header__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, .7);
    border-radius: 100px;
    padding: var(--spc-20) var(--spc-60) var(--spc-20) var(--spc-20);
  }
  #mainWrapper--new .p-header__logo img{
    width: clamp( 200px, 22vw, 240px);
  }
  #mainWrapper--new .p-header__navList{
    display: flex;
    align-items: center;
    gap: clamp( 30px, 4.5vw, 60px);
  }
}
@media screen and (max-width: 767px){
  #mainWrapper--new .p-header{
    background-color: var(--c-white);
  }
  #mainWrapper--new .p-header__inner{
    position: relative;
    width: 100%;
    min-height: 60px;
    margin: 0;
  }
  #mainWrapper--new .p-header__logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #mainWrapper--new .p-header__logo a{
    width: 35%;
    min-width: 140px;
    margin-inline: auto;
  }
  #mainWrapper--new .p-header__menuButton{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 7%;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 15px;
  }
  #mainWrapper--new .p-header__menuButton.is-open{
		justify-content: center;
	}
  #mainWrapper--new .p-header__menuButton.is-open .p-header__menuLine{
		position: absolute;
		top: 50%;
		left: 0;
	}
  #mainWrapper--new .p-header__menuButton.is-open .p-header__menuLine:nth-child(1){
		transform: translateY(-50%) rotate(45deg);
	}
  #mainWrapper--new .p-header__menuButton.is-open .p-header__menuLine:nth-child(2){
		display: none;
	}
  #mainWrapper--new .p-header__menuButton.is-open .p-header__menuLine:nth-child(3){
		transform: translateY(-50%) rotate(-45deg);
	}
  #mainWrapper--new .p-header__menuLine{
    display: block;
    width: 100%;
    height: 1px;
    background: var(--c-black);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  }
}
/* -----hamburger----- */
@media screen and (max-width: 767px){
  #mainWrapper--new .is-menu-open{
    overflow: hidden;
    height: 100dvh;
  }
  #mainWrapper--new .p-header__spNav{
		position: fixed;
		width: 100%;
		height: 100dvh;
		inset: 0;
		padding: 60px 0 0;
		background: var(--c-white);
		overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
		opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
	}
  #mainWrapper--new .p-header__spNav.is-open{
		opacity: 1;
		visibility: visible;
	}
  #mainWrapper--new .p-header__spNav--inner{
    background: var(--c-bgColor-100);
    padding: var(--spc-40) 0 var(--spc-80);
  }
  #mainWrapper--new .p-header__spNavList01{
		display: grid;
		gap: var(--spc-20);
	}
  #mainWrapper--new .p-header__spNavItem{
    border-bottom: 1px solid var(--c-main-100);
    padding-bottom: 3px;
  }
  #mainWrapper--new .p-header__spNavLink{
    position: relative;
  }
  #mainWrapper--new .p-header__spNavLink::after{
    position: absolute;
    content: "＞";
    color: var(--c-main-200);
    font-size: 1em;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  #mainWrapper--new .p-header__spNavList02 li{
    padding: var(--spc-20) 5%;
  }
  #mainWrapper--new .p-header__spNavList02 a{
    display: block;
    position: relative;
  }
  #mainWrapper--new .p-header__spNavList02 a::after{
    position: absolute;
    content: "";
    display: inline-block;
    background: url(/assets_sbe/image/common/sp/arrow.svg) no-repeat center center / contain;
    width: 20px;
    aspect-ratio: 1 / 1;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
  }
}
/* -----footer----- */
#mainWrapper--new .p-footer{
  background: var(--c-main-200);
}
@media screen and (min-width: 768px){
  #mainWrapper--new .p-footer__top{
    width: 95%;
    max-width: 1000px;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #mainWrapper--new .p-footer__logo{
    border-radius: 50%;
  }
  #mainWrapper--new .p-footer__logo a{
    display: flex;
    align-items: center;
    aspect-ratio: 1 / 1;
    padding: 0 var(--spc-20);
  }
  #mainWrapper--new .p-footer__logo img{
    width: 200px;
  }
  #mainWrapper--new .p-footer__nav{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--spc-20) var(--spc-120);
  }
  #mainWrapper--new .p-footer__nav a{
    display: flex;
    align-items: center;
    column-gap: 5px;
  }
  #mainWrapper--new .p-footer__circle{
    display: block;
    width: 12px;
    aspect-ratio: 1 / 1;
    background-color: var(--c-bgColor-300);
  }
  #mainWrapper--new .p-footer__middle--inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #mainWrapper--new .p-footer__info--label{
    border: 1px solid var(--c-black);
    padding: 4px;
    margin-right: 5px;
  }
  #mainWrapper--new .p-footer__info p:first-of-type{
    margin-bottom: var(--spc-10);
  }
  #mainWrapper--new .p-footer__btn a{
    display: flex;
    align-items: center;
    padding: 15px 30px;
    border-radius: 100px;
  }
  #mainWrapper--new .p-footer__btn img{
    width: 25px;
    height: 100%;
    margin-right: 10px;
  }
  #mainWrapper--new .p-footer__bottom p{
    padding: 20px 0;
  }
}
@media screen and (max-width: 767px){
  #mainWrapper--new .p-footer__logo a{
    padding: var(--spc-20) 0;
  }
  #mainWrapper--new .p-footer__logo img{
    width: 60%;
    max-width: 300px;
    margin-inline: auto;
  }
  #mainWrapper--new .p-footer__bottom p{
    font-size: 9px;
    padding-bottom: 4px;
  }
}
/* -----item----- */
#mainWrapper--new .p-item__list{
  display: grid;
}
#mainWrapper--new .p-item__list li{
  display: flex;
  flex-direction: column;
}
#mainWrapper--new .p-item__list img,#mainWrapper--new .p-item__list h3{
  margin-bottom: var(--spc-10);
}
#mainWrapper--new .p-item__list img{
  aspect-ratio: 7 / 5;
}
#mainWrapper--new .p-item__desc span{
  border-radius: 100px;
  padding: 2px var(--spc-10);
  margin-right: var(--spc-10);
}
#mainWrapper--new .p-item__desc{
  margin-bottom: var(--spc-20);
  font-size: .8em;
  flex: 1;
}
#mainWrapper--new .p-item__detail{
  margin-bottom: var(--spc-20);
}
#mainWrapper--new .p-item__detail--bgClr{
  padding: var(--spc-10);
}
#mainWrapper--new .p-item__detail p{
  font-size: .8em;
}
#mainWrapper--new .p-item__list a{
  text-align: right;
  text-decoration: underline;
  letter-spacing: .2em;
  margin-top: auto;
}
@media screen and (min-width: 768px){
  #mainWrapper--new .p-item__list{
    grid-template-columns: repeat(3,1fr);
    gap: var(--spc-50) var(--spc-20);
  }
}
@media screen and (max-width: 767px){
  #mainWrapper--new .p-item__list--sp2clum{
    grid-template-columns: repeat(2,1fr);
    gap: var(--spc-40) var(--spc-10);
  }
  #mainWrapper--new .p-item__list h3{
    font-size: 1em;
  }
}