/* ############################## * Created on : 2020/04/17 * @version 1.00 * @copyright Sumika-Group.com(Heaven-studio.com) * @author Toshiyasu Takamoto ############################## */ /* ############################## 初期化 ############################## */ /*### Basic CSS ###*/ @import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:400,500,700,800&display=swap'); @import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap'); html { height: 100%; overflow-y: scroll; } body { margin: 0; padding: 0; min-height: 100%; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; height: calc(100%-85px); z-index: 0; color: #000; background: #fff; position: relative;} * { margin: 0; padding: 0; } a { color: #666666; text-decoration: none; } a:hover { color: #000000; text-decoration: none; } img { border-style: none; } ul, ul li { list-style: none; list-style-position: inside; } .hide { display: none; } .over_show { display: block; } .red { color: #f00; } .red_b { color: #f00; font-weight: bold; } .blue { color: #00F; } .blue_b { color: #00F; font-weight: bold; } .t_center { text-indent: 0; text-align: center; } #no_js { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 5000; } #no_js div { position: fixed; width: 320px; padding: 15px 0; top:50%; left: 50%; transform: translate(-50%,-60%); font-size: 14px; line-height: 22px; text-align: center; color: #f00; background: #fff; border-radius: 10px; } .fixed-top { position: fixed; margin: 0; padding: 0; z-index: 10; } .s_14 { font-size: 14px; line-height: 20px; } /*### Header ###*/ header { width: 100%; display: block; padding: 5px; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 400; } #top_link { display: inline-block; cursor: pointer; height: 100%; line-height: 100%; padding: 0; } #top_link_svg, #top_link h1 { display: inline-block; vertical-align: middle; margin: 0; } header nav { display: inline-block; height: 100%; line-height: 100%; vertical-align: middle; } #menu_button { width: 40px; height: 40px; margin: 5px; border: none !important; border-radius: 5px; background: #666; } .navbar-brand { line-height: 30px; font-size: 14px; text-align: center; margin: 0 10px 0 0;} .staff_name { line-height: 30px; font-size: 12px; text-align: center; margin: 0 10px; padding: 0 10px; border-radius: 5px; color:#000; background: #fff;} .navbar-nav { margin: 0 auto; background: rgba(212,209,151,0.7); } .nav-link { line-height: 24px; font-size: 14px; text-align: right; padding-right: 10px !important; } .nav-link.active { background-color: #FD971F !important;} .nav-link:hover { background-color: #b9ca4a !important;} /*### Main ###*/ main { margin: 0; padding: 0; width: 100%; min-height: calc(100vh - 80px);} main h1 { width: 100%; height: 200px; display: block; position: relative; } main h1 svg { display: block; height: 200px; margin: 0 auto; } main h1 span { display: none; font-size: 16px; line-height: 20px; margin: 0 auto; text-align: center; } main h2 { font-size: 16px; line-height: 24px; background: #ccc; text-align: center; margin: 5px 0; } .form_wrapp { width: 100%; max-width: 1200px; box-sizing: border-box; border: 1px #999 solid; border-radius: 5px; padding: 10px; margin: 0 auto 10px; } .form_wrapp:nth-child(odd){ background: #ffedcf; } .form_wrapp h2 { line-height: 30px; text-align: center; cursor: pointer; } .form_wrapp table { width: 95%; margin: 5px auto; font-size: 14px; text-align: center; } .form_wrapp table th { background: #999; } .form_wrapp table tr:nth-child(odd){ background: #ccc; } .form_wrapp table, .form_wrapp th, .form_wrapp td { border-collapse: collapse; border: 1px #333 solid; height: 30px; font-size: 14px; line-height: 30px; } .form_wrapp table .btn { box-sizing: border-box; height: 26px; line-height: 24px; font-size: 12px; margin: 2px 5px; padding: 0 8px; } .form_wrapp table input { height: 26px; width: calc(100% - 6px); margin: 2px; font-size: 14px; } section { position: relative; width: 100%; } #gin_map { display: block; width: 1080px; height: 540px; margin: 10px auto; } .link_bun { display: inline-block; margin: 0 5px; border: 1px #999 solid; border-bottom: 2px #999 solid; } .link_bun:hover, .link_bun:active { border: 1px #00F solid; border-bottom: 2px #00F solid; } /* スワイパー */ .swiper { margin: 0 auto; width: 100%; max-width: 1080px; overflow: hidden;} .swiper-wrapper { width: 100%; max-width: 1080px; z-index: 1; margin: 0 auto;} .swiper-slide { width: 100%; max-width: 1080px;} /* ### トップページ ### */ #site_top { width: 100% !important; position: relative; top: 0; left: 0; } #site_top .swiper-slide img { width: 100%; } /*### Footer ###*/ footer { width: 100%; height: 80px; display: block; border-top: 1px #333 solid; text-align: center; margin-bottom: 0; padding: 0; color: #a9a9a9; } footer small { display: block; margin: 20px 0 0; line-height: 16px; font-size: 10px; } /* ### フレキシブル ### */ @media (max-width: 320px) { /* Header(60px～110px[50～100]) */ header { height: calc(3.75rem + ((1vw - 3.2px) * 7.5758)); } #top_link_svg { width: calc(3.75rem + ((1vw - 3.2px) * 6.0606)); } #top_link h1 { font-size: calc(0.625rem + ((1vw - 3.2px) * 0.6061)); } #menu_button { display: block; } .swiper { margin: 0 auto; width: 100vw; height: calc(100vw / 2); overflow: hidden;} .swiper-wrapper { width: 100vw; height: calc(100vw / 2); margin: 0 auto;} .swiper-slide { width: 100vw; height: calc(100vw / 2); } .swiper-slide img { width: 100vw; height: calc(100vw / 2); } #gin_map { width: 100vw; height: calc(100vw / 2); margin: 10px auto; } } @media screen and (min-width: 320px) and (max-width: 640px) { .swiper { margin: 0 auto; width: 100vw; height: calc(100vw / 2); overflow: hidden;} .swiper-wrapper { width: 100vw; height: calc(100vw / 2); margin: 0 auto;} .swiper-slide { width: 100vw; height: calc(100vw / 2); } .swiper-slide img { width: 100vw; height: calc(100vw / 2); } #gin_map { width: 100vw; height: calc(100vw / 2); margin: 10px auto; } } @media screen and (min-width: 640px) and (max-width: 1080px) { .swiper { margin: 0 auto; width: 100vw; height: calc(100vw / 2); overflow: hidden;} .swiper-wrapper { width: 100vw; height: calc(100vw / 2); margin: 0 auto;} .swiper-slide { width: 100vw; height: calc(100vw / 2); } .swiper-slide img { width: 100vw; height: calc(100vw / 2); } #gin_map { width: 100vw; height: calc(100vw / 2); margin: 10px auto; } } @media (min-width: 1080px) { /* Header */ header { height: 110px; } #top_link_svg { width: 100px; } #top_link h1 { font-size: 14px; } #menu_button { display: none; } }