@charset "UTF-8";

/* 全体の設定 */
body{font-family:"Sawarabi Mincho";padding-top:80px;}
section{overflow:hidden;width:100%;}
mark{background:#f7f011;}

.title a:hover{text-decoration: none;opacity:0.6;}

/* 背景色の設定 */
.bg-yellow{background:#f8fb5429;}
.card-header{background:#ffcbef;}
.toast{background-color: initial;}

/* カードの丸み */
.card-box{border-radius:0.4rem;}

/* イメージのサイズ */
.w-90{width:85%!important;}
.w-75{width:70%!important;}
.w-25{width:12%!important;}

/* テキストのサイズ */
.material-icons{font-size:18px!important;}
.sub_text{margin:1.5%;}
.inner_text{font-size:90%;}
.inner_text3{line-height:1.3;}

/* ボタンのサイズ */
.line_img2{width:69%;}
.tel-btn{padding-top:0.35%;}
.w-50{width:16%!important;}

/* ボタンの効果 */
.reflection::after {
  content: "";
  display: block;
  width: 30px;
  height: 100%;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #FFF;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflect 4s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflect 4s ease-in-out infinite;
}
@keyframes reflect {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflect {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

/* ボタンのホバー */
.line_img:hover{
transform: translateY(-5px);
transition: all .6s;
animation-timing-function:ease;}
.line_img2:hover{
transform: translateY(-5px);
transition: all .6s;
animation-timing-function:ease;}
.tel-btn:hover{
transform: translateY(-5px);
transition: all .6s;
animation-timing-function:ease;}
.store_img:hover{
transform: translateY(-7px);
transition: all .6s;
animation-timing-function:ease;
opacity: 0.6;}


/* 見出しタイトルの装飾 */
h2::before{
  content:'|';
  padding-right: 1.5%;}
h2::after{
  content:'|';
  padding-left: 1.5%;}

/* ヒーローイメージの設定 */
.d-inline-block{padding:2rem;
background-color:rgba(15,10,33,0.1);
border-radius: 0.4rem;
}
.filter{padding-right:2%;}
.jumbotron{
background-image: url("img/mv_img02.jpg");
background-size: cover;
background-position: center 0;
background-repeat: no-repeat;
}
.jumbotron{
filter: blur(10px);
animation-name: blur;
animation-duration: 2.2s;
animation-fill-mode:forwards;
}
@keyframes blur {
0%{filter: blur(10px);}
100%{filter: blur(0);}
}

/* ヒーローテキストの設定 */
.inner_text1{
animation-name: fadein2;
animation-duration: 1.5s;
animation-fill-mode:forwards;
}
@keyframes fadein2{
0%{opacity: 0;transform: translateX(-100px);}
100% {opacity: 1;transform: translateX(0);}
}

/* h1タイトルの設定 */
.navbar-brand{
animation-name: fadein3;
animation-duration: 1.2s;
animation-timing-function: ease-out;
animation-fill-mode:forwards;
}
@keyframes fadein3{
0%{opacity: 0;transform: translateY(-100px);}
100% {opacity: 1;transform: translateY(0);}
}

.line-box{
animation-name: fadein4;
animation-duration: 3.5s;
animation-timing-function: ease-out;
animation-fill-mode:forwards;
}
@keyframes fadein4{
0%{opacity: 0;transform: translateY(0px);}
100% {opacity: 1;transform: translateY(0);}
}

/* フェードイン */
.fadein{
opacity: 0;
transform : translate(0, 50px);
transition : all 0.8s;
}
.fadein.scrollin{
opacity: 1;
transform: translate(0, 0);
}

/*マーカーアニメーション*/
 
.marker.active{
background-position: -100% .5em;
}
.marker{
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-repeat: repeat-x;
background-size: 200% .8em;
background-position: 0 .5em;
transition: all 2.4s ease;
font-weight: bold;
}

/* faqのCSS */ 
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #fff;
overflow: hidden;
}
.tab-uno{color:#000;}
input {
position: absolute;
opacity: 0;
z-index: -1;
}
label {
position: relative;
display: block;
margin: 0 auto;
padding: 0 0 0 1em;
background: #000;
font-weight: bold;
line-height: 3;
cursor: pointer;
background-color:#dee2e6;
}
.tab-content {
max-height: 0;
margin: 0 auto;
overflow: hidden;
-webkit-transition: max-height .35s;
-o-transition: max-height .35s;
transition: max-height .35s;
color: #000;
}
.tab-content p{
color:#000;
margin: 1em;
}
/* checked */
input:checked ~ .tab-content {
max-height: 100%;
}
/* Icon */
label::after {
position: absolute;
right: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
input[type=checkbox] + label::after {
content: "＋";
color:#000;
}
input[type=radio] + label::after {
content: "\25BC";
}
input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
transform: rotateX(180deg);
}

/* メディアクリエ */ 
@media screen and (min-width:320px) and (max-width:568px){
body{padding-top:68px;}
h2, .h2{font-size:1.35rem;}
h3{font-size: 1.4rem;}
.h4{font-size:1.1rem;}
.h5{font-size:1rem;}
.small{font-size: 60%;}
.line_img{display:none;}
.inner_text {font-size:75%;}
.navbar-light{padding:8px;}
.w-100 {width:85%!important;}
.text-success{font-size:92%;}
.tab{font-size:70%;}
.jumbotron{
background-position-x:-75px;
background-position-y:0;}
}

@media screen and (min-width:375px) and (max-width:667px){
h1{font-size:1.4rem!important;}
body{padding-top:70px;}
h2{font-size:2rem;}
h3{font-size:1.65rem;}
.h2{font-size:1.8rem;}
.h5{font-size:1rem;}
.text-success{font-size:100%;}
.tab{font-size:80%;}
.inner_text{font-size:85%;}
.inner_text2{font-size:1.6rem!important;}
.line_img{display:none;}
.navbar-light{padding:8px 10px 8px 10px;}
.w-100 {width:90%!important;}
.line-area{height:10%;}
.table{font-size:0.75rem;}
.jumbotron{
background-position-x:-40px;
background-position-y:0;}
}

@media screen and (min-width:320px) and (max-width:812px){
.line-area{height:9%;}
.line_img2 {width:80%!important;padding-top:0;}
.fixed-bottom{position:fixed;bottom:5px;left: 29%;right: 5px;}
}

@media screen and (min-width:414px) and (max-width:736px){
.h4{font-size:1.3rem;}
.h5{font-size:1rem;}
.table{font-size:0.9rem;}
.small{font-size:80%;}
.inner_text{font-size:92%;}
.w-100 {width: 90%!important;}
h1{font-size:1.4rem!important;}
.tab{font-size:90%;}
}

@media screen and (min-width:507px) and (max-width:767px){
.fixed-bottom{position: fixed;bottom: 5px;left: 52%;right: 5px;}
}

@media screen and (min-width:668px) and (max-width:767px){
.line_img{display:none;}
}

@media screen and (min-width:737px) and (max-width:767px){
.w-100{width:85%!important;}
}

@media screen and (min-width:768px) and (max-width:1024px){
body{padding-top: 74px;}
.main-text{font-size:1.3rem;}
.h2{font-size:2.5rem;}
h3{font-size:1.65rem;}
.card-box{width:30rem;}
.line_img2{width:68%!important;}
.mv-img1{margin-left:9%;margin-top:16%;}
.mv-img2{margin-top:15%;margin-left:-9%;}
.mv-img3{margin-top:15%;margin-left:9%;}

.line-box{height:10%;}
.w-100 {width: 85%!important;}
.table{font-size:1.1rem;}
.fixed-bottom{bottom:5px;right:0;}
}

@media screen and (min-width:810px) and (max-width:991px){
.fixed-bottom{bottom:5px;left:auto;}
}

@media screen and (min-width:1024px) and (max-width:1377px){
body {padding-top:77px;}
.line_img{display:block;margin-left:30%;}
.table{font-size:1.2rem;}
.mv-img1{margin-left:0%;margin-top:0%;}
.mv-img2{margin-top:0%;margin-left:0%;}
.mv-img3{margin-top:0%;margin-left:0%;}
.jumbotron{
background-position-x:0px;
background-position-y:-30px;}
}

@media screen and (min-width:1024px) and (max-width:1980px){
.h2{font-size:3rem;}
.card-box{width:initial;}
.card-body-box{padding-top:3%;padding-bottom:3%;}
}

@media screen and (min-width:1375px) and (max-width:2500px){
.line_img{display:block;margin-left:30%;}
}