.note { color: #000; padding-top: 15px; padding-bottom: 15px; margin-top: 0; margin-bottom: 0; }

.ib { display: inline-block; }

.img100 { width: 100%; height: auto; vertical-align: bottom; }

.center { left: 0; right: 0; margin-left: auto; margin-right: auto; }

.brsp { display: none; }

@media (max-width: 580px) { .brsp { display: inline; } }

.clear { clear: both; }

.design_btn { max-width: 640px; width: 92%; margin: 60px auto 40px auto; }

@media (max-width: 580px) { .design_btn { margin: 30px auto 30px auto; } }

a.reflection-img { display: block; width: 49%; padding: 10px; background: #194467; background: linear-gradient(#3374aa, #194467); border: 1px solid #efd3b4; font-size: 21px; color: #efd3b4; text-align: center; line-height: 1em; letter-spacing: 0.2em; overflow: hidden; }

a.reflection-img:hover { opacity: 0.75; }

a.reflection-img span { font-size: 16px; }

@media (max-width: 580px) { a.reflection-img span { font-size: 12px; letter-spacing: 0.1em; } }

a.reflection-img.left { float: left; }

a.reflection-img.right { float: right; }

.main_img { width: 100%; margin-bottom: 30px; }

h6 { margin: 0 0 30px 0; text-align: center; font-size: 24px; color: #966731; }

@media (max-width: 580px) { h6 { font-size: 18px; } }

.design_contents { position: relative; margin-bottom: 30px; padding-bottom: 200px; }

@media (max-width: 580px) { .design_contents { padding-bottom: 0; } }

.design_contents_base { width: 100%; }

.design_contents_text { position: absolute; width: 90%; max-width: 1200px; bottom: 0; }

@media (max-width: 580px) { .design_contents_text { margin-top: 30px; position: relative; bottom: auto; max-width: 375px; width: 100%; } }

.design_contents2 { max-width: 1366px; margin-bottom: 30px; }

.design_contents2_base { margin-bottom: 30px; }

.movie { width: 100%; padding: 20px; margin: 80px auto; max-width: 1180px; }

@media (max-width: 580px) { .movie { margin-top: 0; margin-bottom: 50px; } }

.movie_outer { border: 2px solid #966731; padding: 30px; }

@media (max-width: 580px) { .movie_outer { padding: 10px; } }

.movie_head { line-height: 1.2em; width: 60%; position: absolute; top: -0.6em; text-align: center; font-size: 21px; color: #966731; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 10%, white 90%, rgba(255, 255, 255, 0) 100%); }

.movie_inner { width: 100%; padding-top: calc(100% * 720 / 1280); }

.movie_src { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.content3 { max-width: 1200px; }

.content3_img { margin-bottom: 30px; }

.content3_text { width: 90%; max-width: 932px; }

@media (max-width: 580px) { .content3 { margin-bottom: 50px; } }

.content4 { margin-bottom: 50px; }

.architect { width: 90%; max-width: 948px; margin-bottom: 50px; }

.content5 { margin-bottom: 50px; }

.content6 { margin-bottom: 50px; }

@media screen and (max-width: 640px) { .pc { display: none; }
  .design_contents { position: relative; margin-bottom: 30px; } }

.public-1 { width: 100%; max-width: 1920px; margin-bottom: 100px; }

.public-2 { width: 100%; max-width: 1920px; margin-bottom: 100px; }

.public-3 { max-width: 1200px; margin-bottom: 100px; }

.public-4 { max-width: 1200px; margin-bottom: 100px; }

.public-5 { max-width: 1200px; margin-bottom: 100px; }

.public-6 { max-width: 1920px; margin-bottom: 100px; }

@media (max-width: 580px) { .public-1, .public-2, .public-3, .public-4, .public-5, .public-6 { margin-bottom: 50px; } }

.washitsu_left { position: absolute; bottom: 0; width: 32%; }

.p8 { padding: 8%; }

.reflection { color: #ffffff; z-index: 9999; height: 100%; width: 30px; position: absolute; top: 0; left: 0; background-color: #fff; opacity: 0; transform: rotate(45deg); animation: reflection 3s ease-in-out infinite; }

@keyframes reflection { 0% { transform: scale(0) rotate(45deg);
    opacity: 0; }
  80% { transform: scale(0) rotate(45deg);
    opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg);
    opacity: 1; }
  100% { transform: scale(50) rotate(45deg);
    opacity: 0; } }

.tel_sp { border: 1px solid #000; padding: 10px 40px; border-radius: 5px; background: linear-gradient(#555, #000); color: #fff; text-align: center; }
