/*----------------------------------------------------
191203
------------------------------------------------------*/
@import url(reset.css);
@import url(table.css);
@import url(text.css);
/*----------------------------------------------------
layout
----------------------------------------------------*/
body { color: #535353; margin: 0; padding: 0; overflow-y: scroll; overflow-x: hidden; }
.ie7 body{ overflow:hidden; }
#clear { width: 100%; clear: both; margin: 0 0 -5px; }
#clear2 { width: 100%; clear: both; margin: 0 0 5px; }
#clear3 { width: 100%; height: 115px; clear: both; display: block; }
img { max-width: 100%; height: auto; }
/*----------------------------------------------------
links
------------------------------------------------------*/
a:link { color: #5c789e; }
a:visited { color: #5c789e; }
a:hover { color: #a54a4a; }
a:active { color: #c3a942; }
/*----------------------------------------------------
slide
------------------------------------------------------*/
.slide_img,
.slide_img:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; }
.slide_img:after { content: ''; background: transparent url(../common/images/pattern.png) repeat top left; }
.slide_img li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; }
.slide_img li:nth-child(1) span { background-image: url(../common/data_img/bg_1.jpg); }
.slide_img li:nth-child(2) span { background-image: url(../common/data_img/bg_2.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; }
.slide_img li:nth-child(3) span { background-image: url(../common/data_img/bg_3.jpg); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; }
.slide_img li:nth-child(4) span { background-image: url(../common/data_img/bg_4.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; }
.slide_img li:nth-child(5) span { background-image: url(../common/data_img/bg_5.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; }
.slide_img li:nth-child(6) span { background-image: url(../common/data_img/bg_6.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; }
/*----------------------------------------------------
 Animation for the slideshow images
 ----------------------------------------------------*/
@-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } }
@-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } }
@-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } }
@-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } }
@keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } }
/*----------------------------------------------------
container
------------------------------------------------------*/
#container_warp { background: #fff; position: relative; top: 0; width: 100%; height: 100%; overflow: auto; margin: 0; padding: 0; }
#container { line-height: 140%; background: no-repeat scroll; width: 100%; overflow: hidden; margin: 0; padding: 30px 0; display: block; }
#index_container { line-height: 140%; width: 100%; height: 100vh; background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; overflow: hidden; margin: 0; padding: 0; display: block; }
#index_comm { position: relative; width: 915px; margin: 0 auto; padding: 0; display: block; }
#index_comm #news { background-color: rgba(255, 255, 255, 0.7); width: 570px; height: 150px; float: left; margin: 30px 0 30px 0; padding: 10px; display: block; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; }
#index_comm #news ul { width: 570px; height: 150px; overflow: auto; float: left; margin: 0; padding: 0; display: block; }
#index_comm #news li { width: 100%; float: left; margin: 0; padding: 0; display: block; }
#img_container,
#img_container:after { line-height: 140%; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; background-position: center; position: relative; width: 100%; height: 400px; overflow: hidden; margin: 0; padding: 0; display: block; order-right-style: solid; z-index: 0; }
#img_container:after { content: ''; background: transparent url(../common/images/pattern.png) repeat top left; }
#img_container div { color: #fff; text-align: center; position: absolute; top: 100px; right: 50px; width: 40%; z-index: 994; }
#img_container div h2 { font-size: 16px; padding: 0; line-height: 200px; }
/*----------------------------------------------------
top nav
------------------------------------------------------*/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; z-index: 999; }
.nav { background-color: rgba(186,169,143,0.9); width: 900px; padding: 0 0 0 20px; margin: 0 auto 130px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.nav a:link { color: #fff; }
.nav a:visited { color: #fff; }
.nav li { background-color: rgba(186,169,143,0.9); list-style: none; float: left; }
.nav li a { color: #5c789e; width: auto; text-decoration: none; padding: 20px; display: block; }
.nav li ul li:last-child { border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; }
.nav li a:hover { color: #a54a4a; background-color: rgba(255,255,255,0.1); }
.nav li ul { display: none; position: absolute; font-size: 85%; line-height: 120%; z-index: 997; }
.nav li ul li { float: none; }
.nav li ul li a { color: #5c789e; padding: 12px 20px; }
.nav li ul li a:hover { color: #5c789e; }
.nav li ul li:last-child a { border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; }
.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; padding: 0 0 0 120px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; }
.fixed li a:hover {}
/*----------------------------------------------------
head
------------------------------------------------------*/
.nav2 { background-color: rgba(186,169,143,0.9); font-size: 90%; position: relative; width: 1100px; padding: 0; margin: 0; z-index: 998; }
.nav2 a:link { color: #fff; }
.nav2 a:visited { color: #fff; }
.nav2 li { background-color: rgba(186,169,143,0.9); list-style: none; float: left; }
.nav2 li a { color: #5c789e; width: auto; text-decoration: none; padding: 20px; display: block; }
.nav2 li ul li:last-child { border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; }
.nav2 li a:hover { color: #a54a4a; background-color: rgba(255,255,255,0.8); }
.nav2 li ul { display: none; position: absolute; font-size: 85%; line-height: 120%; z-index: 998; }
.nav2 li ul li { float: none; }
.nav2 li ul li a { padding: 12px 20px 12px 20px; }
.nav2 li ul li a:hover { color: #a54a4a; }
.nav2 li ul li:last-child a { border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; }
#header { background-color: rgba(186,169,143,0.9); position: fixed; width: 88%; top: 0; left: 0; z-index: 998; padding: 0 0 0 12%; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; }
#nav li a:link { text-decoration: none; color: #fff; width: auto; float: left; padding: 16px 20px; }
#nav li a:hover { text-decoration: none; color: #a54a4a; background-color: rgba(255,255,255,0.3); }
#nav li a:visited { text-decoration: none; color: #fff; }
/*----------------------------------------------------
bottom menu
------------------------------------------------------*/
#menu { position: fixed; bottom: 0; width: 100%; z-index: 996; }
#ul_menu { background-color: rgba(186,169,143,0.9); list-style:none; width: 100%; height: 55px; margin: 3px 0 0; padding: 0 0 0 70px; }
#ul_menu a:link { color: #fff; }
#ul_menu a:visited { color: #fff; }
#ul_menu li { width:auto; float:left; position:relative; margin: 0; padding: 0; display: block; }
#ul_menu li a { color: #5c789e; display:block; float: none; margin: 0; padding: 15px; }
#ul_menu li a:hover { color: #a54a4a; background-color: rgba(230, 218, 200, 0.6); margin: 0; padding: 15px; display: block; }
#ul_menu li ul li { width:180px; float:left; position:relative; margin: 0; padding: 0; display: block; }
#ul_menu li ul li a { color: #5c789e; display:block; float: none; margin: 0; padding: 12px 8px 8px 15px; }
#ul_menu li ul li a:hover { color: #a54a4a; background-color: rgba(230, 218, 200, 0.6); margin: 0; padding: 12px 8px 8px 15px; display: block; }
#ul_menu li ul li:first-child a:hover { border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; }
.sub_list { background-color: rgba(186,169,143,0.9); bottom: 30px; position: absolute; margin: 0 0 15px; padding: 0; list-style:none; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; -o-border-radius: 5px 5px 0 0; }
/*----------------------------------------------------
main
------------------------------------------------------*/
#logo { width: auto; float: left; margin: 4px 15px 4px 0; }
#main { position: relative; width: 1000px; margin: 0 auto; padding: 0; display: block; }
#main h1 { font-size: 170%; font-weight: bold; margin: 0 0 30px; padding: 22px 0 35px 5px; }
#main h2 { font-size: 140%; font-weight: bold; margin: 0; padding: 22px 0 35px 5px; }
#main h3 { font-size: 120%; font-weight: bold; margin: 0; padding: 8px 0 25px 15px; }
#main p { letter-spacing: 3px; line-height: 160%; padding: 7px 15px; }
#main ul { width: auto; float: left; margin: 30px 0 30px 5px; padding: 0; display: block; }
#main li { width: auto; float: left; margin: 0 0 20px 20px; padding: 0; display: inline; }
/*----------------------------------------------------
box
------------------------------------------------------*/
#bara_box { width: 100%; height: 100px; float: left; margin: 0; padding: 0; display: block; }
#bara_box2 { width: 100%; height: 90px; float: left; margin: 0; padding: 0; display: block; }
#bara_box3 { width: 100%; height: 100px; float: left; margin: 0; padding: 0; display: block; }
#two_culm { width: 42%; float: left; margin: 0 0 0 1.5%; padding: 2%; display: block; }
#twodou_culm { width: 60%; float: left; margin: 0 0 0 1.5%; padding: 2%; display: block; }
#three_culm { width: 29%; float: left; margin: 0; padding: 2%; display: block; }
#main_blocks { position: relative; width: 1100px; margin: 0 auto; padding: 0; display: block; }
#main_blocks h1 { font-size: 140%; font-weight: bold; margin: 8px 0 5px 8px; padding: 0; background: url(../common/cust_img/h2.png) repeat-x scroll left bottom; }
#main_blocks h2 { font-size: 120%; font-weight: bold; margin: 0; padding: 0; }
#main_blocks p { padding: 7px 15px; }
#main_blocks table { width: 100%; float: left; margin: 0; padding: 0; }
#bara_box_blocks { width: 100%; height: 100px; float: left; margin: 0; padding: 0; display: block; }
#sns_box { width: auto; float: left; display: block; }
#map_text { width: 96%; float: left; margin: 0; padding: 0; display: block; }
/*----------------------------------------------------
other
------------------------------------------------------*/
#news { background-color: rgba(255, 255, 255, 0.7); width: 570px; height: 150px; float: left; margin: 30px 0 30px 0; padding: 20px; display: block; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; }
#news ul { width: 570px; height: 150px; overflow: auto; float: left; margin: 0; padding: 0; display: block; }
#news li { width: 100%; float: left; margin: 0; padding: 0; display: block; }
#search { width: 65%; float: right; margin: 0 0 0 5%; padding: 10px 0 0; display: block; }
#search input { background-image: none; float: left; margin: 0; padding: 7px; }
#search #tbox { width: 140px; border: solid 1px #cacaca; display: inline; }
#search #btn{ width: auto; float: left; margin: 0; padding: 3px 0 0 5px; border: transparent; display: block; }
.radio { display: none; }
.radio + .radio_image { margin: 0 5px 0 8px; opacity:0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; border: 4px #ffffff solid; box-shadow: 0 0 8px gray; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; }
.radio:checked + .radio_image { margin: 0 5px 0 8px; opacity:1; filter: alpha(opacity=100); -ms-filter: "alpha( opacity=100 )"; border: 4px #7a2c2c solid;　box-shadow: 0 0 8px gray; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; }
.require { color: #fff; background-color: #cd6c6c; font-size: 60%; margin: 0 0 0 8px; padding: 3px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.optional { color: #fff; background-color: #a0a0a0; font-size: 60%; margin: 0 0 0 8px; padding: 3px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.no_rist { color: #a3a3a3; font-size: 90%; margin: 0; padding: 75px 0 0 30px; display: block; }
.height_img{ position: relative; overflow: hidden; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; }
.no_line tr:nth-child(1) { border-top: none; }
.text_marg { margin: 0 0.5% 2% 3%; }
#favo { width: 15%; float: right; margin: 0 5px 0 0; padding: 8px 0 0; display: block; }
#favo img { width: 33px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }
/*----------------------------------------------------
foot
------------------------------------------------------*/
#footer_warp { background-color: rgba(186,169,143,0.9); width: 100%; float: left; overflow: hidden; margin: 0; padding: 0; }
#footer { font-size: 100%; text-align: left; position: relative; width: 1000px; height: 200px; margin: 0 auto; padding: 80px 0 0; }
#footer #foot_logo { width: 25%; float: right; }
#footer ul { width: 75%; float: left; }
#footer li a:link { text-decoration: none; color: #fff; width: auto; float: left; padding: 16px 20px; }
#footer li a:hover { text-decoration: none; color: #a54a4a; background-color: rgba(255,255,255,0.3); }
#footer li a:visited { text-decoration: none; color: #fff; }
#copy { color: #fff; font-size: 80%; text-align: center; width: 100%; float: left; margin: 0; padding: 40px 0; }
#copy a:link { text-decoration: none; color: #fff; }
#copy a:hover { text-decoration: none; color: #a54a4a; }
#copy a:visited { text-decoration: none; color: #fff; }
#page-top { font-size: 110%; position: fixed; bottom: 65px; right: 20px; }
#page-top a { color: #fff; text-align: center; text-decoration: none; background-color: #a54a4a; width: 50px; padding: 16px 0; display: block; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }
#page-top a:hover { text-decoration: none; background-color: #5c789e; }
/*----------------------------------------------------
links
------------------------------------------------------*/
#link_button { float: right; margin: 0 20px 0 0; }
.back_button { font-size: 8pt; background-color: #fcf9f1; float: left; margin: 5px 2px 10px; padding: 2px 5px; border: solid 1px #ea9d61; display: block; }
.link_button { font-size: 8pt; background-color: white; padding: 2px 5px; float: left; margin: 5px 2px 10px; border: solid 1px #ea9d61; display: block; }
.link_button2 { font-size: 8pt; background-color: none; display: block; margin: 5px 2px 10px; padding: 2px 5px; float: left; border: transparent; }
.next_button { font-size: 8pt; background-color: #fcf9f1; padding: 2px 5px; float: left; margin: 5px 2px 10px; border: solid 1px #ea9d61; display: block; }
/*----------------------------------------------------
htmlcre
------------------------------------------------------*/
#htmlcre { width: 90%; overflow: hidden; }
#htmlcre p { margin: 8px 10px 5px; }
#htmlcre ol { margin: 8px 20px 5px 30px; list-style-type: decimal; }
#htmlcre ul { margin: 8px 20px 5px 30px; list-style-type: disc; }
#htmlcre li { margin: 8px 20px 5px 30px; }
#factory { width: 600px; height: 373px; overflow: scroll; margin: 0 auto 15px; }
/*----------------------------------------------------
privacy
------------------------------------------------------*/
#main #privacy { font-size: 8pt; position: relative; width: 93%; height: 153px; overflow: auto; margin: 0 auto; }
#main #privacy h2 { color: #6d98d0; font-size: 9pt; font-weight: bold; margin: 3px 0; padding: 0; border: transparent; }
#main #privacy p { font-size: 8pt; line-height: 130%; margin: 0; padding: 0 0 0 8px; }
#main #privacy a { font-size: 8pt; line-height: 130%; margin: 0; padding: 0 0 0 8px; }
/*----------------------------------------------------
agree
------------------------------------------------------*/
#main #agree { font-size: 8pt; position: relative; width: 93%; height: 153px; overflow: auto; margin: 0 auto; }
#main #agree h2 { color: #6d98d0; font-size: 9pt; font-weight: bold; margin: 3px 0; padding: 0; border: transparent; }
#main #agree h3 { font-size: 8pt; font-weight: bold; margin: 0; padding: 0 0 0 8px; border: transparent; }
#main #agree p { font-size: 8pt; line-height: 130%; margin: 0; padding: 0 0 0 12px; }
#main #agree a { font-size: 8pt; line-height: 130%; margin: 0; padding: 0 0 0 8px; }
/*----------------------------------------------------
question
------------------------------------------------------*/
#question_a { background-image: url(../common/cust_img/atob_1.png); background-repeat: no-repeat; width: 88%; margin: 0 0 0 5%; padding: 0 0 2% 8%; }
#question_a h2 { color: #1a8200; font-size: 12pt; font-weight: normal; }
#question_b { background-image: url(../common/cust_img/atob_2.png); background-repeat: no-repeat; overflow: hidden width: 83%;; margin: 0 0 0 10%; padding: 2% 0 2% 8%; }
/*----------------------------------------------------
form
------------------------------------------------------*/
.button { padding: 5px 10px; border: 1px solid #ababab; background-color: #ececec; background-image: -webkit-linear-gradient(top, #ffffff, #bfbfbf); background-image: linear-gradient(to bottom, #ffffff, #bfbfbf); }
.button:hover { border:1px solid #93c9de; background-color: #bbe6f7; background-image: -webkit-linear-gradient(top, #bfe3f2, #8cb9ca); background-image: linear-gradient(to bottom, #bfe3f2, #8cb9ca); }
/*----------------------------------------------------
loading
------------------------------------------------------*/
#loader-bg { display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #fff; z-index: 999; }
#loader { display: none; position: fixed; top: 50%; left: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; text-align: center; color: #ba9dd1; z-index: 998; }
/*----------------------------------------------------
jcarousel
------------------------------------------------------*/
.jcarousel-skin-tango .jcarousel-container { background-color: rgba(255, 255, 255, 0.7); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.jcarousel-skin-tango .jcarousel-container-horizontal { width: 94.5%; margin: 0; padding: 15px 3.5% 0 2%; }
.jcarousel-skin-tango .jcarousel-clip-horizontal { width: 100%; height: auto; margin: 0; padding: 0; }
/*----------------------------------------------------
Horizontal Buttons
------------------------------------------------------*/
.jcarousel-skin-tango .jcarousel-next-horizontal { position: absolute; top: 35%; width: 48px; height: 48px; cursor: pointer; background: url(../common/images/next-horizontal.png) no-repeat; right: -5px; }
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal { left: 0; right: auto; background-image: url(../common/images/prev-horizontal.png); }
.jcarousel-skin-tango .jcarousel-next-horizontal:hover { background-position: -48px 0; }
.jcarousel-skin-tango .jcarousel-next-horizontal:active { background-position: -96px 0; }
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -144px 0; }
.jcarousel-skin-tango .jcarousel-prev-horizontal { position: absolute; top: 35%; left: 0; width: 48px; height: 48px; cursor: pointer; background: url(../common/images/prev-horizontal.png) no-repeat; left: -5px; }
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal { left: auto; right: 0; background-image: url(../common/images/next-horizontal.png); }
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover { background-position: -48px 0; }
.jcarousel-skin-tango .jcarousel-prev-horizontal:active { background-position: -96px 0; }
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active { cursor: default; background-position: -144px 0; }