﻿@charset "utf-8";
/* CSS Document */





/*===============================================
●全体の装飾
===============================================*/
/* ------------- スクロールフェードインDown用 ------------- */
.fadeInDown {
-webkit-animation-fill-mode:both;
-ms-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-ms-animation-duration:1s;
animation-duration:1s;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(20px); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
/* ------------- スクロールフェードインDown用 END ------------- */ 

body {
  /*フォントの指定*/
  font-family: '小塚ゴシック Pr6N', 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Noto Sans Japanese', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
margin: 0;
 box-sizing: border-box;    
}

a {
  color: darkred;
  text-decoration: none;
}

a: hover {
    color: skyblue;
    text-decoration: none;
    font-weight: bold;
}

nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin-top: 30px;
    margin-bottom: 20px;
    padding: 0;
    text-align: center;
}

nav li {
	flex: 1 0 auto;
}
nav li a {
    text-decoration: none;
    text-align: center;
    width: 100%;
}
nav a:hover {
    background-color: #f7f7f7;    
}


#cont00{
width:50%;
float:left;	
}

.box00{
width:30%;
margin-left: 50px;
padding:20px 10px 10px 5px;
}

.box00 img{
width:100%;
padding:20px 10px 10px 50px;
float:left;
}

#cont01{
width:50%;
height:780px;
float:left;	
}

.box01{
width:236px;
height:75px;
padding:50px 270px 50px 0px;
float:right;
}

.box01_bar{
display:none;
}

.box02{
padding:50px 23px 0px 80px;
	float:right;
	clear:both;
	white-space: nowrap;
}


.box03{
padding:10px 120px 50px 80px;
	float:right;
	clear:both;
	white-space: nowrap;
    font-size: 20px;
}

.box04{
width:auto;
height:50px;
	float:right;
	margin: 0 60px 0 10px;
	clear:both;
	
}

.box05{
width:auto;
height:50px;
	float:right;
	margin-right: 9px;
	
}

.cursor-pointer{
	cursor: pointer;
}

.qa-btn {
	
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
   height: 51px;
    width: 378px;
    font-size:23px;
   padding-top: 5px;
	padding-bottom: 2px;
    text-decoration:none;
    display:block;
    text-align:center;
    margin: 17px 120px 0 0;
    color:#FFFFFF;
	background-color:#B50000;
	
    float: right;
    clear: both;
	border-radius: 7px;
}

.qa-btn:hover {
	background-color: #9F0101;
}

.qa-btn2 {
   
     border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
   height: 51px;
    width: 378px;
    font-size:23px;
   padding-top: 5px;
	padding-bottom: 2px;
    text-decoration:none;
    display:block;
    text-align:center;
    margin: 17px 120px 0 0;
    color:#FFFFFF;
	background-color:#B50000;
	margin: 0 auto;
    clear: both;
	border-radius: 7px;
}

.qa-btn2:hover {
	background-color: #9F0101;
}

.btn-margin-adjust{
	margin-top: 96px;
}

@media screen and (max-width: 1023px){
.qa-btn {
    
   margin: 0 auto;
   
    
   margin-top: 17px;
    
}

.qa-btn:hover {
	background-color: #9F0101;
}
}

@media screen and (max-width:600px){
	.btn-margin-adjust {
    margin-top: 88px;
}
	.qa-btn2 {
		font-size: 18px;
   height: 42px;
    width: 299px;
   
}
}

.announce1{float:right;
	width:100%;
height:50px;
	

}

.text_announce1{padding:10px 155px 0px 0px;
float: right;
}


#cont02{
width:50%;
height:780px;
	float:right;

}
.loopinside1{height: auto;
width: 214px;
	float: right;
	padding-right: 40px;
}

.boxloop1{
overflow: hidden;
	width:50%;
height:100%;
	float: left;
	padding:0px 0px 0px 0px;
}

.loopinside2{height: auto;
width: 214px;
}

.boxloop2{
	width:50%;
height:100%;
	float:left;
	padding:0px 0px 0px 0px;
	overflow: hidden;
}

.loop_wrap1 {
 
  padding:0px 0px 0px 0px;
  overflow: hidden;
}

ul.list1 li{margin-bottom: 40px;
 list-style: none;
}

	


.loop_wrap2 {
 
padding:0px 0px 0px 0px;
  
  overflow: hidden;
	
}

.loop_wrap img {

	
  
  
}

