/*
Theme Name: 館下輪店
Theme URI: 
*/


/* ＰＣスタイル*/















/*
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
*************************************************************************************************************/




/* ＰＣスタイル*/




@charset "utf-8";

@media (min-width: 997px)  {

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}


body	{


}



/* リンク設定
------------------------------------------------------------*/
a{
margin:0;
padding:0;
text-decoration:none;
outline:0;
vertical-align:baseline;
background:transparent;
font-size:100%;

}

a:hover, a:active{
-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-o-transition:opacity 1s;
outline: none;
color:#999;
}

.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=40);
  -ms-filter: "alpha(opacity=40)";
}


.alpha a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=40);
  -ms-filter: "alpha(opacity=40)";
}

/**** Clearfix ****/
nav .panel:after, nav#mainNav:after, .newsTitle:after, .bg:after,.post:after{content:""; display: table;clear: both;}
nav .panel,nav#mainNav,.newsTitle,.bg, .post{zoom: 1;}



.list-mv07{
	opacity: 0;
	transform: translate(0,0px); 
	-webkit-transform: translate(0,0px); 
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}



/*--------------------------*/
/*すぐフワ*/
.sugu_huwa{
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
/*----スピード調整はこちらで----*/
-webkit-animation-duration:2.5s;
 -ms-animation-duration:2.5s;
 animation-duration:2.5s;
 -webkit-animation-name: fadeInDown5;
 animation-name: fadeInDown_sugu;
 visibility: visible !important;/*ここ重要*/
}


@-webkit-keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}
@keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}



/*-----------*/

.animation {
}

.animation2 {
}

.animation3 {
}

.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: fadeInDown5;
 animation-name: fadeInDown5;
 visibility: visible !important;/*ここ重要*/
}
@-webkit-keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}




/*可視で横からフワ*/

.inst_fade_left{
}
/*---↑これは不使用----jsファイル anime_huwa.js内にinst_fade_leftクラスにinst_fadeのクラスを追記する記述あり-----------------*/


.inst_fade{

	animation-name:yuragifadein;
	animation-duration:1s;
	animation-fill-mode:forwards;
	visibility: visible !important;
	animation-delay:0.3s;
	opacity: 0;
}


@keyframes yuragifadein {
from {
opacity: 0;
    filter: blur(10px);
	transform: scale(1.02);
    transform: translateY(50px);
	transform: translateX(50px);
}
to {
opacity: 1;
    filter: blur(0);
	transform: scale(1);
    transform: translateY(0px);
	transform: translateX(0px);
}
}


/* ヘッダー
*****************************************************/

#midashi {
margin:0px;
	
	
	color:#FFFFFF;
	background-color:#59775F;
	width:100%;
	padding:0;
}


#midashi h1{
	font-size:9px;
	margin:0px;
	padding:0;
}

#unit_header_3{
width:100%;
height:auto;

}

.inner03{
position:relative;
width:1080px;
height:100px;
margin-left:auto;
margin-right:auto;
padding-top:20px;

}

#info_box{
width:300px;
height:100px;

position:absolute;
top:30px;
left:528px;

}

.bun001{
font-size:18px;
letter-spacing:0.2em;
}

.bun002{
font-size:14px;
}


#info_box2{
width:200px;
height:30px;
background-color:#59775F;
color:#FFFFFF;
padding-top:5px;

position:absolute;
top:40px;
left:800px;
text-align:center;


}

#info_box2 a{
color:#FFFFFF;
}

#info_box2 a:hover{
text-decoration:underline;
}



#head_section01{
position: -webkit-sticky;
position: sticky;
top: 0;
z-index:10;

}



/*---メニュー---------*/

#head_menu{
width:100%;
height:auto;
background-color:#59775F;
}


#head_inn{
display: flex;
justify-content: center;
width:1080px;
margin-left:auto;
margin-right:auto;
}

#head_inn li{
position: relative;
list-style-type: none;
padding-top:10px;
padding-bottom:10px;
text-align: center;
}

#head_inn li a{
display : block;
	color : #fff;
      
        font-size : 14px;
		
		
padding:5px 40px 5px;
border-left:1px dashed #fff;
border-right:1px dashed #fff;
}


#head_inn li+ li a{
border-left:0;
border-right:1px dashed #fff;
}


/*-------------------------------*/

#main_gazou{
width:100%;
height:auto;
position:relative;
z-index:5;
}


