/* style.css */
@charset "utf-8";

html {
font-size: 62.5%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
font-size: 1.6rem;
color: #000;
font-family: "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-weight: 500;
background: #f7f7f7;
margin: 0;
line-height: 180%;
}
img, iframe {
width:100%;
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a, a:hover {
text-decoration: none;
color: #000;
}
.min {
font-weight: 700;
}
.inner, .inner-s {
margin: 0 auto;
}
.inner {
width: 90%;
max-width: 1260px;
}
.inner-s {
width: 90%;
max-width: 940px;
}
.bg-white {
background: #fff;
}
h2 {
font-size: 2.8rem;
display: table;
margin: 0 auto;
border-bottom: 1px solid #000;
padding-bottom: 5px;
margin-bottom: 50px;
}

#header { width: 100%; background: #f7f7f7; padding: 16px 0;
	.inner #logo { width: 50%; max-width: 240px; }
	nav ul { display: flex; justify-content: flex-end;
		li a { padding: 10px 24px; color: #fff; font-size: 1.4rem; line-height: 1em; }
	}
}
li.standard a { background: #3199df; }
li.smart a { background: #053067; }

#hero { background: url("../images/herox3.webp") no-repeat center; background-size: cover; margin-bottom: 100px;
	h1 { color: #fff; font-size: 4rem; line-height: 1.5em; padding: 100px 0; text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
		span { font-size: 1.2em; font-weight: 900; }
	}
}

#heroColumn { background: url("../images/column-herox3.webp") no-repeat center; background-size: cover; margin-bottom: 20px;
	h1 { color: #fff; font-size: 4rem; line-height: 1.5em; padding: 100px 0; text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4); }
}

#main > section {
padding-bottom: 100px;
}
#main > section.p-t {
padding-top: 100px;
}

#inspection dl dt span {
display: table;
margin: 0 auto;
font-size: 2.6rem;
padding-bottom: 30px;
}
#inspection dl dd {
padding-bottom: 60px;
}
#inspection .flex-box img {
width: 40%;
align-items: flex-start;
}
#inspection .flex-box p {
width: 60%;
box-sizing: border-box;
padding-left: 20px;
}
#video li {
width: 32%;
}
.video-wrap {
position: relative;
padding-top: 56.25%;
height: 0;
margin-bottom: 10px;
}
.video-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#video li h3 {
text-align: center;
font-size: 1.8rem;
padding-bottom: 10px;
}
#video li p {
line-height: 180%;
font-size: 1.5rem;
}
#video li p strong {
color: red;
}

#main section#recommend {
padding-bottom: 0;
}
#recommend .flex-box ul {
width: 58%;
padding-top: 40px;
}
#recommend .flex-box ul li {
padding: 12px;
border: solid 3px #ddd;
box-sizing: border-box;
margin-bottom: 24px;
border-radius: 3px;
}
#recommend .flex-box ul li p {
font-weight: 700;
font-size: 1.8rem;
}
#recommend .flex-box img {
width: 40%;
align-items: flex-start;
}

#plan .inner > p {
font-size: 2rem;
line-height: 200%;
padding-bottom: 40px;
}
#plan .inner > p span {
display: block;
font-weight: 700;
font-size: 0.9em;
}
#plan li {
width: 48%;
}
#plan li h3 {
position: relative;
margin-bottom: 30px;
}
#plan li h3 span {
position: relative;
display: table;
margin: 0 auto;
background: #f7f7f7;
z-index: 2;
font-weight: 700;
font-size: 2.4rem;
padding: 0 10px;
}
#plan li h3:after {
position: absolute;
content: "";
display: block;
top: 50%;
width: 100%;
height: 1px;
z-index: 1;
}
#plan li.standard h3 span, #plan li.standard p, #plan li.standard dt {
color: #3199df;
}
#plan li.standard h3:after {
background: #3199df;
}
#plan li.smart h3 span, #plan li.smart p, #plan li.smart dt {
color: #053067;
}
#plan li.smart h3:after {
background: #053067;
}
#plan li p {
padding-bottom: 20px;
}
#plan dl {
text-align: center;
padding-bottom: 20px;
}
#plan dd {
padding-bottom: 10px;
}
#plan a {
display: block;
max-width: 240px;
margin: 0 auto;
padding: 10px 24px;
color: #fff;
font-size: 1.6rem;
line-height: 1em;
text-align: center;
}

