@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/* font-family: "Noto Sans JP", sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
/* font-family: "Noto Serif JP", serif; */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700&display=swap');
/* font-family: 'Noto Sans', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@100;200;300;400;500;600;700&display=swap');
/* font-family: 'Noto Serif', serif; */

/* NOTE: 共通 */
body, html { width: 100%; height: 100%;}
html { font-size: 62.5%;}
body { font-size: 1.6em; color: #444; font-family: "Noto Sans JP", sans-serif; font-weight: 400;}
#wrapper { position: relative; height: 100%;}
.spacer { height: 80px;}
.desktop-only { display: none;}
#onScrollTarget { position: absolute; top: 0; left: 0; width: 0; height: 0; display: block;}

/* NOTE: header */
header { position: fixed; top: 0; left: 0; width: 100%; background: rgba(255, 255, 255, 1); box-shadow: 0 0 5px #ccc; z-index: 100;}
header .inner { width: 100%; height: 80px; display: flex; justify-content: center; align-items: center;}
header .inner img { height: 40px;}
header .inner ul { display: none}

/* NOTE: hamburger */
#hamburger { position: fixed; width: 50px; height: 50px; top: 12px; left: 10px; cursor: pointer; z-index: 102; transition: 0.3s;}
#hamburger span { position: absolute; left: 50%; transform: translateX(-50%); transition: all .3s ease-out;}
#hamburger span:nth-of-type(1) { top: 12px; width: 26px; height: 1px; background: #444;}
#hamburger span:nth-of-type(2) { top: 21px; width: 26px; height: 1px; background: #444;}
#hamburger span:nth-of-type(3) { top: 30px; width: 26px; height: 1px; background: #444;}
#hamburger.active span:nth-of-type(1) { top: 20px; transform: translateX(-50%) translateY(-50%) rotate(-45deg); background: #444;}
#hamburger.active span:nth-of-type(2) { opacity: 0;}
#hamburger.active span:nth-of-type(3) { top: 20px; transform: translateX(-50%) translateY(-50%) rotate(45deg);  background: #444;}

/* NOTE: nav */
nav#global { position: fixed; top: 0; left: -70%; width: 70%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; z-index: 101; padding: 70px 30px 30px 30px; transition: 0.3s; background: rgba(255, 255, 255, 0.9);}
nav#global.active { transform: translateX(100%); transition-duration: 0.3s;}
nav#global ul { list-style: none;}
nav#global ul li { border-bottom: 1px dotted #666;}
nav#global a { font-family: 'Noto Sans', sans-serif; font-weight: 600; display: block; font-size: 1.6rem; text-decoration: none; color: #444; line-height: 1.2; padding: 20px;}

/* NOTE: footer */
#pagetop { opacity: 0; pointer-events: none; background: #1b8fcb; color: #fff; width: 50px; height: 50px; border-radius: 50%; text-align: center; line-height: 45px; position: fixed; bottom: 20px; right: 10px; cursor: pointer; z-index: 90; transition: 0.3s;}
#pagetop.active { opacity: 1; pointer-events: auto;}
footer { width: 100%; background: #1a1a1a;}
footer .upper { width: 100%; background: #1a1a1a;}
footer .upper .inner { width: 100%; padding: 30px 20px;}
footer .upper .inner { font-size: 1.4rem; color: #b1b1b1;}
footer .upper .inner span { font-size: 1.8rem; font-weight: 500;}
footer .under { width: 100%; background: #000;}
footer .under .inner { width: 100%; padding: 30px 20px;}
footer .under ul { list-style: none; display: flex; justify-content: center; align-items: center; margin-bottom: 30px;}
footer .under ul li + li { margin-left: 30px;}
footer .under ul li a { font-size: 1.3rem; color: #b1b1b1; text-decoration: none;}
footer .under ul li a:hover { text-decoration: underline;}
footer .under small { display: block; font-size: 1.3rem; color: #b1b1b1; letter-spacing: 3px; text-align: center;}

/* NOTE: breadcrumbs */
#breadCrumbs { width: 100%; padding: 10px 0; font-size: 1.3rem; line-height: 1.2; color: #444; background: #f6f6f6;}
#breadCrumbs #breadCrumbsInner { width: 100%; padding: 0 20px;}
#breadCrumbs span { margin: 0 8px;}
#breadCrumbs span:first-child { margin: 0 5px 0 0;}
#breadCrumbs a { color: #444; text-decoration: none;}
#breadCrumbs a:hover { text-decoration: underline;}

/* NOTE: IntersectionObserver */
.target { transform: translateY(30px); opacity: 0; transition: 0.5s;}
.target.active { transform: none; opacity: 1;}

/* NOTE: pageHome */
#pageHome section.hero { width: 100%; height: 100vh; overflow: hidden; position: relative;}
#pageHome section.hero .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba( 0,0,0,0.2); z-index: 2; pointer-events: none;}
#pageHome section.hero h1 { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4.2rem; line-height: 1.3; font-family: 'Noto Sans', sans-serif; font-weight: 700; width: 100%; color: #fff; text-align: center; letter-spacing: 1px; z-index: 3;}
#pageHome section.hero .swiper { width: 100%; height: 100vh; position: relative;}
#pageHome section.hero .swiper-wrapper { width: 100%; height: 100vh;}
#pageHome section.hero .swiper-wrapper li { width: 100%; height: 100vh; overflow: hidden; position: relative;}
#pageHome section.hero .swiper-wrapper li img { width: 100%; height: 100%; object-fit: cover;}
#pageHome section.hero .swiper-pagination { position: absolute; bottom: 50px;}
#pageHome section.hero .swiper-pagination-bullet { background-color: #fff; opacity: 0.6; margin: 0 10px;}
#pageHome section.hero .swiper-pagination-bullet-active { background-color: #fff; opacity: 1;}
/* .swiper-button-next, .swiper-button-prev { color: rgba(255,255,255,0.7) !important; transform: scale(50%);} */
#pageHome section.hero h1 span { display: inline-block; clip-path: polygon(0 0,0 0, 0 100%, 0 100%);}
#pageHome section.hero h1 span:first-of-type { animation: 0.8s anime01 1s forwards;}
#pageHome section.hero h1 span:nth-of-type(2) { animation: 0.8s anime01 1.4s forwards;}
#pageHome section.hero h1 span:nth-of-type(3) { animation: 0.8s anime01 1.8s forwards;}
@keyframes anime01 {
  0% { clip-path: polygon(0 0,0 0, 0 100%, 0 100%);}
  100% { clip-path: polygon(0 0,100% 0, 100% 100%, 0 100%);}
}

#pageHome section.logo { position: relative;}
#pageHome section.logo > .inner { width: 100%; padding: 30px 10px; text-align: center;}
#pageHome section.logo ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; list-style: none;}
#pageHome section.logo ul li { width: 33.3%; padding: 5px;}
#pageHome section.logo ul li img { width: 100%;}

#pageHome section.about { position: relative;}
#pageHome section.about > .inner { width: 100%; padding: 120px 0; text-align: center;}
#pageHome section.about h2 { font-family: 'Noto Sans', sans-serif; font-weight: 500; display: block; width: 100%; color: #fff; font-size: 2.8rem; line-height: 1.0; letter-spacing: 3px; text-align: center; margin-bottom: 50px;}
#pageHome section.about img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;}
#pageHome section.about .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.1); z-index:-1;}
#pageHome section.about h3 { font-size: 3.4rem; color: #fff; font-weight: 300;}
#pageHome section.about .btn { display: block; margin-top: 50px; text-align: center;}
#pageHome section.about .btn a { font-family: 'Noto Sans', sans-serif; font-weight: 500; display: inline-block; text-decoration: none; text-align: center; font-size: 1.4rem; line-height: 1.0; color: #444; padding: 8px 30px; background: #fff; border-radius: 20px; border: 1px solid #444; transition: .3s;}
#pageHome section.about .btn a:hover { background: #1b8fcb; color: #fff;}

#pageHome section.proposal { position: relative; z-index: 5;}
#pageHome section.proposal > .inner { width: 100%; padding: 120px 0; text-align: center;}
#pageHome section.proposal h2 { font-family: 'Noto Sans', sans-serif; font-weight: 500; display: block; width: 100%; color: #fff; font-size: 2.8rem; line-height: 1.0; letter-spacing: 3px; text-align: center; margin-bottom: 50px;}
#pageHome section.proposal img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;}
#pageHome section.proposal .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.2); z-index:-1;}
#pageHome section.proposal h3 { font-size: 3.4rem; color: #fff; font-weight: 300;}
#pageHome section.proposal .btn { display: block; margin-top: 50px; text-align: center;}
#pageHome section.proposal .btn a { font-family: 'Noto Sans', sans-serif; font-weight: 500;display: inline-block; text-decoration: none; text-align: center; font-size: 1.4rem; line-height: 1.0; color: #444; padding: 8px 30px; background: #fff; border-radius: 20px; border: 1px solid #444; transition: .3s;}
#pageHome section.proposal .btn a:hover { background: #1b8fcb; color: #fff;}

#pageHome section.showcase { position: relative;}
#pageHome section.showcase > .inner { width: 100%; padding: 80px 20px 20px 20px; text-align: center;}
#pageHome section.showcase h2 { font-family: 'Noto Sans', sans-serif; font-weight: 500; display: block; width: 100%; color: #444; font-size: 2.8rem; line-height: 1.0; letter-spacing: 3px; text-align: center; margin-bottom: 50px;}
#pageHome section.showcase ul { list-style: none; display: flex; flex-wrap: wrap;}
#pageHome section.showcase ul li { width: 100%; position: relative;}
#pageHome section.showcase ul li + li { margin-top: 20px;}
#pageHome section.showcase ul li .inner { width: 100%; height: 250px; position: relative; }
#pageHome section.showcase ul li img.bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
#pageHome section.showcase ul li .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0); z-index:-1;}
#pageHome section.showcase ul li a { font-family: 'Noto Sans', sans-serif; font-weight: 500; display: block; color: #444; font-size: 1.8rem; text-decoration: none;}
#pageHome section.showcase ul li .made { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; text-align: center;}
#pageHome section.showcase ul li .made p { font-family: 'Noto Serif', serif; font-weight: 300; font-size: 1.5rem; letter-spacing: 1px; text-shadow: 1px  1px 1px #fff, -1px  1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff, 1px  0px 1px #fff, 0px  1px 1px #fff, -1px  0px 1px #fff;}
#pageHome section.showcase ul li .made p.ja { font-family: 'Noto Sans', sans-serif; font-weight: 300; font-size: 1.6rem; letter-spacing: 1px; text-shadow: 1px  1px 1px #fff, -1px  1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff, 1px  0px 1px #fff, 0px  1px 1px #fff, -1px  0px 1px #fff;}
#pageHome section.showcase ul li .made .img { width: 100%; height: auto; position: relative; overflow: hidden; border-radius: 100%;}
#pageHome section.showcase ul li .made .img img.spacer { width: 100%; height: auto; background: rgba(0,0,0,0.5);}
#pageHome section.showcase ul li .made .img img.thum {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.3s;}
#pageHome section.showcase ul li a:hover .made .img img.thum { transform: scale(1.1);}

section.column { position: relative; background: #f6f6f6;}
section.column > .inner { width: 100%; padding: 80px 20px 20px 20px; text-align: center;}
section.column h2 { font-family: 'Noto Sans', sans-serif; font-weight: 500; display: block; width: 100%; color: #444; font-size: 2.8rem; line-height: 1.0; letter-spacing: 3px; text-align: center; margin-bottom: 50px;}
section.column ul { list-style: none; display: flex; flex-wrap: wrap;}
section.column ul li { width: 100%; overflow: hidden; position: relative; background: #fff; padding: 20px;}
section.column ul li + li { margin-top: 20px;}
section.column ul li a { display: block;}
section.column ul li a .img { position: relative; overflow: hidden;}
section.column ul li a .img img.spacer { width: 100%; height: auto;}
section.column ul li a .img img.thum { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; transition: 0.3s;}
section.column ul li a:hover .img img.thum { transform: scale(1.05);}
section.column ul li .txt { padding: 5px;}
section.column ul li a { color: #444; text-decoration: none;}

/* NOTE: ページタイトル共通 */
section.pagetitle { padding: 50px 0; background: #fff;}
section.pagetitle h1 { font-size: 2.8rem; font-weight: 700; letter-spacing: 2px; line-height: 1.0; text-align: center;}
section.pagetitle h1 span { font-size: 1.5rem; font-weight: 500; display: inline-block; padding: 0 25px; position: relative;}
section.pagetitle h1 span:before, section.pagetitle h1 span:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 20px; height: 1px; background: #444;}
section.pagetitle h1 span:before { left: 0;}
section.pagetitle h1 span:after { right: 0;}
#pageProposal h1 span { letter-spacing: 0px;}

/* NOTE: pageAbout */
#pageAbout section.bg { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: -1;}
#pageAbout section.bg img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

#pageAbout section.img { width: 100%; height: 250px;}
#pageAbout section.body { background: #fff;}
#pageAbout section.body > .inner { width: 100%; padding: 30px;}
#pageAbout section.body p { font-size: 1.6rem; line-height: 2.0;}
#pageAbout section.body p + p { margin-top: 30px;}

/* NOTE: pageProposal */
#pageProposal section.body1 { }
#pageProposal section.body1 > .inner { width: 100%; padding: 0 30px 0 30px;}
#pageProposal section.body1 p { font-size: 1.8rem; font-weight: 500; line-height: 2.0; color: #1b8fcb;}

#pageProposal section.img > .inner { width: 100%; padding: 30px 20px 0 20px;}
#pageProposal section.img img { width: 100%;}
#pageProposal section.img .cap { font-size: 2.0rem; font-weight: 500; line-height: 1.0; text-align: center; margin-bottom: 20px;}
#pageProposal section.img .cap span { display: inline-block; padding: 5px 20px; letter-spacing: 1px; position: relative;}
#pageProposal section.img .cap span:before, #pageProposal section.img .cap span:after { position: absolute; top: 0; content:''; width: 8px; height: 100%; display: inline-block;}
#pageProposal section.img .cap span:before { content: ''; border-left: solid 2px #000; border-top: solid 2px #000; border-bottom: solid 2px #000; left: 0;}
#pageProposal section.img .cap span:after { content: ''; border-top: solid 2px #000; border-right: solid 2px #000; border-bottom: solid 2px #000; right: 0;}

#pageProposal section.body2 { }
#pageProposal section.body2 > .inner { width: 100%; padding: 0 30px 0 30px;}
#pageProposal section.body2 p { line-height: 2.0; margin: 30px 0;}
#pageProposal section.body2 dl { margin: 30px 0;}
#pageProposal section.body2 dt { font-size: 2.2rem; font-weight: 500; color: #1b8fcb; padding: 10px 0 10px 10px; border-top: dashed 1px #666; border-bottom: dashed 1px #666; margin-bottom: 20px;}
#pageProposal section.body2 dd { font-size: 1.8rem; font-weight: 500; line-height: 1.8; margin: 10px 0; padding: 0 10px;}

/* NOTE: pageShowcase */
#pageShowcase section.body { margin-bottom: 30px;}
#pageShowcase section.body > .inner { width: 100%; padding: 0 30px;}
#pageShowcase section.body p { font-size: 1.8rem; font-weight: 500; line-height: 2.0; color: #1b8fcb;}

#pageShowcase section.block { }
#pageShowcase section.block:last-of-type { margin-bottom: 10px;}
#pageShowcase section.block > .inner { width: 100%; padding: 25px 30px; background: #fff;}
#pageShowcase section.block h2 { font-size: 2.2rem; font-weight: 500; line-height: 1.0; text-align: center; margin-bottom: 30px;}
#pageShowcase section.block h2 span { display: inline-block; padding: 5px 20px; letter-spacing: 1px; position: relative;}
#pageShowcase section.block h2 span:before, #pageShowcase section.block h2 span:after { position: absolute; top: 0; content:''; width: 8px; height: 100%; display: inline-block;}
#pageShowcase section.block h2 span:before { content: ''; border-left: solid 2px #000; border-top: solid 2px #000; border-bottom: solid 2px #000; left: 0;}
#pageShowcase section.block h2 span:after { content: ''; border-top: solid 2px #000; border-right: solid 2px #000; border-bottom: solid 2px #000; right: 0;}
#pageShowcase section.block ul { list-style: none;}
#pageShowcase section.block ul li { width: 100%; position: relative; background: #ccc; padding: 20px; border-radius: 5px;}
#pageShowcase section.block ul li + li { margin-top: 30px;}
#pageShowcase section.block ul li:first-of-type:before { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 30px solid transparent; border-top: 30px solid #ccc;}
#pageShowcase section.block ul li .img { position: relative; overflow: hidden;}
#pageShowcase section.block ul li .img img.spacer { width: 100%; height: auto;}
#pageShowcase section.block ul li .img img.thum { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#pageShowcase section.block ul li .txt { background: #fff; padding: 10px;}
#pageShowcase section.block ul li .cap { font-size: 1.8rem; font-weight: 500; line-height: 1.3;}
#pageShowcase section.block ul li .body { font-size: 1.5rem; line-height: 1.5; margin-top: 5px;}

/* NOTE: pageColumn */
#pageColumn section.column > .inner { padding: 30px;}

/* NOTE: ページャー */
#pager { text-align: center; margin-top: 30px;}
#pager .wp-pagenavi a, #pager .wp-pagenavi span { color: #fff; display: inline-block; font-size: 1.6rem; line-height: 33px; border: none !important; background: #ccc; width: 40px; height: 40px;}
#pager .wp-pagenavi a:hover { background: #1b8fcb;}
#pager .wp-pagenavi span.current { font-weight: normal; background: #1b8fcb; border: none !important;}
#pager .wp-pagenavi span.pages,
#pager .wp-pagenavi a.nextpostslink,
#pager .wp-pagenavi a.previouspostslink,
#pager .wp-pagenavi a.last,
#pager .wp-pagenavi a.first { display: none;}

/* NOTE: pageSingle */
#pageSingle #breadCrumbs { background: #eee;}
#pageSingle section > .inner { width: 100%; padding: 30px; background: #fff;}
#pageSingle section.contents h1 { margin-top: 20px;}
#pageSingle section.contents .date { display: inline-block; font-size: 1.4rem; letter-spacing: 1px; color: #666;}
#pageSingle section.contents .addtoany_share_save_container { text-align: right;}
#pageSingle section.contents .link { text-align: center; margin-top: 50px;}
#pageSingle section.contents .link a { display: inline-block; text-decoration: none; text-align: center; font-size: 1.4rem; line-height: 1.0; color: #444; padding: 8px 30px; background: #fff; border-radius: 20px; border: 1px solid #444; transition: .3s;}
#pageSingle section.contents .link a:hover { background: #1b8fcb; color: #fff;}

/* NOTE: ネイティブCSS */
.native-block p { display: block; margin: 30px 0; font-size: 1.6rem; line-height: 2.0;}
.native-block a { color: #0066ff;}
.native-block strong { font-weight: bold; }
.native-block em { font-style: italic; }
.native-block h1 { font-size: 2.4rem; font-weight: 500; line-height: 1.3; margin-bottom: 50px;}
.native-block h2 { font-size: 2.2rem; font-weight: 500; margin: 50px 0 30px 0; line-height: 1.3; position: relative;}
.native-block h3 { font-size: 2.0rem; font-weight: 500; margin: 30px 0; line-height: 1.3;}
.native-block h4 { font-size: 1.8rem; font-weight: 500; margin: 20px 0; line-height: 1.3;}
.native-block h5 { font-size: 1.6rem; font-weight: 500; line-height: 1.3;}
.native-block ul { padding-left: 20px; line-height: 1.8; margin-bottom: 20px;}
.native-block ol { padding-left: 20px; line-height: 1.8; margin-bottom: 20px;}
.native-block blockquote { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 40px; -webkit-margin-end: 40px;}
.native-block .aligncenter { display: block; width: 100%; margin: 0 auto; text-align: center;}
.native-block .alignright { float: right; margin: 0 0 10px 20px;}
.native-block .alignleft { float: left; margin: 0 20px 10px 0;}
.native-block img { max-width: 100%; height: auto;}
.native-block figure figcaption { display: block; width: 100%; text-align: center; font-size: 1.4rem;}
.native-block figure.aligncenter figcaption { display: block; width: 100%;}
.native-block hr.wp-block-separator { border-top: 1px solid #ccc; border-bottom: 0;}
.native-block figure.wp-block-image { margin: 10px 0 !important;}
.native-block figure.wp-block-table { margin: 30px 0;}

/* NOTE: pageNotfound */
#pageNotfound #breadCrumbs { display: none;}
#pageNotfound section.body > .inner { width: 100%; padding: 50px 30px;}
#pageNotfound section.body span { font-size: 3.8rem; color: #ccc; letter-spacing: 2px;}
#pageNotfound section.body h1 { font-size: 1.8rem; font-weight: 400;}
#pageNotfound section.body p { margin: 50px 0; font-size: 1.6rem; line-height: 1.5;}
#pageNotfound section.body .btn { margin-top: 50px; text-align: center;}
#pageNotfound section.body .btn a { display: inline-block; text-decoration: none; text-align: center; font-size: 1.4rem; line-height: 1.0; color: #fff; padding: 8px 30px; background: #444; border-radius: 20px;}
#pageNotfound section.body .btn a:hover { background: #222;}