:root {
    --color-text-main: #000000;
    --color-primary: #B29360;
    --color-secondary: #9D9D9D;
    --color-tertiary:#E3E0E0;
    --color-primary-filter: invert(58%) sepia(58%) saturate(294%) hue-rotate(358deg) brightness(93%) contrast(85%);

    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-over: #FFFFFF;
    --color-bg2: #EFEFEF;
    --color-bg3: #;
    --color-error: #F45353;
    --color-border: #;

    --font-main: "Zen Kaku Gothic New", serif;
    --font-sub: "Roboto", sans-serif;

    --font-weight-Regular: 400;
    --font-weight-Medium: 500;
    --font-weight-Bold: 700;

    --font-size-ss: 10px;
    --font-size-s: 14px;
    --font-size-m: 16px;
    --font-size-l: 30px;
    --font-size-ll: 40px;
    --font-size-nav: 18px;
    --font-size-title: 30px;
    --font-size-subtitle: 18px;
    --font-size-strong: 26px;

    --width-max: 1100px;
    --width-max2: 560px;

    --transition-time: 1s;
}

/*
common
===================================*/
.pcOnly {
    display: block;
}

.spOnly {
    display: none;
}

html {
}

img {
    width:100%;
}

body {
    font-family: var(--font-main);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-Regular);
    line-height: 1.8;
    color:var(--color-text-main);
    min-width: var(--width-max);

}

strong,th,b, dt {
    font-weight: var(--font-weight-Regular);

}

a {
    transition: all .8s;
}
a:hover {
    /*opacity: 0.4;*/
}
.js-link {
    text-decoration: underline;

}
.js-link:hover {
    text-decoration: none;
}

.flex {
    display: flex;
}

.text-link {
    color:var(--color-primary);
    text-decoration: underline;
}

.icon-pin::before {
    content:url(../img/icon-pin.svg);
    padding-right:0.5em;

}

.widthA {
    width: 1000px;
    max-width: 1000px;
    margin:0 auto;
}

.layoutA {
    margin:0 auto;
    padding:120px 0 0;

    width:1000px;
}

.paddingA {
    padding-top:100px;
}

.paddingB {
    padding-top:60px;
}

.paddingBottomA {
    padding-bottom:100px;
}



.titleStyleA {
    background: url('../img/title_icon.svg') left center no-repeat;
    padding-left: 70px;
    min-height: 100px;
    margin:0 0 60px 0;
    padding-top:20px;
    text-align: right;
    display: inline-block;
    line-height: 1.0;
}


.titleStyleB {
    padding-bottom: 40px;
}

.titleStyleB h2 {
    font-family: var(--font-sub);
    font-size: var(--font-size-ll);
    line-height: 1.2;
}

.titleStyleB h3 {
    font-size: var(--font-size-title);
    line-height: 1.2;
    letter-spacing: 0.2em;
    font-weight: var(--font-weight-Regular);


}
.titleStyleB p {
    padding-top: 0.8em;

}

.btnArea {
    padding-top: 50px;
}
.btnArea.center {
    text-align: center;
}

.btnStyleA {
    border:1px solid var(--color-black);
    padding:0.8em 1.5em 0.6em;
    display: inline-block;
    transition: all var(--transition-time);
    position: relative;
    font-family: var(--font-sub);
}
.btnStyleA:hover {
    background-color: var(--color-black);
    color:var(--color-primary);
    opacity: 1;
}
.btnStyleA.bg-white {
    background-color: var(--color-white);
}

.btnStyleA.icon-arrow {
    padding-right: 90px;
}
.btnStyleA.icon-arrow::after {
    content:url(../img/icon_arrow2.svg);
    display: block;
    position: absolute;
    right:20px;
    top:50%;
    transform: translateY(-60%);
    transition: all var(--transition-time);
}
.btnStyleA:hover.icon-arrow::after {
    filter: var(--color-primary-filter);
    right:10px;
}

.btnStyleA.icon-out {
    padding-right: 60px;
}   
.btnStyleA.icon-out::after {
    content:url(../img/icon_out.svg);
    display: block;
    position: absolute;
    right:20px;
    top:50%;
    transform: translateY(-40%);
    transition: all var(--transition-time);
}
.btnStyleA:hover.icon-out::after {
    filter: var(--color-primary-filter);
    right:10px;
}