#main_gazou img{
width: 100%;
 height:calc(100vh - 140px);
  object-fit: cover; /* この一行で縦横比維持しはみ出た分カット */
}



#pc_mobile_gazou{
display:none;
}


/* ぼかしから出現 */
.blur3{
	animation-name:blurAnime3;
	animation-duration:3s;
	animation-fill-mode:forwards;
	visibility: visible !important;
}

@keyframes blurAnime3{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}


#mi_setumei01{
position:absolute;
width:800px;
height:auto;
top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%)!important;

color:#FFFFFF;
text-align:center;
}


/*---------枠アニメーション-----------------*/
.stroke {

  max-width: 800px;
  height: 250px;
  position: relative;
}

.stroke .border {
  content: "";
  position: absolute;
  opacity: 0;
}
.stroke .border.top,
.stroke .border.bottom {
  width: calc(100% - 20px);
}
.stroke .border.top {
  border-top: 3px solid #fff;
  right: 0;
  top: 0;
}
.stroke .border.bottom {
  border-bottom: 3px solid #fff;
  left: 0;
  bottom: 0;
}

.stroke .border.right,
.stroke .border.left {
  height: calc(100% - 20px);
}
.stroke .border.right {
  border-right: 3px solid #fff;
  right: 0;
  top: 0;
}
.stroke .border.left {
  border-left: 3px solid #fff;
  left: 0;
  bottom: 0;
}

.stroke.is-animated .border {
  opacity: 1;
}

.stroke.is-animated .border.top,
.stroke.is-animated .border.bottom {
  animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.stroke.is-animated .border.right,
.stroke.is-animated .border.left {
  animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes stroke-width {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: calc(100% - 20px);
    opacity: 1;
  }
}

@keyframes stroke-height {
  0% {
    height: 0;
    opacity: 1;
  }
  100% {
    height: calc(100% - 20px);
    opacity: 1;
  }
}


/*-------------------------*/


#top_abus_box0{
position:absolute;
width:100%;
top: 35%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%)!important;
z-index:90;


}

#top_abus_box0 h2{
font-size:34px;
letter-spacing:0.2em;
margin-top:25px;

}


#top_abus_box0 p{
font-size:28px;
}


/*---------------*/

.line {
  display: block;
  position: relative;
}
.line::after {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  content: '';
  display: block;
  height: 1px;
  width: 0;
  transform: translateX(-50%);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  position: absolute;
  bottom: 0;
  left: 50%;
}
.line.is-animated::after {
  width: 100%;
}


/*------------------------------------------------------------------------------
  visual
------------------------------------------------------------------------------*/

.visual {
  
  margin: auto;
  position: relative;
  width: 862px;
  height: 460px;
  z-index:100;
}

.visual .mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.visual .mask.normal {
 color:#FFFFFF;
}

.visual .mask.burn {
  color:#FFFFFF;
}

.visual .txt {
  font-size: 0;
  line-height: 1;
  position: absolute;
  top: 85px;
  left: 40px;
}

.visual .line {
  display: block;
  font-family: "Josefin Sans";
  font-size: 80px;
  font-weight: bold;
}

.visual .line + .line {
  margin-top: 15px;
}

.visual .line,
.visual .letter {
  opacity: 0;
}

.visual .letter {
  display: inline-block;
  padding-top: 5px;
}

.visual .large {
  font-size: 100px;
}

.visual.is-visible .line {
  opacity: 1;
}

.visual.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}



/*----事業説明-------*/

#top_setumei{
width:100%;
max-width:1028px;
height:auto;
margin-right: auto;
margin-left: auto;
position:relative;
z-index:10;

 
}


#top_setumei_ware{
position:relative;
width:100%;
height:auto;
z-index:5;
}



#top_setumei_gear{
position:absolute;
width:30%;
height:auto;


}

#top_setumei_gear img{
width:100%;
height:auto;

}

.gear_01{
top:0;
}

.gear_02{
top:-50px;
right:0;
}



#top_setumei_clum{
width:100%;
height:auto;
text-align:center;
margin-top:100px;
}


#top_setumei_clum img{
width:30%;
height:auto;
}

#top_setumei_clum h2{
font-size:24px;
margin-top:15px;
margin-bottom:15px;
letter-spacing:0.2em;
}

#top_setumei_clum p{
text-align:left;
text-indent:1em;
margin-bottom:3px;
line-height:2em;
}


/*--よこからバイク------*/
/*可視で横からフワ*/

