/* --- reset --- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote{display:block;}nav ul{list-style:none;}ol{list-style:decimal;}ul{list-style:disc;}ul ul{list-style:circle;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}ins{text-decoration:underline;}del{text-decoration:line-through;}mark{background:none;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input[type=submit],input[type=button],button{margin:0;padding:0;}input,select,a img{vertical-align:middle;}
/* --- HTML Elements --- */
* {
box-sizing: border-box;
}
/*@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 100;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 200;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 300;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 400;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Bold");
font-weight: bold;
}
@font-face {
font-family: "Helvetica Neue";
src: local("Helvetica Neue Regular");
font-weight: 100;
}
@font-face {
font-family: "Helvetica Neue";
src: local("Helvetica Neue Regular");
font-weight: 200;
}*/
html, textarea {
/* font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; */
/* font-weight: 500;*/
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
font-weight: 500;
}
@media all and (-ms-high-contrast: none) {
html, textarea {
font-family: Verdana, Meiryo, sans-serif;
}
}
@media all and (-ms-high-contrast: active) {
html, textarea {
font-family: Verdana, Meiryo, sans-serif;
}
}
html {
height: 100%;
font-size: 14px;
line-height: 24px;
}
@media (min-width: 544px) {
html {
font-size: 14px;
line-height: 24px;
} }
@media (min-width: 768px) {
html {
font-size: 14px;
line-height: 24px;
} }
@media (min-width: 992px) {
html {
font-size: 15px;
line-height: 24px;
} }
@media (min-width: 1200px) {
html {
font-size: 16px;
line-height: 27px;
} }
body {
height: 100%;
color: #333;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
font-weight: 500;
font-size: 1rem;
line-height: 1.5rem;
background: #393e4f;
}
@media (min-width: 768px) {
body {
padding-top: 48px;
} }
p {
margin-top: 0.9375rem;
}
ul {
margin-top: 0.9375rem;
}
ul > li {
margin-left: 1.5rem;
list-style-position: outside;
list-style-type: disc;
}
ol {
margin-top: 0.9375rem;
}
ul,ol,li {
/* list-style: none;*/
}
ol > li {
margin-left: 1.5rem;
list-style-position: outside;
list-style-type: decimal;
}
ol > li > ol > li {
list-style-type: upper-alpha;
}
ol > li > ol > li > ol > li {
list-style-type: lower-alpha;
}
input, select, button {
/* font-family: "メイリオ", Meiryo, Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;*/
}
input[type=text] {
padding: 5px;
border: 1px solid #CCC;
line-height: 1.35rem;
}
input[type=submit] {
-webkit-appearance: none;
border-radius: 0;
}
textarea {
height: 7.5rem;
padding: 5px;
border: 1px solid #CCC;
line-height: 1.35rem;
}
select {
padding: 5px;
border: 1px solid #CCC;
line-height: 1.35rem;
}
img {
width: 100%;
height: auto;
vertical-align: top;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
-moz-opacity: .75;
-webkit-opacity: .75;
opacity: .75;
}
a.no-transparent:hover {
-moz-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
a:visited {
/* color: #666;*/
}
/* --- Typography --- */
.heading1 {
font-size: 2rem;
font-weight: bold;
line-height: 1.5;
}
@media (min-width: 544px) {
.heading1 {
font-size: 2rem; } }
@media (min-width: 768px) {
.heading1 {
font-size: 2.5rem; } }
@media (min-width: 992px) {
.heading1 {
font-size: 3rem; } }
@media (min-width: 1200px) {
.heading1 {
font-size: 3rem; } }
.heading1-primary {
color: #393e4f;
}
@media (min-width: 544px) {
.heading1-primary {
color: #393e4f; } }
@media (min-width: 768px) {
.heading1-primary {
color: #FFF; } }
@media (min-width: 992px) {
.heading1-primary {
color: #FFF; } }
@media (min-width: 1200px) {
.heading1-primary {
color: #FFF; } }
.heading1-secondary {
color: #F60;
}
.heading1-shadow {
text-shadow: none;
}
@media (min-width: 544px) {
.heading1-shadow {
text-shadow: none; } }
@media (min-width: 768px) {
.heading1-shadow {
text-shadow: 3px 3px 0px rgba(0,0,0,.5); } }
@media (min-width: 992px) {
.heading1-shadow {
text-shadow: 4px 4px 0px rgba(0,0,0,.5); } }
@media (min-width: 1200px) {
.heading1-shadow {
text-shadow: 5px 5px 0px rgba(0,0,0,.5); } }
.heading1-outline {
text-shadow: 1px 1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, -1px -1px 0 #FFF;
}
.heading2 {
padding-top: 1.5rem;
font-size: 1.5rem;
font-weight: bold;
line-height: 1.25;
border-bottom: 3px solid #393e4f;
}
.heading2:first-child {
margin-top: 0;
}
.heading2:first-letter {
font-size: 3rem;
color: #c39143;
}
.heading2_normal {
padding-top: 1.9375rem;
padding-bottom: 0.4375rem;
}
.heading2_normal:first-letter {
font-size:1.5rem;
color: #393e4f;
}
.heading3 {
margin-top: 0.9375rem;
font-size: 1.25rem;
font-weight: bold;
line-height: 1.5;
}
.heading4 {
margin-top: 0.9375rem;
font-size: 1rem;
font-weight: bold;
line-height: 1.5;
}
/* --- Breadcrumbs --- */
.breadcrumbs {
margin-top: 0;
padding-top: 1.875rem;
font-size: .9rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breadcrumbs > li {
display: inline-block;
margin-left: 0;
}
.breadcrumbs > li:before {
content: " > ";
}
.breadcrumbs > li:first-child:before {
content: none;
}
.breadcrumbs > li a {
text-decoration: underline;
}
/* --- Grid System --- */
.container {
margin-left: auto;
margin-right: auto;
padding-left: 0.9375rem;
padding-right: 0.9375rem; }
.container::after {
content: "";
display: table;
clear: both; }
@media (min-width: 544px) {
.container {
max-width: 576px; } }
@media (min-width: 768px) {
.container {
max-width: 720px; } }
@media (min-width: 992px) {
.container {
max-width: 940px; } }
@media (min-width: 1200px) {
.container {
max-width: 1140px; } }
.container-fluid {
margin-left: auto;
margin-right: auto;
padding-left: 0.9375rem;
padding-right: 0.9375rem; }
.container-fluid::after {
content: "";
display: table;
clear: both; }
.row {
margin-left: -0.9375rem;
margin-right: -0.9375rem; }
.row::after {
content: "";
display: table;
clear: both; }
.row-eq-height {
display: flex;
flex-wrap: wrap;
}
.row_nospace {
margin-bottom: -0.9375rem;
}
.row_0{
margin-left: 0;
margin-right: 0;
}
.row_0 > [class*='col-'] {
padding-left: 0;
padding-right: 0;
}
.row_10{
margin-left: -0.3125rem;
margin-right: -0.3125rem;
}
.row_10 > [class*='col-'] {
padding-left: 0.3125rem;
padding-right: 0.3125rem;
}
.row_20{
margin-left: -0.625rem;
margin-right: -0.625rem;
}
.row_20 > [class*='col-'] {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
position: relative;
min-height: 1px;
padding-left: 0.9375rem;
padding-right: 0.9375rem; }
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left; }
.col-xs-1 {
width: 8.33333%; }
.col-xs-2 {
width: 16.66667%; }
.col-xs-3 {
width: 25%; }
.col-xs-4 {
width: 33.33333%; }
.col-xs-5 {
width: 41.66667%; }
.col-xs-6 {
width: 50%; }
.col-xs-7 {
width: 58.33333%; }
.col-xs-8 {
width: 66.66667%; }
.col-xs-9 {
width: 75%; }
.col-xs-10 {
width: 83.33333%; }
.col-xs-11 {
width: 91.66667%; }
.col-xs-12 {
width: 100%; }
.col-xs-pull-0 {
right: auto; }
.col-xs-pull-1 {
right: 8.33333%; }
.col-xs-pull-2 {
right: 16.66667%; }
.col-xs-pull-3 {
right: 25%; }
.col-xs-pull-4 {
right: 33.33333%; }
.col-xs-pull-5 {
right: 41.66667%; }
.col-xs-pull-6 {
right: 50%; }
.col-xs-pull-7 {
right: 58.33333%; }
.col-xs-pull-8 {
right: 66.66667%; }
.col-xs-pull-9 {
right: 75%; }
.col-xs-pull-10 {
right: 83.33333%; }
.col-xs-pull-11 {
right: 91.66667%; }
.col-xs-pull-12 {
right: 100%; }
.col-xs-push-0 {
left: auto; }
.col-xs-push-1 {
left: 8.33333%; }
.col-xs-push-2 {
left: 16.66667%; }
.col-xs-push-3 {
left: 25%; }
.col-xs-push-4 {
left: 33.33333%; }
.col-xs-push-5 {
left: 41.66667%; }
.col-xs-push-6 {
left: 50%; }
.col-xs-push-7 {
left: 58.33333%; }
.col-xs-push-8 {
left: 66.66667%; }
.col-xs-push-9 {
left: 75%; }
.col-xs-push-10 {
left: 83.33333%; }
.col-xs-push-11 {
left: 91.66667%; }
.col-xs-push-12 {
left: 100%; }
.col-xs-offset-0 {
margin-left: 0%; }
.col-xs-offset-1 {
margin-left: 8.33333%; }
.col-xs-offset-2 {
margin-left: 16.66667%; }
.col-xs-offset-3 {
margin-left: 25%; }
.col-xs-offset-4 {
margin-left: 33.33333%; }
.col-xs-offset-5 {
margin-left: 41.66667%; }
.col-xs-offset-6 {
margin-left: 50%; }
.col-xs-offset-7 {
margin-left: 58.33333%; }
.col-xs-offset-8 {
margin-left: 66.66667%; }
.col-xs-offset-9 {
margin-left: 75%; }
.col-xs-offset-10 {
margin-left: 83.33333%; }
.col-xs-offset-11 {
margin-left: 91.66667%; }
.col-xs-offset-12 {
margin-left: 100%; }
@media (min-width: 544px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left; }
.col-sm-1 {
width: 8.33333%; }
.col-sm-2 {
width: 16.66667%; }
.col-sm-3 {
width: 25%; }
.col-sm-4 {
width: 33.33333%; }
.col-sm-5 {
width: 41.66667%; }
.col-sm-6 {
width: 50%; }
.col-sm-7 {
width: 58.33333%; }
.col-sm-8 {
width: 66.66667%; }
.col-sm-9 {
width: 75%; }
.col-sm-10 {
width: 83.33333%; }
.col-sm-11 {
width: 91.66667%; }
.col-sm-12 {
width: 100%; }
.col-sm-pull-0 {
right: auto; }
.col-sm-pull-1 {
right: 8.33333%; }
.col-sm-pull-2 {
right: 16.66667%; }
.col-sm-pull-3 {
right: 25%; }
.col-sm-pull-4 {
right: 33.33333%; }
.col-sm-pull-5 {
right: 41.66667%; }
.col-sm-pull-6 {
right: 50%; }
.col-sm-pull-7 {
right: 58.33333%; }
.col-sm-pull-8 {
right: 66.66667%; }
.col-sm-pull-9 {
right: 75%; }
.col-sm-pull-10 {
right: 83.33333%; }
.col-sm-pull-11 {
right: 91.66667%; }
.col-sm-pull-12 {
right: 100%; }
.col-sm-push-0 {
left: auto; }
.col-sm-push-1 {
left: 8.33333%; }
.col-sm-push-2 {
left: 16.66667%; }
.col-sm-push-3 {
left: 25%; }
.col-sm-push-4 {
left: 33.33333%; }
.col-sm-push-5 {
left: 41.66667%; }
.col-sm-push-6 {
left: 50%; }
.col-sm-push-7 {
left: 58.33333%; }
.col-sm-push-8 {
left: 66.66667%; }
.col-sm-push-9 {
left: 75%; }
.col-sm-push-10 {
left: 83.33333%; }
.col-sm-push-11 {
left: 91.66667%; }
.col-sm-push-12 {
left: 100%; }
.col-sm-offset-0 {
margin-left: 0%; }
.col-sm-offset-1 {
margin-left: 8.33333%; }
.col-sm-offset-2 {
margin-left: 16.66667%; }
.col-sm-offset-3 {
margin-left: 25%; }
.col-sm-offset-4 {
margin-left: 33.33333%; }
.col-sm-offset-5 {
margin-left: 41.66667%; }
.col-sm-offset-6 {
margin-left: 50%; }
.col-sm-offset-7 {
margin-left: 58.33333%; }
.col-sm-offset-8 {
margin-left: 66.66667%; }
.col-sm-offset-9 {
margin-left: 75%; }
.col-sm-offset-10 {
margin-left: 83.33333%; }
.col-sm-offset-11 {
margin-left: 91.66667%; }
.col-sm-offset-12 {
margin-left: 100%; } }
@media (min-width: 768px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left; }
.col-md-1 {
width: 8.33333%; }
.col-md-2 {
width: 16.66667%; }
.col-md-3 {
width: 25%; }
.col-md-4 {
width: 33.33333%; }
.col-md-5 {
width: 41.66667%; }
.col-md-6 {
width: 50%; }
.col-md-7 {
width: 58.33333%; }
.col-md-8 {
width: 66.66667%; }
.col-md-9 {
width: 75%; }
.col-md-10 {
width: 83.33333%; }
.col-md-11 {
width: 91.66667%; }
.col-md-12 {
width: 100%; }
.col-md-pull-0 {
right: auto; }
.col-md-pull-1 {
right: 8.33333%; }
.col-md-pull-2 {
right: 16.66667%; }
.col-md-pull-3 {
right: 25%; }
.col-md-pull-4 {
right: 33.33333%; }
.col-md-pull-5 {
right: 41.66667%; }
.col-md-pull-6 {
right: 50%; }
.col-md-pull-7 {
right: 58.33333%; }
.col-md-pull-8 {
right: 66.66667%; }
.col-md-pull-9 {
right: 75%; }
.col-md-pull-10 {
right: 83.33333%; }
.col-md-pull-11 {
right: 91.66667%; }
.col-md-pull-12 {
right: 100%; }
.col-md-push-0 {
left: auto; }
.col-md-push-1 {
left: 8.33333%; }
.col-md-push-2 {
left: 16.66667%; }
.col-md-push-3 {
left: 25%; }
.col-md-push-4 {
left: 33.33333%; }
.col-md-push-5 {
left: 41.66667%; }
.col-md-push-6 {
left: 50%; }
.col-md-push-7 {
left: 58.33333%; }
.col-md-push-8 {
left: 66.66667%; }
.col-md-push-9 {
left: 75%; }
.col-md-push-10 {
left: 83.33333%; }
.col-md-push-11 {
left: 91.66667%; }
.col-md-push-12 {
left: 100%; }
.col-md-offset-0 {
margin-left: 0%; }
.col-md-offset-1 {
margin-left: 8.33333%; }
.col-md-offset-2 {
margin-left: 16.66667%; }
.col-md-offset-3 {
margin-left: 25%; }
.col-md-offset-4 {
margin-left: 33.33333%; }
.col-md-offset-5 {
margin-left: 41.66667%; }
.col-md-offset-6 {
margin-left: 50%; }
.col-md-offset-7 {
margin-left: 58.33333%; }
.col-md-offset-8 {
margin-left: 66.66667%; }
.col-md-offset-9 {
margin-left: 75%; }
.col-md-offset-10 {
margin-left: 83.33333%; }
.col-md-offset-11 {
margin-left: 91.66667%; }
.col-md-offset-12 {
margin-left: 100%; } }
@media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left; }
.col-lg-1 {
width: 8.33333%; }
.col-lg-2 {
width: 16.66667%; }
.col-lg-3 {
width: 25%; }
.col-lg-4 {
width: 33.33333%; }
.col-lg-5 {
width: 41.66667%; }
.col-lg-6 {
width: 50%; }
.col-lg-7 {
width: 58.33333%; }
.col-lg-8 {
width: 66.66667%; }
.col-lg-9 {
width: 75%; }
.col-lg-10 {
width: 83.33333%; }
.col-lg-11 {
width: 91.66667%; }
.col-lg-12 {
width: 100%; }
.col-lg-pull-0 {
right: auto; }
.col-lg-pull-1 {
right: 8.33333%; }
.col-lg-pull-2 {
right: 16.66667%; }
.col-lg-pull-3 {
right: 25%; }
.col-lg-pull-4 {
right: 33.33333%; }
.col-lg-pull-5 {
right: 41.66667%; }
.col-lg-pull-6 {
right: 50%; }
.col-lg-pull-7 {
right: 58.33333%; }
.col-lg-pull-8 {
right: 66.66667%; }
.col-lg-pull-9 {
right: 75%; }
.col-lg-pull-10 {
right: 83.33333%; }
.col-lg-pull-11 {
right: 91.66667%; }
.col-lg-pull-12 {
right: 100%; }
.col-lg-push-0 {
left: auto; }
.col-lg-push-1 {
left: 8.33333%; }
.col-lg-push-2 {
left: 16.66667%; }
.col-lg-push-3 {
left: 25%; }
.col-lg-push-4 {
left: 33.33333%; }
.col-lg-push-5 {
left: 41.66667%; }
.col-lg-push-6 {
left: 50%; }
.col-lg-push-7 {
left: 58.33333%; }
.col-lg-push-8 {
left: 66.66667%; }
.col-lg-push-9 {
left: 75%; }
.col-lg-push-10 {
left: 83.33333%; }
.col-lg-push-11 {
left: 91.66667%; }
.col-lg-push-12 {
left: 100%; }
.col-lg-offset-0 {
margin-left: 0%; }
.col-lg-offset-1 {
margin-left: 8.33333%; }
.col-lg-offset-2 {
margin-left: 16.66667%; }
.col-lg-offset-3 {
margin-left: 25%; }
.col-lg-offset-4 {
margin-left: 33.33333%; }
.col-lg-offset-5 {
margin-left: 41.66667%; }
.col-lg-offset-6 {
margin-left: 50%; }
.col-lg-offset-7 {
margin-left: 58.33333%; }
.col-lg-offset-8 {
margin-left: 66.66667%; }
.col-lg-offset-9 {
margin-left: 75%; }
.col-lg-offset-10 {
margin-left: 83.33333%; }
.col-lg-offset-11 {
margin-left: 91.66667%; }
.col-lg-offset-12 {
margin-left: 100%; } }
@media (min-width: 1200px) {
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
float: left; }
.col-xl-1 {
width: 8.33333%; }
.col-xl-2 {
width: 16.66667%; }
.col-xl-3 {
width: 25%; }
.col-xl-4 {
width: 33.33333%; }
.col-xl-5 {
width: 41.66667%; }
.col-xl-6 {
width: 50%; }
.col-xl-7 {
width: 58.33333%; }
.col-xl-8 {
width: 66.66667%; }
.col-xl-9 {
width: 75%; }
.col-xl-10 {
width: 83.33333%; }
.col-xl-11 {
width: 91.66667%; }
.col-xl-12 {
width: 100%; }
.col-xl-pull-0 {
right: auto; }
.col-xl-pull-1 {
right: 8.33333%; }
.col-xl-pull-2 {
right: 16.66667%; }
.col-xl-pull-3 {
right: 25%; }
.col-xl-pull-4 {
right: 33.33333%; }
.col-xl-pull-5 {
right: 41.66667%; }
.col-xl-pull-6 {
right: 50%; }
.col-xl-pull-7 {
right: 58.33333%; }
.col-xl-pull-8 {
right: 66.66667%; }
.col-xl-pull-9 {
right: 75%; }
.col-xl-pull-10 {
right: 83.33333%; }
.col-xl-pull-11 {
right: 91.66667%; }
.col-xl-pull-12 {
right: 100%; }
.col-xl-push-0 {
left: auto; }
.col-xl-push-1 {
left: 8.33333%; }
.col-xl-push-2 {
left: 16.66667%; }
.col-xl-push-3 {
left: 25%; }
.col-xl-push-4 {
left: 33.33333%; }
.col-xl-push-5 {
left: 41.66667%; }
.col-xl-push-6 {
left: 50%; }
.col-xl-push-7 {
left: 58.33333%; }
.col-xl-push-8 {
left: 66.66667%; }
.col-xl-push-9 {
left: 75%; }
.col-xl-push-10 {
left: 83.33333%; }
.col-xl-push-11 {
left: 91.66667%; }
.col-xl-push-12 {
left: 100%; }
.col-xl-offset-0 {
margin-left: 0%; }
.col-xl-offset-1 {
margin-left: 8.33333%; }
.col-xl-offset-2 {
margin-left: 16.66667%; }
.col-xl-offset-3 {
margin-left: 25%; }
.col-xl-offset-4 {
margin-left: 33.33333%; }
.col-xl-offset-5 {
margin-left: 41.66667%; }
.col-xl-offset-6 {
margin-left: 50%; }
.col-xl-offset-7 {
margin-left: 58.33333%; }
.col-xl-offset-8 {
margin-left: 66.66667%; }
.col-xl-offset-9 {
margin-left: 75%; }
.col-xl-offset-10 {
margin-left: 83.33333%; }
.col-xl-offset-11 {
margin-left: 91.66667%; }
.col-xl-offset-12 {
margin-left: 100%; } }
/* --- button --- */
.btn {
display: table;
height: 5rem;
margin-top: 0.9375rem;
color: #FFF;
text-align: center;
border-collapse: separate;
border-spacing: 1px;
border-color: #FFF;
}
.btn:hover {
opacity: .75;
}
.btn-super-narrow {
height: 2.5rem;
line-height: .8;
}
.btn-narrow {
height: 3.5rem;
}
.btn-broad {
height: 7rem;
}
.btn > a {
display: table-cell;
width: 100%;
height: 100%;
padding: 0.1875rem;
text-align: center;
vertical-align: middle;
background-color: #333;
}
@media (min-width: 544px) {
.btn > a {
padding: 0.625rem; } }
@media (min-width: 768px) {
.btn > a {
padding: 0.625rem; } }
@media (min-width: 992px) {
.btn > a {
padding: 0.625rem; } }
@media (min-width: 1200px) {
.btn > a {
padding: 0.625rem; } }
.btn > a:hover {
opacity: 1;
}
.btn-block {
width: 100%;
}
.btn-primary {
background-color: #e0c99d;
border: 3px solid #c39143;
}
.btn-primary > a {
color: #FFF;
background-color: #c39143;
}
.btn-primary > a.current {
background-color: #F60;
}
.btn-secondary {
background-color: #99a0a8;
border: 3px solid #393e4f;
}
.btn-secondary > a {
color: #FFF;
background-color: #393e4f;
}
.btn-secondary > a.current {
background-color: #F60;
}
.btn-tertiary > a {
color: #FFF;
background-color: #F60;
}
.btn-quaternary > a {
color: #FFF;
background-color: #333;
}
.btn-quinary > a {
color: #FFF;
background-color: #96F;
}
.btn-padding-0 > a {
padding: 0;
}
.group-list_bskanko .btn a
{
color: #FFF;
background: #9E9478;
}
.group-list_kitanihon .btn a
{
color: #FFF;
background: #83959F;
}
.group-list_bs .btn a
{
color: #FFF;
background: #93b69c;
}
.group-list_bstravel .btn a
{
color: #FFF;
background: #CA8269;
}
.group-list_fukushimabs .btn a
{
color: #FFF;
background: #9e85a6;
}
.group-list_nigatabs .btn a
{
color: #FFF;
background: #E5ABBE;
}
.btn > input[type=submit],
.btn > input[type=reset] {
display: table-cell;
width: 100%;
height: 100%;
padding: 0.625rem;
font-size: 1rem;
text-align: center;
vertical-align: middle;
background-color: #333;
border: none;
}
.btn > input[type=submit]:hover,
.btn > input[type=reset]:hover {
opacity: 0.5;
}
.btn-primary > input[type=submit],
.btn-primary > input[type=reset] {
color: #FFF;
background-color: #c39143;
}
.btn-secondary > input[type=submit],
.btn-secondary > input[type=reset] {
color: #FFF;
background-color: #393e4f;
}
/* --- plate --- */
.plate {
display: inline-block;
margin: 0.15625rem 0;
padding: 0 0.3125rem;
font-size: 0.9rem;
color: #FFF;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 5px 5px 8px -4px rgba(0,0,0,.4);
-moz-border-radius: 5px 5px 8px -4px rgba(0,0,0,.4);
box-shadow: 5px 5px 8px -4px rgba(0,0,0,.4);
}
.plate-primary {
background-color: #008ED1;
}
.plate-secondary {
background-color: #62d100;
}
.plate-tertiary {
background-color: #F60;
}
.plate-quaternary {
background-color: #333;
}
.plate-quinary {
background-color: #96F;
}
.plate-senary {
background-color: #d9534f;
}
/* --- table1 --- */
.table1 {
border-collapse: collapse;
border-spacing: 0 .9375rem;
}
.table1 tbody th {
display: block;
padding: .625rem;
text-align: left;
background: #f6efe3;
}
@media (min-width: 544px) {
.table1 tbody th {
display: table-cell;
border-right: 1px solid #FFF;
border-bottom: 1px solid #FFF; } }
.table1 tbody td {
display: block;
width: auto;
padding: .3125rem .625rem;
background: #fcf9f5;
text-align: left;
vertical-align: middle;
border-right: 1px solid #FFF;
}
@media (min-width: 544px) {
.table1 tbody td {
display: table-cell;
padding: .625rem;
border-bottom: 1px solid #FFF; } }
/* --- table2 --- */
.table2 {
border-collapse: collapse;
border-spacing: 0 .9375rem;
}
.table2 thead th {
display: none;
padding: .625rem;
color: #393e4f;
font-weight: bold;
background: #e1c8a1;
border-right: 1px solid #FFF;
}
@media (min-width: 768px) {
.table2 thead th {
display: table-cell; } }
.table2 tbody tr {
display: block;
background: #fcf9f5;
}
@media (min-width: 768px) {
.table2 tbody tr {
display: table-row;
background: none; } }
.table2 tbody th {
display: block;
width: auto;
padding: .625rem;
color: #333;
font-weight: bold;
text-align: center;
vertical-align: middle;
background: #f6efe3;
border-right: 1px solid #FFF;
overflow: visible;
}
@media (min-width: 768px) {
.table2 tbody th {
display: table-cell;
background: #faf6ef; } }
.table2 tbody tr:nth-child(2n) th {
background: #f6efe3;
}
@media (min-width: 768px) {
.table2 tbody tr:nth-child(2n) th {
background: #f5ecdf; } }
.table2 tbody td {
display: block;
width: auto;
padding: .3125rem .625rem;
background: none;
text-align: left;
vertical-align: middle;
border-right: 1px solid #FFF;
}
@media (min-width: 768px) {
.table2 tbody td {
display: table-cell;
padding: .625rem;
text-align: center;
background: #fdfcf9; } }
.table2 tbody tr:nth-child(2n) td {
background: none;
}
@media (min-width: 768px) {
.table2 tbody tr:nth-child(2n) td {
background: #f8f2e8; } }
.table2 tbody td::before {
content: attr(label);
float: left;
clear: both;
width: 4.5rem;
font-weight: bold;
}
@media (min-width: 768px) {
.table2 tbody td::before {
display: none; } }
.table2 tbody th a {
color: #b7282e;
text-decoration: underline;
}
.table2__type {
display: inline-block;
margin: 0;
padding: 0 .625rem;
text-align: center;
background: #999;
}
@media (min-width: 768px) {
.table2__type {
width: 10rem;
margin: -1rem 0;
padding: 0;
line-height: 2; } }
.table2__type_overall {
background: #d6e9ca;
}
.table2__type_transport {
background: #bbc8e6;
}
.table2__type_hotel {
background: #cbb994;
}
.table2__type_sightseeing {
background: #f6bfbc;
}
.table2__type_photo {
/* background: #f6bfbc;*/
}
.table_horizontal {
border-spacing: 1px 0.9375rem;
}
/* --- table3 --- */
.table3 {
border-collapse: separate;
border-spacing: 0 .25rem;
}
.table3 tbody th {
width: 6rem;
padding: .1875rem .3125rem;
color: #FFF;
background: #393e4f;
vertical-align: middle;
}
.table3 tbody td {
padding: .1875rem 0 .1875rem .625rem;
background: #FFF;
vertical-align: middle;
}
/* --- table4 --- */
.table4 {
border-collapse: collapse;
border-spacing: 0 .9375rem;
}
.table4 tbody tr {
display: block;
background: #fcf9f5;
}
@media (min-width: 768px) {
.table4 tbody tr {
display: table-row;
background: none; } }
.table4 tbody th {
display: block;
width: auto;
padding: .625rem;
color: #333;
font-weight: bold;
text-align: center;
vertical-align: middle;
background: #f6efe3;
border-right: 1px solid #FFF;
overflow: visible;
white-space: nowrap;
}
@media (min-width: 768px) {
.table4 tbody th {
display: table-cell;
background: #faf6ef;
vertical-align: top; } }
.table4 tbody tr:nth-child(2n) th {
background: #f6efe3;
}
@media (min-width: 768px) {
.table4 tbody tr:nth-child(2n) th {
background: #f5ecdf; } }
.table4 tbody td {
display: block;
width: auto;
padding: .3125rem .625rem;
background: none;
text-align: left;
vertical-align: middle;
border-right: 1px solid #FFF;
}
@media (min-width: 768px) {
.table4 tbody td {
display: table-cell;
padding: .625rem;
background: #fdfcf9; } }
.table4 tbody tr:nth-child(2n) td {
background: none;
}
@media (min-width: 768px) {
.table4 tbody tr:nth-child(2n) td {
background: #f8f2e8; } }
.table4 tbody td::before {
content: attr(label);
float: left;
clear: both;
width: 4.5rem;
font-weight: bold;
}
@media (min-width: 768px) {
.table4 tbody td::before {
display: none; } }
.table4 tbody th a {
color: #b7282e;
text-decoration: underline;
}
.table4 tbody td div.row {
padding-top: .625rem;
}
@media (min-width: 768px) {
.table4 tbody td div.row {
padding-top: 0; } }
.table4 tbody td div.row::after {
display: block;
content: '';
margin: 0 .9375rem;
padding-bottom: .625rem;
border-bottom: 1px solid #ccc;
}
@media (min-width: 768px) {
.table4 tbody td div.row::after {
display: none; } }
.table4 tbody td div.row:last-child::after {
border-bottom: none;
}
/* --- table form --- */
.form-table table {
border-collapse: collapse;
border-spacing: 0 .9375rem;
}
.form-table table tbody th {
display: block;
padding: .625rem;
line-height: 1.5;
text-align: center;
background: #f6efe3;
}
@media (min-width: 544px) {
.form-table table tbody th {
display: table-cell;
padding: .625rem .9375rem;
text-align: left;
border-right: 1px solid #FFF;
border-bottom: 1px solid #FFF; } }
.form-table table tbody td {
display: block;
width: auto;
padding: .9375rem .625rem;
line-height: 1.5;
text-align: left;
vertical-align: middle;
background: #fcf9f5;
border-right: 1px solid #FFF;
}
@media (min-width: 544px) {
.form-table table tbody td {
display: table-cell;
padding: .625rem .9375rem;
border-bottom: 1px solid #FFF; } }
.form-table label {
display: inline-block;
padding: .3125rem;
font-weight: bold;
line-height: 1.5;
}
.form-table input[type=text] {
margin: -1px 0;
padding: .3125rem .625rem;
font-size: 1rem;
line-height: 1.5;
vertical-align: middle;
}
.form-table textarea {
height: 12rem;
padding: .3125rem;
font-size: 1rem;
line-height: 1.5;
}
.form-table ::-webkit-input-placeholder {
color: #aaa;
}
.form-table ::-moz-placeholder {
color: #aaa;
opacity: 1;
}
.form-table :-ms-input-placeholder {
color: #aaa;
}
.form-table ::placeholder {
color: #aaa;
}
/* --- table responsive --- */
.table_responsive {
border-collapse: collapse;
margin: 0;
padding: 0;
table-layout: fixed;
width: 100%;
}
.table_responsive tr {
/* background: #f8f8f8;*/
/* padding: .0.9375rem;*/
/* border: 1px solid #ddd;*/
}
.table_responsive th {
padding: 0.9375rem;
text-align: center;
vertical-align: middle;
background-color: #333;
border: 1px solid #ddd;
}
.table_responsive td {
padding: 0.9375rem;
text-align: center;
vertical-align: middle;
background-color: #464646;
border: 1px solid #ddd;
}
@media screen and (max-width: 767px) {
.table_responsive thead {
display: none;
}
.table_responsive tr {
margin-top: 1.875rem;
/* border-top: 1px solid #ddd;*/
display: block;
}
.table_responsive th {
border: none;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
display: block;
text-align: right;
background-color: #464646;
}
.table_responsive th:before {
content: attr(aria-label);
float: left;
}
.table_responsive td {
border: none;
border-bottom: 1px solid #454545;
display: block;
text-align: right;
background-color: transparent;
}
.table_responsive td:before {
content: attr(aria-label);
float: left;
}
}
.width-xs-5 {
width: 5%; }
.width-xs-10 {
width: 10%; }
.width-xs-15 {
width: 15%; }
.width-xs-20 {
width: 20%; }
.width-xs-25 {
width: 25%; }
.width-xs-30 {
width: 30%; }
.width-xs-35 {
width: 35%; }
.width-xs-40 {
width: 40%; }
.width-xs-45 {
width: 45%; }
.width-xs-50 {
width: 50%; }
.width-xs-55 {
width: 55%; }
.width-xs-60 {
width: 60%; }
.width-xs-65 {
width: 65%; }
.width-xs-70 {
width: 70%; }
.width-xs-75 {
width: 75%; }
.width-xs-80 {
width: 80%; }
.width-xs-85 {
width: 85%; }
.width-xs-90 {
width: 90%; }
.width-xs-95 {
width: 95%; }
.width-xs-100 {
width: 100%; }
@media (min-width: 544px) {
.width-sm-5 {
width: 5%; }
.width-sm-10 {
width: 10%; }
.width-sm-15 {
width: 15%; }
.width-sm-20 {
width: 20%; }
.width-sm-25 {
width: 25%; }
.width-sm-30 {
width: 30%; }
.width-sm-35 {
width: 35%; }
.width-sm-40 {
width: 40%; }
.width-sm-45 {
width: 45%; }
.width-sm-50 {
width: 50%; }
.width-sm-55 {
width: 55%; }
.width-sm-60 {
width: 60%; }
.width-sm-65 {
width: 65%; }
.width-sm-70 {
width: 70%; }
.width-sm-75 {
width: 75%; }
.width-sm-80 {
width: 80%; }
.width-sm-85 {
width: 85%; }
.width-sm-90 {
width: 90%; }
.width-sm-95 {
width: 95%; }
.width-sm-100 {
width: 100%; } }
@media (min-width: 768px) {
.width-md-5 {
width: 5%; }
.width-md-10 {
width: 10%; }
.width-md-15 {
width: 15%; }
.width-md-20 {
width: 20%; }
.width-md-25 {
width: 25%; }
.width-md-30 {
width: 30%; }
.width-md-35 {
width: 35%; }
.width-md-40 {
width: 40%; }
.width-md-45 {
width: 45%; }
.width-md-50 {
width: 50%; }
.width-md-50 {
width: 50%; }
.width-md-60 {
width: 60%; }
.width-md-65 {
width: 65%; }
.width-md-70 {
width: 70%; }
.width-md-75 {
width: 75%; }
.width-md-80 {
width: 80%; }
.width-md-85 {
width: 85%; }
.width-md-90 {
width: 90%; }
.width-md-95 {
width: 95%; }
.width-md-100 {
width: 100%; }
}
@media (min-width: 992px) {
.width-lg-5 {
width: 5%; }
.width-lg-10 {
width: 10%; }
.width-lg-15 {
width: 15%; }
.width-lg-20 {
width: 20%; }
.width-lg-25 {
width: 25%; }
.width-lg-30 {
width: 30%; }
.width-lg-35 {
width: 35%; }
.width-lg-40 {
width: 40%; }
.width-lg-45 {
width: 45%; }
.width-lg-50 {
width: 50%; }
.width-lg-55 {
width: 55%; }
.width-lg-60 {
width: 60%; }
.width-lg-65 {
width: 65%; }
.width-lg-70 {
width: 70%; }
.width-lg-75 {
width: 75%; }
.width-lg-80 {
width: 80%; }
.width-lg-85 {
width: 85%; }
.width-lg-90 {
width: 90%; }
.width-lg-95 {
width: 95%; }
.width-lg-100 {
width: 100%; }
}
@media (min-width: 1200px) {
.width-xl-5 {
width: 5%; }
.width-xl-10 {
width: 10%; }
.width-xl-15 {
width: 15%; }
.width-xl-20 {
width: 20%; }
.width-xl-25 {
width: 25%; }
.width-xl-30 {
width: 30%; }
.width-xl-35 {
width: 35%; }
.width-xl-40 {
width: 40%; }
.width-xl-45 {
width: 45%; }
.width-xl-50 {
width: 50%; }
.width-xl-55 {
width: 55%; }
.width-xl-60 {
width: 60%; }
.width-xl-65 {
width: 65%; }
.width-xl-70 {
width: 70%; }
.width-xl-75 {
width: 75%; }
.width-xl-80 {
width: 80%; }
.width-xl-85 {
width: 85%; }
.width-xl-90 {
width: 90%; }
.width-xl-95 {
width: 95%; }
.width-xl-100 {
width: 100%; }
}
.height-5rem {
height: 5rem;
}
.height-10rem {
height: 10rem;
}
.height-15rem {
height: 15rem;
}
/* --- to the top --- */
.to-the-top {
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: 1000;
}
.to-the-top > a {
color: #999;
font-size: 4rem;
text-align: center;
display: block;
opacity: .5;
}
.to-the-top > a:hover {
opacity: .75;
}
/* --- bg --- */
.bg__video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
}
.bg__pattern {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: fixed;
top: 0;
right: 0;
z-index: -1;
}
.bg__pattern_slash {
background-image: url(../images/pattern-slash.png);
}
.bg_white {
background-color: #FFF;
/* border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;*/
}
.bg_gray_dark {
background-color: #222;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
}
.bg_black {
background-color: #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
/* --- navbar --- */
.navbar {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 48px;
color: #333;
background: #FFF;
z-index: 10001;
}
@media (min-width: 768px) {
.navbar {
position: fixed;
height: 48px;
box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 6px rgba(0,0,0,0.2); } }
.navbar__nav {
display: table;
position: relative;
width: 100%;
}
.navbar__brand {
display: table-cell;
width: 100%;
width: 138px;
height: 48px;
font-size: 1.35rem;
font-weight: bold;
line-height: 48px;
text-align: center;
}
@media (min-width: 768px) {
.navbar__brand {
width: 138px;
font-size: 1rem;
text-align: left; } }
.navbar__menu {
display: table-cell;
position: static;
height: 48px;
font-size: 0;
text-align: right;
vertical-align: middle;
}
.navbar__menu_item {
display: inline-block;
}
.navbar__menu_item > a {
position: relative;
display: block;
width: 100%;
height: 48px;
padding: 0 15px;
font-size: .9rem;
color: #333;
text-align: center;
line-height: 50px;
}
.navbar__menu_item > a:hover {
border-bottom: 4px solid #c39143;
}
.navbar__icon {
display: table-cell;
position: static;
width: 30px;
height: 48px;
font-size: 30px;
vertical-align: middle;
}
.navbar__icon_facebook {
color: #315095;
}
.navbar__icon > a {
position: relative;
display: block;
width: 100%;
height: 48px;
color: #333;
text-align: center;
line-height: 50px;
}
.navbar__icon_facebook > a {
color: #315095;
}
/* --- mobile-nav --- */
.navbar__mobile {
position: relative;
text-align: right;
}
.navbar__mobile_unshown {
display: none;
}
/* メニューボタン */
.navbar__mobile #nav-open {
position: relative;
display: inline-block;
width: 48px;
height: 48px;
margin-right: -.2em;
padding-top: 5px;
font-size: 34px;
vertical-align: middle;
cursor: pointer;
}
/* 閉じる用の薄黒カバー */
.navbar__mobile #nav-close {
display: none; /* はじめは隠しておく */
position: fixed;
z-index: 99;
top: 0; /* 全体に広がるように */
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}
/* 中身 */
.navbar__mobile_content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999; /* 最前面に */
width: 90%; /* 右側に隙間を作る（閉じるカバーを表示） */
max-width: 90%; /* 最大幅（要調整） */
height: 100%;
text-align: left;
background: #FFF; /* 背景色 */
transition: .3s ease-in-out; /* 滑らかに表示 */
-webkit-transform: translateX(-105%);
transform: translateX(-105%); /* 右に隠しておく */
}
.navbar__mobile_content ul {
margin: 0;
}
.navbar__mobile_content li {
margin: 0;
font-size: 1.25rem;
list-style-type: none;
list-style-position: inside;
border-bottom: 1px solid #999;
}
.navbar__mobile_content a {
display: block;
padding: .9375rem;
color: #333;
border-left: 10px solid #c39143;
}
/* チェックが入ったらもろもろ表示 */
.navbar__mobile #nav-input:checked ~ #nav-close {
display: block; /* カバーを表示 */
opacity: .5;
}
.navbar__mobile #nav-input:checked ~ .navbar__mobile_content {
-webkit-transform: translateX(0%);
transform: translateX(0%); /* 中身を表示（右へスライド） */
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
/* --- key-visual --- */
.key-visual {
position: relative;
background-size: cover;
background-position: center center;
}
.key-visual:before {
content: "";
display: block;
padding-top: 56.25%;
}
@media (min-width: 768px) {
.key-visual {
position: relative;
height: 100%; } }
.key-visual__inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.key-visual__body {
position: relative;
position: absolute;
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
@media (min-width: 768px) {
.key-visual__body {
/* top: 40%;
-webkit-transform: translateY(-60%);
-ms-transform: translateY(-60%);
transform: translateY(-60%); */} }
.key-visual__logo {
display: block;
width: 250px;
height: auto;
margin: 0 auto;
text-shadow: 3px 3px 5px rgba(0,0,0, 0.5);
}
@media (min-width: 544px) {
.key-visual__logo {
width: 379px; } }
@media (min-width: 768px) {
.key-visual__logo {
width: 535px; } }
@media (min-width: 992px) {
.key-visual__logo {
width: 691px; } }
@media (min-width: 1200px) {
.key-visual__logo {
width: 836px; } }
.key-visual__title {
margin-bottom: 15px;
color: #FFF;
font-size: 23px;
font-family: 'Oswald', sans-serif;
text-shadow: 3px 3px 5px rgba(0,0,0, 0.5);
text-align: center;
line-height: 1.1em;
}
@media (min-width: 544px) {
.key-visual__title {
font-size: 34px; } }
@media (min-width: 768px) {
.key-visual__title {
font-size: 41px; } }
@media (min-width: 992px) {
.key-visual__title {
font-size: 53px; } }
@media (min-width: 1200px) {
.key-visual__title {
font-size: 64px; } }
.key-visual__sub-title {
font-size: 0.66em;
}
.key-visual__button {
margin-top: 1em;
}
.key-visual__down {
display: block;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 2;
padding-top: 30px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
text-decoration: none;
}
.key-visual__down span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb 1.5s infinite;
animation: sdb 1.5s infinite;
}
@-webkit-keyframes sdb {
0% {
-webkit-transform: rotate(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: rotate(-45deg) translate(-20px, 20px);
opacity: 0;
}
}
@keyframes sdb {
0% {
transform: rotate(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotate(-45deg) translate(-20px, 20px);
opacity: 0;
}
}
/* --- slider --- */
.slider-container {
position: relative;
width: 100%;
background: #FFF;
}
@media (min-width: 768px) {
/* JSとCSSのwidth処理の違い吸収用 */
.slider-container {
background: none;
}}
.slider-container:before {
content: "";
display: block;
padding-top: 66.6666%;
}
@media (min-width: 768px) {
/* JSとCSSのwidth処理の違い吸収用 */
.slider-container:before {
padding-top: inherit;
}}
@media (min-width: 800px) {
.slider-container:before {
padding-top: 46.875%;
}}
.slider-container__title {
position: relative;
padding: 1.406rem 0;
border-bottom: 1px solid #333;
}
@media (min-width: 768px) {
.slider-container__title {
position: relative; } }
@media (min-width: 800px) {
.slider-container__title {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0;
border-bottom: none; } }
.slider-inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@media (min-width: 768px) {
/* JSとCSSのwidth処理の違い吸収用 */
.slider-inner {
position: relative; } }
@media (min-width: 800px) {
.slider-inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; } }
/* --- visual-header --- */
.visual-header {
position: relative;
background: #FFF;
}
.visual-header__image {
position: relative;
width: 100%;
background-size: cover;
background-position: center center;
}
.visual-header__image:before {
content: "";
display: block;
padding-top: 45%;
}
@media (min-width: 768px) {
.visual-header__image:before {
padding-top: 35%;
} }
@media (min-width: 992px) {
.visual-header__image:before {
padding-top: 30%;
} }
@media (min-width: 1200px) {
.visual-header__image:before {
padding-top: 25%;
} }
.visual-header_narrow .visual-header__image:before {
content: "";
display: block;
padding-top: 15%;
}
@media (min-width: 768px) {
.visual-header_narrow .visual-header__image:before {
padding-top: 25%;
} }
@media (min-width: 992px) {
.visual-header_narrow .visual-header__image:before {
padding-top: 22%;
} }
@media (min-width: 1200px) {
.visual-header_narrow .visual-header__image:before {
padding-top: 18%;
} }
.visual-header_broad .visual-header__image:before {
content: "";
display: block;
padding-top: 66.6666%;
}
@media (min-width: 768px) {
.visual-header_broad .visual-header__image:before {
padding-top: 66.6666%;
} }
@media (min-width: 992px) {
.visual-header_broad .visual-header__image:before {
padding-top: 46.875%;
} }
@media (min-width: 1200px) {
.visual-header_broad .visual-header__image:before {
padding-top: 46.875%;
} }
.visual-header__title {
padding: 1.406rem 0;
border-bottom: 1px solid #333;
}
@media (min-width: 768px) {
.visual-header__title {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0;
border-bottom: none;
} }
.visual-header__subtitle {
color: #393e4f;
font-size: 1.25rem;
font-weight: bold;
}
@media (min-width: 768px) {
.visual-header__subtitle {
color: #FFF;
font-size: 1.8rem;
text-shadow: .1875rem .1875rem rgba(0,0,0,0.5);
} }
@media (min-width: 992px) {
.visual-header__subtitle {
font-size: 2.25rem;
text-shadow: .25rem .25rem rgba(0,0,0,0.5);
} }
/* --- group-list --- */
.group-list {
margin-top: .9375rem;
padding: .625rem .9375rem .9375rem .9375rem;
background: #faf6ef;
border-left: 5px solid #c39143;
}
.group-list_bskanko,
.group-list_tokyo,
.group-list_sapporo,
.group-list_nagoya,
.group-list_osaka,
.group-list_fukuchiyama,
.group-list_hiroshima,
.group-list_yonago
{
background: #ffefef;
border-color: #ff6666;
background: #f5f4f1;
border-color: #9E9478;
}
.group-list_kitanihon,
.group-list_aomori,
.group-list_morioka {
background: #f2f4f5;
border-color: #83959F;
}
.group-list_bs,
.group-list_akita {
background: #f4f8f5;
border-color: #93B69C;
}
/*
.group-list_yamagata {
background: #fbf6f1;
border-color: #D8A373;
}*/
.group-list_bstravel,
.group-list_miyagi {
background: #faf2f0;
border-color: #CA8269;
}
.group-list_fukushimabs,
.group-list_koriyama {
background: #f5f3f6;
border-color: #9e85a6;
}
.group-list_nigatabs,
.group-list_nigata {
background: #fcf6f8;
border-color: #E5ABBE;
}
.group-list_yokohama {
background: #f4f5f1;
border-color: #919F74;
}
/* --- google-maps --- */
.google-map {
position: relative;
margin-top: .9375rem;
padding-bottom: 50%; /* これが縦横比 */
height: 0;
overflow: hidden;
}
.google-map iframe,
.google-map object,
.google-map embed {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/* --- google-forms --- */
.google-form {
position: relative;
margin-top: .9375rem;
padding-bottom: 100%; /* これが縦横比 */
height: 0;
overflow: hidden;
}
.google-form iframe,
.google-form object,
.google-form embed {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/* --- group-map --- */
.group-map {
text-align: center;
}
.group-map img {
width: 100%;
max-width: 550px;
margin: 0 auto;
}
/* --- contact-area --- */
.contact-area {
margin-bottom: -2.5rem;
padding-bottom: 15%;
}
@media (min-width: 768px) {
.contact-area {
padding-bottom: 12%;
background: url(../images/footer-bg.png) center bottom repeat-x;
background-size: 100% auto; } }
.contact-area__call {
margin-top: 0.9375rem;
font-size: 1.75rem;
font-weight: bold;
line-height: 1.5;
vertical-align: middle;
}
.contact-area__call .icon {
font-size: 3rem;
line-height: 1;
vertical-align: middle;
}
.contact-area__buttons {
}
/* --- FB Page Area --- */
.fb-page-area {
height: 767px;
}
/* --- Banner Area --- */
.banner-area {
background: #f0e3d0;
}
.banner {
margin-top: 0;
padding: 1.875rem 0;
}
.banner_item {
}
/* --- Footer --- */
.footer {
padding: .9rem 0;
color: #FFF;
background: #393e4f;
}
.footer__nav {
display: block;
padding-top: 1.875rem;
font-size: 0;
text-align: center;
}
.footer__nav > li {
display: inline;
margin-left: 0;
font-size: .9rem;
line-height: 1.5;
}
.footer__nav > li::after {
content: " | ";
}
.footer__nav > li:last-child::after {
content: "";
}
.footer__copyright {
padding: 1.875rem 0;
font-size: .9rem;
line-height: 1.5;
text-align: center;
}
/* --- floating-banner --- */
.floating-banner-group {
position: fixed;
z-index: 99999;
bottom: 10px;
right: 10px;
width: 300px;
}
.floating-banner {
}
.floating-banner__image {
box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
margin-top: 10px;
max-width: 100%;
}
@media screen and (max-width: 991px) { /* タブレット用のブレイクポイントを指定 */
.floating-banner-group {
width: 250px;
}
}
@media screen and (max-width: 767px) { /* スマホ用のブレイクポイントを指定 */
.floating-banner-group {
display: block;
bottom: 0;
right: 0;
width: 100vw;
}
.floating-banner__image {
margin-top: 0;
box-shadow: none;
}
}
/* --- helper classes --- */
.clearfix::after {
content: "";
display: table;
clear: both;
}
.text-primary { color: #7DC1FA !important; }
.text-secondary {
}
.text-normally { color: #FFF !important; }
.text-dark { color: #333 !important; }
.text-light-dark { color: #AAA !important; }
.text-warning { color: #f0ad4e !important; }
.text-danger { color: #e60012 !important; }
.text-light { color: #FF0 !important; }
.text-outline {
text-shadow: 1px 1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, -1px -1px 0 #FFF;
}
.text-important {
font-size: 1.2em !important;
line-height: 1.3 !important;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.3;
}
@media (min-width: 544px) {
.text-xl {
font-size: 1.5rem; } }
@media (min-width: 768px) {
.text-xl {
font-size: 2rem;; } }
@media (min-width: 992px) {
.text-xl {
font-size: 2.5rem; } }
@media (min-width: 1200px) {
.text-xl {
font-size: 3rem; } }
.text-strong { font-weight: bold !important; }
.text-small {font-size: 0.8rem;}
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-nowrap {
white-space: nowrap;
}
.no-list-style {
margin-left: 0 !important;
list-style: none !important;
}
.no-list-style > li {
margin-left: 0 !important;
list-style: none !important;
}
.block { display: block; }
.inline-block { display: inline-block; }
.margin-top-0 { margin-top: 0 !important; }
.margin-top-5 { margin-top: 0.46875rem !important; }
.margin-top-10 { margin-top: 0.9375rem !important; }
.margin-top-15 { margin-top: 1.406rem !important; }
.margin-top-20 { margin-top: 1.875rem !important; }
.margin-top-30 { margin-top: 2.8125rem !important; }
.margin-top-40 { margin-top: 3.75rem !important; }
.margin-top-50 { margin-top: 4.6875rem !important; }
.margin-top-n5 { margin-top: -0.46875rem !important; }
.margin-top-n10 { margin-top: -0.9375rem !important; }
.margin-top-n15 { margin-top: -1.406rem !important; }
.margin-top-n20 { margin-top: -1.875rem !important; }
.margin-top-n30 { margin-top: -2.8125rem !important; }
.margin-top-n40 { margin-top: -3.75rem !important; }
.margin-top-n50 { margin-top: -4.6875rem !important; }
.no-margin { margin: 0 !important; }
.no-margin-top { margin-top: 0 !important; }
.no-margin-left { margin-left: 0 !important; }
.no-margin-right { margin-right: 0 !important; }
.no-margin-bottom { margin-bottom: 0 !important; }
.margin-top-xs-0 { margin-top: 0 !important; }
.margin-top-xs-5 { margin-top: 0.46875rem !important; }
.margin-top-xs-10 { margin-top: 0.9375rem !important; }
.margin-top-xs-15 { margin-top: 1.406rem !important; }
.margin-top-xs-20 { margin-top: 1.875rem !important; }
.margin-top-xs-30 { margin-top: 2.8125rem !important; }
.margin-top-xs-40 { margin-top: 3.75rem !important; }
.margin-top-xs-50 { margin-top: 4.6875rem !important; }
.margin-top-xs-n5 { margin-top: -0.46875rem !important; }
.margin-top-xs-n10 { margin-top: -0.9375rem !important; }
.margin-top-xs-n20 { margin-top: -1.875rem !important; }
.margin-top-xs-n30 { margin-top: -2.8125rem !important; }
.margin-top-xs-n40 { margin-top: -3.75rem !important; }
.margin-top-xs-n50 { margin-top: -4.6875rem !important; }
@media (min-width: 544px) {
.margin-top-sm-0 { margin-top: 0 !important; }
.margin-top-sm-5 { margin-top: 0.46875rem !important; }
.margin-top-sm-10 { margin-top: 0.9375rem !important; }
.margin-top-sm-15 { margin-top: 1.406rem !important; }
.margin-top-sm-20 { margin-top: 1.875rem !important; }
.margin-top-sm-30 { margin-top: 2.8125rem !important; }
.margin-top-sm-40 { margin-top: 3.75rem !important; }
.margin-top-sm-50 { margin-top: 4.6875rem !important; }
.margin-top-sm-n5 { margin-top: -0.46875rem !important; }
.margin-top-sm-n10 { margin-top: -0.9375rem !important; }
.margin-top-sm-n20 { margin-top: -1.875rem !important; }
.margin-top-sm-n30 { margin-top: -2.8125rem !important; }
.margin-top-sm-n40 { margin-top: -3.75rem !important; }
.margin-top-sm-n50 { margin-top: -4.6875rem !important; }
}
@media (min-width: 768px) {
.margin-top-md-0 { margin-top: 0 !important; }
.margin-top-md-5 { margin-top: 0.46875rem !important; }
.margin-top-md-10 { margin-top: 0.9375rem !important; }
.margin-top-md-15 { margin-top: 1.406rem !important; }
.margin-top-md-20 { margin-top: 1.875rem !important; }
.margin-top-md-30 { margin-top: 2.8125rem !important; }
.margin-top-md-40 { margin-top: 3.75rem !important; }
.margin-top-md-50 { margin-top: 4.6875rem !important; }
.margin-top-md-n5 { margin-top: -0.46875rem !important; }
.margin-top-md-n10 { margin-top: -0.9375rem !important; }
.margin-top-md-n20 { margin-top: -1.875rem !important; }
.margin-top-md-n30 { margin-top: -2.8125rem !important; }
.margin-top-md-n40 { margin-top: -3.75rem !important; }
.margin-top-md-n50 { margin-top: -4.6875rem !important; }
}
@media (min-width: 992px) {
.margin-top-lg-0 { margin-top: 0 !important; }
.margin-top-lg-5 { margin-top: 0.46875rem !important; }
.margin-top-lg-10 { margin-top: 0.9375rem !important; }
.margin-top-lg-15 { margin-top: 1.406rem !important; }
.margin-top-lg-20 { margin-top: 1.875rem !important; }
.margin-top-lg-30 { margin-top: 2.8125rem !important; }
.margin-top-lg-40 { margin-top: 3.75rem !important; }
.margin-top-lg-50 { margin-top: 4.6875rem !important; }
.margin-top-lg-n5 { margin-top: -0.46875rem !important; }
.margin-top-lg-n10 { margin-top: -0.9375rem !important; }
.margin-top-lg-n20 { margin-top: -1.875rem !important; }
.margin-top-lg-n30 { margin-top: -2.8125rem !important; }
.margin-top-lg-n40 { margin-top: -3.75rem !important; }
.margin-top-lg-n50 { margin-top: -4.6875rem !important; }
}
@media (min-width: 1200px) {
.margin-top-xl-0 { margin-top: 0 !important; }
.margin-top-xl-5 { margin-top: 0.46875rem !important; }
.margin-top-xl-10 { margin-top: 0.9375rem !important; }
.margin-top-xl-15 { margin-top: 1.406rem !important; }
.margin-top-xl-20 { margin-top: 1.875rem !important; }
.margin-top-xl-30 { margin-top: 2.8125rem !important; }
.margin-top-xl-40 { margin-top: 3.75rem !important; }
.margin-top-xl-50 { margin-top: 4.6875rem !important; }
.margin-top-xl-n5 { margin-top: -0.46875rem !important; }
.margin-top-xl-n10 { margin-top: -0.9375rem !important; }
.margin-top-xl-n20 { margin-top: -1.875rem !important; }
.margin-top-xl-n30 { margin-top: -2.8125rem !important; }
.margin-top-xl-n40 { margin-top: -3.75rem !important; }
.margin-top-xl-n50 { margin-top: -4.6875rem !important; }
}
.padding-0 { padding: 0 !important; }
.padding-5 { padding: 0.46875rem !important; }
.padding-10 { padding: 0.9375rem !important; }
.padding-15 { padding: 1.406rem !important; }
.padding-20 { padding: 1.875rem !important; }
.padding-30 { padding: 2.8125rem !important; }
.padding-40 { padding: 3.75rem !important; }
.padding-50 { padding: 4.6875rem !important; }
.padding-top-0 { padding-top: 0 !important; }
.padding-top-5 { padding-top: 0.46875rem !important; }
.padding-top-10 { padding-top: 0.9375rem !important; }
.padding-top-20 { padding-top: 1.875rem !important; }
.padding-top-30 { padding-top: 2.8125rem !important; }
.padding-top-40 { padding-top: 3.75rem !important; }
.padding-top-50 { padding-top: 4.6875rem !important; }
.padding-bottom-0 { padding-bottom: 0 !important; }
.padding-bottom-5 { padding-bottom: 0.46875rem !important; }
.padding-bottom-10 { padding-bottom: 0.9375rem !important; }
.padding-bottom-20 { padding-bottom: 1.875rem !important; }
.padding-bottom-30 { padding-bottom: 2.8125rem !important; }
.padding-bottom-40 { padding-bottom: 3.75rem !important; }
.padding-bottom-50 { padding-bottom: 4.6875rem !important; }
.padding-bottom-100 { padding-bottom: 9.375rem !important; }
.no-padding { padding: 0 !important; }
.no-padding-top { padding-top: 0 !important; }
.no-padding-left { padding-left: 0 !important; }
.no-padding-right { padding-right: 0 !important; }
.no-padding-bottom { padding-bottom: 0 !important; }
.padding-top-xs-0 { padding-top: 0 !important; }
.padding-top-xs-5 { padding-top: 0.46875rem !important; }
.padding-top-xs-10 { padding-top: 0.9375rem !important; }
.padding-top-xs-15 { padding-top: 1.406rem !important; }
.padding-top-xs-20 { padding-top: 1.875rem !important; }
.padding-top-xs-30 { padding-top: 2.8125rem !important; }
.padding-top-xs-40 { padding-top: 3.75rem !important; }
.padding-top-xs-50 { padding-top: 4.6875rem !important; }
@media (min-width: 544px) {
.padding-top-sm-0 { padding-top: 0 !important; }
.padding-top-sm-5 { padding-top: 0.46875rem !important; }
.padding-top-sm-10 { padding-top: 0.9375rem !important; }
.padding-top-sm-15 { padding-top: 1.406rem !important; }
.padding-top-sm-20 { padding-top: 1.875rem !important; }
.padding-top-sm-30 { padding-top: 2.8125rem !important; }
.padding-top-sm-40 { padding-top: 3.75rem !important; }
.padding-top-sm-50 { padding-top: 4.6875rem !important; }
}
@media (min-width: 768px) {
.padding-top-md-0 { padding-top: 0 !important; }
.padding-top-md-5 { padding-top: 0.46875rem !important; }
.padding-top-md-10 { padding-top: 0.9375rem !important; }
.padding-top-md-15 { padding-top: 1.406rem !important; }
.padding-top-md-20 { padding-top: 1.875rem !important; }
.padding-top-md-30 { padding-top: 2.8125rem !important; }
.padding-top-md-40 { padding-top: 3.75rem !important; }
.padding-top-md-50 { padding-top: 4.6875rem !important; }
}
@media (min-width: 992px) {
.padding-top-lg-0 { padding-top: 0 !important; }
.padding-top-lg-5 { padding-top: 0.46875rem !important; }
.padding-top-lg-10 { padding-top: 0.9375rem !important; }
.padding-top-lg-15 { padding-top: 1.406rem !important; }
.padding-top-lg-20 { padding-top: 1.875rem !important; }
.padding-top-lg-30 { padding-top: 2.8125rem !important; }
.padding-top-lg-40 { padding-top: 3.75rem !important; }
.padding-top-lg-50 { padding-top: 4.6875rem !important; }
}
@media (min-width: 1200px) {
.padding-top-xl-0 { padding-top: 0 !important; }
.padding-top-xl-5 { padding-top: 0.46875rem !important; }
.padding-top-xl-10 { padding-top: 0.9375rem !important; }
.padding-top-xl-15 { padding-top: 1.406rem !important; }
.padding-top-xl-20 { padding-top: 1.875rem !important; }
.padding-top-xl-30 { padding-top: 2.8125rem !important; }
.padding-top-xl-40 { padding-top: 3.75rem !important; }
.padding-top-xl-50 { padding-top: 4.6875rem !important; }
}
.padding-bottom-xs-0 { padding-bottom: 0 !important; }
.padding-bottom-xs-5 { padding-bottom: 0.46875rem !important; }
.padding-bottom-xs-10 { padding-bottom: 0.9375rem !important; }
.padding-bottom-xs-15 { padding-bottom: 1.406rem !important; }
.padding-bottom-xs-20 { padding-bottom: 1.875rem !important; }
.padding-bottom-xs-30 { padding-bottom: 2.8125rem !important; }
.padding-bottom-xs-40 { padding-bottom: 3.75rem !important; }
.padding-bottom-xs-50 { padding-bottom: 4.6875rem !important; }
@media (min-width: 544px) {
.padding-bottom-sm-0 { padding-bottom: 0 !important; }
.padding-bottom-sm-5 { padding-bottom: 0.46875rem !important; }
.padding-bottom-sm-10 { padding-bottom: 0.9375rem !important; }
.padding-bottom-sm-15 { padding-bottom: 1.406rem !important; }
.padding-bottom-sm-20 { padding-bottom: 1.875rem !important; }
.padding-bottom-sm-30 { padding-bottom: 2.8125rem !important; }
.padding-bottom-sm-40 { padding-bottom: 3.75rem !important; }
.padding-bottom-sm-50 { padding-bottom: 4.6875rem !important; }
}
@media (min-width: 768px) {
.padding-bottom-md-0 { padding-bottom: 0 !important; }
.padding-bottom-md-5 { padding-bottom: 0.46875rem !important; }
.padding-bottom-md-10 { padding-bottom: 0.9375rem !important; }
.padding-bottom-md-15 { padding-bottom: 1.406rem !important; }
.padding-bottom-md-20 { padding-bottom: 1.875rem !important; }
.padding-bottom-md-30 { padding-bottom: 2.8125rem !important; }
.padding-bottom-md-40 { padding-bottom: 3.75rem !important; }
.padding-bottom-md-50 { padding-bottom: 4.6875rem !important; }
}
@media (min-width: 992px) {
.padding-bottom-lg-0 { padding-bottom: 0 !important; }
.padding-bottom-lg-5 { padding-bottom: 0.46875rem !important; }
.padding-bottom-lg-10 { padding-bottom: 0.9375rem !important; }
.padding-bottom-lg-15 { padding-bottom: 1.406rem !important; }
.padding-bottom-lg-20 { padding-bottom: 1.875rem !important; }
.padding-bottom-lg-30 { padding-bottom: 2.8125rem !important; }
.padding-bottom-lg-40 { padding-bottom: 3.75rem !important; }
.padding-bottom-lg-50 { padding-bottom: 4.6875rem !important; }
}
@media (min-width: 1200px) {
.padding-bottom-xl-0 { padding-bottom: 0 !important; }
.padding-bottom-xl-5 { padding-bottom: 0.46875rem !important; }
.padding-bottom-xl-10 { padding-bottom: 0.9375rem !important; }
.padding-bottom-xl-15 { padding-bottom: 1.406rem !important; }
.padding-bottom-xl-20 { padding-bottom: 1.875rem !important; }
.padding-bottom-xl-30 { padding-bottom: 2.8125rem !important; }
.padding-bottom-xl-40 { padding-bottom: 3.75rem !important; }
.padding-bottom-xl-50 { padding-bottom: 4.6875rem !important; }
}
.border-1 { border: 1px solid #454545; }
.border-top-1 { border-top: 1px solid #454545; }
.border-left-1 { border-left: 1px solid #454545; }
.border-right-1 { border-right: 1px solid #454545; }
.border-bottom-1 { border-bottom: 1px solid #454545; }
.border-5 { border: 5px solid #454545; }
.border-top-5 { border-top: 5px solid #454545; }
.border-left-5 { border-left: 5px solid #454545; }
.border-right-5 { border-right: 5px solid #454545; }
.border-bottom-5 { border-bottom: 5px solid #454545; }
.border-white { border-color: #FFF; }
.border-light { border-color: #ccc; }
.border-dark { border-color: #454545; }
.border-black { border-color: #000; }
.list_notice {
margin-left: 1rem;
padding: 0;
list-style-type: none;
}
.list_notice li {
margin-left: 0;
padding: 0;
list-style-type: none;
}
.list_notice li::before {
content: '※';
margin-left: -1rem;
}
.fullscreen {
width: 100%;
height: 100%;
}
.full-image {
width: 100%;
height: auto;
}
.shadow {
-webkit-box-shadow: 5px 5px 8px -4px rgba(0,0,0,.4);
-moz-border-radius: 5px 5px 8px -4px rgba(0,0,0,.4);
box-shadow: 5px 5px 8px -4px rgba(0,0,0,.4);
}
.dots {
display: block;
position: relative;
width: 1rem;
height: 1rem;
margin: 1rem auto;
background-color: #DDD;
-moz-border-radius: .5rem;
-webkit-border-radius: .5rem;
border-radius: .5rem;
overflow: visible;
border: none;
}
.dots::before {
display: block;
position: absolute;
top: 0;
left: -2.5rem;
content: '';
width: 1rem;
height: 1rem;
background-color: #DDD;
-moz-border-radius: .5rem;
-webkit-border-radius: .5rem;
border-radius: .5rem;
overflow: visible;
}
.dots::after {
display: block;
position: absolute;
top: 0;
left: 2.5rem;
content: '';
width: 1rem;
height: 1rem;
background-color: #DDD;
-moz-border-radius: .5rem;
-webkit-border-radius: .5rem;
border-radius: .5rem;
overflow: visible;
}
.block {
display: block;
position: relative;
}
.block[href^="https://www.youtube.com/"]::after {
content: url(../images/icon-youtube.png);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 60px;
height: 42px;
}
.box-posted {
position: absolute;
top: 0;
right: 0;
padding: .5rem;
font-size: .8rem;
line-height: .15;
background-color: rgba(0,0,0,.5);
}
.box-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: .5rem;
font-size: .9rem;
line-height: 1.25;
background-color: rgba(0,0,0,.5);
}
.icon-l {
font-size: 1.5rem;
}
.icon-xl {
font-size: 3rem;
vertical-align: -45%;
}
.icon-xxl {
font-size: 6rem;
vertical-align: -120%;
}
.hidden-xs-up {
display: none !important; }
@media (max-width: 543px) {
.hidden-xs-down {
display: none !important; } }
@media (min-width: 544px) {
.hidden-sm-up {
display: none !important; } }
@media (max-width: 767px) {
.hidden-sm-down {
display: none !important; } }
@media (min-width: 768px) {
.hidden-md-up {
display: none !important; } }
@media (max-width: 991px) {
.hidden-md-down {
display: none !important; } }
@media (min-width: 992px) {
.hidden-lg-up {
display: none !important; } }
@media (max-width: 1199px) {
.hidden-lg-down {
display: none !important; } }
@media (min-width: 1200px) {
.hidden-xl-up {
display: none !important; } }
.hidden-xl-down {
display: none !important; }
.visible-print-block {
display: none !important; }
@media print {
.visible-print-block {
display: block !important; } }
.visible-print-inline {
display: none !important; }
@media print {
.visible-print-inline {
display: inline !important; } }
.visible-print-inline-block {
display: none !important; }
@media print {
.visible-print-inline-block {
display: inline-block !important; } }
@media print {
.hidden-print {
display: none !important; } }
.navbar__brand{background: #000;}
.cnt-navbar-brand{
max-height: 50px;
background: #000;
}
.cnt-navbar-brand img{
max-height: 50px;
}