.btnStyleA.reverse {
    
}




/*
header
=================================== */
header {
    position: fixed;
    width: 100%;
    background-color: rgba(255,255,255,0.8);
    z-index: 10;

}

header > div {
    display: flex;
    justify-content: space-between;
    padding:40px 0 80px;
    z-index: 10;
    transition: all var(--transition-time);
}

header h2 {
   position: relative;
}

header h2 img {
    width:148px;
    height:159px;
    /*transition: all var(--transition-time);*/
    position: absolute;
}


header nav {
    line-height: 1.0;
}



header .navBurger {
    display:none;
}
header nav #nav-logo {
    display: none;
}

header nav ul {
    display: flex;
    align-items: flex-start;
    gap:0 40px;
}


header nav ul li a {
    font-size: var(--font-size-nav);
    font-family: var(--font-sub);
    font-weight: var(--font-weight-Regular);

    display: block;
    white-space: nowrap;
}

header nav ul li a:hover {
    color:var(--color-primary);
    opacity: 1;
}

header nav ul li a span {
    display: block;
    font-size: var(--font-size-ss);
    padding-top:0.7em;


}

header .navList{
    gap:0 40px;
    align-items: center;
}

header .navList .language {
    position: relative;
}
header .navList .language a {
    border:1px solid var(--color-text-main);
    text-align: left;
    padding:0.2em 0.5em;
}
header .navList .language:hover > ul {
    display: flex;
}
header .navList .language > ul {
    
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    right:0;
    display: none;
}
header .navList .language > ul li {
    width:100px;
    background-color: var(--color-white);
    

}

header .navList .language > ul li  a {
    width: 100%;
    display: block;
    font-size: var(--font-size-s);
    padding:0.2em 0.5em;
    border-bottom:0px;
}

header .navList .language > ul a:hover {
    background-color: var(--color-tertiary);
    opacity: 1;
}
header .navList .language > ul li:last-child a {
    border-bottom:1px solid var(--color-text-main);
}
.headerFixed header {
}

.headerFixed header > div {
    padding-bottom:40px;

}
.headerFixed header h2 img {
    width:72px;
    height:auto;
    margin-top:-20px;
}

.headerFixedActive header {
    top:0;
}


main {
    padding-top:155px;
}
.slick-dots {
    width: auto;

}

.slider .slick-dots {
   bottom:20px;
   right: 20px;

}

.slick-dots li button:hover:before
{
    color: var(--color-primary);
}

.slick-dots li button:before {
    font-size: 12px;
    -webkit-text-stroke: 1px var(--color-white);
    color: var(--color-white);
    opacity: 1;
}
.slick-dotted.slick-slider {
   margin-bottom: 0;
}

.mvNews {
    position: relative;
   background-color: var(--color-black);
   width:calc(100% - 300px );
   margin-top: -10px;
   color:var(--color-white);
}
.mvNews > div {
    display: flex;
    flex-wrap: nowrap;
    gap:0 30px;
    align-items: center;
    padding-left:calc(50vw - 500px);
}
.mvNews > div strong {
    font-family: var(--font-sub);
    font-size: var(--font-size-nav);
    border-right:1px solid var(--color-white);
    padding-right: 30px;

}
.mvNews > div a {
    display: flex;
    gap:0 20px;
    align-items:flex-start;
    width: 100%;
    padding: 20px 0px 20px 10px;
    margin-right:110px;
}


.mvNews > div a::after {
    content:url(../img/icon_arrow1.svg);
    width:50px;
    height:8px;
    display: block;
    position: absolute;
    right:60px;
    transition: all var(--transition-time);
}
.mvNews > div a time {
    font-family: var(--font-sub);
    padding-top:0.1em;
}


.mvNews > div a:hover {
    color: var(--color-primary);
    opacity: 1;
}

.mvNews > div a:hover:after  {
    filter: var(--color-primary-filter);
    right:40px;
}
/*
TOP Vision
=================================== */

#topVision {
    text-align: center;
}

#topVision h1 {
    font-size: var(--font-size-subtitle);
}

