@charset "utf-8";
/* ===================================================================
file name :class.css
style info :汎用クラス指定
=================================================================== */
/*
* .bg
* 背景装飾
*----------------------------------------------------------- */
.bg-ffffff{background: #ffffff;}
.bg-000000{background: #000000;}
/*
* .cl
* カラー
*----------------------------------------------------------- */
.cl-ffffff{ color: #ffffff;}
.cl-000000{ color: #000000;}
/*
* .text-shadow
* カラー
*----------------------------------------------------------- */
.text-shadow{
color: #fff;
text-shadow:
0 0 5px rgba(0,0,0,0.5),
0 0 5px rgba(0,0,0,0.5),
0 0 5px rgba(0,0,0,0.5),
0 0 8px rgba(0,0,0,0.5),
0 0 8px rgba(0,0,0,0.5),
0 0 8px rgba(0,0,0,0.5);
}
/*
* .ttl-
* タイトル
*----------------------------------------------------------- */
.ttl-h01{
margin: 0 0 18px;
font-size: 3rem;
line-height: 1.2;
font-weight: 500;
}
.ttl-h01-topline:before{
content: "";
display: block;
width: 15px;
height: 2px;
margin: 0 auto 15px;
background: #c4a27d;
}
.ttl-h01 .s-cap{
display: block;
margin: 5px 0 0;
font-size: 1.5rem;
}
@media screen and (min-width: 768px){
.ttl-h01{
margin: 0 0 30px;
font-size: 3.6rem;
}
.ttl-h01-topline:before{
width: 19px;
height: 3px;
margin: 0 auto 20px;
}
.ttl-h01 .s-cap{
font-size: 1.6rem;
}
}
/*
* .btn-primary
* ボタン
*----------------------------------------------------------- */
.btn-primary{
max-width: 250px;
margin: 0 auto;
}
.btn-primary a{
display: block;
padding: 13px 0;
text-align: center;
color: #000;
font-weight: 500;
font-size: 1.3rem;
line-height: 1.3;
text-decoration: none;
position: relative;
}
.btn-primary a span::before{
content: "";
display: block;
width: 8px;
height: 16px;
background: url("/kodate/designoffice/chubu/aichi/img/common/ico_arrow03.svg") no-repeat 50% 50% / 100% auto;
position: absolute;
top: calc(50% - 8px);
right: 16px;
}
/* btn-en */
.btn-primary.btn-en a{
font-size: 1.65rem;
}
/* btn-beige */
.btn-primary.btn-beige a{
background-color: #c4a27d;
}
/* btn-black */
.btn-primary.btn-black a{
background: #000;
color: #c4a27d;
border: solid 1px #c4a27d;
}
.btn-primary.btn-black a span::before{
background: url("/kodate/designoffice/chubu/aichi/img/common/ico_arrow04.svg") no-repeat 50% 50% / 100% auto;
}
/* btn-premium */
.btn-primary.btn-premium a{
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(51,51,51,1) 50%,rgba(0,0,0,1) 100%);
color: #c4a27d;
border: solid 1px #c4a27d;
}
.btn-primary.btn-premium a span::before{
background-image: url("/kodate/designoffice/chubu/aichi/img/common/ico_arrow04.svg");
}
@media screen and (min-width: 768px){
.btn-primary{
max-width: 650px;
}
.btn-primary a{
padding: 18px 0;
font-size: 1.6rem;
position: relative;
overflow: hidden;
}
.btn-primary a span::before{
width: 10px;
height: 20px;
top: calc(50% - 10px);
right: 22px;
}
.btn-primary a::before{
content: "";
display: block;
width: 0;
height: 100%;
background: rgba(255,255,255,0.2);
transform: skewX(-45deg);
position: absolute;
top: 0;
bottom: 0;
left: -30%;
transition: all ease 0.6s;
z-index: 1;
}
.btn-primary a:hover::before{
width: 200%
}
.btn-primary a span{
z-index: 10;
}
/* btn-en */
.btn-primary.btn-en a{
font-size: 2.2rem;
}
}
/*
animation-effect_light-stream
<p class="animation-effect_light-stream">光を走らせる</p>
*----------------------------------------------------------- */
.animation-effect_light-stream .animation_inner{
position: relative;
z-index: 2;
overflow: hidden;
}
.animation-effect_light-stream .animation_inner::after {
content: "";
height: 300%;
width: 100%;
left: -100%;
top: -100%;
background: -webkit-linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 27%,rgba(255,255,255,0.20) 39%,rgba(255,255,255,0.7) 57%,rgba(255,255,255,0) 73%,rgba(255,255,255,0) 100%);
background: linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 27%,rgba(255,255,255,0.20) 39%,rgba(255,255,255,0.7) 57%,rgba(255,255,255,0) 73%,rgba(255,255,255,0) 100%);
position: absolute;
pointer-events: none;
z-index: 1;
-webkit-animation: effect_light-stream-anim 4s cubic-bezier(.17,.67,.74,.95) infinite;
animation: effect_light-stream-anim 4s cubic-bezier(.17,.67,.74,.95) infinite;
}
@-webkit-keyframes effect_light-stream-anim {
0% {left:-100%;}
80% {left:-100%;}
100% {left:120%;}
}
@keyframes effect_light-stream-anim {
0% {left:-100%;}
80% {left:-100%;}
100% {left:120%;}
}
/*
* .swiper-design
*
*----------------------------------------------------------- */
.swiper-design{
padding: 0 0 80px;
position: relative;
}
.swiper-design .swiper-pagination{
width: calc(100% - 70px) !important;
position: absolute;
top: auto !important;
left: 50% !important;
bottom: 0;
height: 1px !important;
background: #555;
transform: translateX(-50%);
}
.swiper-design .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #c4a27d;
}
.swiper-design .swiper-button-prev{
top: auto;
left: auto;
right: 75px;
bottom: 18px;
}
.swiper-design .swiper-button-next{
top: auto;
right: 37px;
bottom: 18px;
}
.swiper-design .swiper-button-next::after,
.swiper-design .swiper-button-prev::after {
display: block;
width: 27px;
height: 24px;
text-indent: -9999px;
overflow: hidden;
}
.swiper-design .swiper-button-next::after{
background: url("/kodate/designoffice/chubu/aichi/img/common/btn_next02.svg") no-repeat 50% 50% / 100% auto;
}
.swiper-design .swiper-button-prev::after{
background: url("/kodate/designoffice/chubu/aichi/img/common/btn_prev02.svg") no-repeat 50% 50% / 100% auto;
}
@media screen and (min-width: 768px){
.swiper-design .swiper-pagination{
width: 812px !important;
}
.swiper-design .swiper-button-prev{
left: calc(50% + 295px);
right: auto;
bottom: 14px;
}
.swiper-design .swiper-button-next{
left: calc(50% + 355px);
right: auto;
bottom: 14px;
}
.swiper-design .swiper-button-next::after,
.swiper-design .swiper-button-prev::after {
width: 31px !important;
height: 27px !important;
transition: all ease 0.4s;
}
.swiper-design .swiper-button-next:hover::after,
.swiper-design .swiper-button-prev:hover::after {
opacity: 0.6;
}
}