@keyframes loop {
  0% {
    transform: translateY(101%);
  }
  to {
    transform: translateY(-99.5%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateY(-0.5%);
  }
  to {
    transform: translateY(-200%);
  }
}


@keyframes loop3 {
  0% {
    transform: translateY(101%);
  }
  to {
    transform: translateY(-99.5%);
  }
}

@keyframes loop4 {
  0% {
    transform: translateY(-0.5%);
  }
  to {
    transform: translateY(-200%);
  }
}

.loop_wrap1 img:first-child {
  
    animation: loop 50s -25s linear infinite;
   
    backface-visibility: hidden;
    will-change: transform;
}

.loop_wrap1 img:last-child {

    animation: loop2 50s linear infinite;
	
}


.loop_wrap2 img:first-child {
  animation: loop3 50s -25s linear infinite;
}

.loop_wrap2 img:last-child {
  animation: loop4 50s linear infinite;
}


#cont06_01{
    display: none;
    
}


/* 小さくしたとき */
#cont03{
	width:100%;
	height:530px;
	
}


.box07_01{
text-align: center;
	margin-top: 30px; 
}

.box07{
text-align: center;
	margin-top: 0px; 
    display: none;
}

.box08{text-align: center;
padding: 70px 0px 0px 0px;
    

	 font-size: 34px;
}

.box09{text-align: center;
padding: 0px 0px 0px 0px;
	white-space: nowrap;
}

.inside3{width:50%;
	height: 50px;
    float: left;
	padding: 30px 0px 0px 0px;
	
}

.box10{
width:auto;
height:50px;
	float: right;
	margin: 0px 10px 0px 0px;
}

.inside4{width:50%;
padding: 30px 0px 0px 0px;
	height: 50px;
	float: left;

}

.announce3{float:right;
	width:100%;
height:50px;
    box-sizing: border-box;
	

}

.text_announce3{
text-align: center;
	padding: 5px 0px 0px 0px;
}


.box11{
width:auto;
height:50px;
	float:left;
		margin: 0px 0px 0px 10px;
}

#cont15{
    width:50%;
	padding-top: auto;
	height:200%;
    float:left;
    height:700px;
    border-top: solid;
    border-color: darkred;
    border-width: 1px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/* 小さくしたとき */
#cont04{
	width:100%;
	height:780px;
	clear:both;
}

.box12{
overflow: hidden;
	width:auto;
height:780px;
	padding:0px 0px 0px 0px;
text-align: center;
	/*padding: 0px 180px 0px 0px;*/
		/*object-fit: cover;*/
	
}


#cont14{
    display:none;
}

#cont14_02{
    display:none;
}


#cont05{
	width:45%;
	background:#B50000;
	height:616px;
	float:left;
}

.box13{
	float:right;
	padding:35px 40px 50px 20px;
	
}
#sugutsuka{
	width:55%;
	background:#B50000;
	height:616px;
	float:left;
}


.inside_box{
	width: 100%;

	
	
}

.box14{
	padding:194px 0px 0px 0px;
white-space: nowrap;
	margin:0 auto;
	width:30%;

}

.inside_box2{
	display: inline-block;
margin: 0 auto;
	width:100%;
}


.coupon{font-size: 34px;
	white-space: nowrap;
line-height: 2.7rem;
}

.box15{white-space: nowrap;
	padding:30px 0px 0px 0px;
	line-height: 1.7rem;
	width:30%;
	margin:0 auto;
	}

.inside_box3{
clear: both;
}

.coupon2{
	font-size: 34px;
	white-space: nowrap;
	padding:30px 75px 0px 0px;
	text-align: center;
}

.coupon3{
	white-space: nowrap;
	padding:0px 160px 0px 0px;
	text-align: center;
}

.coupon4{
	font-size: 34px;
	white-space: nowrap;
	padding:40px 0px 0px 0px;
	line-height: 1.5em;
	text-align: center;
}

.coupon5{white-space: nowrap;
	padding:10px 100px 0px 0px;
	
	text-align: center;}

#cont06{
	width:100%;
	background:#B50000;
	height:227px;	
	float: right;
}

.box16{
	text-align: center;
	padding:35px 0px 0px 20px;
	font-size: 32px;
	white-space: nowrap;
	}

.box17{
	text-align: center;
    font-size: 15px;
	white-space: nowrap;
	line-height: 1.3em;
	padding:15px 0px 0px 20px;
	}