#topVision h2 {
    font-size: var(--font-size-title);
    letter-spacing: 0.2em;
}

#topVision p {
    width: var(--width-max2);
    margin: 1.5em auto 0;
    text-align: justify;

}

#topVision div.logo {
    width: 148px;
    margin: 2em auto;
}

#topVision div.topVisionImage {
    display: flex;
    gap:0 20px;
    justify-content: center;
    align-items: center;
    view-timeline-name: --section-pin;
    view-timeline-axis: block;
    
}

.topVisionImage .img1 {    width: 224px;  }
.topVisionImage .img2 {    width: 480px;  }
.topVisionImage .img3 {    width: 168px; align-self:flex-end; }

.topVisionImage.is-inview > .img2 {

}

.topVisionImage.is-inview > .img1 {
}

.topVisionImage.is-inview > .img3 {
 
}


.topVisionText {

}

.topVisionText > .title {
    display: flex;
    gap:30px 0;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction:column;
    
}

.topVisionText > .title > img {
    width: auto;
    text-align: center;
}

.topVisionText >  p {
    text-align: left;
}


#topAbout .bnrStyleA > .img > img {
    height: 20vw;
    max-height: 400px;

}

.bnrStyleA {
    background-color: var(--color-black);
    display: flex;
    flex-wrap: nowrap;
    gap:0;
    color:var(--color-white);
    align-items: center;

}

.bnrStyleA > .img {
    width: 60%;
    overflow: hidden;
}

.bnrStyleA > .img > img {
    transition: all var(--transition-time);
    object-fit: cover;
}

.bnrStyleA:hover > .text {
    filter: var(--color-primary-filter);
}

.bnrStyleA:hover > .img > img {
    transform: scale(1.2);
}

.bnrStyleA > .text {
    transition: all var(--transition-time);
    width: 40%;
    min-width: 300px;
    padding:0 80px;

}
.bnrStyleA > div strong {
    font-size: var(--font-size-ll);
    font-family: var(--font-sub);
    display: block;
}


.bnrStyleA.type2 {
    margin: 0 auto;
}

.bnrStyleA.type2 > .img > img {
    height: 220px;

}
.bnrStyleA.type2 .text {
    text-align: center;
    color:var(--color-primary) !important;
}

.bnrStyleA.type2:hover > .text {
    filter:unset;
}
.bnrStyleA.type2 .text strong {
    font-size:var(--font-size-strong);
}




#topProduct {
    gap:0 60px;
    align-items: center;
    
}
#topProduct > .text > h2 > * {
    display: block;
    font-size: var(--font-size-title);
    line-height: 1.6;
    letter-spacing: 0.2em;

}
#topProduct > * {
    width: 50%;
}
#topProduct > .img {
    flex-wrap: wrap;
    gap:30px;
}

#topProduct > .img > img {
    width: calc(50% - 15px);

}
#topProduct > .img > img.img1 {   }
#topProduct > .img > img.img2 { transform: scale(0.5);  transform-origin: 0% 65%; }
#topProduct > .img > img.img3 { transform: scale(0.8);  transform-origin: 100% 0%; }
#topProduct > .img > img.img4 { transform: scale(0.65);  transform-origin: 0% -48%; }




#topNews {
    
}
#topNews > div.title {
    text-align: center;
    line-height: 1.4;
    position: relative;
}

#topNews > div.title::after {
    position: absolute;
    content: "";
    display: block;
    height: 30px;
    width: 1px;
    left: 50%;
    bottom: -60px;
    background-color: var(--color-black);
}
#topNews > div.title > h3 {
    font-size: var(--font-size-s);

}
#topNews > div.title > h2 {
    font-family: var(--font-sub);
    font-size: var(--font-size-ll);
}

.newsList> a{
    display: block;
    border-bottom:1px solid var(--color-tertiary);
    padding: 30px 0;
    
   
}
.newsList> a {
    display: flex;  
    align-items: flex-start;
    gap:0 50px;
    flex-wrap: nowrap
}

.newsList> a .img {
    
}
.newsList> a .img img {
    width: 184px;
    height: 100px;
    object-fit: cover;
}