.inst_fade_left{
}
/*---↑これは不使用----jsファイル anime_huwa.js内にinst_fade_leftクラスにinst_fadeのクラスを追記する記述あり-----------------*/


.inst_fade{

	animation-name:yuragifadein;
	animation-duration:1s;
	animation-fill-mode:forwards;
	visibility: visible !important;
	animation-delay:0.3s;
	opacity: 0;
}


@keyframes yuragifadein {
from {
opacity: 0;
    filter: blur(10px);
	transform: scale(1.02);
    transform: translateY(50px);
	transform: translateX(-550px);
}
to {
opacity: 1;
    filter: blur(0);
	transform: scale(1);
    transform: translateY(0px);
	transform: translateX(0px);
}
}



/*-----新着情報---------*/

#news_gazou_mob{
display:none;
}



#naname_box{
position:relative;
	display:block;
	width:100%;
	height:auto;
	clip-path:polygon(0 20%, 100% 0, 100% 100%, 0 100%);
	padding-bottom:50px;
	overflow:hidden;
	margin-top:100px;
}


#naname_box h2{
position:absolute;
top:50%;
  left:45%;
 
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
font-size:60px;
font-weight:bold;
color:#fff;

}


#naname_box img{
width:100%;
height:auto;
}

#osirase_box{
position:relative;
margin-bottom:200px;
width:100%;
height:auto;
z-index:5;

}



.info_title{
font-size:24px;
font-weight:bold;
text-align:center;
letter-spacing:0.2em;
}






#blog_time06{
margin-bottom:0px;


}






.thumb06{


}


.sekou_itiranhe{
margin-top:30px;
text-align:right;
}


#blog06{
width:968px;
margin-right: auto;
margin-left: auto;
position:relative;
z-index:10;
margin-top:50px;
}






.info_box_wara{
float:left;
text-align:center;
width: 300px;
height:300px;
padding:2px 0 40px;
background:none;
color:#222;
border:1px solid #cccccc;
border-radius: 5px;

}

.info_box_wara+.info_box_wara{
margin-left:30px;
}


/* 最新記事リンク */


#thumnail{
width:90%;
height:160px;
margin-right: auto;
margin-left: auto;
overflow:hidden;
background-color:#CC33CC;
margin-bottom:5px;
overflow:hidden;

}


#thumnail img{
width:100%;
height:auto;

}


ul h3{
margin-top:10px;
margin-bottom:15px;
padding:1px;
font-weight:normal;
font-size:100%;
text-align:center;
background:#fff;
border:1px solid #bcbcbc;
}

ul h3 span{
display:block;
padding:2px 3px;
background:#59775F;
color:#fff;
}

ul.thumb06 h3:hover{background:#f3f3f3;}

ul.thumb06 h3:hover span{background:#fff;
color:#000;}

#top_blog_bun06{
width:90%;
text-align:left;
margin-left:auto;
margin-right:auto;
margin-top:0px;
font-size:14px;
line-height:1.5em;
}


/* 固定背景画像用
*****************************************************/

.fixed-bg {
  height:auto;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  
  display: flex;
	align-items: center;
	justify-content: center;
  
  
}
 


#kaitori_box{
width:100%;
max-width:880px;
height:auto;
margin-right: auto;
margin-left: auto;
background-color:#59775F;
margin-top:100px;
margin-bottom:150px;
padding-top:0px;
padding-bottom:50px;
padding-left:30px;
padding-right:30px;
color:#FFFFFF;
}


#kaitori_box h2{
text-align:center;
font-size:20px;
border: 1px solid #fff;
width:200px;
padding:5px;
margin-bottom:20px;
margin-right: auto;
margin-left: auto;
}


#kaitori_box p{
line-height:2em;
height:200px;


}



#text_mid_wara{
width:100%;
height:auto;
margin-top:30px;


display: flex;
flex-wrap: wrap;
justify-content: space-between; 

}

#text_mid_box{
width:45%;
height:auto;
}

#text_mid_box img{
width:100%;
height:auto;
}







.bg02 {
 background-image:url(images/top_back2.jpg);
}



/*---会社概要-----------*/


#shop_info{
width:100%;
max-width:1028px;
height:auto;
margin-right: auto;
margin-left: auto;
margin-top:80px;

}

#shop_info_row{
width:100%;
height:auto;

display: flex;
flex-wrap: wrap;
justify-content: space-between;
}


#shop_gazou{
width:40%;
height:auto;
}

#shop_gazou img{
width:100%;
height:auto;
}


#shop_right{
width:55%;
height:auto;
}