.omise{font-size: 32px;
white-space: nowrap;
	text-align: center;
	line-height: 1.3em;
	padding:25px 0px 0px 0px;
}

.inshoku{text-align: center;
	white-space: nowrap;
padding:10px 0px 0px 0px;
}

.jitaku{text-align: center;
	padding:35px 0px 0px 20px;
	font-size: 32px;
	white-space: nowrap;
line-height: 1.3em;
}

.chirashi{
	text-align: center;
	white-space: nowrap;
padding:10px 0px 0px 0px;
	
}



#cont07{
	width:50%;
	background:#FFFFFF;
	height:678px;
	float:left;
	border-bottom: solid #000000;
	
}

.insideposition2{
}

.box19{
padding:174px 180px 0px 0px;
	float:right;
    text-align: left;
    white-space: nowrap;
    margin: 0 auto;
    line-height: 3.2rem;
	font-size: 30px;
}
.box20{
	padding:0px 253px 0px 0px;
float:right;
	white-space: nowrap;
	clear: both;
}

.btn-download{
	float:right;
	width:100%;
	margin-top:29px;
}

.inside1{
	width:auto;
	height:50px;
	float: right;

	
	
}

.box21{
width:auto;
height:50px;
float: right;
	
margin:0px 52px 0px 0px;
	
}

.inside2{
	width:auto;
	height:50px;
	float: right;

}

.box22{
width:auto;
height:50px;
	
	
	margin:0px 19px 0px 5px;
}

.announce2{float:right;
	width:100%;
height:50px;
	

}

.text_announce2{text-align: center;
padding:10px 5px 0px 0px;
}


#cont06_02{
	display: none;;
	
}


#cont08{
	width:50%;
	background:#FFFFFF;
	height:678px;
	float:left;
	border-bottom: solid #000000;
}


.box23{
padding:10px 0px 0px 0px;
	text-align: center;
    min-width: 230px;
	
}

#cont09{
	width:100%;
	background:#FFF;
	height:860px;
	float:right;
}

.box24{text-align: center;
white-space: nowrap;
	font-size: 33px;
	line-height: 3.3rem;
	padding:40px 0px 0px 20px;
}

.box25{text-align: center;
white-space: nowrap;
	padding:8px 0px 0px 20px;
}

.inside5{
	width:50%;
     height:50px;
	float:left;
	margin:25px 0px 0px 0px;
}

.box26{
width:auto;
height:50px;
float:right;
margin: 0px 10px 0px 0px;
}
.inside6{
	width:50%;
     height:50px;
	float:left;
	margin:25px 0px 0px 0px;
}

.box27{
width:auto;
height:50px;
float:left;	
	margin: 0px 0px 0px 10px;
}

.box28{
    margin: auto;
    width: 90%;
    text-align: center;
	clear:both;
	padding:10px 0px 0px 0px;
}


.announce4{float:right;
	width:100%;
height:50px;
	

}

.text_announce4{
text-align: center;
	padding: 5px 0px 0px 0px;
	white-space: nowrap;
}


#cont10{
	width:50%;
	background:#FFF;
	height:312px;
	float:left;
}

.insideposition3{float: right;
padding: 0px 100px 0px 0px;
}

.box29{
text-align: center;
	padding: 20px 69px 0px 0px;
}

.box30{
	white-space: nowrap;
}

.copyright{text-align: center;
            padding: 0px 92px 0px 0px;}


#cont11{
	width:15%;
	background:#FFF;
	height:312px;
	float:left;
	margin: 45px 0px 0px 0px;
	
}



#cont12{
	margin: 45px 0px 0px 0px;
	width:35%;
	background:#FFF;
	height:312px;
	float:left;
	
}

.inside_box4{padding: 0 0 0 38px;}

.inside9{
	width:100%;
		clear: both;
}

.inside10{
	float: left;
	width: 50%;
	height: auto;
white-space: nowrap;
	font-size: 15px;
}

.inside11{
	float:left;
	width: 70%;
	height: auto;

}

.box35{

}
.box36{

	clear: both;
}

.box37{

clear:both;
}

.box38{


}

.box39{

clear:both;
}

.box40{

	
}

.box41{

	clear:both;
}

.box42{
float:left;
	
}

#cont13{
	width:100%;
	padding-top: 30px;
	height:200px;
	clear:both;
}

#cont14{
	display: block;
    width:100%;
	padding-top: auto;
	clear:both;
    text-align: center;
    background-color: #FAFAFA;


}


