@charset "Shift_JIS";
body{
   margin-top : 0px;
   margin-left : 0px;
   margin-right : 0px;
   margin-bottom : 0px;
}


.inner{
   position:relative;
   width:1100px;
   margin:0 auto;
}
header{
   height:90px;
   box-sizing:border-box;
   position:relative;
   width:100%;
   border-top:1px solid rgb(0, 120, 130);
   background:repeating-linear-gradient(#fff 0, #fff 2.0px, #e6f0f0 1.0px, #e6f0f0 3px);
}
@media screen and (max-width: 880px) {
header{
   background-image : url(../img/bg_head.png);
   background-repeat : repeat-x;
   background-position : left bottom;
}
}

nav::after{
   content:'';
   display:block;
   clear:both;
}
a.link_1{
   color : #fff;
   font-size : 13px;
   font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","EE EゴシチE","Osaka";
   padding : 6px 12px 4px 12px;
   border: 1px solid;
   border-color : rgb(0, 135, 85) rgba(255, 255, 255, 0.7) rgb(0, 135, 85) rgb(0, 135, 85);
   border-radius: 5px 0px 0px 5px;
   text-shadow: 1px 1px 2px rgba(0, 90, 0, 1.0);
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#008250+0,82aa96+100 */
background: #008250;
   /* Old browsers */
background: -moz-linear-gradient(top,  #008250 0%, #82aa96 100%);
   /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #008250 0%,#82aa96 100%);
   /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #008250 0%,#82aa96 100%);
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008250', endColorstr='#82aa96',GradientType=0 );
   /* IE6-9 */

 transition: 0.4s;
}
.link_1:hover{
   text-shadow: 1px 1px 2px rgba(0, 80, 0, 1.0);
   background : rgba(0, 120, 80, 1.0);
}
a.link_1_2{
   color : #fff;
   font-size : 13px;
   font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","EE EゴシチE","Osaka";
   padding : 6px 12px 4px 12px;
   border-top: 1px solid rgb(0, 135, 85);
   border-bottom: 1px solid rgb(0, 135, 85);
   border-right: 1px solid rgba(255, 255, 255, 0.7);
   text-shadow: 1px 1px 2px rgba(0, 90, 0, 1.0);
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#008250+0,82aa96+100 */
background: #008250;
   /* Old browsers */
background: -moz-linear-gradient(top,  #008250 0%, #82aa96 100%);
   /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #008250 0%,#82aa96 100%);
   /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #008250 0%,#82aa96 100%);
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008250', endColorstr='#82aa96',GradientType=0 );
   /* IE6-9 */

 transition: 0.4s;
}
.link_1_2:hover{
   text-shadow: 1px 1px 2px rgba(0, 80, 0, 1.0);
   background : rgba(0, 120, 80, 1.0);
}
a.link_2{
   color : #fff;
   font-size : 13px;
   font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","EE EゴシチE","Osaka";
   background : rgba(220, 90, 140, 1.0);
   padding : 6px 12px 4px 12px;
   border-top: 1px solid rgb(0, 135, 85);
   border-right: 1px solid rgb(0, 135, 85);
   border-bottom: 1px solid rgb(0, 135, 85);
   border-radius: 0px 5px 5px 0px;
   text-shadow: 1px 1px 2px rgba(0, 90, 0, 1.0);
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#008250+0,82aa96+100 */
background: #008250;
   /* Old browsers */
background: -moz-linear-gradient(top,  #008250 0%, #82aa96 100%);
   /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #008250 0%,#82aa96 100%);
   /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #008250 0%,#82aa96 100%);
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008250', endColorstr='#82aa96',GradientType=0 );
   /* IE6-9 */
 transition: 0.4s;
}
.link_2:hover{
   text-shadow: 1px 1px 2px rgba(0, 80, 0, 1.0);
   background : rgba(0, 120, 80, 1.0);
}
/*================================================
 *PC 
================================================*/
.logo{
   color : rgba(30, 70, 100,0.80);
   font-size : 28px;
   font-weight : bold;
   font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","EE EゴシチE","Osaka";
   text-align : left;
   position : relative;
   left : 16px;
   bottom : 38px;
   text-shadow: 1px 1px 2px rgba(210, 210, 210, 0.45);
}
.logo_3{
   color : rgba(30, 70, 100,0.80);
   font-size : 34px;
   font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","EE EゴシチE","Osaka";
   font-weight : bold;
   text-align : left;
   position : relative;
   left : 20px;
   bottom : 37px;
   text-shadow: 1px 1px 2px rgba(210, 210, 210, 0.45);
}
.img_logo{
   position : relative;
   left : 0px;
   bottom: 12px;
   width : 12%;
}
h1{
   width:900px;
   text-align: left;
}
#h_btn{
   text-align:right;
   position:absolute;
   top:17px;
   right:0px;
   margin:2;
   z-index:0;
}
/*================================================
 1024
 ================================================*/
@media screen and (max-width:1024px) {
   header{
   height:90px;
   width:100%;
}
h1{
   width:900px;
   text-align: left;
}
.logo{
   font-size : 28px;
   position : relative;
   left : 14px;
   bottom : 24px;
}
.logo_3{
   font-size : 36px;
   left : 24px;
   bottom : 24px;
}
.img_logo{
   position : relative;
   left : 2px;
   bottom: 4px;
   width : 10%;
}
#h_btn{
   text-align:right;
   position:absolute;
   top:15px;
   right:6px;
   z-index:0;
}
}
/*================================================
 960
 ================================================*/
@media screen and (max-width:960px) {
   header{
   height:90px;
   width:100%;
}
h1{
   width:900px;
   text-align: left;
}
.logo{
   font-size : 26px;
   position : relative;
   left : 12px;
   bottom : 20px;
}
.logo_3{
   font-size : 32px;
   left : 24px;
   bottom : 20px;
}
.img_logo{
   position : relative;
   left : 2px;
   bottom: 4px;
   width : 9%;
}
#h_btn{
   text-align:right;
   position:absolute;
   top:17px;
   right:6px;
   z-index:0;
}
}
/*================================================
 880
 ================================================*/
@media screen and (max-width:880px) {
   header{
   z-index:1;
   box-sizing:border-box;
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:90px;
   padding:0px 0px 0px 0px;
   border-bottom: 1px solid rgba(0, 90, 110,0.85);
}
h1{
   position : relative;
   bottom: 0px;
   width:90%;
   padding:0;
}
.logo{
   font-size : 20pt;
   position : relative;
   left : 30px;
   bottom :22px;
}
.logo_3{
   font-size : 34px;
   position : relative;
   left : 40px;
   bottom : 22px;
}
.img_logo{
   position : relative;
   left : 14px;
   bottom: 5px;
   width : 12%;
}
#h_btn{
   display:none;
}
}
}
/*================================================
 780
 ================================================*/