#kaisya_box_1{

padding-top:0px;
width:100%;
height:auto;
margin-top:0px;
margin-left:auto;
margin-right:auto;
margin-bottom:50px;
padding-bottom:100px;


}

.kaisya_midashi{
text-align:center;
font-size:28px;
margin-bottom:30px;
color:#59775F;

}




#kaisya_box_1 table{

width:100%;
margin-left:auto;
margin-right:auto;
color:#333333;

border-width: 1px;
border-style: solid;
border-color:#CCC;
background-color:#FFFFFF;


}

.title1_3{


text-align:center;


}

#kaisya_box_1 table th{   /*���ڍs */
height:auto;
width:150px;

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;

border-right-width: 1px;
border-right-style: solid;
border-right-color:#ccc;

text-align: center;
vertical-align:middle;
}

#kaisya_box_1 table tr{   /*1�s */
	height:auto;



}

#kaisya_box_1 table tr:nth-child(1) {  /*nth-child(1)�͂P���(1�s�ځj�̈Ӗ� */




}

#kaisya_box_1 table td{   /*1�� */
height:auto;


vertical-align:middle;
padding-top:5px;
padding-bottom:5px;


}


#kaisya_box_1 table td span{
display:block;


}


#kaisya_box_1 table tr td:nth-child(1) {  /*nth-child(1)�͂P��ڂ̈Ӗ� */

text-align:center;
width:180px;
color:#333333;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;
padding-left:1em;
}

#kaisya_box_1 table tr td:nth-child(2) {  /*nth-child(2)��2�あああ�ڂ̈Ӗ� */

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;
padding-left:1em;

}



.kaisya_td01{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;
padding-left:1em;
}


.kaisya_td02{
text-align:center;
}

#company_map{
margin-top:50px;
}

.copyright{
width:100%;
height:auto;
text-align:center;
font-size:14px;
}




/*---------------*/
#contact_box{
width:100%;
max-width:1080px;
margin-right: auto;
margin-left: auto;
padding-top:100px;
text-align:center;
margin-bottom:20px;
box-sizing: border-box;
   position:relative;
   
    height: calc(100vh - 250px);


}

#contact_box h2{
margin-bottom:20px;

}



#contact_box p{
margin-top:20px;

}



/*-------ブログ-----------------------------*/


/*ブログ用ヘッド*/
#head_gazou_blog{
position:relative;
width:100%;
height:auto;
}


#sekou_title{
position:absolute;
top:50%;
left:50%;
  -webkit-transform: translateY(-50%) translateX(-50%); /* Safari用 */
   transform: translateY(-50%) translateX(-50%);/*ここで戻しているのがポイント*/
   text-align:center;

}


#sekou_title h2{
font-size:36px;
letter-spacing:0.2em;
margin-bottom:40px;
font-weight:bold;
}

#sekou_title p{
font-size:20px;
letter-spacing:0.2em;
}




#head_gazou_blog img{
width:100%;
height:auto;
}


/*--------アーカイブルページ-----------*/


.archive_info_box{
margin-bottom:30px;

}


#blog_archive{
width:100%;
height:auto;
max-width:600px;
margin-right: auto;
margin-left: auto;
margin-top:100px;
margin-bottom:400px;

}


.time_info span{
margin-left:2em;
}


/*--------シングルページ-----------*/
#content_single_blog{
margin-top:100px;
width:100%;
height:auto;
max-width:600px;
margin-right: auto;
margin-left: auto;
margin-bottom:100px;
}

#guran_column01{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}



.title_single{
font-size:28px;
margin-bottom:40px;
border-left-width: 6px;
border-left-style: solid;
border-left-color: #96AF5B;
padding-left:20px;
padding-top:5px;
letter-spacing:0.2em;
}

.dateLabel{
letter-spacing:0.2em;
text-align:right;
}


.post_blog{
margin-top:60px;
line-height: 2em;
margin-bottom:100px;
}


.post_blog img{
width:100%;
height:auto;
}


.pagenav a{
font-size:14px;
color:#999999;
}

.pagenav a:hover{
text-decoration:underline;
}




.info_link_blog{
position:relative;
  width:140px;
  height:30px;
  margin-right: auto;
margin-left: auto;
border: 2px solid #000;
padding:10px 15px;
margin-top:100px;


}

.info_link_blog a{
  display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	display: flex;
align-items: center;
justify-content: center;
	
color:#000;
transition: 0.5s;
}


.info_link_blog a:hover{
background-color:#666;
color:#000000;
transition: 0.5s;
}