#cont14_02{
	display: block;
    width:100%;
	padding-top: auto;
	clear:both;
    margin: auto;
    text-align: center;
    box-sizing: border-box;

    
}



.inside7{
width:100%;
	float: left;
}

.text{
	white-space: nowrap;
}

.inside8{
width:50%;
	float: left;
}f

.text2{
width: 50%;
float: left;
	
	white-space: nowrap;
}

.box43{
    text-align: center;
    width: 50%;

}

.box44{text-align: center;
margin: 0px 0px 0 0px;

}

.box45{text-align: center;}

.box47{text-align: center;}

.box49{text-align: center;}

.box50{
float: right;
font-size: 33px;
line-height: 3.3rem;
width: auto;
height: auto;
padding-right: 80px;
}

#cont16{
width:50%;
height:700px;
float:right;
border-top: solid;
border-color: darkred;
border-width: 1px;
display: flex;
justify-content: center;
align-items: center;
}

#explanation{
    width: 110%;
    padding-right:50px;
    max-width: 650px;
}

#explanation_01{
    width: 100%;
    margin: 0 auto;
    max-width: 650px;
    padding-bottom: 10px;
}


.copyright2{text-align: center;
            padding: 0px 0px 0px 0px;}

/*===============================================
●PC・タブレット横型　画面の横幅が1024px以上
===============================================*/
@media screen and (min-width: 1024px){
/*
body{
	background:#FF8080;
}/* 確認用背景色 */
	
#wrapper{
	width:100%;
	margin:0 auto;
}
    
#cont03{
	display:none;
}

#cont04{
	display:none;
}
#cont06{
	display:none;
}

#cont09{
	display:none;
}

#cont13{
	display:none;
}	

#cont14{
	display:none;
}

#cont14_02{
	display:none;
}

.copyright2{display: none;}	
	
}

/*===============================================
●タブレット 画面の横幅が1023pxまで
===============================================*/
@media screen and (max-width: 1023px){

/*body{
	background:#8080FF;
} 確認用背景色 */

#wrapper{
	width:100%;
}

#cont01{
	display:none;
}

#cont02{
	display:none;
}    
    
#cont05{
	display:none;
}
	
#cont07{
	display:none;
}
	
#cont08{
	display:none;
}

#cont10{
	display:none;
}	
	
	
#cont11{
	display:none;
}	

#cont12{
	display:none;
}

#cont13{
	width: 100%;
}


#cont15{
	display:none;
}

#cont16{
	display:none;
}


.box23{
    width:50%;
    margin: auto;
    }    
    
#sugutsuka{display: none;
    }
	
    
#cont06_01{
    display: block;
    background: #B50000;
    text-align: center;
    float:left;
    width: 100%;
    font-size:23px;
    padding:50px 0px 0px 0px;
    box-sizing: border-box;
    font-size:33px;
}		

#cont06_02{
    display: block;
    height:450px;
    float:left;
    width: 100%;
    background: #B50000;
    background: #B50000;
    box-sizing: border-box;
    padding-left: 0px;
}		
	    
.box43{
    width:50%;
    margin: auto;
}   
    
}

/*===============================================
●スマートフォン　画面の横幅が600pxまで
===============================================*/
@media screen and (max-width:600px){


/*body{
	background-color: blue;
} 確認用背景色*/

#wrapper{
	width:100%;
}
    
#cont03{
	width:100%;
    height:px;
    margin-top: 0;
    background-image: url(img/top_img2.png);
    box-sizing: border-box; 
    background-position: 0 0;
    -webkit-animation: bgroop 50s linear infinite;
    animation: bgroop 50s linear infinite;
}

@-webkit-keyframes bgroop {
    from {
        background-position: 0  0;
    }
    to {
        background-position: 0 -900px;
    }
}
@keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 -900px;
    }
}

       
    
.box07_01{
display: none; 
}    

.box07{
    display: block;
    width:100%;
height:auto;
padding:0px 0 0px 0px;    
box-sizing: border-box; 
    }
    
.box08{
    font-size: 35px;
    color: white;
    float:left;
    text-align: left;
    margin-top: 65px;
    padding: 10px 0 10px 10px;
     box-sizing: border-box; 
    }

    
.box09{
    width: 100%;
    text-align: left;
    font-size: 18px;
    color: white;
    float: left;
    padding-left: 10px;
    box-sizing: border-box; 

}
	
	
.text{
width: 50%;
float: left;
white-space: nowrap;
}
	