#main section#mri {
padding-bottom: 0;
}
#mri > div {
position: relative;
}
#mri > div:after {
position: absolute;
top: 0;
content: "";
display: block;
z-index: 1;
}
#mri div div {
position: relative;
text-align: center;
z-index: 2;
}
#reservation:after {
right: 0;
background: url(../images/mri1.webp) no-repeat center center;
background-size: cover;
}
#easyInspection:after {
left: 0;
background: url(../images/mri2.webp) no-repeat center center;
background-size: cover;
}
#doubleCheck:after {
right: 0;
background: url(../images/mri3.webp) no-repeat center center;
background-size: cover;
}
#mri h3 {
font-size: 2.4rem;
padding-bottom: 16px;
}
#mri h3 span {
display: block;
font-size: 0.7em;
}

#flowList {
padding-bottom: 80px;
}
#flowList ol > li {
position: relative;
display: inline-block;
width: 100%;
background: #FFF;
border: solid 3px #000;
box-sizing: border-box;
padding: 20px;
margin-bottom: 40px;
}
#flowList ol > li:before {
content: "";
position: absolute;
bottom: -24px;
left: 50%;
margin-left: -15px;
border: 12px solid transparent;
border-top: 12px solid #FFF;
z-index: 2;
}
#flowList ol > li:after {
content: "";
position: absolute;
bottom: -30px;
left: 50%;
margin-left: -17px;
border: 14px solid transparent;
border-top: 14px solid #000;
z-index: 1;
}
#flowList ol > li:last-child:before, #flowList ol > li:last-child:after {
display: none;
}
#flowList .flex-box > div {
width: 70%;
}
#flowList h3 {
font-size: 2.4rem;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 3px solid #000;
}
#flowList h3 span {
display: inline-block;
padding-right: 10px;
}
#flowList h4 {
font-size: 2rem;
line-height: 180%;
}
#flowList ul {
list-style-type: square;
padding-top: 20px;
margin-left: 20px;
}
#flowList ul li, #flowList p {
font-size: 1.4rem;
}
#flowList ul li span, #flowList p span {
color: red;
}
#flowList p {
padding-top: 20px;
}
#flowList .flex-box img {
width: 26%;
height: 100%;
}

.accordion-button {
width: 100%;
text-align: left;
padding: 20px;
background-color: transparent;
outline: none;
appearance: none;
border: none;
border-bottom: solid 3px #000;
cursor: pointer;
font-size: 2rem;
position: relative;
}
.accordion-button:after {
position: absolute;
top: 50%;
right: 20px;
content: '\f0d7';
font-family: 'Font Awesome 5 Pro';
font-weight: 900;
font-size: 1.2em;
}
.accordion-button.active:after {
top: 60%;
content: '\f0de';
}
.accordion-content {
max-height: 0;
overflow: hidden;
padding: 0 15px;
background: #f9f9f9;
margin-top: 5px;
transition: max-height 0.4s ease, padding 0.4s ease;
}
.accordion-content.open {
max-height: 300px;
padding: 10px 15px 40px;
}
.accordion-content ul {
list-style-type: circle;
margin-left: 20px;
}

.breadcrumb__list {
display: flex;
flex-wrap: wrap;
padding-bottom: 80px;
}
.breadcrumb__list li {
position: relative;
margin-right: 18px;
padding-right: 24px;
}
.breadcrumb__list li:last-child {
margin-right: 0;
padding-right: 0;
}
.breadcrumb__list li:after {
position: absolute;
top: 55%;
right: 0;
transform: translateY(-50%);
content: '\f0da';
font-family: 'Font Awesome 5 Pro';
font-weight: 900;
font-size: 1.2em;
}
.breadcrumb__list li:last-child:after {
content: none;
}
.breadcrumb__list li a {
font-size: 1.6rem;
text-decoration: underline;
}