/*-----サイドバー-------------*/

#sidebar_blog{
padding-top:50px;
}



#sidebar_blog span{
display:block;
}

#sidebar_blog li{
margin-bottom:5px;
}

#sidebar_blog li a{
font-size:14px;
color:#999999;
}


#sidebar_blog li a:hover{
text-decoration:underline;
}



.pagenav{
display: flex;
flex-wrap: wrap;
justify-content: space-around; 
}



.goto-top{
}




.page2_h1{
display: inline-block;
font-size:50px!important;
margin-bottom:30px;
padding-bottom:10px;
letter-spacing:0.2em;
font-family: 'Oswald', sans-serif;

}







}















































































































































@media (min-width: 5px) and (max-width: 996px) {



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}


body	{


}





/* リンク設定
------------------------------------------------------------*/
a{
margin:0;
padding:0;
text-decoration:none;
outline:0;
vertical-align:baseline;
background:transparent;
font-size:100%;

}

a:hover, a:active{
-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-o-transition:opacity 1s;
outline: none;
color:#999;
}

.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=40);
  -ms-filter: "alpha(opacity=40)";
}


.alpha a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=40);
  -ms-filter: "alpha(opacity=40)";
}

/**** Clearfix ****/
nav .panel:after, nav#mainNav:after, .newsTitle:after, .bg:after,.post:after{content:""; display: table;clear: both;}
nav .panel,nav#mainNav,.newsTitle,.bg, .post{zoom: 1;}



.list-mv07{
	opacity: 0;
	transform: translate(0,0px); 
	-webkit-transform: translate(0,0px); 
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}



/*--------------------------*/
/*すぐフワ*/
.sugu_huwa{
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
/*----スピード調整はこちらで----*/
-webkit-animation-duration:2.5s;
 -ms-animation-duration:2.5s;
 animation-duration:2.5s;
 -webkit-animation-name: fadeInDown5;
 animation-name: fadeInDown_sugu;
 visibility: visible !important;/*ここ重要*/
}


@-webkit-keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}
@keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}



/*-----------*/

.animation {
}

.animation2 {
}

.animation3 {
}

.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: fadeInDown5;
 animation-name: fadeInDown5;
 visibility: visible !important;/*ここ重要*/
}
@-webkit-keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}




/*可視で横からフワ*/

.inst_fade_left{
}
/*---↑これは不使用----jsファイル anime_huwa.js内にinst_fade_leftクラスにinst_fadeのクラスを追記する記述あり-----------------*/


.inst_fade{

	animation-name:yuragifadein;
	animation-duration:1s;
	animation-fill-mode:forwards;
	visibility: visible !important;
	animation-delay:0.3s;
	opacity: 0;
}


@keyframes yuragifadein {
from {
opacity: 0;
    filter: blur(10px);
	transform: scale(1.02);
    transform: translateY(50px);
	transform: translateX(50px);
}
to {
opacity: 1;
    filter: blur(0);
	transform: scale(1);
    transform: translateY(0px);
	transform: translateX(0px);
}
}



#midashi {
margin:0px;
	
	
	color:#FFFFFF;
	background-color:#59775F;
	width:100%;
	padding:0;
	
}


#midashi h1{
	font-size:9px;
	margin:0px;
	padding:0;
	
}


/* ヘッダー
*****************************************************/


#unit_header_3{
width:100%;
height:auto;

}

.inner03{
position:relative;
width:80%;
height:80px;
margin-left:20px;
margin-right:auto;
padding-top:20px;

}


.inner03 img{
position:relative;
width:100%;
height:auto;

}



#info_box{
display:none;

}

.bun001{
font-size:24px;
letter-spacing:0.2em;
}

.bun002{
font-size:14px;
}


#info_box2{
display:none;

}

#info_box2 a{
color:#FFFFFF;
}

#info_box2 a:hover{
text-decoration:underline;
}



#head_section01{
position: -webkit-sticky;
position: sticky;
top: 0;
z-index:10;

}






/*---------------*/

/*ハンバーガーをクリックすると展開するメニュー----------------------*/


#g-nav{
position:fixed;
top: 40px;
right:10px;
width:60px;
height:60px;
z-index:100;

background-color:rgba(255,255,255,0.9);
border-width: 1px;
border-style: solid;
border-color: #000;
border-radius: 5px;

}


#g-nav.panelactive{
width:100%;
left:0px;
}


