@charset "utf-8";

/* mobile----------------------------------------------------*/
@media screen and (max-width: 480px) {

.top_image {margin-bottom: 28px;}      
.catch {font-weight: bold; color: #39c; margin-left: 2%;
    font-size: 3.5vw; font-family: serif; font-feature-settings:"palt";}    
    
.installation {width: 96%; margin: 0 0 20px 2%;}    
.installationL {width: 50%; margin-left: 25%;}    
.category_bar{background-color: #39c; color: #fff; font-size: 4.6vw; 
    font-weight: bold;
    line-height: 1.5; padding: 6px 0 0 18px; margin-bottom: 8px;}
.catch_copy{font-size: 3.4vw; line-height: 1.4; font-family: serif; 
    font-feature-settings:"palt"; margin-bottom: 16px; color: #800000;}  

.giudance{font-size: 2.5vw; line-height: 1.3; width: 94%; margin: 0 0 24px 3%;}
.giudance dl{overflow: hidden; border-bottom:1px dashed #aaa; margin-bottom: 8px;}    
.giudance dt{float: left; width: 16%; text-align: center; line-height: 1.1;}     
.giudance dd{float: left; width: 82%; padding: 0 0 8px 2%;} 
.size70{font-size: 1.8vw;}      
     
.access{position: relative; width: 86%; padding: 50% 0 0; margin: 0 0 20px 7%;}
.access iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}      
    
    
}/* Tablet---------------------------------------------------*/
@media (min-width: 481px) and (max-width: 768px) {  

.top_image {margin-bottom: 32px;  position: relative; }    
.catch {position: absolute; top: 28%; left: 10%; width: 78%; font-weight: bold;
    font-size: 3vw; font-family: serif; font-feature-settings:"palt"; 
    background-color: #fff; padding: 12px; border-radius: 10px;}

.installation {overflow: hidden; width: 96%; margin: 0 0 32px 2%;}
.installationL {float: left; width: 27%;}
.installationR {float: right; width: 70%;}    
.category_bar{background-color: #39c; color: #fff; font-size: 2.6vw; 
    font-weight: bold;
    line-height: 1.5; padding: 6px 0 0 18px; margin-bottom: 8px;}       
.catch_copy{font-size: 2.4vw; line-height: 1.2; font-family: serif; 
    font-feature-settings:"palt"; margin-bottom: 12px;}    

.giudance{font-size: 2vw; line-height: 1.3; width: 84%; margin: 0 0 24px 8%;}
.giudance dl{overflow: hidden; border-bottom:1px dashed #aaa; margin-bottom: 8px;}    
.giudance dt{float: left; width: 16%; text-align: center; line-height: 1.1;}     
.giudance dd{float: left; width: 82%; padding: 0 0 8px 2%;} 
.size70{font-size: 1.2vw;}      
    
.access{position: relative; width: 86%; padding: 50% 0 0; margin: 0 0 20px 7%;}
.access iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}      
    
    
}/* PC-------------------------------------------------------*/
@media print, screen and (min-width: 769px) {
  
.top_image {width: 100%; position: relative; margin-bottom: 48px;}
.catch {position: absolute; top: 38%; left: 8%; width: 80%; font-weight: bold;
    font-size: 32px; font-family: serif; font-feature-settings:"palt"; 
    background-color: #fff; padding: 12px 0 12px 24px; border-radius: 10px;}

.installation {overflow: hidden; width: 980px; margin: 0 0 24px 50px;}
.installationL {float: left; width: 25%;}
.installationR {float: right; width: 70%;}    
.category_bar{background-color: #39c; color: #fff; font-size: 1.6vw; 
    font-weight: bold;
    line-height: 1.5; padding: 6px 0 2px 18px; margin-bottom: 12px;}       
.catch_copy{font-size: 20px; line-height: 1.6; font-family: serif; 
    font-feature-settings:"palt"; margin-bottom: 16px;}    

.giudance{font-size: 16px; line-height: 1.3; width: 640px; margin: 0 0 48px 200px;}
.giudance dl{overflow: hidden; border-bottom:1px dashed #aaa; margin-bottom: 8px;}    
.giudance dt{float: left; width: 17%; text-align: center; line-height: 1.1;}     
.giudance dd{float: left; width: 80%; padding: 0 0 8px 3%;} 
.size70{font-size: 11px;}     
    
.access{position: relative; width: 70%; padding: 50% 0 0; margin: 0 0 20px 15%;}
.access iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}   
    
    
    
}