@charset "UTF-8";

/*#################### 基本グリッド設定 ####################*/
body{
    display: grid;
    grid-template-columns: 1fr 900px 1fr;
    grid-template-rows: auto auto auto auto;
}

/*#### ヘッダーの入れ子グリッド ####*/

header{
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row-start: 1;
    display: grid;
    grid-template-columns: 1fr 900px 1fr;
    grid-template-rows: auto auto auto;

}

/*#### HE　ヘッド ####*/
.HEline{
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row-start: 1;
}

.HEti{
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 2;
    justify-self:start;
    align-self: center;
    margin-top: 10px;
}

.HEli{
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 2;
    justify-self:end;
    align-self: start;
    margin-top: 10px;

}

.HEbu{
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 2;
    justify-self:end;
    align-self: end;

}

.HEme{
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row-start: 3;
    margin-top: 5px;
}





main{
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 2;
    margin: 20px 0px 0px 0px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;

}

h2{
    grid-column-start: 1;
    grid-row-start: 1;
    margin-bottom: 5px;
}

.POINT{
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row-start: 2;
    justify-self:start;
    align-self: start;
}


/*#### フッターの入れ子グリッド ####*/

footer{
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row-start: -1;
    display: grid;
    grid-template-columns: 1fr 900px 1fr;
    grid-template-rows: auto auto auto;

}

.FOca{
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 11;
    justify-self:center;
}

.FOcaS{
    display: none;
}

.FOma{
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 12;
    justify-self:center;
}

.FOco{
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 13;
    justify-self:center;
    margin: 10px 0 5px 0;
}

/*#### 問い合わせの入れ子グリッド ####*/

.FOma{
    display: grid;
    grid-template-columns: 1fr auto 30px auto 1fr;
    grid-template-rows: auto auto auto auto;
}

.FOp{
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row-start: 1;
    justify-self:center;
    margin: 8px 0 15px 0;
}

.FOtel{
    grid-column-start: 2;
    grid-row-start: 2;
}

.FOweb{
    grid-column-start: 4;
    grid-row-start: 2;
}

.fosyamei{
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row-start: 3;
    justify-self:center;
    margin: 15px 0 10px 0;
}

.MENUBUTTON{
    display: none;
}

.kaiheimenu{
    display: none;
}

.sankaku{
    display: none;
}


/*############## 900px未満　グリッドとスタイル変更部分　ここから　###############*/

@media(max-width: 899px){

body{
    display: grid;
    grid-template-columns: 30px 1fr 1fr 30px;
    grid-template-rows: auto auto auto;
}

/*#### ヘッダーの入れ子グリッド ####*/

header{
    display: grid;
    grid-template-columns: 30px 1fr 1fr 30px;
    grid-template-rows: auto auto auto;

}    

.HEline{
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row-start: 1;
}
    
.HEti{
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 2;
    justify-self:start;
    align-self: start;
    margin-top: 10px;
    margin-bottom: 0;
    padding-bottom: 0;
}    

.kaiheimenu{
    display: block;
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 3;
    justify-self:start;
    align-self: start;
    width: 100%;
    margin:0;

}

.MENUBUTTON{
    display: block;
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 2;
    justify-self:end;
    align-self: end;
    
    }

#menuButton {
    display: block;
}

#menuButton span {
    display: block;
}

.sankaku{
    display: block;
    grid-column-start: 3;
    grid-column-end: -2;
    grid-row-start: 3;
    grid-row-end: 5;
    justify-self:end;
    align-self: start;
    }


    
/*######### メイン #########*/
    
    

.POINT{
    grid-column-start: 1;
    grid-row-start: 2;
} 

    
    
    
    
    
/*#### フッターの入れ子グリッド ####*/

footer{
    display: grid;
    grid-template-columns: 30px 1fr 1fr 30px;
    grid-template-rows: auto auto auto;

}    
    
    
    
.FOcaS{
    display: block;
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 11;
    justify-self:center;
}

.FOma{
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 12;
    justify-self:center;
}