.newsList> a .text time {
    font-family: var(--font-sub);
    font-size: var(--font-size-s);
}
.categoryLinkList {
    margin-top: 1em;
    gap:0 1em;
    font-size: var(--font-size-s);
    color:var(--color-primary);
}

.newsList> a:hover {
    opacity: 0.6;
}

#topNews .btnArea {
    text-align: center;
}



#topInstagram {
    gap:0 60px;
    align-items: center;
    margin-bottom: 100px;
    
}
#topInstagram > .text {
    width: 40%;
}
#topInstagram > .text > h2 > * {
    display: block;
    font-size: var(--font-size-title);
    line-height: 1.6;
    letter-spacing: 0.2em;

}
#topInstagram > * {
    
}
#topInstagram > .img {
    flex-wrap: wrap;
    gap:12px;
    width: 60%;
    

}

#topInstagram > .img > img {
    width: calc(50% - 13px);
    aspect-ratio: 1/1;
    object-fit:cover;
}
#topInstagram > .img > img.img1 {   }





footer {
    background-color: var(--color-black);

}

footer > section.info {
    padding:30px 0 0px;
    display: flex;
    justify-content: flex-start;
    gap:0 80px;
    color:var(--color-over);
    align-items: center;
    
}
footer > section.info > img  {
    height:90px;
    width: auto;
}


footer > section.info > div.address strong  {
    display: block;
    font-size: var(--font-size-strong);
    padding-bottom: 0.4em;

}
footer > section.info > div.nav  {
    display: flex;
    justify-content: flex-start;
    gap:0 2em;
    min-width: 600px;
}
footer > section.info > div.nav a {

}
footer > section.info > div.nav a::before {
    
}
footer > section.copy {
    color: var(--color-primary);
    text-align: right;
    font-family: var(--font-sub);
    font-size:var(--font-size-s);
    line-height: 1;
    padding:0 0 0.5em;
}

#btnToTop {
    width: 47px;
    height: 47px;
    position: fixed;
    bottom: 40px;
    /*left: calc(50vw + 500px);*/
    right:0;
    transform: translateX(-100%);
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    transition: all var(--transition-time);
}

.headerFixed #btnToTop {
    opacity: 1;
    visibility: visible;
}




/* 下層共有
===================================*/
#pageTitle {
    position: relative;
    line-height: 1.4;
    margin-bottom: 80px;


}
#pageTitle strong {
    display: inline-block;
    font-size: var(--font-size-strong);
    font-family: var(--font-sub);
    font-weight: var(--font-weight-Regular);
    text-align: right;


}
#pageTitle h1 {
    font-size: var(--font-size-s);
   

}


#pageTitle > div {
    content: "";
    border-bottom: 1px solid var(--color-primary);
    padding-left: 2000px;
    margin-left: -2000px;
    padding-bottom: 1em;
    padding-right: 1em;
    display: inline-block;
   
}    


/* Vision
===================================*/

#visionFV .text {
    text-align: center;
    background: url(../img/vision_bg01.jpg) bottom center no-repeat;
    background-size: cover;
    color: var(--color-white);
    padding: 160px 0;
}

#visionFV .text h2 span {
    display: block;
    font-size: var(--font-size-strong);
    padding:0 0 80px 0;
}

#visionFV .text p {
    font-size: var(--font-size-m);
}


#visionFV .text h2 img {
    width: auto;
    padding-top:20px;
}


#visionList {
    
}

#visionList .list {
    text-align: center;
    padding-bottom: 160px;
 
    position: relative;

}
#visionList .title {
    position: relative;
}
#visionList .title::after {
    position: absolute;
    content: "";
    display: block;
    height: 30px;
    width: 1px;
    left: 50%;
    bottom: -60px;
    background-color: var(--color-black);
}

#visionList .title > strong {
    font-size: var(--font-size-l);
    font-family: var(--font-sub);
}
#visionList .title > h3 {
    font-size: var(--font-size-s);
}
#visionList .img {
    width: 480px;
    margin:100px auto 0;
}

#visionList .detail {
    width: var(--width-max2);
    margin:0 auto;
    padding:160px 0 0;
    text-align: left;

}

#visionList .detail::first-child {

    padding-top: 100px;
}
#visionList .detail h4 {
    font-size: var(--font-size-strong);
    padding-bottom: 2em;
    text-align: center;
}

