/*
Theme Name: Ryurei Theme
Version: 1.0.0
*/
/****** パーツ ******/
@media screen and (max-width: 1300px) {
    .nav-arrow {position: absolute; top: 0; width: 25px; height: 50px; line-height: 40px; background: #fff; color: #555; border: none; font-size: 24px; cursor: pointer; display: none; text-align: center;}
    .left-arrow {left: 0;}
    .right-arrow {right: 0;}
}
.btn-l {text-align: left;}
.c-btn-left {position:relative; display: inline-block; width: 120px; height: 120px; background-color: rgba(45, 68, 145, .5); border-radius: 50%; text-align: center; line-height: 50px; max-width: 120px; margin: 0 20px; padding: 60px; transition: transform 0.6s ease-in-out, background-color 0.6s ease-in-out;}
.c-btn-left a {color: transparent; font-size: 0; text-decoration: none; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; z-index: 2; border-radius: 50%;}
.c-btn-left:hover {transform: scale(1.1); background-color: rgba(45, 68, 145, 0.8);}
.c-btn-left::before {content: ""; position: absolute; top: 50%; right: -30px; transform: translateY(-50%); width: 0; height: 1px; background-color: #2D4491; transition: top 0.4s ease; animation: slide-left 2.5s infinite ease-in-out; z-index: 1;}
@keyframes slide-left {0% {right: -30px; width: 0;} 50% {right: -50%; width: 0;} 100% {right: -50%; width: 120px;}}
.btn-r {text-align: right;}
.c-btn-right {position:relative; display: inline-block; width: 120px; height: 120px; background-color: rgba(45, 68, 145, .5); border-radius: 50%; text-align: center; line-height: 50px; max-width: 120px; margin: 0 20px; padding: 60px; transition: transform 0.6s ease-in-out, background-color 0.6s ease-in-out;}
.c-btn-right a {color: transparent; font-size: 0; text-decoration: none; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; z-index: 2; border-radius: 50%;}
.c-btn-right:hover {transform: scale(1.1); background-color: rgba(45, 68, 145, 0.8);}
.c-btn-right::before {content: ""; position: absolute; top: 50%; left: -60px; transform: translateY(-50%); width: 0; height: 1px; background-color: #2D4491; transition: top 0.4s ease; animation: slide-left 2.5s infinite ease-in-out; z-index: 1;}
@keyframes slide-right {0% {left: -30px; width: 0;} 50% {left: -50%; width: 0;} 100% {left: -50%; width: 120px;}}
.c-btn-secondary {display: inline-block; width: 120px; height: 120px; background-color: rgba(255, 255, 255, .5); border-radius: 50%; text-align: center; line-height: 50px; overflow: hidden; max-width: 120px; margin: 10px auto; padding: 60px; transition: transform 0.6s ease-in-out, background-color 0.6s ease-in-out;}
.c-btn-secondary a {color: transparent; font-size: 0; text-decoration: none; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; z-index: 2; border-radius: 50%;}
.c-btn-secondary:hover {transform: scale(1.1); background-color: rgba(255, 255, 255, 0.8);}
.c-btn-secondary::before {content: ""; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 1px; height: 0; background-color: #fff; transition: top 0.4s ease; animation: slide-down 2.5s infinite ease-in-out; z-index: 1;}
@keyframes slide-down {0% {top: -30px; height: 0;} 50% {top: 35%; height: 0;} 100% {top: 35%; height: 60px;}}
.sakura {position: absolute; top: -50px; width: 10px; height: 20px; pointer-events: none; z-index: 100; animation: fall 10s linear infinite;}
.sakura .innerSakura {width: 100%; height: 100%; background-image: url('./img/material/sakura.png'); background-size: cover; opacity: 0.8; animation: spin 6s linear infinite;}
@keyframes fall {0% {transform: translate(0, 0); opacity: 1;} 50% {transform: translate(20px, 50vh); opacity: 1;} 100% {transform: translate(-20px, 100vh); opacity: 0;}}
@keyframes spin {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}
.c-btn-secondary:hover::before {top: -30px;}
.slide-fade-image {opacity: 0; transform: translateX(-50px); transition: transform 1s ease-out, opacity 1s ease-out;}
.visible {opacity: 1; transform: translateX(0);}
@media only screen and (max-width: 768px) {
    .c-btn-right::before {left: -30px;}
    .c-btn-left, .c-btn-right {width: 60px; height: 60px; margin: 0; padding: 30px;}
    @keyframes slide-left {0% {right: -30px; width: 0;} 50% {right: -50%; width: 0;} 100% {right: -50%; width: 60px;}}
    @keyframes slide-right {0% {left: -30px; width: 0;} 50% {left: -50%; width: 0;} 100% {left: -50%; width: 60px;}}
}
/***** フォーム *****/
form {max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 10px; background-color: #f9f9f9;}
label {display: block; margin-bottom: 5px; font-weight: bold;}
input, textarea {width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; background-color: #fff;}
textarea {height: 100px; }
.required:after {content: " *"; color: #f00;}
.privacy {display: flex; align-items: center;}
.privacy input {width: auto; margin-right: 10px;}
.formsend {padding: 10px 20px; background-color: #2D4491; color: white; border: none; border-radius: 5px; cursor: pointer; text-align: center; display: block; width: 80px; margin: 20px auto 0;}
.formsend:hover {background-color: #2D4491;}
.note {font-size: 0.9em; color: #666;}
.error {color: #f00; font-weight: bold;}
.success {color: #2D4491; font-weight: bold;}
/****** 共通 ******/
.vertical-txt {writing-mode: vertical-rl; text-orientation: upright;}
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
.fs5 {font-size: 5em; letter-spacing: 10px;}
.fs1-5 {font-size: 1.5em;}
.mgl10 {margin-left: 10px;}
.wb {word-break: keep-all;}
.block {display: block; margin-top: 20px;}
header {position: fixed; z-index: 9999; left: 50%; transform: translateX(-50%); width: 100%;}
html {color: #222; overflow-x: hidden;}
body {font-family: "MS PMincho", "Hiragino Mincho Pro", serif; background-color: #eee; color: #222; overflow-x: hidden;}
h2 {font-size: 1.75em; font-weight: 400;}
h3 {font-size: 1.6em;}
h4 {font-size: 1.45em;}
h5 {font-size: 1.3em;}
p {font-size: 1.15em;}
section {width: 100%; max-width: 1300px; background-color: #fff; margin: auto; padding: 20px;}
.nav {background-color: rgba(255, 255, 255, .8); overflow-x: auto;}
.nav ul {display: flex; width: max-content; margin: 0 auto;}
.nav ul li a {display: flex; align-items: center; justify-content: center; display: inline-block; padding: 10px 25px; height: 50px; font-size: 15px; color: #222; text-decoration: none;}
.nav ul li a:hover {background-color: #2D4491; color: #fff;}
.nav ul li.current-menu-item a, .nav ul li.current_page_item a {background-color: #2D4491; color: #fff;}
.heading-bg {background-color: #2D4491; height: 50vh; max-height: 400px; min-height: 200px;}
.contact-inner {background-color: #2D4491; padding: 10px 0; border-radius: 5px; text-align: center; display: block; width: 100%; max-width: 400px; margin: 0 auto;}
.contact a, .contact p {display: block; color: #fff;font-weight: bold; font-size: 1.3rem; margin: 10px 0 0; text-decoration: none;}
.contact-button a {font-size: 1em; color: #fff;text-decoration: none;}
footer {color: #fff; text-align: center;}
.footer-nav ul {list-style-type: none; padding: 0;}
.footer-nav ul li {padding: 10px 0;}
.footer-nav ul li a {color: #fff; text-decoration: none; font-size: 18px;}
.footer-nav ul li a:hover {color: #2D4491;}
.footer-contact {position: relative; background-color: #2D4491; height: 400px; padding: 100px 0;}
.footer-contact p {font-size: 1.5em;}
.footer-menu {background-color: #000;}
.social-links {display: flex; gap: 15px; justify-content: center; align-items: center; height: 100px; background-color: #000; border-top: solid 1px #fff;}
.social-links a {text-decoration: none;}
.copy {padding: 10px 0; font-size: 14px; color: #fff; background-color: #000;}
@media only screen and (max-width: 768px) {
    .footer-nav ul {display: flex; justify-content: center; flex-wrap: wrap;}
    .footer-nav ul li {margin: 10px 20px;}
    .sp-block {display: block; text-align: left;}
}
@media screen and (min-width: 768px) {
    .vertical-txt-pc{writing-mode: vertical-rl; text-orientation: upright;}
}
/****** トップページ ******/
.top-keyVisual {background-image: url('./img/top/main_img_01.jpg'); background-size: cover; position: relative; z-index: 3;}
.top-keyVisual::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: inherit; background-size: inherit; background-position: inherit; filter: blur(5px); z-index: 1;}
.top-keyVisual::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 2;}
.top-keyVisual img {width: 100%; max-width: 1300px; margin: auto; position: relative; z-index: 3;}
.top-news {padding: 20px 0;}
.top-news-wrapper {width: 100%; max-width: 800px; margin: 40px auto; padding: 0 20px;}
.news-list h2 {font-size: 1.8rem; text-align: center; margin-bottom: 20px; padding-bottom: 40px; color: #222;}
.news-list ul {list-style: none; padding: 0; margin: 0;}
.news-list li {display: flex; padding: 15px 0; border-top: 1px solid #ddd;}
.news-list li:first-child {border-top: none;}
.news-list li a {width: 70%; font-size: 1.2rem; color: #222; text-decoration: none; transition: color 0.3s ease; margin-left: 5px;}
.news-list li a:hover {color: #999;}
.news-list li span {display: inline-block; font-size: 0.75rem; color: #666; margin: auto;}
.top-cp-wrapper {display: flex; flex-direction: column; gap: 20px;}
.top-cp-inner01, .top-cp-inner02 {display: flex; justify-content: space-between; align-items: center;}
.top-cp-inner01 > .top-cp-left {flex: 1; text-align: center;}
.top-cp-inner01 > div:not(.top-cp-left) {flex: 1; display: flex; align-items: center; justify-content: center; text-align: left;}
.top-cp-inner02 {flex-direction: row-reverse;}
.top-cp-inner02 > .top-cp-right {flex: 1; text-align: center;}
.top-cp-inner02 > div:not(.top-cp-right) {flex: 1; display: flex; align-items: center; justify-content: center; text-align: left;}
.top-cp-left img, .top-cp-right img {max-width: 100%; height: auto;}
.top-cp {width: 100%; max-width: 1300px; margin: 0 auto;}
.top-cp-txt {font-size: 1.8em; margin: 30px;}
.top-greeting h2, .top-greeting h3{text-align: center; margin-bottom: 80px;}
.top-greeting-inner {display: flex; flex-direction: column; gap: 20px;}
.top-greeting-content {display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-direction: row-reverse; margin: auto;}
.top-greeting-content img {flex: 1; width: 100%; max-width: 500px; height: auto;}
.top-greeting-content p {display: block; flex: 1; font-size: 1.2em; line-height: 1.6; text-align: left;}
.top-greeting-inner > img {width: 100%; max-width: 1300px; height: auto; display: block; margin: 20px auto 0;}
.top-demo-wrapper {padding: 20px 0;}
.top-demo-wrapper {text-align: center;}
.top-demo-wrapper p {margin: auto;}
.top-demo-txt-wrapper {display: flex; width: 100%; max-width: 1000px;}
.top-demo-txt-wrapper-l {flex-direction: row;}
.top-demo-txt-wrapper-r {flex-direction: row-reverse;}
.top-demo-ttl {flex-basis: 120px;}
.top-demo-ttl01, .top-demo-ttl02, .top-demo-ttl03, .top-demo-ttl04 {display: flex; align-items: center; gap: 10px;}
.top-demo-ttl01, .top-demo-ttl03 {display: flex; align-items: center; gap: 10px; justify-content: flex-start; width: 80%;}
.top-demo-ttl02, .top-demo-ttl04 {display: flex; align-items: center; gap: 10px; justify-content: flex-end; width: 80%;}
.top-demo-ttl01 p, .top-demo-ttl02 p, .top-demo-ttl03 p, .top-demo-ttl04 p {display: flex; flex-direction: column; margin: 0;}
.top-demo-ttl01 p span, .top-demo-ttl02 p span, .top-demo-ttl03 p span, .top-demo-ttl04 p span {display: inline-block; transform: rotate(90deg); font-size: 1.2em; line-height: 0.8; text-align: center;}
.image-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px;}
.image-grid img {width: 100%; height: auto;}
.top-demo-inner01, .top-demo-inner02, .top-demo-inner03, .top-demo-inner04 {margin-bottom: 80px; display: flex; flex-direction: column; align-items: center;}
.top-specification h2, .top-specification h3 {text-align: center; margin-bottom: 80px;}
.deskimg {width: 100%; aspect-ratio: 16 / 9;}
.deskimg img {margin: 0 auto 40px; width: 100%; max-width: 700px;}
.deskimg iframe {margin: auto;}
.top-others-wrapper {display: flex; justify-content: space-evenly; align-items: center;}
.top-others-wrapper img {width: 100%; max-width: 200px;}
.top-others-inner01, .top-others-inner02, .top-others-inner03 {transition: transform 0.3s ease, filter 0.3s ease;}
.top-others-inner01:hover, .top-others-inner02:hover, .top-others-inner03:hover {transform: scale(1.1); filter: brightness(1.2);}
.product-table {width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 16px;}
.product-table th, .product-table td {border: 1px solid #ddd; padding: 8px 12px; text-align: left;}
.product-table th {background-color: #f4f4f4; font-weight: bold;}
.product-table td {background-color: #fff;}
.product-table .note {background-color: #f9f9f9; font-style: italic; text-align: left;}
.product-table .price {background-color: #e9f9e9; font-weight: bold; text-align: right; }
.product-table tr:last-child td {border-top: 1px solid #333;}
.price {text-align: center; margin:0 auto 80px;}
@media only screen and (max-width: 768px) {
    .top-cp-inner01, .top-cp-inner02 {flex-direction: column;}
    .top-cp-inner01 > div:not(.top-cp-left), .top-cp-inner02 > div:not(.top-cp-right) {text-align: center;}
    .top-greeting-content {flex-direction: column;}
    .image-grid {grid-template-columns: 1fr;}
    .top-others-wrapper {flex-direction: column;}
    .product-table th, .product-table td {font-size: 14px;}
    .top-demo-wrapper p {margin: auto 10px; font-size: 1.2rem;}
    .deskimg iframe {width: 100%; height: 100%;}
    }
/****** 開発秘話とご挨拶 ******/
.heading-story {background: url(./img/heading/heading_story.svg) no-repeat center center; background-size: contain; height: 100%;}
.story-body {width: 100%; max-width: 1200px; margin: 0 auto;}
.story_heading {text-align: center;}
.story_child h2, .story_child h3 {text-align: center; margin-bottom: 20px;}
.story_child_2 {text-align: left; margin: 20px;}
.history-visual img {width: 100%; height: auto; margin-bottom: 20px;}
.history-section {padding: 20px;}
.history-container {display: flex; align-items: flex-start;}
.history-container img {width: 30%; height: auto; margin: 20px;}
.history-text h2 {margin-bottom: 10px; position: relative; text-align: center; padding: 20px;}
.history-text h2::after {content: ""; display: block; width: 100%; height: 1px; background-color: #ccc; margin: 10px 0;}
.history-text p {color: #333; line-height: 1.8; padding: 0px 20px 20px;}
.story-section {display: flex; justify-content: center; padding: 20px;}
.story-container {width: 45%; text-align: center; padding: 20px;}
.story-container img {width: 100%; height: auto;}
.story-container h2 {margin-top: 20px;}
.story-container p {margin-top: 10px; line-height: 1.8; text-align: left;}
.content-container {display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px;}
.content-container-right {display: flex; flex-wrap: wrap; flex-direction: row-reverse; align-items: flex-start; gap: 20px;}
.story-wrapper, .story-wrappe-right {flex: 1 1 45%;}
.story-wrapper img {width: 100%; height: auto;}
.story-wrappe-right img{width: 100%; height: auto;}
.text-story {flex: 1 1 45%; margin: 0px 20px 40px 20px;}
.text-story h2 {margin-bottom: 10px; text-align: center;}
.text-story p {line-height: 1.6;}
@media (max-width: 768px) {
    .story-section {flex-direction: column;}
    .story-container {width: 100%; margin-bottom: 20px;}
    .history-container {flex-direction: column;}
    .history-container img {width: 90%; margin: 20px auto;}
}
/****** DEMO＆呈茶 ******/
.heading-demo {background: url(./img/heading/heading_demo.svg) no-repeat center center; background-size: contain; height: 100%;}
.demo-body {width: 100%; max-width: 1200px; margin: 0 auto;}
.demo-wrapper img {max-width: 100%; height: auto;}
.demo-wrapper > img {width: 100%;}
.demo-txt {height: 100px; display: flex; justify-content: center; align-items: center;}
.suitengu-img {display: flex; gap: 10px; max-width: 100%; height: auto;}
.left-image {width: 58%; height: 100%;}
.right-images {display: flex; flex-direction: column; justify-content: space-between; gap: 10px;}
.top-image, .bottom-image {width: 100%; height: auto;}
.suitengu-grid { width: 100%; height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px;}
.event-section {display: flex; align-items: center; justify-content: center; flex-direction: row-reverse; align-items: flex-start; margin-bottom: 40px;}
.event-section-left {display: flex; align-items: center; justify-content: center; align-items: flex-start; margin-bottom: 40px;}
.event-section, .event-section-left, .event-text {flex: 1; text-align: left; }
.event-section h3, .event-section-left h3 {font-size: 1.5em; text-align: center; margin-top: 20px; margin-bottom: 10px; color: #333; border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px;}
.event-section p , .event-section-left p {font-size: 1em; line-height: 1.6; color: #666;}
.event-section img , .event-section-left img {width: 50%; height: auto;}
.venetian-blind img {margin: auto; width: 100%; max-width: 1120px;}
.content-wrapper {display: flex; align-items: center; gap: 20px; margin-bottom: 30px;}
.content-wrappe-right {display: flex; align-items: center; flex-direction: row-reverse; gap: 20px; margin-bottom: 30px;}
.content-wrapper img, .content-wrappe-right img {width: 40%; height: auto;}
.event-wrapper h2 {text-align: center; margin: 40px auto;}
.event-txt-l {margin-right: 40px;}
.event-txt-r {margin-left: 40px;}
.vertical {margin-bottom: 40px;}
.magazine-wrapper h2 {text-align: center; margin-bottom: 40px;}
.vertical-blind {margin-bottom: 40px;;}
.txt-content {max-width: 60%; text-align: left;}
.txt-content h3 {margin-bottom: 10px; text-align: center;}
.magazine-txt h3 {text-align: center; margin: 40px; auto 80px;}
@media (max-width: 768px) {
    .suitengu-img {flex-direction: column; align-items: center;}
    .left-image, .right-images {width: 100%;}
    .event-section, .event-section-left{flex-direction: column;}
    .event-section img, .event-section-left img {width: 100%; margin-top: 20px;}
    .content-wrapper, .content-wrappe-right {flex-direction: column; text-align: center;}
    .content-wrapper img, .content-wrappe-right img {width: 80%;}
    .event-txt-l, .event-txt-r {margin: 0 auto;}
    .txt-content {max-width: 100%;}
}
/****** 流麗デスクの製品仕様 ******/
.heading-spec {background: url(./img/heading/heading_spec.svg) no-repeat center center; background-size: contain; height: 100%;}
.spec-body {width: 100%; max-width: 1200px; margin: 0 auto;}
.ryurei-section {text-align: center;}
.ryurei-container {display: inline-block;}
.ryurei-container h2 {font-size: 3em; margin-bottom: 10px; position: relative;}
.ryurei-container h2 span {font-size: 0.5em; margin-left: 20px;}
.ryurei-container h2::after {content: ""; display: block; width: 100%; height: 1px; background-color: #ccc; margin: 10px 0;}
.ryurei-container p {font-size: 1.2em; color: #333; margin-top: 10px;}
.ryurei-child {margin: 80px 40px;}
.large-heading {font-weight: bold; margin: 20px auto 40px; text-align: center;}
.spec-desc-container {display: flex; margin-bottom: 20px;}
.spec-desc-container-right {display: flex; flex-direction: row-reverse; align-items: flex-start; margin-bottom: 80px;}
.spec-desc-container img, .spec-desc-container-right img {width: 40%; height: auto; margin: 20px;}
.spec-desc-txt h4, .spec-desc-txt-right h4 {margin-bottom: 10px; position: relative; text-align: center; padding-bottom: 10px;}
.spec-desc-txt h5, .spec-desc-txt-right h5{margin-bottom: 10px; position: relative; text-align: center; padding-bottom: 20px;}
.spec-desc-txt h5::after, .spec-desc-txt-right h5::after {content: ""; display: block; width: 100%; height: 1px; background-color: #ccc; margin: 10px 0;}
.spec-desc-txt p, .spec-desc-txt-right p {color: #333; padding: 0px 20px;}
.spec-demo-txt {margin-bottom: 120px;}
.spec-cp-wrapper {display: flex; flex-direction: column; gap: 20px;}
.spec-cp-inner01, .spec-cp-inner02 {display: flex; justify-content: space-between; align-items: center;}
.spec-cp-inner01 > .spec-cp-left {flex: 1; text-align: center;}
.spec-cp-inner01 > div:not(.spec-cp-left) {flex: 1; display: flex; align-items: center; justify-content: center; text-align: left;}
.spec-cp-inner02 {flex-direction: row-reverse;}
.spec-cp-inner02 > .spec-cp-right {flex: 1; text-align: center;}
.spec-cp-inner02 > div:not(.spec-cp-right) {flex: 1; display: flex; align-items: center; justify-content: center; text-align: left;}
.spec-demo-wrapper {text-align: center;}
.spec-demo-wrapper h2 {margin-bottom: 80px;}
.spec-demo-wrapper p {margin: auto;}
.spec-demo-txt-wrapper {display: flex; width: 100%; max-width: 1000px;}
.spec-demo-txt-wrapper {width: 100%;}
.spec-demo-txt-wrapper-l {flex-direction: row;}
.spec-demo-txt-wrapper-r {flex-direction: row-reverse;}
.spec-demo-txt h3 {margin-bottom: 40px;}
.spec-demo-ttl {flex-basis: 120px;}
.spec-demo-ttl01, .spec-demo-ttl02, .spec-demo-ttl03, .spec-demo-ttl04 {display: flex; align-items: center; gap: 10px; z-index: 1;}
.spec-demo-ttl01, .spec-demo-ttl03 {display: flex; align-items: center; gap: 10px; justify-content: flex-start; width: 80%; position: absolute; top: -80px; left: 10px;}
.spec-demo-ttl02, .spec-demo-ttl04 {display: flex; align-items: center; gap: 10px; justify-content: flex-end; width: 80%; position: absolute; top: -80px; right: 0;}
.spec-demo-ttl01 p, .spec-demo-ttl02 p, .spec-demo-ttl03 p, .spec-demo-ttl04 p {display: flex; flex-direction: column; margin: 0;}
.spec-demo-ttl01 p span, .spec-demo-ttl02 p span, .spec-demo-ttl03 p span, .spec-demo-ttl04 p span {display: inline-block; transform: rotate(90deg); font-size: 1.2em; line-height: 0.8; text-align: center;}
.image-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px;}
.image-grid img {width: 100%; height: auto;}
.spec-demo-inner01, .spec-demo-inner02, .spec-demo-inner03, .spec-demo-inner04 {margin-bottom: 80px; display: flex; flex-direction: column; align-items: center; position: relative;}
.size-detail {width: 100%; height: auto; margin: 20px auto 40px;}
.size-detail img {width: 100%; max-width: 800px;}
.size-images {display: flex; justify-content: center; gap: 20px; max-width: 550px; margin: 0 auto 80px;}
.size-txt {text-align: center; padding: 0px 40px 40px 40px;}
.material-detail img {width: 100%;}
.material-txt {text-align: center; margin: 80px auto;}
.option-images {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px;}
.option-images img {width: 100%; height: auto;}
@media only screen and (max-width: 768px) {
    .ryurei-child {margin: 40px;}
    .large-heading {margin: 20px auto;}
    .spec-desc-container {flex-direction: column;}
    .spec-desc-container-right {flex-direction: column;}
    .spec-desc-container img, .spec-desc-container-right img {width: 100%; margin: 20px auto;}
    .spec-desc-container {flex-direction: column;}
    .spec-demo-txt:last-child {margin-bottom: 0}
    .spec-demo-txt span{margin: auto; max-width: 210px;}
    .size-images {flex-direction: column;}
}
/****** 導入と納期の流れ ******/
.heading-process {background: url(./img/heading/heading_process.svg) no-repeat center center; background-size: contain; height: 100%;}
.process-body {width: 100%; max-width: 1300px; margin: 0 auto;}
.process-wrapper h2 {border-left: 4px solid #222; padding-left: 15px; margin: 0 0 40px 0;}
.process-wrapper h3 {font-weight: bold;}
.process-wrapper h3, .process-wrapper p {margin-left: 50px;}
@media only screen and (max-width: 768px) {
    .process-wrapper h3, .process-wrapper p {margin-left: 0;}
}
/****** 保証について ******/
.heading-warranty {background: url(./img/heading/heading_warranty.svg) no-repeat center center; background-size: contain; height: 100%;}
.warranty-body {width: 100%; max-width: 1300px; margin: 0 auto;}
.warrantry-wrapper h2, .contact h2 {border-left: 4px solid #222; padding-left: 15px;  margin-left: 0; margin-bottom: 80px;}
.warranty-wrapper h3 {font-weight: bold;}
.warranty-wrapper h3, .warranty-wrapper p {margin-left: 50px;}
.warranty-wrapper {padding-bottom: 80px;}
.warranty-wrapper a, .warranty-wrapper p { color: #fff;font-weight: bold; font-size: 1.5em; margin: 10px 0 0; text-decoration: none;}
.warrantry-inner {margin-bottom: 40px;}
/****** 他Q&A ******/
.heading-qa{background: url(./img/heading/heading_qa.svg) no-repeat center center; background-size: contain; height: 100%;}
.qa-body {width: 100%; max-width: 1300px; margin: 0 auto;}
.qa-wrapper h2 {border-left: 4px solid #222; padding-left: 15px; margin: 0 0 80px 0;}
@media only screen and (max-width: 768px) {}
.accordion {width: 500px; margin: 20px auto;}
.accordion-item {border: 1px solid #ccc; margin-bottom: 10px; border-radius: 5px;}
.accordion-header {background-color: #f0f0f0; padding: 15px; cursor: pointer; font-weight: bold; display: flex; justify-content: space-between; align-items: center;}
.accordion-header.active, .accordion-header:hover {background-color: #ddd;}
.accordion-content {padding: 15px; display: none; background-color: #fff;}
.icon {font-size: 20px; transition: transform 0.3s ease;}
.icon.active {transform: rotate(-180deg);}
.accordion {width: 100%; max-width: 500px; margin: 20px auto;}
.accordion-item {border: 1px solid #ccc; margin-bottom: 10px; border-radius: 5px;}
.accordion-header {background-color: #f0f0f0; padding: 15px; cursor: pointer; font-weight: bold; display: flex; justify-content: space-between; align-items: center;}
.accordion-header.active, .accordion-header:hover {background-color: #ddd;}
.accordion-content {padding: 15px; display: none; background-color: #fff;}
.icon.active {transform: rotate(-180deg);}
@media only screen and (max-width: 768px) {}
/****** 会社概要 ******/
.company-body {width: 100%; max-width: 1300px; margin: 0 auto;}
.heading-company {background: url(./img/heading/heading_company.svg) no-repeat center center; background-size: contain; height: 100%;}
.company-body {width: 100%; max-width: 1300px; margin: 0 auto;}
.company-table th {background-color: #2D4491; color: #fff; padding: 40px;text-align: left;font-weight: 400;}
.company-table td {padding-left: 50px;}
.company-table td ul {list-style-type: disc;}
.company-table {width: 100%;border-collapse: collapse;}
.company-table th, .company-table td {border: 1px solid #ccc;}
.address-link {text-align: center; margin: 50px 0;}
.map-container {text-align: center; width: 100%; max-width: 600px; margin: auto; position: relative; aspect-ratio: 4 / 3;}
.map-container iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.google-map {border: 1px solid #ccc; border-radius: 5px; width: 600px; height: 450px;}
@media only screen and (max-width: 768px) {
    .company-table th {max-width: 70px; text-align: center; padding: 40px 20px;}
    .company-table td {padding: 10px;}
}
/****** 資料請求・お問合せ ******/
.heading-contact {background: url(./img/heading/heading_contact.svg) no-repeat center center; background-size: contain; height: 100%;}
.contact-body {width: 100%; max-width: 1300px; margin: 0 auto;}
.contact-button {text-align: center; background-color: #2D4491; padding: 20px 30px; border-radius: 5px; text-align: center; display: block; width: 100%; max-width: 200px; margin: 0 auto;}
.contact-wrapper h2, .contact h2, .contact-form h2 {border-left: 4px solid #222; padding-left: 15px; margin: 0 0 40px 0;}

@media only screen and (max-width: 768px) {}
/****** 新着情報 ******/
.single-news-ttl {display: flex; justify-content: center; align-items: center; height: 300px; background-color: #2D4491; color: #fff; text-align: center; margin: auto; padding: 80px 20%;}
.news-content {display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1300px; min-height: 800px; margin: auto; padding: 80px; background-color: #fff;}
.news-content-inner span {display: block; width: 100%; text-align: center; margin: 0 auto 80px;}
/****** 404 ******/
.page-404{height: 1000px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: auto; width: 100%; text-align: center;}