/*----------------------------------------------------
210201
------------------------------------------------------*/
@import url(reset.css);
@import url(table.css);
@import url(text.css);
/*----------------------------------------------------
 layout
----------------------------------------------------*/
body { color: #535353; line-height: 180%; margin: 0; padding: 0; overflow-y: scroll; overflow-x: hidden; }
#clear { width: 100%; clear: both; margin: 0 0 -5px; }
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: 90%; 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
------------------------------------------------------*/
#index_container { background: url(../common/cust_img/kazari1.png) left bottom / 100% no-repeat; width: 100%; height: 85vh; position: relative; overflow: hidden; margin: 0; padding: 0; display: block; }
.slide_img2 { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; width: 100%; height: 65vh; position: absolute; top: 0px; left: 0px; z-index: 0; }
#img_container { background: url(../common/cust_img/kazari1.png) left bottom / 100% no-repeat; height: 50vh; position: relative; overflow: hidden; margin: 0; padding: 0; display: block; }
#container_warp { background: #fff; position: relative; top: 0; width: 100%; height: 100%; overflow: auto; margin: 0; padding: 0; }
#container { line-height: 140%; background: #fffcf3 url(../common/cust_img/kazari2.png) left top / 100% repeat-x; width: 100%; overflow: hidden; margin: 0; padding: 80px 0; display: block; }
/*----------------------------------------------------
 head
------------------------------------------------------*/
#header { background-color: #4f4630; width: 100%; position: fixed; top: 0; left: 0; z-index: 998; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; }
#nav { position: relative; width: 1000px; margin: 0 auto; padding: 0; display: block; }
#nav ul { width: 65%; float: right; }
#nav li a:link { text-decoration: none; color: #fff; width: auto; float: left; padding: 16px 20px; }
#nav li a:visited { text-decoration: none; color: #fff; }
#nav li a:hover { text-decoration: none; color: #a54a4a; background-color: rgba(255,255,255,0.3); }
#logo { width: auto; float: left; margin: 8px 15px 4px 0; }
/*----------------------------------------------------
 main
------------------------------------------------------*/
#main { position: relative; width: 1000px; margin: 0 auto; padding: 0; display: block; }
#main h1 { font-size: 180%; line-height: 150%; font-weight: bold; text-align: center; margin: 0 0 30px; padding: 25px 20px 10px; }
#main h2 { font-size: 160%; line-height: 170%; font-weight: bold; text-align: center; margin: 0; padding: 22px 0 22px 15px; }
#main h3 { font-size: 140%; line-height: 100%; font-weight: bold; margin: 0; padding: 15px 30px 10px; }
#main p { letter-spacing: 3px; line-height: 180%; padding: 8px 20px 4px; word-break: break-all; }
#noujou { background: url(../common/cust_img/index_6.jpg) center / cover no-repeat; width: 100%; height: 350px; float: left; margin: 0; padding: 0; display: block; }
#index_menu { background: #4f4630 url(../../common/cust_img/logo3.png); width: 100%; float: left; display: block; }
#index_detail { color: #fff; text-align: center; width: 42%; float: left; margin: 0; padding: 4%; display: block; }
#index_dphoto { width: 50%; float: left; margin: 0; padding: 0; display: block; }
#index_detail h1 { margin: 0 0 10px; }
#index_detail2 { color: #fff; text-align: center; width: 42%; float: right; margin: 0; padding: 4%; display: block; }
#index_dphoto2 { width: 50%; float: right; margin: 0; padding: 0; display: block; }
/*-----------------------------------------
 links&search
-----------------------------------------*/
#search { width: 65%; float: right; margin: 0 0 0 5%; padding: 10px 0 0; display: block; }
#search #tbox { width: 140px; float: left; padding: 8px; border: solid 1px #cacaca; display: inline; }
#search #btn{ width: auto; float: left; margin: 0; padding: 3px 0 0 5px; border: transparent; display: block; }
#link_button { width: auto; float: right; margin: 0 50px 0 0; }
.back_button { background-color: #ededed; font-size: 80%; float: left; margin: 5px 2px 10px; padding: 2px 5px; border: solid 1px #9d9d9d; display: block; }
.link_button { background-color: white; font-size: 80%; padding: 2px 5px; float: left; margin: 5px 2px 10px; border: solid 1px #9d9d9d; display: block; }
.link_button2 { font-size: 80%; display: block; margin: 5px 2px 10px; padding: 2px 5px; float: left; border: transparent; }
.next_button { background-color: #ededed; font-size: 80%; padding: 2px 5px; float: left; margin: 5px 2px 10px; border: solid 1px #9d9d9d; display: block; }
/*----------------------------------------------------
 side_navi
------------------------------------------------------*/
#main_body { line-height: 180%; width: 70%; float: left; margin: 0; padding: 0; display: block; }
#main_body h1 { font-size: 170%; font-weight: bold; margin: 0; padding: 22px 0 35px 5px; }
#main_body h2 { font-size: 140%; font-weight: bold; margin: 0; padding: 22px 0 22px 5px; }
#priv_body { line-height: 180%; width: 70%; float: left; margin: 0; padding: 0; display: block; }
#priv_body h1 { font-size: 170%; font-weight: bold; margin: 0; padding: 22px 0 35px 5px; }
#priv_body h2 { font-size: 140%; font-weight: bold; margin: 0; padding: 22px 0 22px 5px; }
#pig_body { line-height: 180%; width: 70%; float: left; margin: 0; padding: 0; display: block; }
#pig_body h1 { font-size: 170%; font-weight: bold; margin: 0; padding: 22px 0 35px 5px; }
#pig_body h2 { font-size: 140%; font-weight: bold; margin: 0; padding: 22px 0 22px 5px; }
#pig_body li { text-align: center; background-color: #f3eddb; width: 18%; float: left; margin: 0 1% 0 1%; padding: 2%; border: solid 3px #ddd3bc; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; }
#side_navi { font-size: 90%; width: 27%; float: left; margin: 3% 0 3% 3%; padding: 0 0 5%; display: block; }
#side_navi h3 { font-size: 120%; line-height: 100%; font-weight: bold; margin: 0; padding: 15px 30px 10px; }
#side_navi ul { width: 96%; float: left; margin: 0 2%; padding: 0; display: block; }
#side_navi li { width: 92%; float: left; margin: 2% 2% 2% 6%; padding: 0; display: block; }
#w_bace { background-color: rgba(206,201,187,0.7); margin: 0 10px; padding: 20px; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; -o-border-radius: 25px; }
/*----------------------------------------------------
 foot
------------------------------------------------------*/
#footer_warp { background-color: #4f4630; width: 100%; float: left; overflow: hidden; margin: 0; padding: 0; }
#footer { font-size: 100%; text-align: left; position: relative; width: 1000px; margin: 0 auto; padding: 20px 0 0; }
#footer #foot_logo { text-align: center; width: 30%; float: right; padding: 30px 0 0; }
#footer ul { width: 20%; float: left; padding: 10px 0 0 5%; }
#footer li a:link { text-decoration: none; color: #fff; width: 100%; float: left; padding: 0; }
#footer li a:visited { text-decoration: none; color: #fff; }
#footer li a:hover { text-decoration: none; color: #a54a4a; background-color: rgba(255,255,255,0.3); }
#adress { font-size: 80%; color: #fff; width: 40%; float: right; padding: 10px 0 0; }
#copy { color: #fff; font-size: 80%; text-align: center; width: 100%; float: left; margin: 0; padding: 30px 0; }
#copy a:link { text-decoration: none; color: #fff; }
#copy a:visited { text-decoration: none; color: #fff; }
#copy a:hover { text-decoration: none; color: #a54a4a; }
#page-top { font-size: 110%; position: fixed; bottom: 65px; right: 20px; z-index: 990; }
#page-top a { color: #4f4630; text-align: center; text-decoration: none; background-color: #ded4c0; width: 50px; padding: 10px 0; display: block; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; }
#page-top a:hover { color: #a54a4a; text-decoration: none; background-color: #c8bda7; }
/*----------------------------------------------------
 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; }
#one_culm { width: 92%; float: left; margin: 0 0 0 1.5%; padding: 2%; 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; }
#fours_culm { width: 21%; float: left; margin: 0; padding: 2%; display: block; }
.radio { display: none; }
.radio + .radio_image { margin: 0 5px 0 8px; padding: 0; 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; vertical-align: top; background-color: #cd6c6c; font-size: 60%; margin: 0 0 0 8px; padding: 5px 3px 2px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; }
.optional { color: #fff; vertical-align: top; background-color: #a0a0a0; font-size: 60%; margin: 0 0 0 8px; padding: 5px 3px 2px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-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; }
#radio_image { margin: 0 5px 0 8px; border: 4px #7a2c2c solid; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; }
/*----------------------------------------------------
 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: 3px 0; padding: 0; border: transparent; }
#main #agree p { font-size: 8pt; line-height: 130%; margin: 0; padding: 0 0 0 8px; }
#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: 80%; float: left; margin: 2% 0 0; padding: 0 0 2% 70px; }
#question_a h2 { color: #1a8200; font-size: 140%; font-weight: bold; line-height: 160%; }
#question_b { background-image: url(../common/cust_img/atob_2.png); background-repeat: no-repeat; width: 88%; float: right; margin: 0; padding: 2% 0 2% 70px; }
/*----------------------------------------------------
 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); }
.button:active { background: #1a92c2; box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2); color: #1679a1; }