@charset "UTF-8";

/* #############################################
 header_00.css
############################################# */
body{
/*background-color:#07f;*/
 background:linear-gradient(to top
,rgba(130,150,150,0.2) 0%
,rgba(100,100,100,0.1) 100%);
}



/* #############################################
 共通設定
############################################# */
header
,h2,h3
,p
,footer
,.pcnav
,.caption
{
 color:#fff;
/* background:#08f;*/
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 コンテンツ幅設定
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ---------------------------------------------
 レスポンシヴウェブデザイン（RWD）
--------------------------------------------- */
.container{
/* width:960px;*/   /*PC幅1000前後が通常*/
/* max-width:1300px;*/  /*♦最大幅を固定値:max-widthで設定*/
/* padding:0 10px;*/    /*左右の余白調整*/
/* margin:0 auto;*/     /*左右中央寄せ :上下 左右;*/
}



/* #############################################
 レイアウト設定
############################################# */
.container{
/* display:flex;*/
 display:grid;
/* grid-template-columns:15fr 85fr;*/
 grid-template-columns:200px 1fr;
}

header{
/* width:15vw;*/
 grid-row:1;
 grid-column:1;
 z-index:1;
}

.contents{
/* width:85vw;*/
 grid-row:1;
 grid-column:2;
 border-left:5px solid #aaa;
 z-index:0;
}



/* #############################################
 個別設定
############################################# */
/* =============================================
 0-2-1/4 <HEADER> ヘッダー
============================================= */
body{
/* border-top:2px solid #ccc;*/
}

header{
 min-width:200px;
/* width:200px;*/
/* background:url(../img/j-lee-wt1G1_9aL68-unsplash.jpg) no-repeat center bottom/cover;*/
/* background:url(../img/wisteria-5145164_1280.jpg) no-repeat center center/cover;*/
/* background-color:rgba(255,230,255,0.8);*/
 background:linear-gradient(to top
,rgba(130,150,150,0.2) 0%
,rgba(100,100,100,0.1) 100%);
 opacity: 0;
 animation: anime-ph 2s ease-in forwards 1s;
}

.h1{
 position:fixed;
 top:10px;
 left:10px;
 min-width:180px;
 border:5px outset #00f;
 margin:0 10px 10px 0;
}

h1{
 font-size:0;
/* text-indent:100%;*/   /*text非表示1 字下げ*/
/* white-space:nowrap;*/ /*text非表示2 改行をさせない*/
/* overflow:hidden;*/    /*text非表示3 はみ出た文字を隠す*/
}

h1.logo{
 height:145px;
 background:url(../img/logo001.png) no-repeat center center/contain,rgba(255,255,255,0.8);
 margin:1px;
}

header .tel00{
 position:fixed;
 left:1vw;
 bottom:7vh;
}

header .tel{
 display:flex;
 margin-bottom:5px;
}

header .tel i{
 display:block;
 color:#00f;
 line-height:50px;
 font-size:25px;
/* padding-bottom:10px;*/
 animation:anime-tel 5s linear infinite;
 animation-duration:10s;
 transform:scale(1.0) rotate(0deg);
}

@keyframes anime-tel{
 0%{transform:scale(1.0) rotate(360deg);}
 10%{transform:scale(1.5) rotate(10deg);}
 20%{transform:scale(1.0) rotate(-10deg);}
 30%{transform:scale(1.5) rotate(10deg);}
 40%{transform:scale(1.0) rotate(-10deg);}
 50%{transform:scale(1.5) rotate(10deg);}
 60%{transform:scale(1.0) rotate(-10deg);}
 70%{transform:scale(1.5) rotate(10deg);}
 80%{transform:scale(1.0) rotate(-10deg);}
 90%{transform:scale(1.5) rotate(10deg);}
 100%{transform:scale(1.0) rotate(10deg);}
}

header .tel p{
 display:block;
 color:#00f;
 font-size:15px;
 font-weight:bold;
 line-height:1.5;
/* background-color:#00f;*/
 padding:2px;
 margin-left:5px;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 :hover 疑似クラス (ホバー状態の <a> 要素を選択)
 カーソル（マウスポインタ―）で要素の上をホバー（通過）させたときにこの状態になる
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
header a:hover h1.logo{
 background-color:rgba(255,255,255,0.8);
 border:5px inset #fff;
 transition:0.3s;/* animation効果 */
}


/* +++++++++++++++++++++++++++++++++++++++++++++
 0-2-1(1/3) SECTION キャッチコピー
+++++++++++++++++++++++++++++++++++++++++++++ */
.contents_p02{
 position:fixed;
 top:45%;
/* left:20%;*/
 left:220px;
/* font-size:40px;*/
/* font-weight:500;*/
 text-shadow:2px 2px 10px #00f;
 z-index:1;
}

/*.contents_p02 p{*/
/* font-family:'Dela Gothic One',cursive;*/
/* font-family:'Train One',cursive;*/
/* font-family:'Potta One',cursive;*/
/*}*/

.contents_p02 .p1{
 font-family:'Train One',cursive;
/* animation:anime-a 5s linear infinite;*/
/* animation-duration:10s;*/
/* transform:translatex(100%);*/
 animation:anime-a 1s ease-in forwards;
 opacity:0;
}

@keyframes anime-a{
/* 0%{transform:translateX(100%);opacity:0;}*/
/* 25%{transform:translateX(0);opacity:1;}*/
/* 50%{transform:translateX(0);opacity:1;}*/
/* 100%{transform:translateX(0);opacity:1;}*/
 0%{opacity: 0;}
 100%{opacity: 1;}
}

.contents_p02 .p2{
 font-family:'Train One',cursive;
/* animation:anime-b 5s linear infinite;*/
/* animation-duration:10s;*/
/* transform:translatex(100%);*/
 animation:anime-b 1s ease-in forwards;
 opacity:0;
}

@keyframes anime-b{
/* 0%{transform:translateX(100%);opacity:0;}*/
/* 30%{transform:translateX(100%);opacity:0;}*/
/* 55%{transform:translateX(0);opacity:1;}*/
/* 100%{transform:translateX(0);opacity:1;}*/
 0%{opacity: 0;}
 100%{opacity: 1;}
}

#vw0{
 font-size:3.1vw;
}

p.bounce{
 padding-bottom:40px;
}


/* +++++++++++++++++++++++++++++++++++++++++++++
 0-2-1(2/3) SECTION ロゴ
+++++++++++++++++++++++++++++++++++++++++++++ */
.logo1{
 position:fixed;
 top:10px;
 right:10px;
 width:300px;
 height:60px;
 background:url(../img/logo000.png) no-repeat center center/contain;
 z-index:2;
}

.gas{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:url(../img/gas00.jpg) no-repeat  center center/contain;
}

.logo2{
 position:fixed;
 right:2%;
 bottom:5vh;
 width:100px;
 height:50px;
 background:url(../img/logo001.png) no-repeat  center center/contain;
 z-index:2;
}

.contents_p01{
 position:fixed;
 top:0;
 left:20%;
 font-size:10px;
 text-shadow:2px 2px 10px #000;
 padding:5px
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 :hover 疑似クラス
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.logo1:hover + .gas{
 background-color:rgba(0,0,0,0.5);
 transition:0.3s;/* animation効果 */
 opacity:1;      /* 非表示（ホバーで表示） */
 z-index:1;
}


/* +++++++++++++++++++++++++++++++++++++++++++++
 0-2-1(3/3) SECTION 会社情報
+++++++++++++++++++++++++++++++++++++++++++++ */
.spcompany{
 display:none;
 color:#00f;
 padding:5px;
 margin:0 auto;
}
.spcompany section{
 padding:10px;
 border-radius:5px;
 background-color:rgba(0,0,0,0.5);
}
.spcompany h2{
 display:none;
}
.spcompany h3{
 color:#fff;
 font-size:300%;
 text-align:center;
 text-shadow:1px 1px 3px #00f;
 padding:30px;
}
.spcompany dt{
/* text-align: center;*/
 background-color:#DADADA;
 padding:10px;
 border-radius:3px;
 margin:10px 0;
}
.spcompany dd{
 background-color:#F3F3F3;
 padding:15px;
 border-radius:3px;
 margin:0 0 10px 0;
}
.spcompany .map{
 padding-bottom:50%; /*padding上下%の基準は横幅*/
}

.company{
 position:fixed;
 top:0;
 left:15%;
/* max-width:calc(100% - 200px);*/
 color:#00f;
 padding:30px;
 margin:0 auto;
 opacity:0;      /* 非表示（ホバーで表示） */
}

.company h2{
 text-align:center;
 margin-bottom:10px;
}

.company h3{
 margin-bottom:10px;
}

.company dl{
 display:flex;
 flex-wrap:wrap;
}

.company dt{
 width:25%;
 text-align: center;
 background-color:#DADADA;
 padding:17px;
 border-top-left-radius:3px;
 border-bottom-left-radius:3px;
 margin:0 0 10px 0;
}

.company dd{
 width:75%;
 background-color:#F3F3F3;
 padding:17px;
 border-top-right-radius:3px;
 border-bottom-right-radius:3px;
 margin:0 0 10px 0;
}

.access{
 margin-top:10px;
}

.map{
 position:relative;
 height:0;
 overflow:hidden;
 padding-bottom:20%; /*padding上下%の基準は横幅*/
}

.map iframe{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 border:0;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 :hover 疑似クラス
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.logo1:hover + .company{
/*.logo2:hover + .company{*/
 height:100vh;
 background-color:rgba(0,0,0,0.5);
 transition:0.3s;/* animation効果 */
 opacity:1;      /* 非表示（ホバーで表示） */
 z-index:1;
}



/* =============================================
 0-2-2/4 <NAV> ナビゲーション
============================================= */
/* +++++++++++++++++++++++++++++++++++++++++++++
 0-2-2(1/2) <PCNAV> パソコン用
+++++++++++++++++++++++++++++++++++++++++++++ */
.pcnav{
 position:fixed;
/* bottom:15px;*/
 top:200px;
/* width:15%;*/
 min-width:200px;
 z-index:2;
 opacity: 0;
 animation: anime-ph 2s ease-in forwards 1s;
}

.pcnav li .caption2{
 display: block;
/* text-align:center;*/
 line-height:50px;
 max-height:50px;
 font-size:15px;
 font-weight:500;
 text-shadow:1px 1px 1px #000;
 background-color:rgba(0,0,255,0.5);
 border-bottom:1px solid #fff;
/* border-radius:10px;*/
 border-radius:5px;
}

.pcnav li:last-child .caption2{
 border-bottom:none;
}

.pcnav li .caption2 i{
 color:#f90;
 padding-left:0.5vw;
 transition: 1000ms;
}

.pcnav li:first-child .caption2 i{
 color:#f00;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 :hover 疑似クラス
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.pcnav li .caption2:hover{
/* width:290%;*/
 color:#00f;
/* font-size:30px;*/
/* text-shadow:1px 1px 1px #000;*/
 background-color:rgba(255,255,255,0.8);
/* padding-left:100%;*/
 border:2px inset #00f;
/* border-radius:10px;*/
 border-radius:5px;
 transition:0.3s;/* animation効果 */
 opacity:1;      /* 非表示（ホバーで表示） */
}

.pcnav li .caption2:hover i{
 transform:rotate(360deg);
}

/* +++++++++++++++++++++++++++++++++++++++++++++
 0-2-2(2/2) <SPNAV> スマホ用
+++++++++++++++++++++++++++++++++++++++++++++ */
.btn
,.spnav
{
 display:none;
}

/* Sp btn */
.btn{
/* position:absolute;*/
 position:fixed;
 top:7px;
 right:7px;
 width:50px;
 height:50px;
 color:#00f;
 text-align:center;
 border:1px solid #00f;
 border-radius:5px;
 z-index:2;
}

.btn i{
 display:block;
 line-height:50px;
 font-size:35px;
}

/* barアイコン表示 */
.btn i:last-child{
/* display:none;*/
}

/* TOPへ戻るボタン */
.top{
 width:50px;
 height:50px;
 padding-top:5px;
 font-weight:bold;
 color:#00f;
 text-align:center;
 border:1px solid #00f;
 border-radius:5px;
 position:fixed;
 bottom:15px;
 right:5px;
 z-index:9999;
 background-color:#fff;
 cursor:pointer;
}

.top i{
 display:block;
 text-align:center;
}



/* =============================================
 0-2-3/4 <MAIN> メインコンテンツ
============================================= */



/* =============================================
 0-2-4/4 <FOOTER> フッター
============================================= */
footer{
 position:fixed;
 bottom:0;
 width:100%;
 text-shadow:2px 2px 10px #00f;
 text-align:center;
 padding:5px;
}



/* #############################################
 レスポンシヴウェブデザイン（RWD）
############################################# */
/* =============================================
 ♦メディアクエリー設定（ブレイクポイント）
============================================= */
@media screen and (max-width:1300px){
.container{
/* grid-template-columns:25fr 75fr;*/
}

.h1{
 margin-top:20px;
}

.logo1{
 top:20px;
}

.contents_p01{
 left:5%;
}

.contents_p02{
/* top:40%;*/
/* left:5%;*/
/* font-size:30px;*/
}

.company{
 left:200px;
}

}


@media screen and (max-width:767px){
/* #############################################
 レイアウト設定
############################################# */
.container
,header
,.spcompany
{
 display:block;
}

.contents_p01
,.contents_p02
,.logo1
,.gas
,.logo2
,.company
,header .tel00
{
 display:none;
}



/* =============================================
 0-2-1/4 <HEADER> ヘッダー
============================================= */
.h1{
 position:relative;
 top:0;
 left:0;
 margin:0;
}

h1.logo{
 background:url(../img/logo000.png) no-repeat center center/contain,rgba(255,255,255,0.8);
}


/* =============================================
 0-2-2/4 <NAV> ナビゲーション
============================================= */
/* +++++++++++++++++++++++++++++++++++++++++++++
 0-2-2(1/2) <PCNAV> パソコン用
+++++++++++++++++++++++++++++++++++++++++++++ */
.pcnav{
 display:none;
}


/* +++++++++++++++++++++++++++++++++++++++++++++
 0-2-2(2/2) <SPNAV> スマホ用
+++++++++++++++++++++++++++++++++++++++++++++ */
/* Sp btn */
/* barアイコン表示 */
.btn{
 display:block;
 overflow:hidden;  /*アイコン２つ目を非表示*/
}

/* クリック時 */
.close i:first-child{
 display:none;
}

.close i:last-child{
 display:block;
}

/*ナビゲーション*/
.spnav{
 display:block;
 width:100%;
 position:fixed;
 top:57px;
 left:0;
 margin-left:100%;
 transition:0.3s;
 z-index:2;
}

.slide{
 margin-left:0;
}

.spnav li{
 width:auto;
}

.spnav a{
 display:block;
 color:#00f;
 font-size:30px;
 font-weight:bold;
 line-height:70px;
 text-align:center;
 text-shadow:1px 1px 3px #000;
 border-top:1px solid #aaa;
 background:rgba(255,255,255,0.8);
}



/* =============================================
 0-2-3/4 <MAIN> メインコンテンツ
============================================= */



/* =============================================
 0-2-4/4 <FOOTER> フッター
============================================= */
footer{
 font-size:10px;
}



}