.FOco{
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 13;
    justify-self:center;
    margin: 10px 0 5px 0;
}
    

    
/*#### 問い合わせの入れ子グリッドの変更 ####*/

.FOma{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto 15px auto auto;
}

.FOp{
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 1;
    justify-self:center;
    margin: 2px 0 10px 0;
}

.FOtel{
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 2;
    justify-self:center;
}

.FOweb{
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 4;
    justify-self:center;
}

.fosyamei{
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 5;
    justify-self:center;
    margin: 10px 0 10px 0;
}

/*##　900px以下ではボタンと大きなメニューを隠す　##*/
.HEbu{
    display: none;
}
    
.HEme{
    display: none;
}

.HEli{
    display: none;
}

.FOca{
    display: none;
}

/*########## スタイル変更 ##########*/
    
    
.logo{
    display: inline-block;
    width: 280px;
    margin-bottom: 0;
    padding-bottom: 0;
}

/*##　フッター　問い合わせ先　##*/

.fotext{
    font-size: 16px;
    line-height: 1.5em;
}

.FOtel{
    width: 340px;
    height: 80px;
    padding: 10px 8px ;
}

.telp{
    font-size: 18px;
    line-height: 0em;
}

.telb{
    font-size: 26px;
}

.telj{
    font-size: 15px;
}

.FOweb{
    width: 340px;
    height: 80px;
    padding: 10px 8px ;
}

.telime{
    width:34px;
    vertical-align: -32%;
}

.toibutton{
    letter-spacing: 0em;
}

.toibutton a{
    padding: 12px 30px ;
}

/*##　フッター　会社名と住所　##*/
.fosyamei{
    font-size: 24px;
    line-height: 1.1em;
}

.fosyamei a{
        color: #5A5A5A;
}

.fojyuusyo{
    font-size: 15px;
    font-weight: normal;
    vertical-align: 15%;
    letter-spacing: 0;
}

/*##　フッター　コピーライト　##*/
.copy{
    font-size: 12.5px;
}

/*##　コンテンツページ　##*/

.POINT{
    margin: 0 0px;
    justify-content:center;
}

.pokiji{
    width: 60%;
    margin-bottom: 25px;
}


/*#################### 900px未満　ここまで ####################*/



/*############## 680px未満　グリッドはアキ変更　スタイル変更部分　ここから　###############*/

@media(max-width: 679px){

body{
    display: grid;
    grid-template-columns: 10px 1fr 1fr 10px;
    grid-template-rows: auto auto auto;
}  
    
header{
    display: grid;
    grid-template-columns: 10px 1fr 1fr 10px;
    grid-template-rows: auto auto auto;

}
    
.HEti{
    align-self: start;
    margin-top: 5px;
}

.MENUBUTTON{
    align-self: center;
    
    }
    
footer{
    display: grid;
    grid-template-columns: 10px 1fr 1fr 10px;
    grid-template-rows: auto auto auto;

} 
    
main{
    margin: 8px 0px 0px 0px;
    
    }

h2{
    margin-bottom: 5px;
}


/*#### 問い合わせの入れ子グリッドの変更 ####*/

.FOma{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto 8px auto auto;
}

.FOp{
    margin: 2px 0 2px 0;
}

.fosyamei{
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row-start: 5;
    justify-self:center;
    margin: 6px 0 0 0;
}    
    
    
    
 /*##　キャッチ　##*/
.ca{
    height: 26px;
    margin: 35px 0px 5px 0;

}   
/*##　キャッチ　レスポンシブで2行サイズに変更になるフッター用　##*/

.ca_S{
    height: 50px;
    margin: 15px 0px 5px 0;

}
    
.ca_h2{
    height: 60px;
    margin-top: 5px;
}
    
/*##　本文文章　##*/
p{
    font-size: 14px;
    line-height: 1.5em;
}    
    
/*##　各ページのタイトル　※h1はロゴに使用　##*/
h2{
    font-size:20px;
    text-align: center;
}
    
/*####################　ヘッダー　####################*/

.line{
   padding-top: 15px;
}    
    
.logo{
    width: 200px;
}    
    
/*##　レスポンシブのメニューボタン　##*/
.MENUBUTTON{
    width:37px;
    height:43px;
    z-index: 3;
}    
    
#menuButton span {
    width: 25px;
    height: 3px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menuButton span:first-child {
    margin: 7px 6px 5px 6px;
    
}
#menuButton span:nth-child(2) {
    margin: 2px 6px 5px 6px;
}