#visionList .img2 {
    width: 760px;
    margin:100px auto 0;
}

#visionList .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#visionList .bg::after {
    background-size: 100% auto;
    background-repeat: no-repeat;
    content: "";
    display: block;
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: -1;
    background-position: bottom center;
}

#visionList .list01 .bg::after {
    background-image: url(../img/vision_bg02.jpg);

}

#visionList .list02 .bg::after {
    background-image: url(../img/vision_bg03.jpg);
}
#visionList .list03  {
    color: var(--color-white);
}
#visionList .list03 .bg::after {
    background-image: url(../img/vision_bg04.jpg);

}

#visionList .list03 .img{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap:50px;
    width: 100%;
}

#visionList .list03 .img img{
    margin:0;
}


#visionList .list03 .img .img1 { width: 224px; margin:0 200px;  }
#visionList .list03 .img .img2 { width: 436px;     }
#visionList .list03 .img .img3 { width: 265px; margin-top:300px;  }


/* product
===================================*/
#productFV {

}


#productFV .img {
    display: flex;
    gap:0 96px;
    align-items: flex-start;
}

#productFV .img .img1 {  width:calc(45% - 96px);}
#productFV .img .img2 {  width:55%;}



#productMember {
    position: relative;
}


#productLineup {
    background-color: var(--color-bg2);
}
.productList01 {
    display: flex;
    gap:40px;
    font-size: var(--font-size-s);
}
.productList01 .list-item {
    width: calc(20% - 20px);
}
.productList01 img {
    width: 100%;
   
}
.productList01 h3 {
    padding-top:0.8em;
    font-size: var(--font-size-subtitle);

}
.productList01 strong {
}

.productList01 p {

}



.productList01 .en {
    font-family: var(--font-sub);
 
}

.productList02 {
    margin-top:30px;
    display: flex;
    flex-wrap: wrap;
    gap:100px;
    counter-reset: number 0;
    align-items: stretch;

    
}
.productList02.list {
    position: relative;   
}


.productList02.list::before {
    content: "";
    position: absolute;
    left:calc(224px / 2);
    top:0;
    bottom:0;
    background-color: var(--color-secondary);
    width:1px;
    z-index: -1;
}

.productList02.list .list-item:last-child {
   
    background-color: #FFF;
   
}

.productList02 .list-item {
    display: flex;
    gap:0 30px;
    width: 100%;
    align-items: flex-start;


}
.productList02 .list-item img {
    width: 224px;
}
.productList02 .list-item .text {
    flex: 1;
}
.productList02 .list-item .text h3 {
    font-size: var(--font-size-strong);
    font-weight: var(--font-weight-Regular);

    color:var(--color-primary);
    letter-spacing: 0.2em;
    line-height: 1.2;

}
.productList02 .list-item .text h3::before {
    font-family: var(--font-sub);
    font-size:var(--font-size-l);
    font-weight: var(--font-weight-Regular);
    letter-spacing:0;
    counter-increment: number 1; 
    content: "0" counter(number)"." ;
    padding-right:0.4em;
}
.productList02 .list-item .text p {
    padding-top: 1em;
}



#productKintsugi {
    position: relative;
    padding-bottom:200px;
    background-color: var(--color-black);
}
#productKintsugi > div {
    width: var(--width-max2);
}


#productKintsugi h2 {
    text-align: center;
    font-size:var(--font-size-strong);
    color:var(--color-primary);
    line-height: 1.4;
}

#productKintsugi h2 span {
    display: block;
    font-size:var(--font-size-s);
    font-family: var(--font-sub);
    padding-bottom:1em;

}

#productKintsugi .text {
    color:var(--color-white);
}


#productKintsugi .img {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0 30px;
}
#productKintsugi .img .img1_1 {    width:760px; }

#productKintsugiSelect {
    background-color: var(--color-bg2);
}

#productKintsugiSelect .title h3 {
    line-height: 1.6;
}

.productList03 {
    margin-top:2em;
   
}

.productList03 .list-item {
    display: flex;
    margin:1em 0;
}

