@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+Sans:wght@100;200;300;400;500;600;700&display=swap');
/* font-family: 'Noto Sans', sans-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: 70px;} */
.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%; z-index: 100; transition: 0.3s;}
header .logo_dark { display: none;}
header.scrolled { background: #fff;}
header.scrolled .logo_wh { display: none;}
header.scrolled .logo_dark { display: block;}
header.scrolled { opacity: 1; background: #fff;}
header .inner { width: 100%; height: 70px; display: flex; align-items: center; padding-left: 20px;}
header .inner .logo { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 130px;}
header .inner .logo img { width: 100%;}
header .inner ul.main { display: none;}

/* NOTE: hamburger */
#hamburger { position: fixed; width: 50px; height: 50px; top: 12px; right: 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: 3px; background: #c19648;}
#hamburger span:nth-of-type(2) { top: 21px; width: 26px; height: 3px; background: #c19648;}
#hamburger span:nth-of-type(3) { top: 30px; width: 26px; height: 3px; background: #c19648;}
#hamburger.active span:nth-of-type(1) { top: 20px; transform: translateX(-50%) translateY(-50%) rotate(-45deg); background: #c19648;}
#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: #c19648;}

/* NOTE: nav */
nav#global { position: fixed; top: 0; right: -100%; width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; z-index: 101; transition: 0.3s; background: #fff; padding: 0 0 30px 0;}
nav#global.active { transform: translateX(-100%); transition-duration: 0.3s;}
nav#global .line { width: 100%; height: 70px; background: #666; display: flex; align-items: center; padding-left: 20px;}
nav#global .line img { width: 130px;}
nav#global > ul { list-style: none; padding: 10px 30px 30px 30px; }
nav#global ul li { border-bottom: 1px solid #ddd;}
nav#global ul li a { display: block; font-size: 1.6rem; text-decoration: none; color: #666; line-height: 1.2; padding: 20px 0;}
nav#global > ul li span { display: block; font-size: 1.6rem; text-decoration: none; color: #666; line-height: 1.2; padding: 20px 0;}
nav#global .under { padding-left: 20px;}
nav#global .under ul { list-style: none;}
nav#global .under ul li { border-top: 1px solid #ddd; border-bottom: none;}

nav#global li.lang2 #langswith ul { display: flex; list-style: none;}
nav#global li.lang2 #langswith ul li { position: relative; border-bottom: none;}
nav#global li.lang2 #langswith ul li a { display: inline-block; position: relative; display: flex; justify-content: center; align-items: center; height: 70px;}
nav#global li.lang2 #langswith ul li + li { margin-left: 40px;}
nav#global li.lang2 #langswith ul li + li:after { position: absolute; top: 50%; left: -20px; transform: translateY(-50%); content: "|";}
nav#global li.lang2.none { display: none;}

/* NOTE: footer */
#pagetop { opacity: 0; pointer-events: none; background: rgba(193, 150, 72, 0.9); 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: #eeeff0;}
footer .inner { width: 100%; padding: 0 20px 50px 20px;}
footer .inner ul { list-style: none; margin-bottom: 30px;}
footer .inner ul li { border-bottom: 1px solid #ddd; padding: 20px 0;}
footer .inner ul li .mi { display: none;}
footer .inner ul li a { display: inline-block; font-size: 1.5rem; color: #666; text-decoration: none; position: relative; padding-bottom: 5px;}
footer .inner ul li br + a { margin-top: 25px;}
footer .inner ul li a:hover { color: #c19648;}
footer .inner ul li a:after { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); content: ''; width: 0; height: 1px; background: #c19648; transition: .3s all; }
footer .inner ul li a:hover::after { width: 100%;}
footer .inner small { display: block; font-size: 1.4rem; color: #444; 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; position: relative;}
#pageHome section.hero canvas { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: -1;}

#pageHome section.hero .intrologo { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; pointer-events: none;}
#pageHome section.hero.active .intrologo { animation: anime01 3s 0s forwards;}
#pageHome section.hero .intrologo img { width: 230px; height: 230px;}
@keyframes anime01 {
  0% { opacity: 0;}
  70% { opacity: 1;}
  100% { opacity: 0;}
}

#pageHome section.hero .swiper { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;}
#pageHome section.hero .swiper-wrapper { width: 100%; height: 100vh;}
#pageHome section.hero .swiper-wrapper li { width: 100%; height: 100vh; overflow: hidden;}
#pageHome section.hero .swiper-wrapper li img { width: 100%; height: 100%; object-fit: cover;}

#pageHome section.hero .product { opacity: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; justify-content: center; align-items: center; transition: 0s;}
#pageHome section.hero .product.active { opacity: 1; transition: 3s;}
#pageHome section.hero .product.active ul li img { transform: scale(1); opacity: 1; transition: 0s;}
#pageHome section.hero .product.active2 { opacity: 1;}
#pageHome section.hero .product.active2 ul li:nth-of-type(1) img { transform: none; transition: 0.8s; transition-delay: 1s; opacity: 1;}
#pageHome section.hero .product.active2 ul li:nth-of-type(2) img { transform: none; transition: 0.8s; opacity: 1;}
#pageHome section.hero .product.active2 ul li:nth-of-type(3) img { transform: none; transition: 0.8s; opacity: 1;}
#pageHome section.hero .product.active2 ul li:nth-of-type(4) img { transform: none; transition: 0.8s; transition-delay: 1s; opacity: 1;}
#pageHome section.hero .product ul { width: 100%; padding: 0 10px; display: flex; justify-content: space-between; align-items: center; list-style: none;}
#pageHome section.hero .product ul li { height: 120px;}
#pageHome section.hero .product ul li img { height: 100%; transition: 0.3s; cursor: pointer; transform: scale(0.9); opacity: 0;}
#pageHome section.hero .product ul li:hover img { transform: scale(1.05);}

#pageHome section.hero .prodetail.active { opacity: 1; pointer-events: auto;}
#pageHome section.hero .prodetail.active .inner .img img { opacity: 1; transition: 0.3s;}
#pageHome section.hero .prodetail.active .inner .txt { opacity: 1; transition: 0.8s; transition-delay: 0.3s;}
#pageHome section.hero .prodetail { opacity: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; justify-content: center; align-items: center; transition: 0.5s; pointer-events: none;}
#pageHome section.hero .prodetail .arrow { position: absolute; top: 100px; left: 20px;}
#pageHome section.hero .prodetail .arrow img { width: 40px; height: 40px; cursor: pointer;}
#pageHome section.hero .prodetail .inner { width: 100%;}
#pageHome section.hero .prodetail .inner .img { width: 100%; text-align: center; margin-bottom: 30px;}
#pageHome section.hero .prodetail .inner .img img { opacity: 0; width: auto; height: 150px; transition: 0s;}
#pageHome section.hero .prodetail .inner .txt { width: 100%; color: #fff; padding: 0 20px; opacity: 0; transition: 0s; display: flex; justify-content: center; align-items: center; flex-direction: column;}
#pageHome section.hero .prodetail .inner .txt .name { font-size: 2.4rem; font-weight: 600; letter-spacing: 0.3rem; margin-bottom: 20px;}
#pageHome section.hero .prodetail .inner .txt p { font-size: 1.7rem; line-height: 1.8; font-weight: 400; letter-spacing: 0rem; margin-bottom: 50px;}
#pageHome section.hero .prodetail .inner .txt .btn { width: 100%; text-align: center;}
#pageHome section.hero .prodetail .inner .txt .btn a { display: inline-block; width: 80%; background: #fff; border-radius: 5px; text-align: center; padding: 12px 0; color: #c19648; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.3rem; text-decoration: none; transition: 0.3s;}
#pageHome section.hero .prodetail .inner .txt .btn a:hover { background: #e3f3c3; outline: solid #fff 2px; outline-offset: -2px; transform: translateY(-3px);}

#pageHome section.history { padding: 50px 0;}
#pageHome section.history > .inner { width: 100%;}
#pageHome section.history h2 { font-size: 2.8rem; font-weight: 700; text-align: center; margin-bottom: 10px;}
#pageHome section.history ul { list-style: none;}
#pageHome section.history ul li { padding: 0 20px; text-align: center;}
#pageHome section.history ul li + li { margin-top: 50px;}
#pageHome section.history ul li .item { text-align: center;}
#pageHome section.history ul li .item .number { font-family: 'Noto Sans', sans-serif; font-size: 6.0rem; font-weight: 900; color: #c19648;}
#pageHome section.history ul li .item .plus { display: inline-block; font-family: 'Noto Sans', sans-serif; font-size: 6.0rem; font-weight: 900; color: #c19648; transform: translateY(10px); margin-left: 5px;}
#pageHome section.history ul li .txt { }
#pageHome section.history ul li .txt span:nth-of-type(1) { display: inline-block; font-size: 1.8rem; color: #c19648; margin-bottom: 30px;}
#pageHome section.history ul li .txt span:nth-of-type(2) { font-size: 1.6rem; color: #666;}

#pageHome section.rd { width: 100%; position: relative;}
#pageHome section.rd .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;}
#pageHome section.rd .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.3); z-index: -1;}
#pageHome section.rd ul { list-style: none;}
#pageHome section.rd ul li { width: 100%; padding: 20px 20px;}
#pageHome section.rd ul li + li { border-top: 1px solid #fff;}
#pageHome section.rd ul li { height: 300px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
#pageHome section.rd ul li .txt { display: flex; justify-content: center; align-items: center; flex-direction: column; transition: 1s;}
#pageHome section.rd ul li:hover .txt { transform: translateY(-30px); transition: 1s;}
#pageHome section.rd ul li .icon { transform: scale(2.0); margin-bottom: 20px;}
#pageHome section.rd ul li p { font-size: 1.8rem; color: #fff; text-align: center; margin-bottom: 20px;}
#pageHome section.rd ul li a { font-size: 1.8rem; display: inline-block; background: #fff; color: #c19648; font-weight: 600; padding: 10px 30px; border-radius: 30px; text-decoration: none; transition: 0.3s;}
#pageHome section.rd ul li a:hover { background: #c19648; color: #fff; transition: 0.3s;}

#pageHome section.experts { padding: 50px 0; background: #f7f8f9;}
#pageHome section.experts > .inner { width: 100%; padding: 0 20px;}
#pageHome section.experts h2 { font-size: 2.8rem; font-weight: 700; text-align: center; margin-bottom: 30px;}
#pageHome section.experts ul { list-style: none;}
#pageHome section.experts ul li { width: 100%; background: #fff; padding: 30px; border-radius: 20px; box-shadow: 0 0 8px #ccc; display: flex; align-items: center; flex-direction: column; transition: 0.3s;}
#pageHome section.experts ul li:hover { transform: scale(1.05); transition: 0.3s;}
#pageHome section.experts ul li + li { margin-top: 20px;}
#pageHome section.experts ul li .img { display: inline-block; position: relative; margin-bottom: 10px; text-align: center;}
#pageHome section.experts ul li .img img.spacer { width: 150px; height: 150px;}
#pageHome section.experts ul li .img img.photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px;}
#pageHome section.experts ul li .name { font-size: 2.0rem; font-weight: 600; margin-bottom: 10px; text-align: center;}
#pageHome section.experts ul li p { line-height: 1.8; color: #666; text-align: left;}
#pageHome section.experts ul li:last-of-type { background: none; box-shadow: none; padding: 0; display: flex; justify-content: center; align-items: center;}
#pageHome section.experts ul li:last-of-type:hover { transform: scale(1.0);}
#pageHome section.experts ul li:last-of-type a { display: block; width: 100%; text-align: center; background: #fff; border: 2px solid #c19648; color: #c19648; border-radius: 30px; padding: 15px 0; font-size: 1.8rem; font-weight: 600; text-decoration: none; transition: 0.3s;}
#pageHome section.experts ul li:last-of-type a:hover { background: #c19648; color: #fff; transition: 0.3s;}

#pageHome section.topics { padding: 50px 0; background: #f7f8f9;}
#pageHome section.topics > .inner { width: 100%; padding: 0 20px;}
#pageHome section.topics h2 { font-size: 2.8rem; font-weight: 700; text-align: center; margin-bottom: 30px;}
#pageHome section.topics ul { list-style: none;}
#pageHome section.topics ul li { width: 100%; background: #fff; padding: 20px; transition: 0.3s;}
#pageHome section.topics ul li + li { margin-top: 20px;}
#pageHome section.topics ul li:hover { box-shadow: 0 0 8px #ccc; transition: 0.3s;}
#pageHome section.topics ul li a { text-decoration: none;}
#pageHome section.topics ul li .date { font-family: 'Noto Sans', sans-serif; font-size: 1.4rem; color: #c19648; margin-bottom: 30px;}
#pageHome section.topics ul li .title { font-size: 2.0rem; line-height: 1.5; color: #c19648; margin-bottom: 30px;}
#pageHome section.topics ul li .btn { display: inline-block; background: #c19648; color: #fff; border-radius: 30px; padding: 15px 40px; font-size: 1.5rem; font-weight: 600; text-decoration: none; margin-bottom: 30px; transition: 0.3s;}
#pageHome section.topics ul li:hover .btn { background: #fff; color: #c19648; outline: 1px solid #c19648; transition: 0.3s;}
#pageHome section.topics ul li .img { position: relative;}
#pageHome section.topics ul li .img img.spacer { width: 100%; height: auto;}
#pageHome section.topics ul li .img img.photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

/* NOTE: pageAbout */
#pageAbout section.hero { width: 100%; height: 60vh; position: relative;}
#pageAbout section.hero .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;}
#pageAbout section.hero .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.3); z-index: -1;}
#pageAbout section.hero .inner { width: 100%; height: 60vh; display: flex; align-items: center;}
#pageAbout section.hero .inner .txt { width: 100%; color: #fff; padding: 0 30px;}
#pageAbout section.hero .inner .txt .mi { font-size: 2.8rem; font-weight: 500; letter-spacing: 0.3rem; line-height: 1.3; margin-bottom: 20px;}
#pageAbout section.hero .inner .txt p { font-size: 1.6rem; line-height: 1.8;}

#pageAbout section.column { width: 100%; position: relative;}
#pageAbout section.column .bg { opacity: 0;}
#pageAbout section.column .bg.active { opacity: 1;}
#pageAbout section.column .bg1-1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3;}
#pageAbout section.column .bg1-2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; clip-path: inset(0 0 75% 0); filter: blur(10px);}
#pageAbout section.column .bg2-1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3;}
#pageAbout section.column .bg2-2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; clip-path: inset(25% 0 50% 0); filter: blur(10px);}
#pageAbout section.column .bg3-1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3;}
#pageAbout section.column .bg3-2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; clip-path: inset(50% 0 25% 0); filter: blur(10px);}
#pageAbout section.column .bg4-1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3;}
#pageAbout section.column .bg4-2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; clip-path: inset(75% 0 0 0); filter: blur(10px);}

#pageAbout section.column .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.3); z-index: -1;}
#pageAbout section.column > .inner { }
#pageAbout section.column ul { list-style: none;}
#pageAbout section.column ul li { width: 100%; height: 300px; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0 30px;}
#pageAbout section.column ul li.active { background: rgba(0, 0, 0, 0.3);}
#pageAbout section.column ul li .mi { font-size: 2.4rem; font-weight: 700; color: #fff; margin-bottom: 30px;}
#pageAbout section.column ul li p { font-size: 1.8rem; line-height: 1.8; color: #fff;}

#pageAbout section.expert { padding: 50px 0; background: #f7f8f9; position: relative;}
.anchor { position: absolute; top: -70px;}
#pageAbout section.expert > .inner { }
#pageAbout section.expert h2 { font-size: 2.8rem; font-weight: 700; text-align: center; margin-bottom: 30px;}
#pageAbout section.expert ul.main { list-style: none;}
#pageAbout section.expert ul.main > li { padding: 40px 20px; background: #fff;}
#pageAbout section.expert ul.main > li:nth-of-type(2) { background: #f7f7f7; padding: 40px 20px 0 20px;}
#pageAbout section.expert ul li .img { width: 60%; margin: 0 20%; position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 20px; display: flex; justify-content: center; align-items: center;}
#pageAbout section.expert ul li .img img.spacer { width: 100%; height: auto;}
#pageAbout section.expert ul li .img img.photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#pageAbout section.expert ul li .txt1 { width: 100%; margin-bottom: 20px;}
#pageAbout section.expert ul li .txt1 .mi { font-size: 2.4rem; font-weight: 700; margin-bottom: 20px; text-align: center;}
#pageAbout section.expert ul li .txt1 p { font-size: 1.8rem; font-weight: 500; line-height: 1.8;}
/* #pageAbout section.expert ul li .txt2 { width: 100%;}
#pageAbout section.expert ul li .txt2 ul { padding-left: 20px;}
#pageAbout section.expert ul li .txt2 ul li { line-height: 1.4;}
#pageAbout section.expert ul li .txt2 ul li + li { margin-top: 20px;} */

#pageAbout section.collaborating { padding: 50px 20px; background: #f7f8f9;}
#pageAbout section.collaborating > .inner { }
#pageAbout section.collaborating h2 { font-size: 2.8rem; font-weight: 700; text-align: center; margin-bottom: 30px;}
#pageAbout section.collaborating .swiper { width: 100%; height: auto;}
#pageAbout section.collaborating .swiper-wrapper { width: 100%; height: auto;}
#pageAbout section.collaborating .swiper-wrapper li { background: #fff; padding: 20px; border-radius: 10px;}
#pageAbout section.collaborating .swiper-wrapper li .txt { width: 100%; display: flex; justify-content: center; flex-direction: column; margin-bottom: 20px;}
#pageAbout section.collaborating .swiper-wrapper li .txt .mi { font-size: 2.8rem; font-weight: 700; margin-bottom: 30px; text-align: center;}
#pageAbout section.collaborating .swiper-wrapper li .txt p { font-size: 1.8rem; line-height: 1.8;}
#pageAbout section.collaborating .swiper-wrapper li .img { width: 100%;}
#pageAbout section.collaborating .swiper-wrapper li .img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px;}
#pageAbout section.collaborating .thumslider { text-align: center; list-style: none; margin-top: 10px;}
#pageAbout section.collaborating .thumslider li {}
#pageAbout section.collaborating .thumslider li + li { margin-top: 10px;}
#pageAbout section.collaborating .thumslider li a { display: block; background: #fff; border: 2px solid #c19648; padding: 12px 20px; text-decoration: none; color: #c19648; font-size: 1.8rem; border-radius: 5px;}
#pageAbout section.collaborating .thumslider li.active a { background: #c19648; color: #fff;}

/* NOTE: pageProduct */
#pageProduct section.hero { width: 100%; height: 100vh; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-direction: column;}
#pageProduct section.hero .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
#pageProduct section.hero .inner { width: 100%;}
#pageProduct section.hero .inner .txt { width: 100%; color: #fff; padding: 0 20px; margin-bottom: 30px;}
#pageProduct section.hero .inner .txt .name { font-size: 2.8rem; font-weight: 500; letter-spacing: 0.3rem; line-height: 1.2; margin-bottom: 20px; text-align: center;}
#pageProduct section.hero .inner .txt .mi { font-size: 1.8rem; line-height: 1.5; margin-bottom: 10px; text-align: center;}
#pageProduct section.hero .inner .txt p { font-size: 1.6rem; line-height: 1.5; text-align: center;}
#pageProduct section.hero .inner .txt .btn { margin-top: 30px; text-align: center;}
#pageProduct section.hero .inner .txt .btn a { font-size: 1.8rem; display: inline-block; background: #fff; color: #c19648; font-weight: 600; padding: 10px 30px; border-radius: 30px; text-decoration: none; transition: 0.3s;}
#pageProduct section.hero .inner .txt .btn a:hover { background: #c19648; color: #fff; transition: 0.3s;}
#pageProduct section.hero .inner .img { text-align: center;}
#pageProduct section.hero .img img { height: 180px;}
#pageProduct section.hero .img img + img { margin-left: 10px;}
#pageProduct section.hero .link { display: flex; justify-content: center; align-items: center; padding: 0 20px; margin-top: 30px;}
#pageProduct section.hero ul { display: flex; background: rgba(255, 255,255, 0.1); border-radius: 20px; list-style: none;}
#pageProduct section.hero ul li { display: inline-block;}
#pageProduct section.hero ul li + li { margin-left: 10px;}
#pageProduct section.hero ul li a { display: inline-block; border-radius: 20px; padding: 10px 10px; color: #fff; font-weight: 600; text-decoration: none;}
#pageProduct section.hero ul li.active a { background: #967e3e;}
#pageProduct section.hero ul li a:hover { background: #967e3e;}

#pageProduct section.slider1 { width: 100%; background: #fff; padding: 50px 30px; overflow: hidden;}
#pageProduct section.slider1 h2 { font-size: 2.8rem; font-weight: 700; text-align: center; margin-bottom: 30px;}
#pageProduct section.slider1 .swiper { width: 100%; box-shadow: 0 0 8px #ccc;}
#pageProduct section.slider1 .swiper-wrapper { width: 100%;}
#pageProduct section.slider1 .swiper-wrapper li { background: #fff;}

#pageProduct section.slider1 .swiper-wrapper li .txt { width: 100%; padding: 20px;}
#pageProduct section.slider1 .swiper-wrapper li .txt .mi { font-size: 2.4rem; font-weight: 700; text-align: center; margin-bottom: 30px;}
#pageProduct section.slider1 .swiper-wrapper li .txt p { font-size: 1.8rem; line-height: 1.8;}
#pageProduct section.slider1 .swiper-wrapper li .txt p span { color: #c19648;}
#pageProduct section.slider1 .swiper-wrapper li .img { width: 100%; height: auto;}
#pageProduct section.slider1 .swiper-wrapper li .img img { width: 100%; height: 100%; object-fit: cover;}
#pageProduct section.slider1 .thumslider { list-style: none; margin-top: 20px;}
#pageProduct section.slider1 .thumslider li {}
#pageProduct section.slider1 .thumslider li + li { margin-top: 5px;}
#pageProduct section.slider1 .thumslider li a { display: block; background: #fff; border: 2px solid #c19648; padding: 12px 20px; text-decoration: none; color: #c19648; font-size: 1.8rem; border-radius: 5px; text-align: center;}
#pageProduct section.slider1 .thumslider li.active a { background: #c19648; color: #fff;}

#pageProduct section.effects { background: #fff; width: 100%; padding: 0 0 0 0; position: relative; overflow: hidden;}
#pageProduct section.effects > .inner { }
#pageProduct section.effects h2 { font-size: 2.8rem; font-weight: 700; text-align: center; margin-bottom: 30px;}
#pageProduct section.effects .block { padding: 50px 20px;}
#pageProduct section.effects .block .inner { width: 100%;}
#pageProduct section.effects .block .img { width: 100%;}
#pageProduct section.effects .block .img img { width: 100%; height: auto; border-radius: 20px;}
#pageProduct section.effects .block .txt { width: 100%; margin-top: 30px;}
#pageProduct section.effects .block .txt .mi { font-size: 2.4rem; font-weight: 600; margin-bottom: 20px;}
#pageProduct section.effects .block .txt p { font-size: 1.8rem; line-height: 1.8;}
#pageProduct section.effects .block:nth-of-type(2n) { background: #f6f6f6;}
#pageProduct section.effects .block:nth-of-type(2n) .inner { flex-direction: row-reverse;}
#pageProduct section.effects .block:nth-of-type(2n) .txt { padding-left: 0;}

#pageProduct section.effects .block.target .img { transform: translateX(-50px); transition: 0.5s; opacity: 0;}
#pageProduct section.effects .block.target.active .img { transform: none; transition: 0.5s; opacity: 1;}
#pageProduct section.effects .block.target .txt { transform: translateX(50px); transition: 0.5s; opacity: 0;}
#pageProduct section.effects .block.target.active .txt { transform: none; transition: 0.5s; opacity: 1;}

#pageProduct section.effects .block:nth-of-type(2n).target .img { transform: translateX(50px); transition: 0.5s; opacity: 0;}
#pageProduct section.effects .block:nth-of-type(2n).target.active .img { transform: none; transition: 0.5s; opacity: 1;}
#pageProduct section.effects .block:nth-of-type(2n).target .txt { transform: translateX(-50px); transition: 0.5s; opacity: 0;}
#pageProduct section.effects .block:nth-of-type(2n).target.active .txt { transform: none; transition: 0.5s; opacity: 1;}

#pageProduct section.features { background: #fff; width: 100%; padding: 50px 20px 0 20px; position: relative;}
#pageProduct section.features > .inner { width: 100%;}
#pageProduct section.features h2 { font-size: 2.8rem; font-weight: 700; text-align: center; margin-bottom: 30px;}
#pageProduct section.features ul { list-style: none;}
#pageProduct section.features ul li { width: 100%; background: #fff; box-shadow: 0 0 8px #ccc; padding: 20px; margin-top: 10px; transition: 0.3s;}
#pageProduct section.features ul li:hover { transform: translateY(-10px); transition: 0.3s;}
#pageProduct section.features ul .img { width: 80%; margin: 0 10%;}
#pageProduct section.features ul .img img { width: 100%; height: auto; border-radius: 5px;}
#pageProduct section.features ul .txt { display: flex; justify-content: center; flex-direction: column;}
#pageProduct section.features ul .txt .mi { font-size: 2.2rem; font-weight: 600; margin-bottom: 10px; margin-top: 20px;}
#pageProduct section.features ul .txt p { font-size: 1.6rem; line-height: 1.8; color: #666;}

#pageProduct section.authority { background: #fff; width: 100%; padding: 50px 20px; position: relative; overflow: hidden;}
#pageProduct section.authority > .inner { }
#pageProduct section.authority h2 { font-size: 2.8rem; font-weight: 700; text-align: center; margin-bottom: 30px; overflow: hidden;}
#pageProduct section.authority .block { width: 100%; padding: 20px 0; border-bottom: 1px solid #eee; display: flex; justify-content: center; align-items: center; flex-direction: column;}
#pageProduct section.authority .block .icon { font-size: 4.4rem; background: #f2f7fb; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; border-radius: 100%; margin-bottom: 30px;}
#pageProduct section.authority .block .txt { width: 100%;}
#pageProduct section.authority .block .txt .mi { font-size: 2.4rem; font-weight: 600; text-align: center; margin-bottom: 10px;}
#pageProduct section.authority .block .txt p { font-size: 1.8rem; line-height: 1.8;}

#pageProduct section.authority .block.target .icon { transform: translateX(-50px); transition: 0.5s; opacity: 0;}
#pageProduct section.authority .block.target.active .icon { transform: none; transition: 0.5s; opacity: 1;}
#pageProduct section.authority .block.target .txt { transform: translateX(50px); transition: 0.5s; opacity: 0;}
#pageProduct section.authority .block.target.active .txt { transform: none; transition: 0.5s; opacity: 1;}

#pageProduct section.slider2 { width: 100%; padding: 30px 0; overflow: hidden;}
#pageProduct section.slider2 h2 { font-size: 2.8rem; font-weight: 700; text-align: center; margin-bottom: 30px; padding: 0 20px;}
#pageProduct section.slider2 .inner { padding: 30px 0; background: #f9f8f5; }
#pageProduct section.slider2 .swiper1 { width: 100%; height: 100px;}
#pageProduct section.slider2 .swiper2 { width: 100%; height: 100px; margin-top: 30px;}
#pageProduct section.slider2 .swiper-wrapper { width: 100%; height: 100px; transition-timing-function: linear;}
#pageProduct section.slider2 .swiper-wrapper li { width: 100px; height: 100px; border-radius: 100%; overflow: hidden; position: relative;}
#pageProduct section.slider2 .swiper-wrapper li + li { margin-left: 50px;}
#pageProduct section.slider2 .swiper-wrapper li img.spacer { width: 100%; height: auto;}
#pageProduct section.slider2 .swiper-wrapper li img.photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#pageProduct section.slider2 .swiper-wrapper li:hover .txt { opacity: 1; transition: 0.3s;}
#pageProduct section.slider2 .swiper-wrapper li:hover { transform: scale(1.2); transition: 0.3s;}
#pageProduct section.slider2 .swiper-wrapper li .txt { cursor: pointer; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background: rgba(0,0,0,0.7); padding: 15px; display: flex; justify-content: center; align-items: center; flex-direction: column; transition: 0.3s;}
#pageProduct section.slider2 .swiper-wrapper li .txt .mi { color: #fff; font-size: 1.1rem; line-height: 1.0; font-weight: 600; text-align: center; margin-bottom: 5px; font-feature-settings: "palt";}
#pageProduct section.slider2 .swiper-wrapper li .txt p { color: #fff; font-size: 1.0rem; line-height: 1.3; text-align: center; font-feature-settings: "palt";}

#pageProduct section.comparison { background: #fff; width: 100%; padding: 50px 20px; position: relative; overflow: hidden;}
#pageProduct section.comparison > .inner { }
#pageProduct section.comparison h2 { font-size: 2.8rem; font-weight: 700; text-align: center; margin-bottom: 30px;}
#pageProduct section.comparison .inner { width: 100%;}
#pageProduct section.comparison .block { display: flex;}
#pageProduct section.comparison .block:first-of-type div { background: #f6e9cd; color: #c19648;}
#pageProduct section.comparison .block div { width: 33.3%; padding: 20px 5px; font-size: 1.6rem; font-weight: 600; line-height: 1.3; text-align: center; display: flex; justify-content: center; align-items: center;}
#pageProduct section.comparison .block:not(:first-of-type) div:first-of-type { color: #000; background: #f3f4f6;}
#pageProduct section.comparison .block:not(:first-of-type) div:nth-of-type(2) { color: #368237; background: #fff1f1;}
#pageProduct section.comparison .block:not(:first-of-type) div:nth-of-type(3) { color: #cb2d2d; background: #f2fbf4;}
#pageProduct section.comparison .block:first-of-type div:first-of-type { border-radius: 20px 0 0 0;}
#pageProduct section.comparison .block:first-of-type div:last-of-type { border-radius: 0 20px 0 0;}
#pageProduct section.comparison .block:last-of-type div:first-of-type { border-radius: 0 0 0 20px;}
#pageProduct section.comparison .block:last-of-type div:last-of-type { border-radius: 0 0 20px 0;}
#pageProduct section.comparison .block a { display: block; width: 100%; color: #c19648; padding: 5px; border: 2px solid #c19648; text-decoration: none; border-radius: 30px; transition: 0.3s;}
#pageProduct section.comparison .block a:hover { background: #c19648; color: #fff; transition: 0.3s;}

#pageProduct section.users { background: #fff; width: 100%; padding: 0 20px 50px 20px; position: relative;}
#pageProduct section.users > .inner { width: 100%;}
#pageProduct section.users h2 { font-size: 3.0rem; font-weight: 700; text-align: center; margin-bottom: 30px;}
#pageProduct section.users ul { list-style: none;}
#pageProduct section.users ul li { width: 100%; background: #fff; box-shadow: 0 0 5px #ccc; padding: 20px; margin-top: 20px;}
#pageProduct section.users ul li .mi { font-size: 1.8rem; font-weight: 600; margin-bottom: 5px;}
#pageProduct section.users ul li p { line-height: 1.5; color: #666;}

#pageProduct section.usage { background: #fff; width: 100%; padding: 0 20px 50px 20px; position: relative; overflow: hidden;}
#pageProduct section.usage > .inner { width: 100%;}
#pageProduct section.usage h2 { font-size: 2.8rem; font-weight: 700; text-align: center; margin-bottom: 30px;}
#pageProduct section.usage ul { list-style: none;}
#pageProduct section.usage ul li { width: 100%;}
#pageProduct section.usage ul li + li { margin-top: 5%;}
#pageProduct section.usage ul li .mi { font-size: 2.0rem; font-weight: 600; color: #c19648; padding-bottom: 20px; border-bottom: 1px solid #ccc;}
#pageProduct section.usage ul li p { line-height: 1.8; margin-top: 20px;}
#pageProduct section.usage ul.sub { padding-left: 20px; list-style: circle; margin-top: 20px;}

#pageProduct section.usage ul li.target .mi { transform: translateX(-30px); transition: 0.5s; opacity: 0;}
#pageProduct section.usage ul li.target.active .mi { transform: none; transition: 0.5s; opacity: 1;}
#pageProduct section.usage ul li.target p { transform: translateX(30px); transition: 0.5s; opacity: 0;}
#pageProduct section.usage ul li.target.active p { transform: none; transition: 0.5s; opacity: 1;}
#pageProduct section.usage ul li.target ul.sub { transform: translateX(30px); transition: 0.5s; opacity: 0;}
#pageProduct section.usage ul li.target.active ul.sub { transform: none; transition: 0.5s; opacity: 1;}

#pageProduct section.series { background: #fff; width: 100%; padding: 0 20px 50px 20px; position: relative;}
#pageProduct section.series > .inner { width: 100%;}
#pageProduct section.series h2 { font-size: 2.8rem; font-weight: 700; text-align: center; margin-bottom: 30px;}
#pageProduct section.series p.com { margin-top: 10px;}
#pageProduct section.series .block { width: 100%; background: #fff; padding: 20px; box-shadow: 0 0 8px #ccc; transition: 0.3s; margin-top: 20px;}
#pageProduct section.series .block:hover { transform: translateY(-10px); transition: 0.3s;}
#pageProduct section.series .block:nth-of-type(2n) { margin-right: 0;}
#pageProduct section.series .block .title { margin-bottom: 20px;}
#pageProduct section.series .block .title .name { width: 100%; font-size: 2.2rem; font-weight: 700; color: #c19648; line-height: 1.3; margin-bottom: 10px;}
#pageProduct section.series .block .title .spec { width: 100%; font-size: 1.4rem; line-height: 1.3;}
#pageProduct section.series .block .title .spec span { display: inline-block; margin-right: 5px; font-weight: 600; color: #c19648;}
#pageProduct section.series .block .line { display: flex; margin-bottom: 5px;}
#pageProduct section.series .block .line span:nth-of-type(1) { display: inline-block; font-weight: 600; margin-right: 10px;}
#pageProduct section.series .block .line span:nth-of-type(2) { flex: 1; display: inline-block; position: relative;}
#pageProduct section.series .block .line span:nth-of-type(2):after { content: ''; position: absolute; top: 50%; display: inline-block; width: 100%; height: 2px; background: #c19648; right: 0;}
#pageProduct section.series .block ul { list-style: none;}
#pageProduct section.series .block ul li { display: flex; background: #c19648; color: #fff; padding: 5px 0;}
#pageProduct section.series .block ul li span { display: block; width: 30px; display: flex; justify-content: center; align-items: center;}
#pageProduct section.series .block ul li p { flex: 1; font-weight: 500; line-height: 1.4;}
#pageProduct section.series .block ul li:nth-of-type(2n) { background: #f4f4f4; color: #c19648;}
#pageProduct section.series .block .txt { padding: 20px 0; font-size: 2.0rem; font-weight: 600; color: #ebddcf; line-height: 1.3; text-align: center;}
#pageProduct section.series .block .img { width: 100%;}
#pageProduct section.series .block .img img  { width: 100%;}

/* NOTE: pageRd */
#pageRd section.hero { width: 100%; height: 60vh; position: relative;}
#pageRd section.hero .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;}
#pageRd section.hero .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.3); z-index: -1;}
#pageRd section.hero .inner { width: 100%; height: 60vh; display: flex; align-items: center;}
#pageRd section.hero .inner .txt { width: 100%; color: #fff; padding: 0 30px;}
#pageRd section.hero .inner .txt .mi { font-size: 2.8rem; font-weight: 500; letter-spacing: 0.3rem; line-height: 1.3; margin-bottom: 20px;}
#pageRd section.hero .inner .txt p { font-size: 1.6rem; line-height: 1.8;}

#pageRd section.effects { background: #fff; width: 100%; padding: 30px 0 0 0; position: relative; overflow: hidden;}
#pageRd section.effects > .inner { }
#pageRd section.effects h2 { font-size: 2.8rem; font-weight: 700; text-align: center; margin-bottom: 30px;}
#pageRd section.effects .block { padding: 50px 20px;}
#pageRd section.effects .block .inner { width: 100%;}
#pageRd section.effects .block .img { width: 100%;}
#pageRd section.effects .block .img img { width: 100%; height: auto; border-radius: 20px;}
#pageRd section.effects .block .txt { width: 100%; margin-top: 30px;}
#pageRd section.effects .block .txt .mi { font-size: 2.4rem; font-weight: 600; margin-bottom: 20px;}
#pageRd section.effects .block .txt p { font-size: 1.8rem; line-height: 1.8;}
#pageRd section.effects .block:nth-of-type(2n) { background: #f6f6f6;}
#pageRd section.effects .block:nth-of-type(2n) .inner { flex-direction: row-reverse;}
#pageRd section.effects .block:nth-of-type(2n) .txt { padding-left: 0;}

#pageRd section.effects .block.target .img { transform: translateX(-50px); transition: 0.5s; opacity: 0;}
#pageRd section.effects .block.target.active .img { transform: none; transition: 0.5s; opacity: 1;}
#pageRd section.effects .block.target .txt { transform: translateX(50px); transition: 0.5s; opacity: 0;}
#pageRd section.effects .block.target.active .txt { transform: none; transition: 0.5s; opacity: 1;}

#pageProduct section.effects .block:nth-of-type(2n).target .img { transform: translateX(50px); transition: 0.5s; opacity: 0;}
#pageProduct section.effects .block:nth-of-type(2n).target.active .img { transform: none; transition: 0.5s; opacity: 1;}
#pageProduct section.effects .block:nth-of-type(2n).target .txt { transform: translateX(-50px); transition: 0.5s; opacity: 0;}
#pageProduct section.effects .block:nth-of-type(2n).target.active .txt { transform: none; transition: 0.5s; opacity: 1;}

/* NOTE: pageRdfeedback */
#pageRdfeedback section.hero { width: 100%; height: 60vh; position: relative;}
#pageRdfeedback section.hero .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;}
#pageRdfeedback section.hero .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.3); z-index: -1;}
#pageRdfeedback section.hero .inner { width: 100%; height: 60vh; display: flex; align-items: center;}
#pageRdfeedback section.hero .inner .txt { width: 100%; color: #fff; padding: 0 30px;}
#pageRdfeedback section.hero .inner .txt .mi { font-size: 2.8rem; font-weight: 500; letter-spacing: 0.3rem; line-height: 1.3; margin-bottom: 20px;}
#pageRdfeedback section.hero .inner .txt p { font-size: 1.6rem; line-height: 1.8;}

/* NOTE: pageTopics */
#pageTopics section.hero { width: 100%; height: 30vh; position: relative;}
#pageTopics section.hero .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;}
#pageTopics section.hero .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.3); z-index: -1;}
#pageTopics section.hero .inner { width: 100%; height: 30vh; display: flex; align-items: center;}
#pageTopics section.hero .inner .txt { width: 100%; color: #fff; padding: 0 30px;}
#pageTopics section.hero .inner .txt .mi { font-size: 2.8rem; font-weight: 500; letter-spacing: 0.3rem; line-height: 1.3; margin-bottom: 20px;}

#pageTopics section.tab { margin: 30px 0;}
#pageTopics section.tab > .inner { width: 100%; padding: 0 20px;}
#pageTopics section.tab ul { list-style: none;}
#pageTopics section.tab ul li + li { margin-top: 10px;}
#pageTopics section.tab ul li a { display: inline-block; padding: 5px 0; color: #888; text-decoration: none;}
#pageTopics section.tab ul li a.active { color: #c19648; border-bottom: 2px solid #c19648;}

#pageTopics section.topics { display: none; padding: 0 20px; margin-bottom: 30px;}
#pageTopics section.topics.active { display: block;}
#pageTopics section.topics > .inner { width: 100%;}
#pageTopics section.topics ul { list-style: none;}
#pageTopics section.topics ul li { width: 100%; background: #fff; box-shadow: 0 0 8px #ccc; margin-right: 5%; margin-bottom: 20px;}
#pageTopics section.topics ul li:hover img.photo { transform: scale(1.05); transition: 0.3s;}
#pageTopics section.topics ul li a { text-decoration: none;}
#pageTopics section.topics ul li .img { width: 100%; position: relative; overflow: hidden;}
#pageTopics section.topics ul li .img img.spacer { width: 100%; height: auto;}
#pageTopics section.topics ul li .img img.photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.3s;}
#pageTopics section.topics ul li .txt { padding: 20px;}
#pageTopics section.topics ul li .txt .mi { font-size: 2.0rem; font-weight: 600; line-height: 1.4; margin-bottom: 20px; color: #000;}
#pageTopics section.topics ul li .txt .date { font-family: 'Noto Sans', sans-serif; font-size: 1.5rem; font-weight: 500; line-height: 1.4; color: #ccc; margin-bottom: 20px;}
#pageTopics section.topics ul li .txt p { font-weight: 400; line-height: 1.6; color: #888;}

/* 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 section.contents { padding: 80px 0 30px 0;}
#pageSingle section > .inner { width: 90%; margin: 0 auto; padding: 20px; background: #fff; box-shadow: 0 0 8px #ccc;}
#pageSingle section.contents .date { display: inline-block; font-size: 1.5rem; letter-spacing: 1px; color: #666; padding: 20px 0;}

#pageSingle header { background: #fff;}
#pageSingle header .logo_wh { display: none;}
#pageSingle header .logo_dark { display: block;}
#pageSingle header { opacity: 1; background: #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: 30px;}
.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: pageContact */
#pageContact section.hero { width: 100%; height: 30vh; position: relative;}
#pageContact section.hero .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;}
#pageContact section.hero .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.3); z-index: -1;}
#pageContact section.hero .inner { width: 100%; height: 30vh; display: flex; align-items: center;}
#pageContact section.hero .inner .txt { width: 100%; color: #fff; padding: 0 30px;}
#pageContact section.hero .inner .txt .mi { font-size: 2.8rem; font-weight: 500; letter-spacing: 0.3rem; line-height: 1.3; margin-bottom: 20px;}

#pageContact section.body > .inner { width: 100%; padding: 30px 30px 50px 30px;}
#pageContact section.body p { font-size: 1.5rem; line-height: 1.6;}

input, button { all: unset;}
select, textarea { font-size: 1.8rem; margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
select::-ms-expand { display: none; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"] { font-size: 1.8rem; height: 50px; width: 100%; text-indent: 10px; border-radius: 3px; border: 1px solid #ccc; background: #f6f6f6; align-items: center;}
textarea { width: 100%; height: 100px; padding: 10px; background: #f6f6f6; border-radius: 3px; border: 1px solid #ccc;}
button { font-size: 1.8rem; letter-spacing: 1px; display: inline-block; color: #fff; text-align: center; width: 100%; cursor: pointer; padding: 8px 0; background: #c19648; border-radius: 20px;}
button.back { background: #f48033; color: #fff;}
button + button { margin-top: 10px;}
button:hover { opacity: 0.9;}
span.error { display: inline-block !important; background: #ffe5e8; margin: 5px 0; padding: 5px 15px;font-weight: 500;}
textarea::placeholder { color: #666; font-size: 1.6rem;}

/* input[type="radio"],input[type="checkbox"] */
input[type="checkbox"], input[type="radio"] { display: none;}
span.mwform-checkbox-field-text, span.mwform-radio-field-text { position: relative; display: inline-block; padding-left: 30px; font-weight: 100;}
span.mwform-checkbox-field-text::before { content: ""; position: absolute; top: 3px; left: 0; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc;}
span.mwform-radio-field-text::before { content: ""; position: absolute; top: 3px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid #ccc;}
input[type="checkbox"]:checked + span.mwform-checkbox-field-text::after { content: ""; position: absolute; top: 8px; left: 5px; width: 10px; height: 10px; background: #444;}
input[type="radio"]:checked + span.mwform-radio-field-text::after { content: ""; position: absolute; top: 8px; left: 5px; width: 10px; height: 10px; border-radius: 50%; background: #444;}

.vertical-item span.mwform-radio-field-text::before { top: 7px;}
.vertical-item input[type="radio"]:checked + span.mwform-radio-field-text::after { top: 12px;}

#pageContact .form { margin-top: 20px;}
#pageContact .form dl { border-bottom: 1px solid #ddd;}
#pageContact .form dl:first-of-type { border-top: 1px solid #ddd;}
#pageContact .form dl dt { line-height: 1.2; width: 100%; padding: 20px 0 0 0;}
#pageContact .form span.required { font-size: 1.1rem; line-height: 1.0; background: #fc1414; padding: 3px 7px; color: #fff; margin-right: 8px; margin-top: 2px; white-space: nowrap; border-radius: 3px;}
#pageContact .form span.any { font-size: 1.1rem; line-height: 1.0; background: #999; padding: 3px 7px; color: #fff; margin-right: 8px; margin-top: 2px; white-space: nowrap; border-radius: 3px;}
#pageContact .form dl dd { width: 100%; padding: 20px 0;}
#pageContact .form .formbt { padding: 10px 0; text-align: center;}

/* 確認画面 */
#pageContact section .mw_wp_form_confirm span.required { display: none;}
#pageContact section .mw_wp_form_confirm span.any { display: none;}
#pageContact section .mw_wp_form_confirm dl { padding-bottom: 20px;}
#pageContact section .mw_wp_form_confirm dl dd { font-size: 1.8rem; background: #f6f6f6;  border-radius: 3px; padding: 20px; margin-top: 20px;}

/* 完了画面 */
#pageContact section.thanks { text-align: center; line-height: 1.6; padding: 80px 20px;}
#pageContact section.thanks .btn { margin-top: 30px; text-align: center;}
#pageContact section.thanks .btn a { display: inline-block; text-decoration: none; text-align: center; font-size: 1.8rem; line-height: 1.0; color: #fff; padding: 12px 30px; background: #222; border-radius: 20px;}
#pageContact section.thanks .btn a:hover { background: #000;}

/* NOTE: pageNotfound */
#pageNotfound section.body { text-align: center;}
#pageNotfound section.body > .inner { width: 100%; padding: 80px 30px 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.5rem; 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.8rem; line-height: 1.0; color: #fff; padding: 12px 30px; background: #222; border-radius: 20px;}
#pageNotfound section.body .btn a:hover { background: #000;}