@charset "UTF-8";

html         { font-size: 16px; line-height: 2rem; font-family: "IBM Plex Sans JP", sans-serif; scroll-behavior: smooth;}
body         { background-color: #fff; color: #333; }

.pc          { display: block;}
.sp          { display: none;}

.mt1  { margin-top: 1rem;}
.mt2  { margin-top: 2rem;}
.mt3  { margin-top: 3rem;}
.mt4  { margin-top: 4rem;}
.mt5  { margin-top: 5rem;}

.ta_c { text-align: center;}


header                              { position: fixed; top: 1rem; right: 1rem; left: 1rem; display: flex; justify-content: space-between; align-items: center; min-width: 1200px; z-index: 10000;}
header > a                          { background: url(img/header-logo.png) center bottom no-repeat #FFF; background-size: 90%; display: block; width: 230px; height: 50px; border-radius: 45px; font-size: 0; line-height: 0; text-indent: -9999px; text-indent: -9999px; box-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
header nav                          { background-color: #fff; border-radius: 2rem; box-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
header nav ul                       { display: flex; padding: 0.3rem 1rem;}
header > div                    { display: none;}
header nav ul li a                  { margin: 0 0.5rem; color: #333;}
header nav ul li a:hover            { color: #F60;}
header nav ul li::after             { content: "｜";}
header nav ul li:last-child::after  { display: none;}

#first-view                         { background: url(img/fv-img.jpg) center -300px no-repeat; width: 100%; height: 100vh; min-height: 1100px;}
#first-view h1                      { background: url(img/fv-title.png) center center no-repeat; background-size: contain; width: 1000px; height: 600px; margin: auto; font-size: 0; line-height: 0; text-indent: -9999px; position: relative; top: 0;}


h2                     { font-size: 3rem; font-weight: bold; text-align: center; margin-bottom: 3rem;}
h2 span                { font-size: 1.2em;}

#about                 { padding: 8rem 0 0; text-align: center; font-size: 1.2rem; line-height: 3rem;}
#about ul              { width: 1000px; display: flex; gap: 30px; margin: 3rem auto; flex-wrap: wrap;}
#about ul li           { width: calc((100% - 30px)/2);}
#about ul li img       { width: 100%; height: auto; display: block;}


#strong                { padding: 8rem 0 0; width: 1000px; margin: auto;}
#strong h3             { font-size: 2.5rem; font-weight: bold; text-align: center;}
#strong h3::before     { content: "[ "; position: relative; top: -0.1rem;}
#strong h3::after      { content: " ]"; position: relative; top: -0.1rem;}
#strong h4             { font-size: 1.5rem; font-weight: bold; text-align: center; margin-top: 1rem; margin-bottom: 2rem;}
#strong h5             { font-size: 1.2rem; font-weight: bold; text-align: center; margin-top: 2rem; margin-bottom: 1rem;}
#strong .box           { border: 10px solid #333; margin-top: 2rem; padding: 3rem 5rem;}
#strong .box ul        { display: flex; align-items: end; gap: 2rem;}
#strong .box img       { width: 100%;}


#price                 { padding: 8rem 0 0; width: 1000px; margin: auto;}
#price ul              { width: 800px; display: flex; gap: 30px; margin: 3rem auto; flex-wrap: wrap;}
#price ul li           { width: calc((100% - 30px)/2);}
#price img             { width: 100%; height: auto; display: block;}
#price .box            { border: 10px solid #333; margin-top: 2rem; padding: 3rem 5rem;}


#plan                  { padding: 8rem 0; width: 1000px; margin: auto;}
#plan h3               { font-size: 2rem; font-weight: bold;}
#plan h3 span          { font-size: 1.3em;}
#plan dl               { display: flex; gap: 30px; align-items: center;}
#plan dl dt            { width: 500px;}
#plan img              { width: 100%; height: auto; display: block;}
#plan dd               { flex: 1; font-size: 1.5rem;}
#plan dd ul            { list-style: disc; padding-left: 2rem; margin: 1rem 0;}
#plan .price           { font-weight: bold; font-size: 2rem; margin-top: 2rem;}
#plan .price b         { font-size: 2em;}
#plan .small           { font-size: 1rem;}

#gallery               { padding: 6rem 0; background-color: #333; width: 100%; margin: auto;}
#gallery h2            { color: #FFF;}
#gallery ul            { width: 1000px; display: flex; margin: auto; flex-wrap: wrap; gap: 1rem;}
#gallery ul li         { width: calc((100% - 3rem)/4);}
#gallery ul li img     { width: 100%;}


#contact               { padding: 8rem 0; margin: auto; background-color: #FFE500;}
#contact .box          { border: 5px solid #333; margin: 2rem auto; text-align: center; padding: 1rem; background-color: #fff; width: 800px;}
#contact .box strong   { font-size: 1.5rem; font-weight: bold;}
#contact .box strong a { font-size: 1.5em; margin: 0 0.2rem; color: #333; text-decoration: underline; position: relative; top: 0.2rem;}
#contact form          { width: 800px; margin: auto;}
#contact h3            { font-size: 2rem; font-weight: bold; text-align: center; margin-top: 3rem; margin-bottom: 0.5rem;}
#contact form dl       { border-top: 1px solid #FF0; margin-top: 1rem;}
#contact form dl > div   { display: flex; gap: 2rem; padding: 0.5rem 0; align-items: center; border-bottom: 1px solid #FF0;}
#contact form dl > div dt{ width: 200px;}
#contact form dt span  { color: #F60;}
#contact form dl > div dd{ flex: 1;}
#contact form textarea { width: 100%; height: 10rem; border: 0; padding: 1rem;}
#contact form label    { display: block;}
#contact form input    { width: 100%; border: 0; padding: 1rem; margin-right: 0.5rem;}
#contact form input[type=checkbox]    { width: auto; padding: 0;}
#contact form input[name=zip]  { width: 10em;}
#contact form input[name=city] { width: 10em;}
#contact form > div    { margin-top: 1rem;}
#contact form b        { font-weight: normal; font-size: 0.9rem;}
#contact form a        { width: fit-content; background-color: #999; color: #FFF; font-size: 1.2rem; padding: 0.3rem 1rem; border-radius: 0.3rem; display: inline-block; margin: 0 0.5rem; position: relative; top: 0.8rem;}
#contact form button   { width: 300px; background-color: #333; color: #FFF; font-size: 1.2rem; padding: 0.3rem; border-radius: 0.3rem; display: inline-block; margin: 0 0.5rem;}


#corporate             { padding: 8rem 0; margin: auto; width: 1000px;}
#corporate ul          { width: 800px; display: flex; gap: 2rem; margin: auto;}
#corporate ul li       { width: calc((100% - 2rem)/2)}
#corporate ul li img   { width: 100%; height: auto; display: block;}
#corporate dl          { padding-top: 1px; margin-top: 3rem;}
#corporate dl div      { display: flex; gap: 2rem; padding: 0.5rem; width: 800px; margin: auto; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin-top: -1px;}
#corporate dl div dt   { width: 150px;}
#corporate iframe      { width: 100%;}


footer div                             { width: fit-content; margin: 2em auto 0; display: flex; gap: 2em; align-items: center;}
footer div h2                          { background: url(./img/logo-ft.png); background-size: cover; width: 230px; height: 80px; font-size: 0; line-height: 0; text-indent: -9999px; position: relative; top: 10px;}
footer address                         { flex: 1;}
footer address strong                  { font-weight: bold;}
footer > p                             { text-align: center; padding: 1em 0 2em; border-top: 1px solid #e5e5e5; margin: 2em 2em 0;}
footer .pc   { display: inline-block;}



@media screen and ( max-width: 767px ) {

html     { font-size: 4vw;}

.sp      { display: block;}
.pc      { display: none;}

header nav span    { display: block; width: 40px; height: 40px; background-color: #fff; border-radius: 50%; position: fixed; right: 5vw; top: 20px; box-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
header nav span::before    { content: ""; width: 20px; height: 2px; background-color: #333; display: block; position: relative; left: 10px; top: 15px;}
header nav span::after     { content: ""; width: 20px; height: 2px; background-color: #333; display: block; position: relative; left: 10px; top: 22px;}

header nav span.close::before    { transform: rotate( 20deg) translate( 1px ,4px);}
header nav span.close::after     { transform: rotate(-20deg) translate( 1px ,-5px);}


header nav ul                   { display: none; position: fixed; height: auto; width: 90vw; left: 50%; top: 80px; transform: translate(-50%); background-color: rgba(255,255,255,0.9); padding: 2rem; border-radius: 0.5rem; z-index: 10000;}
header nav ul.menu              { display: block;}
header nav ul.menu::before      { content: ""; position: fixed; width: 100%; height: 100%; margin-left: -2rem; margin-top: -2rem; border-radius: 0.5rem; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); z-index: -1;}
header nav ul.menu li::after    { display: none;}
header nav ul.menu li           { border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; padding: 0.3rem 0; margin-top: -1px;}
header nav ul.menu li a::before { content: "▼"; font-size: 0.3rem; width: 1rem; height: 1rem; background-color: #F60; display: inline-block; margin-right: 0.5rem; position: relative; top: -0.2rem; line-height: 1rem; text-align: center; border-radius: 50%; color: #FFF;}

header > div                    { display: flex; position: fixed; bottom: 0; background-color: #000; color: #fff; left: 0; right: 0;}
header > div > a                { flex: 1; color: #FFF; text-align: center; line-height: 1.2rem; font-size: 0.8rem; padding: 0.5rem 0 0.5rem 2rem;}
header > div > a:first-child    { background-color: #F60;}
header > div > a:last-child     { background-color: #999;}
header > div > a img            { width: 100%; height: auto;}
header > div > a i              { width: 1.8rem; position: absolute; margin-left: -2.2rem; margin-top: 0.2rem;}


#first-view                         { background: url(img/fv-img-sp.jpg) center no-repeat; background-size: cover; width: 100%; height: 100vh; min-height: auto;}
#first-view h1                      { background: url(img/fv-title-sp.png) center center no-repeat; background-size: contain; width: 70vw; height: 105vw; margin: auto; position: relative; top: 10vh;}

h2                     { font-size: 2rem; margin-bottom: 3rem;}

#about                 { padding: 8rem 0 0; text-align: left; font-size: 1rem; line-height: 2rem;}
#about p               { width: 94vw; margin: auto;}
#about ul              { width: 94vw; gap: 1.5rem; margin: 3rem auto;}
#about ul li           { width: 100%;}


#strong                { padding: 8rem 0 0; width: 94vw;}
#strong h3             { font-size: 1.5rem;}
#strong h4             { font-size: 1.3rem; font-weight: bold; text-align: center; margin-top: 1rem; margin-bottom: 2rem;}
#strong h5             { font-size: 1.1rem; font-weight: bold; text-align: center; margin-top: 2rem; margin-bottom: 1rem;}
#strong .box           { border: 10px solid #333; margin-top: 2rem; padding: 1.5rem;}
#strong .box ul        { display: flex; align-items: end; gap: 2rem; flex-wrap: wrap;}
#strong .box ul li     { width: 80%; margin: auto;}



#price                 { padding: 8rem 0 0; width: 94vw; margin: auto;}
#price ul              { width: 100%; display: flex; gap: 1.5rem; margin: 2rem auto;}
#price ul li           { width: 100%;}
#price .box            { border: 0; margin-top: 2rem; padding: 0;}


#plan                  { padding: 8rem 0; width: 94vw;}
/* #plan h3               { font-size: 2rem; font-weight: bold;}
#plan h3 span          { font-size: 1.3em;} */
#plan dl               { display: flex; flex-direction: column; }
#plan dl dt            { width: 100%;}
#plan dd               { flex: 1; font-size: 1.5rem;}
#plan .price           { font-weight: bold; font-size: 1.8rem; margin-top: 2rem;}
#plan .price b         { font-size: 2em;}
#plan .small           { font-size: 0.95rem;}

#gallery               { padding: 6rem 0; background-color: #333; width: 100%; margin: auto;}
#gallery h2            { color: #FFF;}
#gallery ul            { width: 94vw;}
#gallery ul li         { width: calc((100% - 1rem)/2);}


#contact               { padding: 4rem 0; margin: auto; background-color: #FFE500;}
#contact .box          { border: 5px solid #333; width: 94vw;}
#contact .box strong   { font-size: 1.1rem;}
/* #contact .box strong a { font-size: 1.5em; margin: 0 0.2rem; color: #333; text-decoration: underline; position: relative; top: 0.2rem;} */
#contact form          { width: 94vw;}
#contact h3            { font-size: 1.5rem;}

#contact form dl       { border-top: 0; border-bottom: 1px solid #ccc;}
#contact form dl > div   { display: flex; flex-direction: column; gap: 0; border-top: 1px solid #ccc; margin-top: 0.5rem; border-bottom: 0; padding-top: 0.5rem;}
#contact form dl > div dt{ width: 100%;}
#contact form dl > div dd{ width: 100%;}
/* #contact form textarea { width: 100%; height: 10rem; border: 0; padding: 1rem;} */
#contact form input    { display: block;}
#contact form input[type=checkbox]    { display: inline-block;}

/* #contact form input[name=zip]  { width: 10em;}
#contact form input[name=city] { width: 10em;} */
#contact form a        { top: 0; display: block; margin: auto;}
#contact form button   { max-width: 100%; display: block; margin: 1rem auto;}
#contact form b        { font-weight: normal; font-size: 0.9rem;}


#corporate             { padding: 4rem 0; margin: auto; width: 94vw;}
#corporate ul          { width: 100%; display: flex; flex-direction: column; gap: 1rem;}
#corporate ul li       { width: 100%}
#corporate ul li img   { width: 100%; height: auto; display: block;}
#corporate dl          { padding-top: 1px; margin-top: 3rem;}
#corporate dl div      { display: flex; gap: 0; width: 100%; flex-direction: column; padding: 0.5rem 0;}
#corporate dl div dt   { width: 100%;}
#corporate dl div dt::before   { content: "■";}

footer { padding-bottom: 3rem;}
footer div                             { width: fit-content; margin: 2em auto 0; display: flex; gap: 0; flex-direction: column; width: 94vw; align-items: top;}
footer div h2                          { margin-bottom: 2rem;}
footer address                         { text-align: center;}
footer address strong                  { font-weight: bold;}
footer > p                             { text-align: center; padding: 1em 0 2em; border-top: 1px solid #e5e5e5; margin: 2em 2em 0;}
footer .pc   { display: none;}


}