.productList03 .list-item > h4 {
    color:var(--color-primary);
    width:3em;
    white-space: nowrap;
}
.productList03 .list-item > p {
    flex:1;
    padding-left:2em;
    position: relative;
}

.productList03 .list-item > p::before {
    position:absolute;
    content: "";
    left:0.5em;
    top:1em;
    display: block;
    width:18px;
    transform: translateY(-50%);
    height: 1px;
    background-color: var(--color-primary);

    
}
#productKintsugiContact .text {
    margin-top:3em;

}


/* About
===================================*/

#aboutFV {

}


#aboutFV .img {
    display: flex;
    gap:0 96px;
    align-items: flex-start;
}

#aboutFV .img .img1 {  width:calc(45% - 96px);}
#aboutFV .img .img2 {  width:55%;}


#aboutBusiness {
    position: relative;
}


#aboutBusiness .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#aboutBusiness .bg::after {
    background-size: 100% auto;
    background-repeat: no-repeat;
    content: "";
    display: block;
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: -1;
    background-position: bottom center;
    background-image: url(../img/about_bg01.jpg);

}

#aboutBusiness h2 {
    font-size:var(--font-size-strong);
    letter-spacing: 0.2em;
    
}

#aboutBusiness .list {
    padding-left:160px;
    padding-top:80px;
}

#aboutBusiness  .list h3  {
    color:var(--color-primary);
    font-size:var(--font-size-nav);
    position: relative;
    margin-bottom:1em;


}

#aboutBusiness  .list h3::before  {
    content:'';
    position: absolute;
    display: block;
    height:1px;
    width:16px;
    background-color: var(--color-primary);
    top:50%;
    left:-30px;



}

#aboutBusiness  .list .item {
    padding-bottom:80px;
}

#aboutBusiness  .list .img {
    display: flex;
    gap:0 30px;
    padding-top:80px;
    align-items: center;
}

#aboutBusiness  .list .img img {
    

}
#aboutBusiness  .list .img1-1 {  width:224px;      }
#aboutBusiness  .list .img1-2 {  width:136px;  align-self: flex-end; margin-bottom:-30px;     }

#aboutBusiness  .list .img2-1 {  width:136px;  align-self: flex-end;   margin-bottom:-30px;  }
#aboutBusiness  .list .img2-2 {  width:224px;       }


#aboutProfile {
    margin-bottom:160px;

}
#aboutProfile h2 {
    line-height: 1.4;
}

#aboutProfile h2 span {
    display: block;
    font-size:var(--font-size-l);
    font-family: var(--font-sub);
}

#aboutProfile dl {
    display: flex;
    flex-wrap: wrap;
    padding-left:100px;
    gap:40px 0;
}

#aboutProfile dl dt {
    width: 150px;
}

#aboutProfile dl dd {
    width: calc(100% - 150px);

}

#aboutProfile dl dd {

}



#aboutBackground {
    position: relative;
    padding-bottom:200px;
}
#aboutBackground > div {
    width: var(--width-max2);
}
#aboutBackground .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#aboutBackground .bg::after {
    background-repeat: no-repeat;
    content: "";
    display: block;
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: -1;
    background-position: bottom center;
    background-image: url(../img/about_bg02.jpg);

}
#aboutBackground h2 {
    text-align: center;
    font-size:var(--font-size-strong);
    color:var(--color-primary);
    line-height: 1.4;
}

#aboutBackground h2 span {
    display: block;
    font-size:var(--font-size-s);
    font-family: var(--font-sub);
    padding-bottom:1em;

}

#aboutBackground .text {
    color:var(--color-white);
}
#aboutBackground .text p {
    padding-bottom: 1em;

}

#aboutBackground .img {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0 30px;
}
#aboutBackground .img .img1_1 {    width:224px; }
#aboutBackground .img .img1_2 {    width:136px; margin-bottom:-30px; align-self: flex-end; }
#aboutBackground .img .img2_1 {    width:192px;}
#aboutBackground .img .img3_1 {    width:192px; }


#aboutHistory {
    background-color: var(--color-black);
    color: var(--color-white);

}


#aboutHistory {
    padding-bottom:160px;

}
#aboutHistory h2 {
    line-height: 1.4;
}