#head_menu{
 position:absolute;
 top:60px;
 left:0px;
	width:100%;
    height:calc(100vh - 140px);
background-color:rgba(0,0,0,0.85);

display: flex;
align-items: center;
justify-content: center;
z-index:999;

	text-align: center;



		-webkit-transition: opacity 1s, visibility 0s ease 1s;
      -moz-transition: opacity 1s, visibility 0s ease 1s;
      -ms-transition: opacity 1s, visibility 0s ease 1s;
      -o-transition: opacity 1s, visibility 0s ease 1s;
      transition: opacity 1s, visibility 0s ease 1s;;
      opacity: 0;
	  visibility: hidden;



}



/*アクティブクラスがついたら透過なしにして最前面へ*/
#head_menu.panelactive{

	transition-delay: 0s;/*safari対策らしい*/
opacity: 1;
visibility: visible;


}

#head_logo{
display:none;
}


#head_logo_mob{
width:50%;
height:auto;
margin-right: auto;
margin-left: auto;
margin-top:10px;
}



#head_logo_mob img{
width:100%;
height:auto;

}



#head_inn{
width:100%;
height:auto;
}

.head_menu_btn{
    position:relative;

width:100%;
height:60px;
font-weight:bold;




box-sizing: border-box;

}

.head_menu_btn span{

}


.head_menu_btn a{


	   display: flex;
align-items: center;
justify-content: center;

  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

transition: 0.5s;
letter-spacing:0.1em;
color:#FFFFFF;

}


.head_menu_btn a:hover{
background-color:#FFFFFF;
color:#000000;
transition: 0.5s;
text-decoration:none;
}

/*========= ハンバーガー部分===============*/
.openbtn{
	position:absolute;
    z-index: 888;/*ボタンを最前面に*/
	top:1px;
	right: 15px;
	cursor: pointer;

    width: 65px;
    height:85px;



}

/*×に変化*/
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 32px;
    height: 3px;

	background-color:#000000;
  	width: 60%;
  }

.openbtn span:nth-of-type(1) {
	top:10px;
}

.openbtn span:nth-of-type(2) {
	top:28px;
}

.openbtn span:nth-of-type(3) {
	top:46px;
}

.openbtn.active span:nth-of-type(1) {
    top: 25px;
    left: 22px;
    transform: translateY(6px) rotate(-45deg);
    width: 60%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 37px;
    left: 22px;
    transform: translateY(-6px) rotate(45deg);
    width: 60%;
}



/*------スマホメニューここまで---------*/


#main_gazou{
width:100%;
height:auto;
position:relative;
z-index:5;
}


#main_gazou img{
width: 100%;
 height:calc(100vh - 140px);
  object-fit: cover; /* この一行で縦横比維持しはみ出た分カット */
}



#pc_mobile_gazou{
display:none;
}


/* ぼかしから出現 */
.blur3{
	animation-name:blurAnime3;
	animation-duration:3s;
	animation-fill-mode:forwards;
	visibility: visible !important;
}

@keyframes blurAnime3{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}


#mi_setumei01{
position:absolute;
width:100%;
height:auto;
top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%)!important;

color:#FFFFFF;
text-align:center;
}


/*---------枠アニメーション-----------------*/
.stroke {

  max-width:100%;
  height: 250px;
  position: relative;
}

.stroke .border {
  content: "";
  position: absolute;
  opacity: 0;
}
.stroke .border.top,
.stroke .border.bottom {
  width: calc(100% - 20px);
}
.stroke .border.top {
  border-top: 3px solid #fff;
  right: 0;
  top: 0;
}
.stroke .border.bottom {
  border-bottom: 3px solid #fff;
  left: 0;
  bottom: 0;
}

.stroke .border.right,
.stroke .border.left {
  height: calc(100% - 20px);
}
.stroke .border.right {
  border-right: 3px solid #fff;
  right: 0;
  top: 0;
}
.stroke .border.left {
  border-left: 3px solid #fff;
  left: 0;
  bottom: 0;
}

.stroke.is-animated .border {
  opacity: 1;
}

.stroke.is-animated .border.top,
.stroke.is-animated .border.bottom {
  animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.stroke.is-animated .border.right,
.stroke.is-animated .border.left {
  animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes stroke-width {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: calc(100% - 20px);
    opacity: 1;
  }
}

@keyframes stroke-height {
  0% {
    height: 0;
    opacity: 1;
  }
  100% {
    height: calc(100% - 20px);
    opacity: 1;
  }
}


/*-------------------------*/


#top_abus_box0{
position:absolute;
width:100%;
top: 35%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%)!important;
z-index:90;


}