#column .flex-box {
padding-bottom: 50px;
}
#column .flex-box > li {
width: 32%;
}
#column .flex-box > li a img {
padding-bottom: 20px;
}
#column .flex-box > li a h4 {
text-decoration: underline;
font-size: 1.6rem;
line-height: 180%;
font-weight: 700;
padding: 0 10px;
}
#column .flex-box li ul {
display: flex;
flex-wrap: wrap;
padding-top: 20px;
}
#column .flex-box li ul li {
margin: 0 16px 20px 0;
}
#column .flex-box li ul li a {
display: block;
padding: 4px 30px;
background: #000;
color: #fff;
border-radius: 8px;
font-size: 1.4rem;
}
#column > a {
display: table;
position: relative;
margin: 0 auto;
font-size: 1.6rem;
line-height: 1em;
padding: 16px 80px 16px 20px;
background: #000;
color: #fff;
border: 1px solid #000;
border-radius: 40px;
}
#column > a:after {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
content: '\f054';
font-family: 'Font Awesome 5 Pro';
font-weight: 900;
font-size: 1.1em;
}

#entry > img {
padding-bottom: 40px;
}
#entry > div {
padding-bottom: 50px;
}
#entry > div h3, #entry > div h4 {
padding-bottom: 10px;
}
#entry > div h3 {
font-weight: 900;
font-size: 2rem;
}
#entry > div h4 {
font-weight: 700;
font-size: 1.8rem;
}
#entry > div p, #entry > div ul, #entry > div ol {
padding-bottom: 20px;
}
#entry > div ul, #entry > div ol {
margin-left: 20px;
}
#entry > div ul {
list-style-type: square;
}
#entry > div ol {
list-style-type: decimal;
}
#entry > div hr {
margin-bottom: 20px;
}
#entry > div p strong {
font-weight: 600;
font-size: 1.1em;
}
#entry > div table {
width: 100%;
}
#entry > div table th, #entry > div table td {
padding: 8px;
border: 1px solid #666;
}
#entry > a {
display: table;
position: relative;
margin: 0 auto 50px;
font-size: 1.8rem;
line-height: 1em;
padding: 16px 20px 16px 70px;
background: #00ba33;
color: #fff;
border: 1px solid #00ba33;
border-radius: 40px;
}
#entry > a:after {
position: absolute;
top: 50%;
left: 25px;
transform: translateY(-50%);
content: '\f3c0';
font-family: 'Font Awesome 5 Brands';
font-weight: 500;
font-size: 2em;
}

#reserve {
background: url(../images/bg.webp) no-repeat center;
background-size: cover;
}
#reserve h3, #access h3, #footer h4 {
text-align: center;
font-size: 2.6rem;
padding-bottom: 30px;
}
#reserve ul {
display: flex;
justify-content: center;
}
#reserve ul li {
width: 320px;
margin: 0 10px;
}
#reserve ul li a {
display: block;
width: 100%;
color: #fff;
text-align: center;
padding: 12px 0;
font-size: 1.8rem;
}

#main section#access {
padding-bottom: 0;
}
#access .flex-box {
padding-bottom: 50px;
}
#access img {
width: 48%;
height: 100%;
}
#access .flex-box >div {
width: 48%;
}
#access table {
border-top: 1px solid #999;
margin-bottom: 30px;
}
#access th, #access td {
padding: 10px 0;
border-bottom: 1px solid #999;
}
#access th {
width: 100px;
}
#access ul {
list-style-type: square;
margin-left: 20px;
}
#access ul li {
font-size: 1.4rem;
}
#access iframe {
height: 600px;
}