#menuButton span:nth-child(3) {
    margin: 2px 6px 5px 6px;
}

#menuButton span:last-child {
    background: #000000;
    margin: -8px 6px 5px 6px;
    z-index: 1;
}
#menuButton.active span:first-child {
    -webkit-transform: translateY(8px) rotate(45deg);
    -moz-transform: translateY(8px) rotate(45deg);
    -ms-transform: translateY(8px) rotate(45deg);
    transform: translateY(8px) rotate(45deg);
}
#menuButton.active span:nth-child(2) {
    opacity: 0;
     filter:alpha(opacity=0); /* IE 6,7*/
     -ms-filter: "alpha(opacity=0)"; /* IE 8,9 */
     -moz-opacity:0; /* FF , Netscape */
     -khtml-opacity: 0; /* Safari 1.x */
    }

#menuButton.active span:nth-child(3) {
    -webkit-transform: translateY(-8px) rotate(-45deg);
    -moz-transform: translateY(-8px) rotate(-45deg);
    -ms-transform: translateY(-8px) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg);}  
    
.menup{
    font-size: 10px;
    line-height: 2.4em;
    text-indent: -0.15em;
}        
    
.kaimenu{
    font-size: 14px;
}    
    
.kaimenu a{
    height: 38px;
    padding: 10px 0 10px 10px;
} 
 
/*######### 展開したメニューの右端の三角形 #########*/
.sankaku{
    font-size: 18px;
    margin-right: 10px;
}
  
.sankaku img{
    width: 13px;
    height: auto;
}
    
/*####################　フッター　####################*/    
    
/*##　フッター　問い合わせ先　##*/
.FOma{
    padding-top: 8px;
    padding-bottom: 8px;
    letter-spacing: 0em;
}    
 
.fotext{
    font-size: 13px;
    line-height: 1.2em;
}
    
.FOtel{
    width: 255px;
    height: 70px;
}   
    

.telp{
    font-size: 16px;
}

.telb{
    font-size: 24px;
}

.telj{
    font-size: 14px;
}

.FOweb{
    width: 255px;
    height: 70px;
}

.telime{
    width:30px;
    vertical-align: -30%;
}

.toibutton{
    font-size: 16px;
}
    
.toibutton a{
    padding: 10px 24px ;
}

/*##　フッター　会社名と住所　##*/
.fosyamei{
    font-size: 22px;
    line-height: 1.1em;
}


.fojyuusyo{
    font-size: 14px;
} 
 

/*###################################トップに戻るボタン###################################*/
 
.page-top img{
	margin: 0 ;
	padding: 0 ;

    width: 50px;

}

.ca_h2{
    height: 40px;
    margin-top: 5px;
}    
    
/*##　コンテンツページ　##*/

.POINT{
    margin: 0 0px;
    justify-content:center;
}

.pokazari{
    width: 70px;
    padding-bottom: 10px;
}

.pokiji{
    width: 55%;
    min-width: 280px;
    margin-bottom: 15px;
    padding: 10px;

}

.pokijica{
    height: 40px;
    padding-bottom: 8px;
}

.pop{
    font-size: 14px;
    margin-bottom: 10px;
    letter-spacing: 0em;
    margin-left: 5px;
}

.right{
    height: 80px;
    position: relative;
    right: -4px;
}
    
}
/*#################### 680px未満　ここまで ####################*/

/*############## 300px未満　これ以上は小さくならないように　###############*/

@media(max-width: 300px){
    
body{
    display: grid;
    grid-template-columns: 5px 290px 5px;
    grid-template-rows: auto auto auto;
}    
}