#top_abus_box0 h2{
font-size:34px;
letter-spacing:0.2em;
margin-top:25px;

}


#top_abus_box0 p{
font-size:28px;
}


/*---------------*/

.line {
  display: block;
  position: relative;
}
.line::after {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  content: '';
  display: block;
  height: 1px;
  width: 0;
  transform: translateX(-50%);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  position: absolute;
  bottom: 0;
  left: 50%;
}
.line.is-animated::after {
  width: 100%;
}



/*------------------------------------------------------------------------------
  visual
------------------------------------------------------------------------------*/

.visual {
  
  margin: auto;
  position: relative;
  width: 100%;
  height: 460px;
  z-index:100;
  
}

.visual .mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.visual .mask.normal {
 color:#FFFFFF;
 
}

.visual .mask.burn {
  color:#FFFFFF;
}

/*---文字の位置-----*/
.visual .txt {

  width:100%;
  font-size: 0;
  line-height: 1;
  position: absolute;
top: 35%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%)!important;
}

/*----フォントサイズ-上-----*/
.visual .line {
  display: block;
  font-family: "Josefin Sans";
  font-size: 30px;
  font-weight: bold;
  letter-spacing:0.1em;
  
   
  
}

.visual .line + .line {
  margin-top: 15px;
}

.visual .line,
.visual .letter {
  opacity: 0;
 
}

.visual .letter {
  display: inline-block;
  padding-top: 5px;
}

/*----フォントサイズ-下-----*/
.visual .large {
  font-size: 30px;
   letter-spacing:0.1em;
   
}

.visual.is-visible .line {
  opacity: 1;
}

.visual.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
  }
  

/*----事業説明-------*/

#top_setumei{
width:100%;
height:auto;
margin-right: auto;
margin-left: auto;
position:relative;
z-index:10;

 
}


#top_setumei_ware{
position:relative;
width:100%;
height:auto;
z-index:5;
}



#top_setumei_gear{
position:absolute;
width:40%;
height:auto;
margin-bottom:30px;


}

#top_setumei_gear img{
width:100%;
height:auto;

}

.gear_01{
top:0;
}

.gear_02{
top:-50px;
right:0;
}



#top_setumei_clum{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;
text-align:center;
margin-top:30px;
}


#top_setumei_clum img{
width:30%;
height:auto;
}

#top_setumei_clum h2{
font-size:16px;
margin-top:15px;
margin-bottom:15px;
letter-spacing:0.2em;
}

#top_setumei_clum p{
text-align:left;
text-indent:1em;
margin-bottom:3px;
line-height:2em;
font-size:14px;
}


/*--よこからバイク------*/
/*可視で横からフワ*/

.inst_fade_left{
}
/*---↑これは不使用----jsファイル anime_huwa.js内にinst_fade_leftクラスにinst_fadeのクラスを追記する記述あり-----------------*/


.inst_fade{

	animation-name:yuragifadein;
	animation-duration:1s;
	animation-fill-mode:forwards;
	visibility: visible !important;
	animation-delay:0.3s;
	opacity: 0;
}


@keyframes yuragifadein {
from {
opacity: 0;
    filter: blur(10px);
	transform: scale(1.02);
    transform: translateY(50px);
	transform: translateX(-550px);
}
to {
opacity: 1;
    filter: blur(0);
	transform: scale(1);
    transform: translateY(0px);
	transform: translateX(0px);
}
}



/*-----新着情報---------*/

#news_gazou{
display:none;
}


#naname_box{
position:relative;
	display:block;
	width:100%;
	height:auto;
	clip-path:polygon(0 20%, 100% 0, 100% 100%, 0 100%);
	padding-bottom:0px;
	padding-top:0px;
	overflow:hidden;
	margin-top:50px;
	z-index:30;
}


#naname_box h2{
position:absolute;
top:40%;
  left:45%;
 
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
font-size:30px;
font-weight:bold;
color:#fff;

}


#naname_box img{
width:100%;
height:auto;
}

#osirase_box{
position:relative;
margin-bottom:50px;
width:100%;
height:auto;
z-index:5;


}


.info_title{
font-size:24px;
font-weight:bold;
text-align:center;
letter-spacing:0.2em;
position:relative;
z-index:30;
margin-top:30px;
margin-bottom:30px;
}



#osirase_box h2{
text-align:center;
font-size:24px;
}


