body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #333333; background-color: #ffffff; } a { color: #0088cc; } p { font-size: 16px; } h1, h2, h3, h4, h5, h6 { color:#003366; } h3, h4, h5{ /* background:url(../img/bg_h3_01.gif) no-repeat center left; text-indent:15px; */ } .page-header { border-bottom: 1pxpx solid #eeeeee; } hr { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #ffffff; } .navbar-brand { font-size: 14px; } select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { background-color: #ffffff; padding: 4px 4px 4px 4px; font-size: 13px; color: #555555; border: 1px solid #ccc; } .well { background-color: #f5f5f5; } .btn { color: #333333; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'ffffff, endColorstr='#'e6e6e6, GradientType=0); } .btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { color: #333333; background-color: #e6e6e6; } .btn-primary { background-color: #006dcc; color: #ffffff; background-image: -moz-linear-gradient(top, #0088cc, #0044cc); background-image: -ms-linear-gradient(top, #0088cc, #0044cc); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); background-image: -o-linear-gradient(top, #0088cc, #0044cc); background-image: linear-gradient(top, #0088cc, #0044cc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'0088cc, endColorstr='#'0044cc, GradientType=0); } .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { background-color: #0044cc; } .btn-warning { color: #ffffff; background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: -ms-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); background-image: linear-gradient(top, #fbb450, #f89406); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'fbb450, endColorstr='#'f89406, GradientType=0); } .btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] { background-color: #f89406; } .btn-danger { color: #ffffff; background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); background-image: linear-gradient(top, #ee5f5b, #bd362f); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'ee5f5b, endColorstr='#'bd362f, GradientType=0); } .btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] { background-color: #bd362f} .btn-success { color: #ffffff; background-image: -moz-linear-gradient(top, #62c462, #51a351); background-image: -ms-linear-gradient(top, #62c462, #51a351); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); background-image: -webkit-linear-gradient(top, #62c462, #51a351); background-image: -o-linear-gradient(top, #62c462, #51a351); background-image: linear-gradient(top, #62c462, #51a351); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'62c462, endColorstr='#'51a351, GradientType=0); } .btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] { background-color: #51a351; } .btn-info { color: #ffffff; background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); background-image: linear-gradient(top, #5bc0de, #2f96b4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'5bc0de, endColorstr='#'2f96b4, GradientType=0); } .btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] { background-color: #2f96b4; } .alert { padding: 8px 35px 8px 14px; background-color: #fcf8e3; border: 1px solid #fbeed5; } .alert-success { background-color: #dff0d8; border-color: #d6e9c6; } .alert-success, .alert-success .alert-heading { color: #468847; } .alert-danger, .alert-error { background-color: #f2dede; border-color: #eed3d7; } .alert-danger, .alert-error, .alert-danger .alert-heading, .alert-error .alert-heading { color: #b94a48; } .alert-info { background-color: #d9edf7; border-color: #bce8f1; } .alert-info, .alert-info .alert-heading { color: #3a87ad; } .navbar-inner { background-image: -moz-linear-gradient(top, #f943a4, #ffffff); background-image: -ms-linear-gradient(top, #f943a4, #ffffff); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f943a4), to(#ffffff)); background-image: -webkit-linear-gradient(top, #f943a4, #ffffff); background-image: -o-linear-gradient(top, #f943a4, #ffffff); background-image: linear-gradient(top, #f943a4, #ffffff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'f943a4, endColorstr='#'ffffff, GradientType=0); } .navbar .brand { padding: 8px 20px 12px; font-size: 20px; color: #39b2ae; } .navbar .divider-vertical { height: 41px; background-color: #8e4747; border-right: 1px solid #992f5b; } .navbar .nav > li > a { padding: 14px 5px 11px; font-size: 14px; color: #3e52a3; } .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus { color: #2c30aa; } .label, .badge { padding: 1px 3px 2px; font-size: 11px; color: #ffffff; background-color: #999999; } .label-important, .badge-important { background-color: #468847; } .label-warning, .badge-warning { background-color: #b94a48; } .label-success, .badge-success { background-color: #f89406; } .label-info, .badge-info { background-color: #3a87ad; } /*TOPメインビジュアル*/ .main-v { position: relative; /* background-color: #333; */ margin-bottom: 30px; } .main-container{ position:relative; max-width: 1170px; margin-left:auto;margin-right:auto; } img{ max-width: 100%; height: auto; } .main-img{ display: block; } .main-info h2{ position: absolute; background: rgba(33, 33, 44, 0.7); color: #fff; padding:10px 10px; } .main-info2 h2{ position: absolute; background: rgba(33, 33, 44, 0.7); color: #fff; padding:10px 10px; } .float { float: left; margin-right: 1em; } .floatclear { clear: both; } @media screen and (max-width: 767px) { .main-info h2{ top: 5px; font-size: 1.2em; } .main-info2 h2{ top: 70px; font-size: 1.2em; } } @media screen and (min-width: 768px) { .main-info h2{ top: 40px; right: 40px; } .main-info2 h2{ top: 120px; right: 40px; } } /* Medium devices (desktops, 992px and up) */ @media screen and (min-width: 992px) { } /* Large devices (large desktops, 1200px and up) */ @media screen and (min-width: 1200px) { } .sitename > .container h1{ font-size: 20px; } /*コンテントエリア*/ .enimg{ border-radius: 50%; margin-bottom: 5px; } i.main-i{ float: left; } .clear { clear:both; } div.enimg{ text-align:center; } i.main-i{ margin-right: 10px; font-size: 1.5em; } .row{ margin-bottom: 20px; } /*Fotter*/ #footer{ width: 100%; height: 60px; bottom: 0; background-color: #f5f5f5; } #footer .container { padding-top: 15px; } .page-top{ background-color: #fff; border-top:3px solid; border-top-color: #f1de72; } .toplogo{ margin: 20px 0 20px 0; } .jumbotron{ background-color: #63e195; margin-left:-40px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px; } /*■角丸テーブル設定*/ .coder { border-spacing: 0; border: 1px solid #CCC; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; box-shadow: 0 1px 1px #CCC; } .coder th, .coder td { padding:10px; background:#FFF; border-bottom:solid 1px #CCC; border-right:solid 1px #CCC; } .coder th { background:#e3dcd5; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset; color:#69655c; } /* ----------------------- 左上角丸　最初の行の最初のセル ----------------------- */ .coder tr:first-child th:first-child, .coder tr:first-child td:first-child { -webkit-border-radius: 6px 0 0 0; -moz-border-radius: 6px 0 0 0; -o-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; } /* ----------------------- 右上角丸　最初の行の最後のセル ----------------------- */ .coder tr:first-child th:last-child, .coder tr:first-child td:last-child { -webkit-border-radius: 0 6px 0 0; -moz-border-radius: 0 6px 0 0; -o-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; } /* ----------------------- 左下角丸　最後の行の最初のセル ----------------------- */ .coder tr:last-child th:first-child, .coder tr:last-child td:first-child { -webkit-border-radius: 0 0 0 6px; -moz-border-radius: 0 0 0 6px; -o-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; } /* ----------------------- 右下角丸　最後の行の最後のセル ----------------------- */ .coder tr:last-child th:last-child, .coder tr:last-child td:last-child { -webkit-border-radius: 0 0 6px 0; -moz-border-radius: 0 0 6px 0; -o-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0; } /* -------------------------------------------- thaed,tbodyを使う場合の設定 -------------------------------------------- */ .coder thead th {background:#e3dcd5;} .coder thead+tbody th {background:#f4ede6;} .coder tbody th {text-align:left;}/*IE*/ /* ----------------------- 左上角丸 thead内　最初の行の最初のセル ----------------------- */ .coder thead tr:first-child th:first-child, .coder thead tr:first-child td:first-child { -webkit-border-radius: 6px 0 0 0; -moz-border-radius: 6px 0 0 0; -o-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; } /* ----------------------- 右上角丸 thead内　最初の行の最後のセル ----------------------- */ .coder thead tr:first-child th:last-child, .coder thead tr:first-child td:last-child { -webkit-border-radius: 0 6px 0 0; -moz-border-radius: 0 6px 0 0; -o-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; } /* ----------------------- 角丸なし　thaedの後のtbody 最初の行の最初のセル 角丸なし　thaedの後のtbody 最初の行の最後のセル ----------------------- */ .coder thead+tbody tr:first-child th:first-child, .coder thead+tbody tr:first-child td:first-child, .coder thead+tbody tr:first-child th:last-child, .coder thead+tbody tr:first-child td:last-child { -webkit-border-radius:0px; -moz-border-radius:0px; -o-border-radius:0px; border-radius:0px; } /* ----------------------- 左下角丸　thaedの後のtbody 最後の行の最初のセル ----------------------- */ .coder thead+tbody tr:last-child th:first-child, .coder thead+tbody tr:last-child td:first-child { -webkit-border-radius: 0 0 0 6px; -moz-border-radius: 0 0 0 6px; -o-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; } /* ----------------------- 右下角丸　thaedの後のtbody 最後の行の最後のセル ----------------------- */ .coder thead+tbody tr:last-child th:last-child, .coder thead+tbody tr:last-child td:last-child { -webkit-border-radius: 0 0 6px 0; -moz-border-radius: 0 0 6px 0; -o-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0; } /* ----------------------- FirefoxとIEのtableで画像表示をしたときのサイズのズレを解消する ----------------------- */ .maxtable{ width:100%; } .maxtable img{ width:100%; } /* ----------------------- youtubeのレスポンシブ対応 ----------------------- */ .youtube-container { position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden; } .youtube-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .youtube-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .small{ font-size: 12px; } .tohoku_pixel { width: 20%; height: auto; } .diagonal_characterchip { width: 50%; height: auto; } .qanda-content-with-image { display: flex; align-items: center; } .qanda-content-with-image .qanda-text { flex: 1; padding-right: 1px; } .qanda-content-with-image img { width: auto; height: auto; flex-shrink: 0; } /* Stripeのカード要素のスタイルを設定 */ .StripeElement { background-color: white; padding: 16px; border-radius: 4px; border: 1px solid #ccc; box-shadow: 0px 0px 5px rgba(50,50,93,0.1); -webkit-transition: box-shadow 150ms ease; transition: box-shadow 150ms ease; } .StripeElement--focus { box-shadow: 0px 0px 5px rgba(50,50,93,0.2); } .StripeElement--invalid { border-color: #fa755a; } .StripeElement--webkit-autofill { background-color: #fefde5 !important; } /* 支払いボタンのスタイル */ #payment-form button { background: #5469d4; color: white; border: none; padding: 10px 20px; border-radius: 4px; margin-top: 28px; font-size: 16px; font-weight: 600; cursor: pointer; display: block; transition: all 0.2s ease; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2); width: 100%; /* ボタンをフォームの幅に合わせる */ } #payment-form button:hover { background: #43458b; }