<style type="text/css">
<!--

html { }



body {  text-align: center;  margin:0; }

#wrapper { width: 100%; height:auto;   padding: 0 0px;  text-align: center;  margin: 0 auto;  background-color: #c2b44d; }


/* =========================================================
タイトル
========================================================= */

.titlebox { width:100%; height: 100px;  text-align: center;  position:relative; top:-25px;  background-color: #c2b44d; }
h1{  color:   #d46e08;  font-size: 40px;  position:relative; top:40px; font-family: 'Roboto',sans-serif; font-weight:600;  }

/** ▼▼▼ブラウザワイド違い用▼▼▼ **/
@media screen and ( max-width:1200px )
@media screen and ( max-width:1100px )
@media screen and ( max-width:1000px )
@media screen and ( max-width:950px ) {h1{ font-size: 28px; } .titlebox { height: 80px; } }
@media screen and ( max-width:800px ) {h1{ font-size: 24px; } .titlebox { height: 70px; }}
@media screen and ( max-width:599px ) {h1{ font-size: 20px; } .titlebox { height: 60px; }}
@media screen and ( max-width:499px ) {h1{ font-size: 18px; } .titlebox { height: 40px; }}
@media screen and ( max-width:399px ) {h1{ font-size: 17px; } .titlebox { height: 40px; }}
@media screen and ( max-width:329px ) {h1{ font-size: 16px; } .titlebox { height: 40px; }}



/* =========================================================
背景画像エフェクト
========================================================= */

.main_box { width: 100% ;  }


.main_photo { width: 100%; height: auto; }



/*============================================
グローバルメニュー
============================================*/


.nav_box { width:100%; height: 10px;  margin: 0 auto;  padding-top: 20px; text-align: center; z-index: 200;  }
#g_nav { width: 600px; height: 10px; margin: 0 auto;  }
#menu { float: none; margin:0 auto; width: 600px; height: 20px; text-align: center; text-decoration: none; font-size: 14px; font-family: 'Roboto', sans-serif; font-weight:300;  position:relative; top:5px;  }
#menu01,#menu02,#menu03,#menu04 { float: left; display: inline; width:146px; height:20px; border-left: 2px solid #ffffff; padding-top: 1px; }
#menu04{ border-right: 2px solid #ffffff;  }
#menu01 a:hover,#menu02 a:hover,#menu03 a:hover{  background-color: #564f4d; color: #ffff00; text-decoration: none; }
#menu a { display: block ; height: 18px; }



/** ▼▼▼ブラウザワイド違い用▼▼▼ **/
@media screen and ( max-width:599px ){

#g_nav { width: 98%; height: 150px; margin: 0 auto; text-align: center; }
#menu { width: 100%; height: 20px; font-size: 12px; }
#menu01,#menu02,#menu03,#menu04{ width:24.5%; height:20px; padding-top: 2px;  }
#menu04{ border-right: 2px solid #ffffff;  }
} 

/** ▼▼▼ブラウザワイド違い用▼▼▼ **/
@media screen and ( max-width:523px ){

#menu { font-size: 10px; }
#menu01,#menu02,#menu03,#menu04 { border-left: 1px solid #ffffff; }
#menu04{ border-right: 1px solid #ffffff;  }
}



/* =========================================================
コンセプト
========================================================= */

#wrapper2 { width: 1000px; height:auto;   padding: 0 0px;  text-align: center;  margin: 0 auto;  }

.info_box { display: inline-block; text-align: center; width:100%; height: 30px;   margin-top: 50px;   }
.info_title  {color: #a43737;;  font-size: 22px; font-family: "Noto Sans Japanese", sans-serif; font-weight:300; letter-spacing: 0.2em;   }

/** ▼▼▼ブラウザワイド違い用▼▼▼ **/
@media screen and ( max-width:1000px ){ .info_title { font-size: 20px; } .info_box { width:100%; } #wrapper2{ width:100%; } }
@media screen and ( max-width:800px ){ .info_title { font-size: 18px; font-weight:100;} .info_box { margin-top: 30px; height: 10px;  margin-bottom: 20px;   }}
@media screen and ( max-width:400px ){ .info_title { font-size: 16px; }.info_box { margin-top: 20px; height: 10px;   }}
@media screen and ( max-width:330px ){ .info_title { font-size: 14px; }}


.concept_box {  display: inline-block; text-align: center; width : 720px ; height:auto;   margin-top: 10px; margin-bottom: 70px; }
.concept { font-size: 14px; color:  #a65421; font-family: "Noto Sans Japanese",sans-serif; font-weight:300; text-align:left; line-height: 1.5em; }


/** ▼▼▼ブラウザワイド違い用▼▼▼ **/
@media screen and ( max-width:1000px ){.concept_box { width : 72% ; }}
@media screen and ( max-width:800px ){.concept_box { width : 80% ; }.concept { font-size: 12px;  }  }
@media screen and ( max-width:620px ) { .concept_box { width : 90% ;  }  .concept { font-size: 11px;  } }


/** ▼▼▼スマホ用▼▼▼ **/
@media screen and ( max-width:450px ) { .concept_box { }.concept { font-size: 10px;  }}




/*============================================
本文
============================================*/

.sub_boxA,.sub_boxB,.sub_boxC {  display: inline-block; width: 720px ; height: 500px;  margin: 0 auto;  padding-top: 0px; text-align: center; }
.sub_boxA {z-index: 10;} .sub_boxB {position: relative; top: -60px; z-index: 20;}.sub_boxC { position: relative; top: -120px; z-index: 30;} 

/** ▼▼▼ブラウザワイド違い用▼▼▼ **/
@media screen and ( max-width:1000px ){.sub_boxA,.sub_boxB,.sub_boxC { width : 90% ; }}
@media screen and ( max-width:800px ){.sub_boxA {width :80%; z-index: 10;} .sub_boxB {width :80%;  position: relative; top: -150px; z-index: 20;}.sub_boxC {width :80%;  position: relative; top: -300px; z-index: 30;}  }
@media screen and ( max-width:620px ) { .sub_boxA {width :90%; z-index: 10;} .sub_boxB {width :90%;  position: relative; top: -150px; z-index: 20;}.sub_boxC {width :90%;  position: relative; top: -300px; z-index: 30;}  }
/** ▼▼▼スマホ用▼▼▼ **/
@media screen and ( max-width:450px ) { }



.conte_box {  display: inline-block; text-align: center; width : 720px ; height:auto;   margin-top: 10px; margin-bottom: 20px; }
.conte01{ font-size: 14px; color: #a65421; font-family: "Noto Sans Japanese",sans-serif; font-weight:300; text-align:left; line-height: 1.5em; }
.movie_box {  display: inline-block; text-align: center; width : 720px ; height:auto;   margin-top: 10px; }
.infome {width:560px; height: 315px;} 


/** ▼▼▼ブラウザワイド違い用▼▼▼ **/
@media screen and ( max-width:1000px ){.conte_box ,.movie_box  { width : 72% ; }}
@media screen and ( max-width:800px ){.conte_box ,.movie_box{ width : 80% ; } .conte01 { font-size: 12px;  } .infome {width:80%; height: 45%;} }

@media screen and ( max-width:620px ) { .conte_box ,.movie_box{ width : 90% ; margin-bottom: 5px;  }  .conte01 { font-size: 11px; } }

/** ▼▼▼スマホ用▼▼▼ **/
@media screen and ( max-width:450px ) { .conte_box { margin-bottom: 20px; }.conte01 { font-size: 10px;  } }}





/*============================================
フッター
============================================*/

{}

.footer_home {  display: inline-block;  text-align:left; width:720px; height:20px;  margin-top: 30px ; font-size: 12px;  color:  #a65421;  font-family: 'Roboto', sans-serif; font-weight:100; line-height: 1.5em; position: relative; top: -200px; z-index: 50; }

/** ▼▼▼ブラウザワイド違い用▼▼▼ **/
@media screen and ( max-width:800px ){.footer_home { width : 90% ;  position: relative; top: -470px; }}

a.footer_home_color:link, a.footer_home_color:visited { color:  #a65421;  text-decoration: none; }
a.footer_home_color:hover { color: #ffc600;},a.footer_home_color:active { color: #8c9fff;}


#footer { width:100%; ; margin: 0 auto;  position: relative; top: -190px;}
/** ▼▼▼ブラウザワイド違い用▼▼▼ **/
@media screen and ( max-width:1000px ){ #footer { width : 90% ; margin: 0 auto; }}
@media screen and ( max-width:800px ){ #footer { width : 90% ; margin: 0 auto; position: relative; top: -460px; }}


/*============================================
ページトップボタン
============================================*/

#pageTop {  position: fixed;  bottom: 20px; right: 20px; }
#pageTop a {  display: block; z-index: 999; padding: 8px 0 0 0px; border-radius: 35px; width: 42px; height: 35px; background-color: #bfbfbf; color: #ffffff; font-weight: bold; text-decoration: none; text-align: center; opacity: 0.7; }
#pageTop a:hover { text-decoration: none; opacity: 0.4; }


/*============================================
スクロールメニュー
============================================*/


#header-change { display: flex; width:100%; height: 40px;  margin: 0 auto; padding-top: -30px;  text-align: center; position: fixed; top: 0px; transition: .5s;  z-index: 500;  background-color: rgba(180,180,180,0.9); }

#header-change #menu a{  color: #fff; text-decoration: none; }
a.header_title_color:link, a.header_title_color:visited { color:#d36015;  text-decoration: none; }
a.header_title_color:hover { background-color:   #a39a42; color:  #ffe173;},a.header_title_color:active { color: #8c9fff;}

#g_nav-change { width: 720px; margin: 0 auto;  position:relative; top:20px;  }
.change_box01{  float: left; width:150px; height: 15px; text-align: left; position:relative; top:-2px;  font-size: 14px; font-family: 'Roboto', sans-serif; font-weight:300; letter-spacing: 2.8px; color:#d36015;  text-decoration: none; }
.change_box02 { float: left;  width: 20px; height: 15px; }
.change_box03 { float: left;  width: 550px; height: 15px;  position:relative; top:3px; }
#menu-change { text-align: center; font-size: 12px; font-family: 'Roboto', sans-serif; font-weight:300;  }
#menu01_cg,#menu02_cg,#menu03_cg{ float: left; display: inline; width:120px; height:9px; border-left: 1px solid #ffffff; padding-top: 1px;  }
#menu03_cg { border-right: 1px solid #ffffff; }
#menu01_cg a:hover,#menu02_cg a:hover,#menu03_cg a:hover { background-color:  #c9c069;  color: #d36015; text-decoration: none; }
#menu-change  a { display: block ; height: 15px;text-decoration: none; position:relative; top:-4px;  }


/** ▼▼▼ブラウザワイド違い用▼▼▼ **/
@media screen and ( max-width:1000px ){ 
#g_nav-change {  width: 80%;  }
.change_box01 {  float: left; width:25%;  font-size: 15px; position:relative; top:-1px; }
.change_box02 { float: left;  width: 2%;  }
.change_box03 { float: left;  width: 73%; }
#menu-change {  font-size: 12px;  }
#menu01_cg,#menu02_cg,#menu03_cg { width:20%; }
}



@media screen and ( min-width:726px ) {
#g_nav-change_mb { display: none ; }
}


/** ▼▼▼ブラウザワイド違い用▼▼▼ **/
@media screen and ( max-width:725px ){ 

#header-change {  height: 45px;  background-color: rgba(200,200,200,0.9); }
#g_nav-change {  display: none ; }
.change_box01mb { float: left; text-align: right; width:180px; height: 47px;  position:relative; top:15px;  font-family: 'Roboto', sans-serif; font-weight:300; letter-spacing: 2.8px;  font-size: 17px; color:#d36015; }
.orange_line { width:auto; height:35px; border-bottom: 1px solid #d36015; position:relative; top:0px; margin: 0 auto; }
.btn { background:transparent url(http://www.ne.jp/asahi/gonzow/g-site/btn1.png) no-repeat 0 0; display: block; width:60px; height: 45px; position: fixed; top: 0px; right:5px; cursor: pointer; z-index: 200;}
.peke { background-position: -60px 0;}
.drawr {  display: none; background-color:rgba(100,100,100,0.8); position: absolute; top: 0px; right:0; width:180px;  height: 100px; padding:5px 0 20px 20px; z-index: 100;}
#menu-change_mb { width:180px; text-align: left; text-decoration: none; font-size: 12px; font-family: 'Roboto', sans-serif; font-weight:300;   }
#menu-change_mb a { color:#fff;  display: block; padding: 5px;}
#menu01_mb,#menu02_mb,#menu03_mb{  float: none;  border-left: 0px solid #ffffff; border-right: 0px solid #ffffff;}
#menu01_mb a:hover,#menu02_mb a:hover,#menu03_mb a:hover { background-color:  #b0aeae; color: #ffc600; text-decoration: none; }
}

/** ▼▼▼ブラウザワイド違い用▼▼▼ **/
@media screen and ( max-width:400px ){ 
#header-change {  height: 30px;  background-color: rgba(200,200,200,0.9); }
.change_box01mb { float: left; text-align: right; width:100px; height: 32px;  position:relative; top:7px;  font-size: 13px; }
.orange_line {  height:22px;  }
.btn { background:transparent url(http://www.ne.jp/asahi/gonzow/g-site/btn2.png) no-repeat 0 0; display: block; width:40px; height: 30px; }
.peke { background-position: -40px 0;}
.drawr {  width:110px; padding:8px 0 20px 10px; }
#menu-change_mb { width:110px;  font-size: 11px;  margin-top: 35px;  }
}



/* =========================================================
汎用クラス
========================================================= */


a:link { color: #ffffff; }
a:visited { color: #ffffff }

a:active { color: #ffff00; }

img { border: 0px;}


/** ▼divをリセットするのセット ▼ **/
.clear { clear:both; }  


-->
</style>