#blog06{
 
text-align:center;

width:90%;
margin-right: auto;
margin-left: auto;
position:relative;
z-index:10;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
margin-bottom:15px;

}

#blog_time06{
margin-bottom:0px;


}





.info_box_wara{
float:left;
text-align:center;
width: 300px;
height:300px;
padding-top:10px;
padding-bottom:10px;
background:none;
color:#222;
border:1px solid #cccccc;
border-radius: 5px;
font-size:14px;
margin-bottom:30px;
}



/* 最新記事リンク */

#thumnail{
width:90%;
height:160px;
margin-right: auto;
margin-left: auto;
overflow:hidden;
background-color:#CC33CC;
margin-bottom:15px;
overflow:hidden;

}


#thumnail img{
width:100%;
height:auto;

}


ul h3{
margin-top:5px;
margin-bottom:5px;

}

ul h3 span{
display:block;
padding:2px 3px;
background:#59775F;
color:#fff;
}

ul.thumb06 h3:hover{background:#f3f3f3;}

ul.thumb06 h3:hover span{background:#fff;
color:#000;}

#top_blog_bun06{
width:80%;
text-align:left;
margin-left:auto;
margin-right:auto;
margin-top:10px;

}


/* 固定背景画像用
*****************************************************/

.fixed-bg {
  height:auto;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  
  display: flex;
	align-items: center;
	justify-content: center;
  
  
}
 


#kaitori_box{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;
background-color:#59775F;
margin-top:100px;
margin-bottom:150px;
padding-top:50px;
padding-bottom:50px;
padding-left:30px;
padding-right:30px;
box-sizing: border-box;
color:#FFFFFF;
}


#kaitori_box h2{
text-align:center;
font-size:20px;
border: 1px solid #fff;
width:200px;
padding:5px;
margin-bottom:20px;
margin-right: auto;
margin-left: auto;
}


#kaitori_box p{
text-align:center;
line-height:2em;


}



#text_mid_wara{
width:100%;
height:auto;
margin-top:30px;



}

#text_mid_box{
width:85%;
height:auto;
margin-right: auto;
margin-left: auto;
}

#text_mid_box img{
width:100%;
height:auto;
}







.bg02 {
 background-image:url(images/top_back2.jpg);
}



/*---会社概要-----------*/


#shop_info{
width:100%;
height:auto;
margin-right: auto;
margin-left: auto;
margin-top:0px;

}

#shop_info_row{
width:100%;
height:auto;

}


#shop_gazou{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;
margin-top:20px;
}

#shop_gazou img{
width:100%;
height:auto;
}


#shop_right{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;
}




#kaisya_box_1{

padding-top:0px;
width:100%;
height:auto;
margin-top:0px;
margin-left:auto;
margin-right:auto;
margin-bottom:30px;
padding-bottom:100px;
margin-top:20px;

}

.kaisya_midashi{
text-align:center;
font-size:28px;
margin-bottom:30px;
color:#333333;

}




#kaisya_box_1 table{

width:100%;
margin-left:auto;
margin-right:auto;
color:#333333;

border-width: 1px;
border-style: solid;
border-color:#CCC;
background-color:#FFFFFF;


}

.title1_3{


text-align:center;


}

#kaisya_box_1 table th{   /*���ڍs */
height:auto;
width:150px;

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;

border-right-width: 1px;
border-right-style: solid;
border-right-color:#ccc;

text-align: center;
vertical-align:middle;
}

#kaisya_box_1 table tr{   /*1�s */
	height:auto;



}

#kaisya_box_1 table tr:nth-child(1) {  /*nth-child(1)�͂P���(1�s�ځj�̈Ӗ� */




}

#kaisya_box_1 table td{   /*1�� */
height:auto;


vertical-align:middle;
padding-top:5px;
padding-bottom:5px;


}


#kaisya_box_1 table td span{
display:block;


}


#kaisya_box_1 table tr td:nth-child(1) {  /*nth-child(1)�͂P��ڂ̈Ӗ� */

text-align:center;
width:180px;
color:#333333;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;
padding-left:1em;
}

#kaisya_box_1 table tr td:nth-child(2) {  /*nth-child(2)��2�あああ�ڂ̈Ӗ� */

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;
padding-left:1em;

}



.kaisya_td01{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;
padding-left:1em;
}


.kaisya_td02{
text-align:center;
}

#company_map{
margin-top:20px;
}

.copyright{
width:100%;
height:auto;
text-align:center;
font-size:14px;
}














}