.box24{
		font-size:23px;
		line-height:2rem;
        text-align: left;
        margin: 0 auto;
}

.copyright2{
    padding: 0px 0px 0px 0px;
}
	
.inside3{
width:130px;
margin: 10px 2px 0px 10px;
float: left;
}
    
.inside4{
width:130px;
margin: 10px 2px 1px 10px;
float: left;
}   

  
.btn-margin-adjust{
margin-left:10px;    
    }
    
.qa-btn2{
float: left;
margin-top: px;
padding: 10px;
width: 270px;;
        
    }

.announce3{
display:block;
    float: left;
width: 100%;
padding: 10px;
    }

.text_announce3{
display:block;
text-align: left;
color: white;
font-size:10px;    
    }    
    
.box10{
height: auto;
margin: 0px 2px 0px 0px;
float: left;
width:100%;
}
    
.box11{
height: auto;
margin: 0px 0px 0px 0px;
float: left;
width: 100%;
    }	

.box12{
width: 100%;
height: 43px;
margin: 0px 0px 0px 2px;
}	

    
.box26{
height: 43px;
margin: 0px 2px 0px 0px;
}

.box27{
height: 43px;
margin: 0px 0px 0px 2px;
}	
	
#cont04{
	display: none;
    width:100%;
	height:600px;
	margin-bottom: 8px;
	clear:both;
}
	
	
.box12{
padding: 0px 0px 0px 0px;
width:100%;
height: 100%;
text-align: center;
	padding: 0px 0px 0px 0px;
		/*object-fit: cover;*/
}
	
	
.set{
width:auto;
height:100%;
}
	
#cont09{
height: 730px;
    }


#cont06_01{
    display: block;
    text-align: left;
    background: #B50000;
    float:left;
    width: 100%;
    font-size:23px;
    padding:50px 0px 0px 25px;
    box-sizing: border-box;
    margin: 0 auto;
    
}

       
#cont06{
	height:350px;
    float:left;
    width: 60%;
    
}

#cont06_02{
	display: block;
    height:500px;
    float:left;
    width: 100%;
    background: #B50000;
    box-sizing: border-box;
}
    
    

.box16{
font-size: 23px;
width: 100%;
float: left;
margin-top:50px;
text-align: left;
	}

.box17{
font-size: 15px;
float: left;
width:100%;
text-align: left;
padding-left: 0px
	}
    
.box23{
display: block;
text-align: center;
float:center;
width:70%;
max-width: 250px;
height:auto;
margin:auto;
}    

    
.box28{
text-align: center;
clear:both;
width:80%;
height:auto;
padding:20px 0px 0px 0px;
display:none;
}

    
.box13{
width:120%;
height:auto;
}	
    


#cont09{
    margin-top: 10px;
    
}
    


.box25{
text-align: left;
float:left;
width:80%;
height:100%;
padding:0px 0px 0px 20px;
}    
    
.inside5{
width:150px;
height: 43px;
margin: 10px 2px 0px 10px;
float: left;
}
    
.inside6{
width:150px;
height: 43px;
margin: 10px 2px 0px 10px;
float: left;
}   
    

    

.omise{font-size: 22px;

}

.inshoku{font-size: 12px;
padding:6px 0px 0px 12px;
}

.jitaku{text-align: center;
	
	font-size: 22px;

}
.chirashi{
font-size: 12px;
padding:6px 0px 0px 12px;	
}
	.text{font-size: 14px;}
	
	.box45{text-align: left;}
	
	.box49{text-align: left;}
	
	
#cont05{
	width:45%;
	background:#B50000;
	height:616px;

}

#cont09{
	height:auto;

}

.img{
width:40%;
height:auto;
float:center;
margin-left:40px;
    }	

    
.box43{
float: left;
width: 60%;
margin-left: 10px;
    }

.box44{
float: left;
width: 90%;
text-align: left;
padding: 10px;
margin-left: 10px;
    
    }
.copyright2{
width: 90%;
float: left;
text-align: left;
padding: 10px;
margin-left: 10px;
    }

#explanation{
        width: 90%;
        padding-right: 1px;
        margin: 0 20px;
}    

#explanation_01{
        width: 90%;
        margin: 0 auto;
}    
    
    
    }

/*===============================================
●全体の装飾であっても後に書けば変更できる
===============================================*/
