@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&family=Changa+One:ital@0;1&family=Kaisei+HarunoUmi:wght@400;500;700&display=swap');
/* ----------------------------------------------
reset
---------------------------------------------- */
html{scroll-behavior: smooth;}
body {margin: 0 auto; padding: 0; -webkit-text-size-adjust: 100%; overflow-wrap: break-word; overflow-x:hidden; letter-spacing:1px;}
table {margin : 0; border-collapse: collapse; border-spacing: 0; empty-cells: show;}
img {vertical-align: middle; border: none;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.elem{word-break: keep-all; line-break: strict; word-wrap: break-word; overflow-wrap: break-word;}
/*clearfix*/
.clearfix:after {content: " "; display: block; height: 0;clear: both; visibility: hidden;}
.clearfix {display: inline-table;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/*pagetop*/
.pagetop {height: 50px; width: 50px; position: fixed; right: 10px; bottom: 30px; background: rgba(255,255,255,1); border: solid 2px #db4248; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 2;}
.pagetop__arrow {height: 10px; width: 10px; border-top: 3px solid #db4248; border-right: 3px solid #db4248; transform: translateY(20%) rotate(-45deg);}
/* ***DEF-family*** */
html, body, table, th, td, li, div, p, em, mark{font-family:'Noto Sans JP', serif; font-weight:400;}
b, strong{font-weight:800;}
i{font-weight:900; font-family:'Font Awesome 6 Free'; display:inline-block; font-style: normal;}


/* ***DEF-FONTSIZE*** */
html {font-size: 62.5%;}
body {font-size:clamp(1.3rem,2vw,1.4rem); line-height:1.5;}
table {font-size:clamp(1.3rem,2vw,1.4rem); line-height:1.5;}

/* ***DEF-color*** */
html, body, table, th, td, li, div, p, dl, dt, dd, 
h1,h2,h3,h4,h5,h6
{line-height:2;}

a {outline:none; transition:.3s; color:inherit;}
a,a:hover,a:hover img {text-decoration: none;}
img {max-width: 100%; height: auto; width:auto;}
a .fa-caret-right{display:inline-block; margin-left:.8em;}
a .fa-caret-left{display:inline-block; margin-right:.8em;}

div.clear {clear: both !important;}

span.bk:before{content:"「"; display:inline-block; letter-spacing:0; width:.5em; text-indent:-.5em;}
span.bk:after{content:"」"; display:inline-block; letter-spacing:0; width:.5em;}

br.sp{display:none;}
@media (max-width:600px) {
br.pc{display:none;}
br.sp{display:inherit;}
}

p{margin:0;}
p+p{margin:1em 0 0 0;}


/*margin*/
.mt0{margin-top:0 !important;}
.mb0{margin-bottom:0 !important;}
.mtS{margin-top:1.5em !important;}
.mbS{margin-bottom:1.5em !important;}
.mtM{margin-top:3em !important;}
.mbM{margin-bottom:3em !important;}
.mtL{margin-top:5em !important;}
.mbL{margin-bottom:5em !important;}




main h1{/*font-size:clamp(3rem,4.2vw,4.2rem); font-weight:600; letter-spacing:0.05em; text-align:center; margin:0 0 1em 0;*/}
main h1:after{/*content:""; display:block; width:7rem; height:3px; background:#c69a3a; margin:1.5rem auto 0 auto;*/}
main h2{font-size:clamp(3rem,5vw,4.5rem); line-height:1.6; font-weight:700; font-style:italic; letter-spacing:0.01em; /*font-size:clamp(2rem,2.5vw,2.5rem); font-weight:600; border-bottom:1px solid #e1e6ee; line-height:1.5; padding:0 0 .5em 0; margin:2em 0 1em 0;*/}
main h2 span{font-style:normal; display:block; font-size:clamp(1.1rem, 2vw, 1.3rem);}
main h2 small{font-style:normal; font-weight:normal; display:block; font-size:clamp(1.1rem, 2vw, 1.3rem); color:#aaa;}

main h3{}
main h4{}
main h5{}

/*align*/
.alignright{margin-left:auto; margin-right:0;}
.alignleft{margin-left:0; margin-right:auto;}
.aligncenter{margin-left:auto; margin-right:auto;}


/*table*/
main table{border-collapse:collapse; text-align:left; line-height:1.3; margin-top:2em; margin-bottom:2em;}
main table th{border:1px solid #e1e6ee; background:#f3f6fa; font-weight:600; white-space:nowrap; width:10em; padding:1em;}
main table td{border:1px solid #e1e6ee; padding:1em;}

main ul, main ol{margin-top:2em; margin-bottom:2em;}
main ul li, main ol li{margin:.5em 0;}





/*header*/
.site-header {position:fixed; z-index:9900; width:100%;}
.site-header .inner{position:relative; width:100%; background:#fff; height:100px; display:flex; align-items:center; justify-content:center;}
.site-header .logo {text-align:center; font-size:11px; font-weight:600; display:inline-block; line-height:1;}
.site-header .logo img{display:block; width:70px; height:auto; margin:0 auto .5em auto;}
.site-header .inner .navarea{position:absolute; left:0; top:0; z-index:+1;}
.site-header .inner .search{position:absolute; right:0; top:0; z-index:+1;}
@media (max-width: 600px) {
.site-header .inner{height:80px;}
.site-header .logo {font-size:10px;}
.site-header .logo img{width:60px;}
}


/*navarea*/
.menu {position:fixed; top:0; left:-100%; width:90%; max-width:400px; height:100%; background:#f2f2f2; border-right:0.5px solid #ddd; transition:left 0.3s ease; box-sizing: border-box; z-index:+1;}
.menu.open {left:0;}
.hamburger {position: fixed; top:0; left:0;  cursor:pointer; aspect-ratio:1; height:100px; display:flex; justify-content:center; align-items:center;}
.hamburger .icon{width:20px;}
.hamburger span {display:block; height:2px; width:100%; background-color:#333; margin:5px 0; transition:0.4s;}
.hamburger.active span:nth-child(1) {transform:rotate(45deg) translate(5px, 5px);}
.hamburger.active span:nth-child(2) {opacity:0;}
.hamburger.active span:nth-child(3) {transform:rotate(-45deg) translate(5px, -5px);}
.gnav{margin:100px 0 0 0;}
@media (max-width: 600px) {
.hamburger {height:80px;}
.gnav{margin:80px 0 0 0;}
}


/*formarea*/
.site-header .icon input{display:none;}
.site-header .icon label{aspect-ratio:1; height:100px; display:flex; justify-content:center; align-items:center; font-size:1.8rem; cursor:pointer;}
.searcharea {z-index:+1;  position: fixed; top: 100px; left: 0; width: 100%; background: #f2f2f2; border-bottom:0.5px solid #ddd; display:flex; justify-content:center; align-items:center;}
/*.searcharea {transition: transform 0.4s ease; transform: scaleY(0); transform-origin: top;}
.searcharea.open {transform: scaleY(1);}*/
.searcharea {height: 100px; max-height: 0; overflow: hidden; transition: max-height 0.4s ease;}
.searcharea.open {max-height: 100px;}
@media (max-width: 600px) {
.searcharea {top:80px;}
.site-header .icon label{aspect-ratio:3 / 4; height:80px;}
}






/*footer*/
.site-footer{background:#111; color:#5f5f64; text-align:center; padding:2em 1em;}
.footer-menu{display:flex; gap:2em; align-items:center; justify-content:center; flex-wrap:wrap; list-style:none; margin:2em auto; padding:0; line-height::1;}
.footer-menu a{color:#aaa; text-decoration:none; display:inline-block; font-size:clamp(1.1rem,1.2vw,1.2rem); line-height:1 !important;}
.site-footer p{color:#5f5f64; font-size:1.1rem; line-height:1.3 !important;;}
footer .logo img{filter: brightness(0) invert(1); display:block; width:50px; height:auto; margin:0 auto;}
@media (max-width: 600px) {
  .footer-menu{display:flex; gap:1em;}
}



/*INDEX TOP*/




/*Page-intro*/

.sub-intro{
  position:relative;
  min-height:310px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#061c3c;
}
.sub-intro::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(3,26,57,.85),rgba(3,26,57,.35) 42%,rgba(3,26,57,.08));
  z-index:1;
}
.sub-intro > .inner{
  position:relative;
  z-index:2;
  width:min(1120px,90vw);
  margin:0 auto;
  color:#fff;
  font-size:clamp(4rem,4vw,5rem);
  font-weight:400;
  letter-spacing:.08em;
  text-shadow:0 3px 12px rgba(0,0,0,.45);
}
.sub-intro > .inner > span:after{content:""; display:block; width:6rem; height:3px; background:#c69a3a; margin:1rem 0 0 0;}
.sub-intro small{
  display:block;
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.8rem,2vw,2.2rem);
  letter-spacing:.06em;
}
.sub-intro{background-position:center center; background-size:cover; background-repeat:no-repeat;}




.breadcrumb{
  width:min(1120px,90vw);
  margin:0 auto;
  padding:22px 0 4px;
  color:#6b7788;
  font-size:90%;
}
.breadcrumb a{color:var(--navy);text-decoration:none;font-weight:500;}
.breadcrumb span{margin-left:12px;}







main{padding-top:100px;}
@media (max-width: 600px) {
main{padding-top:80px;}
}


.container{}
/*body.home*/ section .inner{margin:0 auto; padding:5vw 1em;}
/*body.home*/ section .inner h2{margin:0 0 1em 0;} 
@media (max-width: 600px) {
/*body.home*/ section .inner{margin:0 auto; padding:3em 1em 4em 1em;}
}

.pankuzu.back{margin:.8em 1em 0 1em; font-size:85%;}
@media (any-hover: hover) {
.pankuzu.back a:hover{color:#db4248;}
}

section:not(.pickup) > .inner{max-width:calc(1350px + 2em);}




/*movbox*/
.movbox .item{}
.movbox a{position:relative;display:flex; justify-content:center; align-items: center; border-bottom:0 !important; padding:0; margin:0;}
.movbox a span{ position:absolute;}
.movbox a span:before{content:url(../img/arw_mov.png);opacity:1;}


/*BTN*/
.btnarea {text-align:center;}
.btnarea a, a.btn{display:inline-flex; justify-content:center; align-items:center; border:1px solid; line-height:1.4; margin:1em auto; text-align:center; padding:1.2em 1.5em; min-width:200px; font-weight:500; color:inherit;}
.btnarea.white a, a.btn.white{color:#fff;}
.btnarea.small a, a.btn.small{font-size:85%; min-width:150px; font-weight:700;}
@media (any-hover: hover) {
.btnarea a, a.btn{transition:.3s;}
.btnarea a:hover, a.btn:hover{color:#fff; background:#000; border-color:#000;}
.btnarea.white a:hover, a.btn.white:hover{color:#333; background:#fff; border-color:#fff;}
}


/*pickup*/
.pickup .inner{display:flex; padding:0 !important;}
.pickup .inner a{display:block; width:calc(100% - 4px / 3); color:inherit;}
.pickup .inner a+a{border-left:2px solid #000;}
.pickup .inner .item{position:relative; aspect-ratio:6 / 7; background:#f5f5f5;}
.pickup .inner .item > span{position:absolute; left:1.5em; top:1.5em; font-weight:700; color:#fff; background:rgba(0,0,0,.5); border:1px solid #ccc; display:inline-block; line-height:1.8em; font-style:italic; padding:0 1em; z-index:+1;}
.pickup .inner .text{padding:1.5em; width:100%; aspect-ratio:6 / 7; display:flex; align-items:flex-end; position:absolute; z-index:+1;
background-image: linear-gradient(0deg, #000000cc 0%, #0000001a 50%, transparent 70% 100%);}
.pickup .inner .text h2{margin:0; padding:0; font-size:clamp(1.6rem, 2vw, 2rem); font-style:normal; color:#fff;}
.pickup .inner .text h2 small{font-size:1.1rem; color:#eee; display:block; line-height:1; margin:0 0 1em 0;}
.pickup .item .img{aspect-ratio:6/7; width:100%; overflow:hidden; cursor: pointer;}
.pickup .item .img img{width: 100%; height:100%; transition-duration: 0.5s; object-fit:cover;}
@media (max-width: 768px) {
.pickup .inner{display:inherit;}
.pickup .inner a+a{border-left:0;}
.pickup .inner .item,.pickup .inner .text,.pickup .item .img{aspect-ratio:5/3;}
}
@media (any-hover: hover) {
.pickup a:hover .item .img img{transform: scale(1.05);　transition-duration: 0.5s;}
}










/*otsu*/
section.otsu{background-image:url(../img/otsu.jpg); background-size:cover; background-position:center center;}
section.otsu .inner{width:90%; margin:0 auto; position:relative; height:500px; display:flex; align-items:center;}
section.otsu .mask{position:absolute; width:100%; height:500px; background-image: linear-gradient(90deg, #00000080, #0000001a);}
section.otsu h2{font-style:normal; color:#fff; margin:0;}
section.otsu p{color:#eee; text-shadow:0 0 5px #000; margin:1.5em 0 2em 0;}
section.otsu .btn{background:#c6ff2e; color:#000; border:0; margin:0;}
@media (max-width: 600px) {
section.otsu .inner, section.otsu .mask{height:450px;}
}
@media (any-hover: hover) {
section.otsu .btn:hover{background:#e1696e; color:#fff;}
}



/*collabo*/
section.collabo .inner{max-width:calc(1350px + 2em);}
ul.projects{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1%;}
ul.projects li{width:calc(96%/5);}
ul.projects a{}
ul.projects .item{display:flex; justify-content:center; align-items:center; aspect-ratio:8 / 3; position:relative;}
ul.projects .item .text{aspect-ratio:1/1; width:100%; display:flex; align-items:flex-end; padding:0; position:absolute; z-index:+1;}
ul.projects .item .text h3{margin:0; padding:.8em; font-size:1.2rem; line-height:1.4; color:#fff; width:100%; background-image: linear-gradient(0deg, #000000cc, transparent); transition-duration: 0.5s;}
ul.projects .item .img{aspect-ratio:1/1; width:100%; overflow:hidden; cursor: pointer;}
ul.projects .item .img img{width: 100%; transition-duration: 0.5s;}
@media (max-width: 1200px) {
ul.projects li{width:calc(95%/5);}
}
@media (max-width: 1000px) {
ul.projects li{width:calc(96%/4);}
}
@media (max-width: 800px) {
ul.projects{gap:2%;}
ul.projects li{width:calc(96%/3);}
}
@media (max-width: 600px) {
ul.projects .item .text h3{padding:2em .8em .8em .8em;}
}
@media (any-hover: hover) {
ul.projects a:hover .text h3{padding:2em .8em .8em .8em;}
ul.projects a:hover .img img{transform: scale(1.05);　transition-duration: 0.5s;}
}



/*partners*/
section.partners{background:#f2f2f2;}
section.partners .inner{max-width:calc(1400px + 2em);}
ul.bnrlist{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1%;}
ul.bnrlist li{width:calc(95%/6);}
ul.bnrlist a{display:block;}
ul.bnrlist .item{background:#fff; border:1px solid #ddd; display:flex; justify-content:center; align-items:center; aspect-ratio:8 / 3;}
ul.bnrlist .item img{display:block; width:40%; height:auto; min-width:100px;}
@media (max-width: 1200px) {
ul.bnrlist li{width:calc(95%/5);}
}
@media (max-width: 1000px) {
ul.bnrlist li{width:calc(96%/4);}
}
@media (max-width: 800px) {
ul.bnrlist{gap:2%;}
ul.bnrlist li{width:calc(96%/3);}
}




/*ABOUT*/
body#about {background-image:url(../img/bg_about.jpg); background-size:50%; background-position:right top; background-repeat:no-repeat;}
@media (max-width: 1200px) {
body#about {background-size:70%;}
}
@media (max-width: 1200px) {
body#about {background-position:right top 80px;}
}
section.about{background:#e1696e;}
section.about .inner{max-width:calc(950px + 2em);}
section.about h2{color:#fff; font-style:inherit; text-align:center; font-weight:500; font-size:clamp(3rem, 4vw, 4rem); margin-top:0; padding-top:.5em;}
section.about h2 span{color:#c6ff2e; font-weight:800;}
section.about p{color:#fff; text-align:center;}
section.about .btnarea{margin-top:3em;}
section.abouts .intro{display:flex; gap:5%; width:100%; align-items:center;}
section.abouts .title{width:40%; text-align:center;}
section.abouts .title img{display:inline-block; margin-bottom:1.5em; width:60%; max-width:300px; height:auto;}
section.abouts .title p{font-weight:700; line-height:1.5; font-size:clamp(1.8rem, 3vw, 3rem);}
section.abouts .title p mark{font-weight:700;}
section.abouts .lead{width:60%;}
section.abouts .lead p{font-weight:500;}
@media (max-width: 1200px) {
section.abouts .title, section.abouts .lead{width:50%;}
}
@media (max-width: 800px) {
section.abouts .intro{display:block;}
section.abouts .title, section.abouts .lead{width:auto;}
section.abouts .title{margin-bottom:4em;}
}
.aboutwrap h2{text-align:center; font-style:normal; font-size:clamp(2.2rem, 4vw, 3.4rem); line-height:1.5; margin-bottom:1.5em !important;}
.aboutwrap h2 small{display:block; margin-bottom:1em;}
.aboutwrap h2+p.lead{font-weight:500; text-align:center;}

body#about a.btn{display:table; margin:0 auto !important; max-width:250px;}
@media (any-hover: hover) {
body#about a.btn:hover img{filter: brightness(0) invert(1);}
}


section.airdam{background:#f2f2f2;}
section.airdam .example{display:flex; gap:3%; margin:5em 0;}
section.airdam .item{background:#fff; box-shadow:0 0 20px rgba(100,100,100,.2); padding:3em; width:50%;}
section.airdam .item h3{font-family: "Kaisei HarunoUmi", serif; font-weight: 500; font-size:clamp(2rem, 3vw, 3rem); margin:.5em 0 1.5em 0; line-height:1.5;}
section.airdam .img{width:80%; max-width:300px; margin:2em auto 0 auto;}
section.airdam .bottom p{text-align:center; font-size:120%; font-weight:500; margin-bottom:2em;}
@media (max-width: 800px) {
section.airdam h2, section.airdam .lead p{text-align:left;}
section.airdam .example{display:block; margin:3em 0;}
section.airdam .item{padding:2em; width:auto; margin:20px 0;}
}
@media (max-width: 600px) {
section.airdam .item{box-shadow:0 0 10px rgba(100,100,100,.3); margin:20px 0;}
section.airdam .item p{font-size:95%; line-height:1.5;}
}

.medias{display:flex; gap:1%; align-items:stretch; justify-content:center; flex-wrap:wrap; margin:3em 0 0 0;}
.medias a{display:block; border:1px solid #ddd; padding:2%; border-radius:1em; width:calc(97% / 4);}
.medias h3{margin:1em 0; text-align:center; line-height:1.5; font-size:clamp(1.5rem, 2vw, 1.8rem);}
.medias h3 small{font-size:clamp(1.1rem, 2vw, 1.2rem); display:block; text-align:center margin:0; color:#e1696e; font-weight:500;}
.medias p{line-height:1.5; font-weight:500; font-size:90%;}
.medias img{display:block; width:100%; height:auto; max-width:300px; margin:0 auto 1.5em auto;}
@media (max-width: 1000px) {
.medias{gap:2%;}
.medias a{width:calc(98% / 2); margin:1% 0; padding:3%;}
}
@media (max-width: 600px) {
.medias{display:block;}
.medias a{width:100%; margin:1em 0; padding:1.5em;}
.medias img{max-width:250px;}
}


section.partner{background:#f2f2f2;}
.partner a.btn img{max-width:100px;}
.partner .btnarea{margin:3em 0;}
.partner .inner img{display:block; margin:0 auto;}