* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 100%; }
html {
scroll-padding-top: 64px;
color: #222229;
margin-top: 0 !important; }
ul, ol, li {
list-style: none; }
em, i {
font-style: normal; }
small {
font-size: 0.8em; }
.wp-caption,
img,
iframe,
video {
max-width: 100%; }
.wp-caption.alignnone {
max-width: 100% !important; }
.txt-center {
text-align: center; }
.txt-right {
text-align: right; }
.txt-left {
text-align: left; }
.fs07 {
font-size: 0.7em; }
.fs08 {
font-size: 0.7em; }
.fs09 {
font-size: 0.7em; }
.fs11 {
font-size: 1.1em; }
.fs12 {
font-size: 1.2em; }
.fs13 {
font-size: 1.3em; }
.fs14 {
font-size: 1.4em; }
.fs15 {
font-size: 1.5em; }
.fs16 {
font-size: 1.6em; }
.mt1 {
margin-top: 1em; }
.mt2 {
margin-top: 2em; }
.mt3 {
margin-top: 3em; }
.mt4 {
margin-top: 4em; }
.mb1 {
margin-bottom: 1em; }
.mb2 {
margin-bottom: 2em; }
.mb3 {
margin-bottom: 3em; }
.mb4 {
margin-bottom: 4em; }
.pt1 {
padding-top: 1em; }
.pt2 {
padding-top: 2em; }
.pt3 {
padding-top: 3em; }
.pt4 {
padding-top: 4em; }
.pb1 {
padding-bottom: 1em; }
.pb2 {
padding-bottom: 2em; }
.pb3 {
padding-bottom: 3em; }
.pb4 {
padding-bottom: 4em; }
.d-flex,
.d-flex-lg {
display: flex; }
.d-inline-block {
display: inline-block; }
.flex-column {
flex-direction: column; }
.flex-column-reverse {
flex-direction: column-reverse; }
.flex-row-reverse {
flex-direction: row-reverse; }
.justify-content-start {
justify-content: flex-start; }
.justify-content-end {
justify-content: flex-end; }
.justify-content-center {
justify-content: center; }
.justify-content-between {
justify-content: space-between; }
.justify-content-around {
justify-content: space-around; }
.align-items-centrer {
align-items: center; }
.align-items-end {
align-items: flex-end; }
.w100 {
width: 100%; }
.wAuto {
width: auto; }
.container {
width: 1600px;
max-width: 92%;
margin-left: auto;
margin-right: auto; }
.container_m {
width: 1080px;
max-width: 100%;
margin-left: auto;
margin-right: auto; }
.container_s {
width: 800px;
max-width: 100%;
margin-left: auto;
margin-right: auto; }
.bg1 {
background-image: url(/_assets/images/common/otaru-bg2s.jpg);
background-color: rgba(245, 250, 255, 0.999999);
background-blend-mode: lighten;
background-size: 400px;
background-attachment: fixed; }
.bg2 {
background: #3B6FB3;
color: #fff; }
.bg3 {
background: #f0f0f0; }
.bg4 {
background: #fcfcfa; }
.bg5 {
background: #F5FAFF; }
.bg10 {
background-image: url(/_assets/images/common/otaru-bg2s.jpg);
background-color: rgba(245, 250, 255, 0.999999);
background-blend-mode: lighten;
background-size: 400px;
background-attachment: fixed;
position: relative; }
.bg10::before, .bg10::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 1rem;
background: url(/_assets/images/common/otaru-bg2.jpg);
background-size: 400px; }
.bg10::before {
top: 0; }
.bg10::after {
bottom: 0; }
.content {
padding: 80px 0; }
.content a {
text-decoration: underline; }
.content p {
padding-bottom: 1em; }
.title-wrap {
text-align: center;
margin-bottom: 3rem; }
.title-wrap span {
display: block;
padding: 0 0 8px; }
.content-title {
font-weight: 800;
letter-spacing: 0.05em;
font-size: 2rem;
font-feature-settings: "palt"; }
.btn-wrap {
text-align: center;
padding-top: 1em; }
.flex {
display: flex; }
.flex .btn {
margin: 0 8px; }
.flex-center {
justify-content: center; }
a.btn,
.btn {
display: inline-block;
text-decoration: none;
min-width: 240px;
padding: 24px 48px 24px 16px;
border: 1px solid #333;
color: #333;
position: relative;
transition-duration: 0.3s;
line-height: 1.2; }
a.btn::after,
.btn::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
display: block;
width: 0.7em;
height: 0.7em;
border-right: 1px solid #333;
border-top: 1px solid #333;
transform: rotate(45deg) translateY(-50%);
transition-duration: 0.3s; }
a.btn:hover,
.btn:hover {
border-color: #d11;
background: #fff; }
a.btn:hover::after,
.btn:hover::after {
right: 20px;
border-color: #d11; }
a.btn.btn-s,
.btn.btn-s {
min-width: 100px;
padding: 12px 24px; }
a.btn.btn-s::after,
.btn.btn-s::after {
width: 0.5em;
height: 0.5em;
right: 16px; }
a.btn.btn-s:hover::after,
.btn.btn-s:hover::after {
right: 12px; }
a.btn.maillink::after,
.btn.maillink::after {
content: "\e609";
font-size: 1.5em;
font-family: uicons-thin-straight;
border: 0;
transform: rotate(0) translateY(-50%); }
a.btn.blanklink::after,
.btn.blanklink::after {
content: "\e270";
font-size: 1em;
font-family: uicons-thin-straight;
border: 0;
transform: rotate(0) translateY(-60%); }
a.btn.pdflink::after,
.btn.pdflink::after {
content: "\e6b5";
font-size: 1.5em;
font-family: uicons-thin-straight;
border: 0;
transform: rotate(0) translateY(-90%); }
a.btn-w,
.btn-w {
border-color: #fff;
color: #fff; }
a.btn-w::after,
.btn-w::after {
border-color: #fff; }
a.btn.textlink,
.textlink {
padding: 0;
border: 0; }
a.btn.textlink::after,
.textlink::after {
position: static;
top: auto;
bottom: 4px;
right: 4px;
display: inline-block;
margin-left: 8px;
transform: rotate(0) translateY(0%); }
a.btn.textlink:hover::after,
.textlink:hover::after {
right: 0; }
a.maillink::before {
content: "\e609";
font-size: 1.1em;
font-family: uicons-thin-straight;
margin-right: 4px;
vertical-align: middle; }
.zoom {
position: relative; }
.zoom::after {
content: "";
display: block;
position: absolute;
right: 8px;
bottom: 8px;
width: 28px;
height: 28px;
background: url(/_assets/images/common/i-zoom.png);
background-size: contain;
z-index: 2; }
.slick-prev,
.slick-next {
z-index: 5; }
.slick-prev::before,
.slick-next::before {
content: "";
width: 32px;
height: 32px;
display: block;
border-style: solid;
border-color: #333;
border-width: 1px; }
.slick-prev:hover::before,
.slick-next:hover::before {
border-color: #d11; }
.slick-prev {
left: -32px; }
.slick-prev::before {
border-bottom: 0;
border-right: 0;
transform: rotate(-45deg); }
.slick-next {
right: -16px; }
.slick-next::before {
border-left: 0;
border-bottom: 0;
transform: rotate(45deg); }
.bg2 .slick-prev::before,
.bg2 .slick-next::before {
border-color: #fff; }
.bg2 .slick-prev:hover::before,
.bg2 .slick-next:hover::before {
border-color: #aaa; }
@media screen and (max-width: 768px) {
.slick-prev {
left: 32px; }
.slick-next {
right: 48px; }
.d-flex-lg {
display: block; } }
@media screen and (max-width: 480px) {
.flex {
display: block; }
.slick-prev::before, .slick-next::before {
width: 18px;
height: 18px; }
.slick-next {
right: 32px; } }