#aboutHistory h2 span {
    display: block;
    font-size:var(--font-size-l);
    font-family: var(--font-sub);
}

#aboutHistory dl {
    display: flex;
    flex-wrap: wrap;
    padding-left:100px;
    gap:40px 0;
}

#aboutHistory dl dt {
    width: 150px;
}

#aboutHistory dl dd {
    width: calc(100% - 150px);

}

#aboutHistory dl dd {

}

#aboutHistory .img  {
    display: flex;
    gap: 0 40px;
    align-items: flex-start;
}

#aboutHistory .img .img1  {   width:58.5% }
#aboutHistory .img .img2  {   width:41.5% }




/* News
===================================*/

.newsCategryLink {
    padding:0 0 80px;
    border-bottom:1px solid var(--color-tertiary);
}

.newsCategryLink h3 {
    font-size:var(--font-size-nav);

   font-family: var(--font-sub);

}
.newsCategryLink  .list {
    padding-top:1em;
}
.newsCategryLink  .list a {
    color:var(--color-primary);
    padding-right:2em;
    text-decoration: underline; ;


}
.newsCategryLink  .list a:hover {
    text-decoration: none  ;
    
}

#newsList {
    padding: 0;
}


.pagination {
   display: flex;
   justify-content: center;
   font-family: var(--font-size-nav);
   width: 100%;
   align-items: center;
    
}
.pagination a:hover {
    color: var(--color-primary);

}
.pagination .page-numbers {
    padding:1.5em;
}

.pagination .page-numbers.disable {
    pointer-events: none;
    opacity: 0.3;
}

.pagination .current {
    color:var(--color-secondary);

}

.pagination .page-numbers.prev {
    position: relative;
    flex:1;
    text-align: left;
    font-size: var(--font-size-s);
    padding:20px 0 0 ;

}
.pagination .page-numbers.next
{
    position: relative;
    flex:1;
    text-align: right;
    font-size: var(--font-size-s);
    padding:20px 0 0 ;

}
.pagination .page-numbers.prev:hover::before,
.pagination .page-numbers.next:hover::before {
     filter: var(--color-primary-filter);
}


.pagination .page-numbers.prev::before{
    content:url(../img/icon_arrow3.svg);
    display: block;
    position: absolute;
    left:0;
    top:0;
    transition: all var(--transition-time);

}
.pagination .page-numbers.next::before
{
    position: absolute;
    content:url(../img/icon_arrow3.svg);
    right:0;
    top:0;
    transform:rotate(180deg);
    transition: all var(--transition-time);
s  
}

.newsHeader {
    padding:0;
    border-bottom:1px solid var(--color-tertiary);
}

.newsHeader a {
    display: inline-block;
    padding-bottom:2em;

}

.newsHeader a:hover {
    color:var(--color-primary);
}

.newsHeader a::before {
    content:url(../img/icon_arrow3.svg);
    padding-right:1em;
    transition: all var(--transition-time);
    
}
.newsHeader a:hover::before {
    filter: var(--color-primary-filter);

}

.newsPage {
    padding-top:80px;

}
.newsPage time {
    display: inline-block;
    font-family: var(--font-sub);
    font-size: var(--font-size-s);
    padding-bottom: 1em;

}
.newsPage h1 {
    font-size: var(--font-size-strong);
    letter-spacing: 0.2em;
    line-height: 1.6;
    font-weight: var(--font-weight-Regular);
}

.newsBody {
    padding:80px 0;
    border-bottom:1px solid var(--color-tertiary);
}

.newsBody img {
    width: auto;
    max-width: 100%;
    margin:3em 0;
}


/* Contact
===================================*/
#contactForm {
    padding-top: 0;
}

.contactFormHead {
}

.contactFormHead h1 {
    font-size:var(--font-size-strong);
    list-style: 1.4;

}

.contactFormHead p {
    padding-top:1em;

}


.contactStyle01 {
    padding: 80px 0 80px 60px;
    display: flex;
    flex-wrap: wrap;


}

.contactStyle01 dt {
    width: 100%;
}
.contactStyle01 dt.required::after {
    color:var(--color-primary);
    content:'（必須）';
}