#footer {
padding-top: 100px;
}
#footer p {
text-align: center;
padding-bottom: 30px;
}
#footer a {
display: table;
position: relative;
margin: 0 auto 50px;
font-size: 1.8rem;
line-height: 1em;
padding: 16px 20px 16px 70px;
background: #00ba33;
color: #fff;
border: 1px solid #00ba33;
border-radius: 40px;
}
#footer a:after {
position: absolute;
top: 50%;
left: 25px;
transform: translateY(-50%);
content: '\f3c0';
font-family: 'Font Awesome 5 Brands';
font-weight: 500;
font-size: 2em;
}
#footer small {
display: block;
padding: 8px 0;
text-align: center;
font-size: 12px;
border-top: 1px solid #ddd;
}

.pagination {
list-style-type: none;
display: flex;
justify-content: center;
}
.pagination li a {
display: block;
background: #3a3a3a;
color: #fff;
font-size: 3.5vw;
transition: .6s;
}
.pagination li a:hover {
background: #1aa1a8;
}
.pagination li a.current_page_number {
background: #969696;
pointer-events: none;
}

@media (max-width: 560px){
h2 {
font-size: 4.6vw;
}

#header nav li a {
font-size: 3.3vw;
}

#hero {
background: url("../images/hero.webp") no-repeat center right -40vw;
background-size: cover;
margin-bottom: 60px;
}
#hero h1, #heroColumn h1 {
font-size: 6vw;
}
#heroColumn {
background: url("../images/column-hero.webp") no-repeat center;
background-size: cover;
margin-bottom: 10px;
}

#main > section {
padding-bottom: 60px;
}
#main > section.p-t {
padding-top: 60px;
}

#inspection dl dt span, #reserve h3, #access h3, #footer h4 {
font-size: 4vw;
}
#inspection dl dd, #plan li p, #plan a, #mri p, .accordion-content ul li, #access th, #access td, #footer p {
font-size: 3.5vw;
}
#video li h3, #plan .inner > p, .accordion-button {
font-size: 3.8vw;
}
#video li p, #plan dl, #flowList ul li, #flowList p, #access ul li {
font-size: 3.3vw;
}
#recommend .flex-box ul li p, #column .flex-box > li a h4, #reserve ul li a {
font-size: 3.8vw;
}
#plan li h3 span, #mri h3, #flowList h3 {
font-size: 4.2vw;
}
#flowList h4 {
font-size: 3.9vw;
}

#inspection .flex-box img {
width: 100%;
padding-bottom: 10px;
}
#inspection .flex-box p {
width: 100%;
padding-left: 0;
}
#video li {
width: 100%;
padding-bottom: 40px;
}
#video li:last-child, #plan li:last-child, #column .flex-box > li:last-child {
padding-bottom: 0;
}

#recommend .flex-box, #recommend .flex-box img {
position: relative;
}
#recommend .flex-box img {
width: 80%;
margin-left: 20%;
z-index: 1;
}
#recommend .flex-box ul {
position: absolute;
z-index: 2;
width: 90%;
}
#recommend .flex-box ul li {
background: #ffffffcc;
}

#plan .inner > p br {
display: none;
}
#plan li {
width: 100%;
padding-bottom: 40px;
}

#mri > div {
padding-top: 180px;
}
#mri > div:after {
width: 100%;
height: 180px;
}
#mri div div {
padding: 20px 0 60px;
}

#flowList {
padding-bottom: 50px;
}
#flowList .flex-box > div {
width: 100%;
padding-bottom: 20px;
}
#flowList .flex-box img {
width: 100%;
height: auto%;
}

.accordion-button {
padding: 10px;
}

.breadcrumb__list {
padding-bottom: 40px;
}

#column .flex-box > li {
width: 100%;
padding-bottom: 40px;
}

#entry > div h3 {
font-size: 4vw;
}
#entry > div h4 {
font-size: 3.8vw;
}