@media screen and (max-width:780px) {
   header{
   height:90px;
}
.logo{
   color : rgb(40, 60, 80);
   font-size : 22px;
   position : relative;
   left : 20px;
   bottom : 24px;
}
.logo_3{
   color : rgb(40, 60, 80);
   font-size : 34px;
   position : relative;
   left : 40px;
   bottom : 24px;
}
.img_logo{
   position : relative;
   left : 2px;
   bottom: 6px;
   width : 10%;
}
h1{
   width:100%;
}
}
/*================================================
 736
 ================================================*/
@media screen and (max-width:736px) {
   header{
   height:90px;
}
.logo{
   font-size : 26px;
   position : relative;
   left : 20px;
   bottom : 20px;
}
.logo_3{
   font-size : 32px;
   position : relative;
   left : 40px;
   bottom : 20px;
}
.img_logo{
   position : relative;
   left : 8px;
   bottom: 4px;
   width : 11%;
}
h1{
   width:100%;
}
}
/*=======================
 680
 ========================*/
@media screen and (max-width:680px) {
   header{
   height:90px;
}
.logo{
   font-size : 24px;
   position : relative;
   left : 14px;
   bottom : 22px;
}
.logo_3{
   font-size : 30px;
   position : relative;
   left : 24px;
   bottom : 22px;
}
.img_logo{
   position : relative;
   left : 2px;
   bottom: 6px;
   width : 14%;
}
h1{
   width:100%;
}
}
/*=======================
 480
 ========================*/
@media screen and (max-width:480px) {
   header{
   width:100%;
   height:70px;
}
h1{
   position : relative;
   bottom: 0px;
   width:100%;
   padding:0;
}
.logo{
   font-size : 18px;
   position : relative;
   left : 6px;
   bottom :24px;
}
.logo_3{
   font-size : 24px;
   position : relative;
   left : 14px;
   bottom : 24px;
}
.img_logo{
   position : relative;
   left : 6px;
   bottom: 10px;
   width : 16%;
}
}
/*=======================
 420
 ========================*/