.contactStyle01 dd {
    width: 100%;
    margin-bottom:2em;
    
}
.contactStyle01 dd a {
    margin-left:1em;
}
.contactStyle01 dd:has(.wpcf7-not-valid-tip) {
    margin-top:20px;
}

.wpcf7-form-control-wrap {
    display: block;
}
.contactStyle01 .wpcf7-not-valid-tip {
    position: absolute;
    left:0;
    right:0;
    top:-15px;
    width:auto;
    background-color: var(--color-primary);
    color:var(--color-white);
    padding:0 1em;
    border-radius: 3px 3px 0 0;
    font-size:var(--font-size-s);

}
.wpcf7-not-valid-tip::before {
    content:'';

}


.contactStyle01 .wpcf7-response-output {
    background-color: var(--color-primary);
    color:#fff;
    border-color: var(--color-primary) !important;
    width:100% ;
}

.contactStyle01 dd dd {
    margin-bottom:0;
}



.contactStyle01 input[type="text"],
.contactStyle01 input[type="email"],
.contactStyle01 input[type="tel"],
textarea
{
    border-radius: 6px;
    width: 100%;
    padding: 0.5em 1.0em;
    border:1px solid var(--color-tertiary);
    margin-top: 0.5em;

}

.contactStyle01 ::placeholder {
    color:var(--color-secondary);
}

.contactStyle01 a {
    color:var(--color-primary);
    text-decoration: underline;
}
.contactStyle01 .width01 {    width: 10em !important;}

.contactStyle01 .flex {
    gap:0 1em;
    align-items: center;
    justify-content: flex-start;

}



.contactStyle01 select {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    border-radius: 6px;
    width: 100%;
    padding: 0.5em 1.5em;
    border:1px solid var(--color-tertiary);
    margin-top:0px;
    position: relative;
}
.contactStyle01 select:focus {
}
.contactStyle01 .selectWrap {
    margin-top: 0.5em;
    position: relative;

}
.contactStyle01 .selectWrap::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 16px;
    width: 12px;
    height: 12px;
    border-right: 1px solid var(--color-over);
    border-bottom: 1px solid var(--color-over);
    transform: rotate(45deg);
    pointer-events: none;
}

.contactStyle01 .selectWrap::before {
    position: absolute;
    content: '';
    pointer-events: none;
    right: 0;
    display: inline-block;
    width: 2.8em;
    height: 100%;
    
    border-radius: 0 8px 8px 0;
    background-color: var(--color-text-main);
}

.contactStyle01 .checkboxWrap {
    display: flex;
    flex-wrap: wrap;
    gap: .5em 2em;
    border: none;
}

.contactStyle01 .checkboxWrap label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
}

.contactStyle01 .checkboxWrap label::before {
    width: 26px;
    height: 26px;
    border-radius: 3px;
    border: 1px solid var(--color-tertiary);
    content: '';
}

.contactStyle01 .checkboxWrap label:has(:checked)::after {
    position: absolute;
    top: 4px;
    left: 8px;
    transform: rotate(45deg);
    width: 10px;
    height: 17px;
    border: solid var(--color-text-main);
    border-width: 0 3px 3px 0;
    content: '';
}

.contactStyle01 .checkboxWrap input {
    display: none;
}

.contactStyle01 dl dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

}
.contactStyle01 dl dl dt {
    width: 100px;
    white-space: nowrap;
}

.contactStyle01 dl dl dd {
    width:calc(100% - 100px);
    padding-bottom: 0;
}

.contactStyle01 .btnArea {
    display: flex;
    justify-content: center;
    width: 100%;
    gap:0 15px;
}


.docStyle01 {

}

.docStyle01 strong {
    font-weight: var(--font-weight-Bold);
    font-size:var(--font-size-nav);
    padding-top:1.5em;
    display: inline-block;
}

.docStyle01 p {
    padding-top:0.8em;

}

.docStyle01 p + ul  {
    padding-top:0;
}
.docStyle01 ul {
    padding-left:2em;

}
.docStyle01 ul li  {
    list-style: disc;
}

.scrollText {
    height:270px;
    padding:0 1em 1em;
    overflow-y: auto;
    border:1px solid var(--color-tertiary);
    margin:1em 0;
}

.err {
    padding:5em 0 10em;
}