#access img {
width: 100%;
height: auto;
padding-bottom: 20px;
}
#access .flex-box >div {
width: 100%;
}
#access th {
width: 55px;
}
#access iframe {
height: 40vh;
}

#footer {
padding-top: 60px;
}

.pagination li {
margin: 0 6px;
}
.pagination li a {
padding: 6px 12px;
}
}

@media (min-width: 561px){
.flex-box {
display: flex;
justify-content: space-between;
}
.flex-wrap {
flex-wrap: wrap;
}

#recommend .flex-box ul li {
position: relative;
display: inline-block;
}
#recommend .flex-box ul li:before {
content: "";
position: absolute;
top: 50%;
right: -24px;
margin-top: -12px;
border: 12px solid transparent;
border-left: 12px solid #FFF;
z-index: 2;
}
#recommend .flex-box ul li:after {
content: "";
position: absolute;
top: 50%;
right: -30px;
margin-top: -14px;
border: 14px solid transparent;
border-left: 14px solid #ddd;
z-index: 1;
}

#plan .inner > p {
text-align: center;
}

#mri > div {
padding: 100px 0;
}
#mri > div:after {
width: 50%;
height: 100%;
}
#mri div div {
width: 50%;
}
#mri div#easyInspection div {
margin-left: auto;
}

#column .flex-box.flex-wrap {
justify-content: flex-start;
}
#column .flex-wrap li {
margin-right: 2%;
padding-bottom: 40px;
}
#column .flex-wrap li:nth-child(3n) {
margin-right: 0;
}
#column .flex-wrap li:nth-last-child(-n+3) {
padding-bottom: 0;
}

.pagination li {
margin: 0 10px;
}
.pagination li a {
font-size: 1.8rem;
padding: 10px 18px;
}
}

@media (min-width: 561px) and (max-width: 768px){
h2 {
font-size: 2.4rem;
}

#hero h1, #heroColumn h1 {
font-size: 3.2rem;
}

#inspection dl dt span, #reserve h3, #access h3, #footer h4 {
font-size: 2.2rem;
}
#inspection dl dd, #plan li p, #plan a, #mri p, .accordion-content ul li, #access th, #access td, #footer p {
font-size: 1.4rem;
}
#video li h3, #plan .inner > p, .accordion-button {
font-size: 1.6rem;
}
#video li p, #plan dl, #flowList ul li, #flowList p, #access ul li {
font-size: 1.3rem;
}

#recommend .flex-box ul li p, #column .flex-box > li a h4, #reserve ul li a {
font-size: 1.5rem;
}

#plan li h3 span, #mri h3, #flowList h3 {
font-size: 2rem;
}

#flowList h4 {
font-size: 1.8rem;
}

#access th {
width: 60px;
}
}

@media (min-width: 561px) and (max-width: 1024px){
#hero {
background: url("../images/herox2.webp") no-repeat center;
background-size: cover;
margin-bottom: 80px;
}
#heroColumn {
background: url("../images/column-herox2.webp") no-repeat center;
background-size: cover;
}

#main > section {
padding-bottom: 80px;
}
#main > section.p-t {
padding-top: 80px;
}

#footer {
padding-top: 80px;
}
}

@media (max-width: 768px){
#header .inner #logo {
margin: 0 auto;
}
#header nav {
width: 100%;
position: fixed;
z-index: 100;
left: 0;
bottom: 0;
}
#header nav ul {
width: 100%;
}
#header nav li {
width: 50%;
}
#header nav li a {
box-sizing: border-box;
display: block;
width: 100%;
text-align: center;
font-weight: 700;
padding: 20px 0;
}

#hero h1, #heroColumn h1 {
padding: 60px 5%;
}

#column .flex-box li ul li a {
padding: 4px 20px;
}

#reserve {
display: none;
}

#footer small {
padding-bottom: 70px;
}
}

@media (min-width: 769px){
#header {
position: fixed;
z-index: 100;
}
#header .inner {
display: flex;
justify-content: space-between;
align-items: center;
}

#plan li p {
text-align: center;
}
}