@media screen and (max-width:420px) {
   header{
   width:100%;
   height:70px;
}
h1{
   position : relative;
   bottom: 0px;
   width:100%;
   padding:0;
}
.logo{
   font-size : 18px;
   position : relative;
   left : 6px;
   bottom :24px;
}
.logo_3{
   font-size : 24px;
   position : relative;
   left : 10px;
   bottom : 24px;
}
.img_logo{
   position : relative;
   left : 2px;
   bottom: 10px;
   width : 16%;
}
}
/*=======================
 400
 ========================*/
@media screen and (max-width:400px) {
   header{
   width:100%;
   height:70px;
}
h1{
   position : relative;
   bottom: 0px;
   width:100%;
   padding:0;
}
.logo{
   font-size : 16px;
   position : relative;
   left : 2px;
   bottom :16px;
}
.logo_3{
   font-size : 20px;
   position : relative;
   left : 10px;
   bottom : 16px;
}
.img_logo{
   position : relative;
   left : 0px;
   bottom: 6px;
   width : 14%;
}
}
@media screen and (max-width: 1024px){
   .inner{
   position:relative;
   width:100%;
   margin:0 auto;
}
a.link_1{
   font-size : 13px;
   padding : 7px 16px 5px 16px;
}
a.link_1_2{
   font-size : 13px;
   padding : 7px 16px 5px 16px;
}
a.link_2{
   font-size : 13px;
   padding : 7px 16px 5px 16px;
}
}
@media screen and (max-width: 960px){
   a.link_1{
   font-size : 13px;
   padding : 7px 16px 5px 16px;
}
a.link_1_2{
   font-size : 13px;
   padding : 7px 16px 5px 16px;
}
a.link_2{
   font-size : 13px;
   padding : 7px 16px 5px 16px;
}
}
/*=======================
言語選択
 ========================*/
.century_nav_1{
   font-family: century;
   font-size: 11pt;
}
.century_nav{
   font-family: century;
   font-size: 14px;
}
a:hover.lang{
   -ms-filter: "alpha( opacity=0.70 )";
   opacity: 0.70;
   text-decoration: none;
   transition: 0.6s;
}
html,body,#container_pack{
   height: 100%;
}
div #language p{
   margin: 0 0 20px;
}
/*-----------------------------------------
位置調整
 ------------------------------------------*/
div.ja #language{
   position: absolute;
   float: none;
   margin-top: 0px;
   top: 11px;
   right: 3px;
   border: 1px solid rgba(200, 60, 120, 1.0);
   z-index:10;
}
@media screen and (max-width: 1024px) {
   div.ja #language{
   top: 11px;
   right: 10px;
}
}
/*-----------------------------------------

 ------------------------------------------*/
div.ja #language ul{
   float: none;
   margin: 0 -1px;
   padding: 0;
   border-left: 1px solid rgba(200, 60, 120, 1.0);
   border-right: 1px solid rgba(200, 60, 120, 1.0);
   border-bottom: 1px solid rgba(200, 60, 120, 1.0);
   z-index:10;
}
div.ja #language li{
   float: none;
   margin: 0;
   z-index:10;
}
div.ja #language a{
   font-size: 13px;
   line-height: 1.2;
}
div #language{
   width: 128px;
   height: 28px;
   display: block;
   position: relative;
   margin-top: 5px;
   margin-left: 10px;
}
div #language p{
   text-decoration: none;
   color: inherit;
   background: #fff;
   display: inline-block;
   padding: 0 10px;
   line-height: 28px;
   position: relative;
   border-right: 28px solid rgb(180, 40, 90);
   width: 78px;
   text-align: center;
   cursor: default;
   padding-right: 16.5px;
   position: relative;
   padding-right: 12px !important;
}
div #language p::after{
   content: "\025bc";
   color: #fff;
   font-size: 12px;
   width: 10px;
   height: 6.5px;
   position: absolute;
   top: 50%;
   right: 0;
   margin-top: -13px;
}
div #language p::after{
   right: -18px;
}
div #language ul{
   display: none;
   position: absolute;
   top: 29.0px;
   right: 0;
   width: 100%;
}
div #language ul a{
   display: block;
   padding: 8px;
   background: rgb(180, 40, 90);
   color: #fff;
   text-align: center;
   text-shadow: 1px 1px 2px rgba(0, 0, 255, 0.35);
}
div #language:hover ul{
   background: rgba(180, 40, 90, 0.7);
   display: block;
}
div #language label,#language input{
   display: none;
}
@media screen and (max-width: 880px){
   .ja{
   display:none;
}
.lang#language{
   display:none;
}
}