/* Body
---------------------------------------------------------------------- */
body {
background: url(../../images/bg.png) center 0 repeat;
-webkit-background-size: 678px 559px;
-moz-background-size: 678px 559px;
background-size: 678px 559px;
font: 62.5%/1.4 "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
font-weight: normal;
color: #000000;
}
/* Links
---------------------------------------------------------------------- */
a, a:visited {
color: #0080FF;
}
a:hover, a:focus {
color: black;
}
/* Typography
--------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
color: #252525;
font-style: normal;
text-rendering: optimizeLegibility;
margin: 18px 0 15px;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: inherit;
}
h1 {
font-size: 3em;
line-height: 1.8;
margin-top: 0;
letter-spacing: -1px;
}
h2 {
font-size: 24px;
line-height: 30px;
}
h3 {
font-size: 20px;
line-height: 30px;
}
h4 {
font-size: 17px;
line-height: 30px;
}
h5 {
font-size: 14px;
line-height: 30px;
margin-top: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
h6 {
font-size: 13px;
line-height: 30px;
margin-top: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
p {
margin: 15px 0 15px 0;
}
p img {
margin: 0;
}
p.lead {
font: 17px/33px "merriweather-light", serif;
color: #707273;
}
em {
font: 15px/30px "merriweather-italic", serif;
font-style: normal;
}
small {
font-size: 11px;
line-height: inherit;
}
blockquote {
margin: 18px 0px;
padding-left: 40px;
position: relative;
}
blockquote:before {
content: "\201C";
opacity: 0.45;
font-size: 80px;
line-height: 0px;
margin: 0;
font-family: arial, sans-serif;
position: absolute;
top: 30px;
left: 0;
}
blockquote p {
font-family: georgia, serif;
font-style: italic;
padding: 0;
font-size: 18px;
line-height: 30px;
}
blockquote cite {
display: block;
font-size: 12px;
font-style: normal;
line-height: 18px;
}
blockquote cite:before {
content: "\2014 \0020";
}
blockquote cite a, blockquote cite a:visited {
color: #707273;
border: none;
}
abbr {
font-family: "merriweather-bold", serif;
font-variant: small-caps;
text-transform: lowercase;
letter-spacing: .5px;
color: #7d7e80;
}
pre, code {
font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
code {
padding: 3px;
background: #ecf0f1;
color: #707273;
border-radius: 3px;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
mark {
background: #FFF49B;
color: #000;
}
hr {
border: solid white;
border-width: 1px 0 0;
clear: both;
margin: 23px 0 12px;
height: 0;
}
/* Lists
--------------------------------------------------------------------- */
ul, ol {
margin-top: 15px;
margin-bottom: 15px;
}
ul {
list-style: disc;
margin-left: 17px;
}
dl {
margin: 0;
}
dt {
margin: 0;
}
dd {
margin: 0;
}
/* Floated Image
--------------------------------------------------------------------- */
img.pull-right {
margin: 12px 0px 0px 18px;
}
img.pull-left {
margin: 12px 18px 0px 0px;
}
/*
/* c. Forms
/* =================================================================== */
form {
margin-bottom: 24px;
}
fieldset {
margin: 0 0 24px 0;
padding: 0;
border: none;
}
input, button {
-webkit-font-smoothing: antialiased;
}
input[type="text"],
input[type="tel"],
input[type="password"],
input[type="email"],
textarea,
select {
display: block;
padding: 1% 15px;
margin: 0 0 5px 0;
border: 0;
outline: none;
vertical-align: middle;
color: #000000;
font-size: 1em;
border-radius: 3px;
max-width: 100%;
background: transparent;
border: 1px solid #999999;
}
textarea {
min-height: 162px;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
background: white;
}
input[type="checkbox"], input[type="radio"] {
font-size: 15px;
color: #575859;
}
input[type="checkbox"] {
display: inline;
}
/* ------------------------
Magnific Popup CSS
------------------------ */
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
}
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden;
}
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0;
box-sizing: border-box; }
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
.mfp-align-top .mfp-container:before {
display: none; }
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045; }
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
.mfp-ajax-cur {
cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
cursor: auto; }
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.mfp-loading.mfp-figure {
display: none; }
.mfp-hide {
display: none !important; }
.mfp-preloader {
color: #CCC;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044; }
.mfp-preloader a {
color: #CCC; }
.mfp-preloader a:hover {
color: #FFF; }
.mfp-s-ready .mfp-preloader {
display: none; }
.mfp-s-error .mfp-content {
display: none; }
button.mfp-close,
button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation; }
button::-moz-focus-inner {
padding: 0;
border: 0; }
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: #FFF;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace; }
.mfp-close:hover,
.mfp-close:focus {
opacity: 1; }
.mfp-close:active {
top: 1px; }
.mfp-close-btn-in .mfp-close {
color: #333; }
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: #FFF;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #CCC;
font-size: 12px;
line-height: 18px;
white-space: nowrap; }
.mfp-arrow {
position: absolute;
opacity: 0.65;
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: transparent; }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1; }
.mfp-arrow:before,
.mfp-arrow:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent; }
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px; }
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7; }
.mfp-arrow-left {
left: 0; }
.mfp-arrow-left:after {
border-right: 17px solid #FFF;
margin-left: 31px; }
.mfp-arrow-left:before {
margin-left: 25px;
border-right: 27px solid #3F3F3F; }
.mfp-arrow-right {
right: 0; }
.mfp-arrow-right:after {
border-left: 17px solid #FFF;
margin-left: 39px; }
.mfp-arrow-right:before {
border-left: 27px solid #3F3F3F; }
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #000; }
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; }
/* The shadow behind the image */
.mfp-figure {
line-height: 0; }
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444; }
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px; }
.mfp-figure figure {
margin: 0; }
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto; }
.mfp-title {
text-align: left;
line-height: 18px;
color: #F3F3F3;
word-wrap: break-word;
padding-right: 36px; }
.mfp-image-holder .mfp-content {
max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0; }
.mfp-img-mobile img.mfp-img {
padding: 0; }
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0; }
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px; }
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
box-sizing: border-box; }
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0; }
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px; }
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0; }
}
@media all and (max-width: 900px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75); }
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0; }
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%; }
.mfp-container {
padding-left: 6px;
padding-right: 6px; }
}
/*
====== mfp Zoom effect ======
*/
.mfp-zoom-in {
/* start state */
/* animate in */
/* animate out */
}
.mfp-zoom-in .mfp-with-anim {
opacity: 0;
transition: all 0.2s ease-in-out;
transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
opacity: 1;
transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
transform: scale(0.8);
opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
/*
====== mfp Newspaper effect ======
*/
.mfp-newspaper {
/* start state */
/* animate in */
/* animate out */
}
.mfp-newspaper .mfp-with-anim {
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.5s;
transform: scale(0) rotate(500deg);
}
.mfp-newspaper.mfp-bg {
opacity: 0;
transition: all 0.5s;
}
.mfp-newspaper.mfp-ready .mfp-with-anim {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.mfp-newspaper.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-newspaper.mfp-removing .mfp-with-anim {
transform: scale(0) rotate(500deg);
opacity: 0;
}
.mfp-newspaper.mfp-removing.mfp-bg {
opacity: 0;
}
/*
====== mfp Move-horizontal effect ======
*/
.mfp-move-horizontal {
/* start state */
/* animate in */
/* animate out */
}
.mfp-move-horizontal .mfp-with-anim {
opacity: 0;
transition: all 0.3s;
transform: translateX(-50px);
}
.mfp-move-horizontal.mfp-bg {
opacity: 0;
transition: all 0.3s;
}
.mfp-move-horizontal.mfp-ready .mfp-with-anim {
opacity: 1;
transform: translateX(0);
}
.mfp-move-horizontal.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-move-horizontal.mfp-removing .mfp-with-anim {
transform: translateX(50px);
opacity: 0;
}
.mfp-move-horizontal.mfp-removing.mfp-bg {
opacity: 0;
}
/*
====== mfp Move-from-top effect ======
*/
.mfp-move-from-top {
/* start state */
/* animate in */
/* animate out */
}
.mfp-move-from-top .mfp-content {
vertical-align: top;
}
.mfp-move-from-top .mfp-with-anim {
opacity: 0;
transition: all 0.5s;
transform: translateY(-100px);
}
.mfp-move-from-top.mfp-bg {
opacity: 0;
transition: all 0.5s;
}
.mfp-move-from-top.mfp-ready .mfp-with-anim {
opacity: 1;
transform: translateY(0);
}
.mfp-move-from-top.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-move-from-top.mfp-removing .mfp-with-anim {
transform: translateY(-50px);
opacity: 0;
}
.mfp-move-from-top.mfp-removing.mfp-bg {
opacity: 0;
}
/*
====== mfp 3d unfold ======
*/
.mfp-3d-unfold {
/* start state */
/* animate in */
/* animate out */
}
.mfp-3d-unfold .mfp-content {
perspective: 2000px;
}
.mfp-3d-unfold .mfp-with-anim {
opacity: 0;
transition: all 0.3s ease-in-out;
transform-style: preserve-3d;
transform: rotateY(-60deg);
}
.mfp-3d-unfold.mfp-bg {
opacity: 0;
transition: all 0.5s;
}
.mfp-3d-unfold.mfp-ready .mfp-with-anim {
opacity: 1;
transform: rotateY(0deg);
}
.mfp-3d-unfold.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-3d-unfold.mfp-removing .mfp-with-anim {
transform: rotateY(60deg);
opacity: 0;
}
.mfp-3d-unfold.mfp-removing.mfp-bg {
opacity: 0;
}
/*
====== mfp Zoom-out effect ======
*/
.mfp-zoom-out {
/* start state */
/* animate in */
/* animate out */
}
.mfp-zoom-out .mfp-with-anim {
opacity: 0;
transition: all 0.3s ease-in-out;
transform: scale(1.3);
}
.mfp-zoom-out.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
.mfp-zoom-out.mfp-ready .mfp-with-anim {
opacity: 1;
transform: scale(1);
}
.mfp-zoom-out.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-zoom-out.mfp-removing .mfp-with-anim {
transform: scale(1.3);
opacity: 0;
}
.mfp-zoom-out.mfp-removing.mfp-bg {
opacity: 0;
}
/*
====== mfp "Hinge" close effect ======
*/
@keyframes hinge {
0% {
transform: rotate(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%, 60% {
transform: rotate(80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(60deg) translateY(0);
opacity: 1;
transform-origin: top left;
animation-timing-function: ease-in-out;
}
100% {
transform: translateY(700px);
opacity: 0;
}
}
.hinge {
animation-duration: 1s;
animation-name: hinge;
}
.mfp-with-fade .mfp-content, .mfp-with-fade.mfp-bg {
opacity: 0;
transition: opacity .5s ease-out;
}
.mfp-with-fade.mfp-ready .mfp-content {
opacity: 1;
}
.mfp-with-fade.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-fade.mfp-removing.mfp-bg {
opacity: 0;
}
#howto{
background:#FFFFFF;
border-radius:10px;
}
#howto h2{
text-align:center;
font-size:2em;
padding:1em;
}
#howto dl{
width:90%;
margin:0 auto;
text-align:center;
}
#howto dl dt{
font-size:1.6em;
font-weight:bold;
padding:1.5em 0 0.5em 0;
}
#howto .com{
font-size:2em;
text-align:center;
padding-bottom:2em;
}
#howto .pclose{
font-size:2em;
text-align:center;
padding-bottom:2em;
}
/*
/* d. Preloader
/* =================================================================== */
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #12151b;
z-index: 99999;
height: 100%;
}
.no-js #preloader {
display: none;
}
#status {
position: absolute;
left: 50%;
top: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
padding: 0;
}
#status img {
display: none;
}
.loader {
margin: 0 auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #f26522;
-webkit-animation: load 1.1s infinite linear;
animation: load 1.1s infinite linear;
}
.loader, .loader:after {
border-radius: 50%;
width: 60px;
height: 60px;
}
@-webkit-keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* for ie8 */
.ie8 #status img {
display: block;
}
.ie8 .loader {
display: none;
}
/*
/* e. Buttons
/* =================================================================== */
.button,
.button:visited,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
font: 15px/30px "raleway-bold", sans-serif;
padding: 9px 16px;
margin: 0 3px 6px 0;
background: #818fab;
color: white;
text-decoration: none;
cursor: pointer;
height: auto;
text-align: center;
border: none;
border-radius: 3px;
-webkit-appearance: none;
-webkit-font-smoothing: inherit;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
background: #647495;
color: white;
}
.button.primary, button.primary {
background: #f26522;
}
.button.primary:hover, button.primary:hover {
background: #e3520d;
}
button.medium, .button.medium {
font: 15px/30px "raleway-bold", sans-serif;
padding: 12px 18px !important;
}
button.large, .button.large {
font: 15px/30px "raleway-bold", sans-serif;
padding: 15px 20px !important;
}
button.round, .button.round {
padding-left: 20px !important;
padding-right: 20px !important;
border-radius: 1000px;
background-clip: padding-box;
}
button.stroke, .button.stroke {
background: transparent !important;
border: 3px solid transparent;
}
button.full-width, .button.full-width {
width: 100%;
margin-right: 0;
}
.button.pink {
background: #ffadcb;
}
.button.pink:hover {
background: #ff94bb;
}
.button.blue {
background: #72bbf0;
}
.button.blue:hover {
background: #5bb0ee;
}
.button.black {
background: #2e3236;
}
.button.black:hover {
background: #222528;
}
.button.yellow {
background: #ffd900;
}
.button.yellow:hover {
background: #f0cc00;
}
.button.red {
background: #ff6163;
}
.button.red:hover {
background: #ff474a;
}
.button.green {
background: #9bc724;
}
.button.green:hover {
background: #8ab120;
}
.button.grey {
background: #8d8e91;
}
.button.grey:hover {
background: #808184;
}
.button.purple {
background: #b482c9;
}
.button.purple:hover {
background: #a970c1;
}
.button.orange {
background: #f5731c;
}
.button.orange:hover {
background-color: #ed650a;
}
.button.stroke.pink {
border-color: #ffadcb;
color: #ffadcb;
}
.button.stroke.pink:hover {
background: #ffadcb !important;
color: #fff;
}
.button.stroke.blue {
border-color: #72bbf0;
color: #72bbf0;
}
.button.stroke.blue:hover {
background: #72bbf0 !important;
color: #fff;
}
.button.stroke.black {
border-color: #2e3236;
color: #2e3236;
}
.button.stroke.black:hover {
background: #2e3236 !important;
color: #fff;
}
.button.stroke.yellow {
border-color: #ffd900;
color: #ffd900;
}
.button.stroke.yellow:hover {
background: #ffd900 !important;
color: #fff;
}
.button.stroke.red {
border-color: #ff6163;
color: #ff6163;
}
.button.stroke.red:hover {
background: #ff6163 !important;
color: #fff;
}
.button.stroke.green {
border-color: #9bc724;
color: #9bc724;
}
.button.stroke.green:hover {
background: #9bc724 !important;
color: #fff;
}
.button.stroke.grey {
border-color: #8d8e91;
color: #8d8e91;
}
.button.stroke.grey:hover {
background: #8d8e91 !important;
color: #fff;
}
.button.stroke.purple {
border-color: #b482c9;
color: #b482c9;
}
.button.stroke.purple:hover {
background: #b482c9 !important;
color: #fff;
}
.button.stroke.orange {
border-color: #f5731c;
color: #f5731c;
}
.button.stroke.orange:hover {
background: #f5731c !important;
color: #fff;
}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
/* f. Other Components
/* ================================================================== */
/* Alert Boxes
/* ------------------------------------------------------------------ */
.alert-box {
padding: 21px 40px 21px 30px;
position: relative;
margin-bottom: 24px;
border-radius: 3px;
background-clip: padding-box;
font-family: "raleway-semibold", sans-serif;
}
.error {
background-color: #ffd1d2;
color: #e65153;
}
.success {
background-color: #c8e675;
color: #758c36;
}
.info {
background-color: #d7ecfb;
color: #4a95cc;
}
.notice {
background-color: #fff099;
color: #c16527;
}
.close {
position: absolute;
right: 18px;
top: 18px;
cursor: pointer;
}
/* Drop Cap
/* ------------------------------------------------------------------ */
.drop-cap:first-letter {
float: left;
margin: 0;
padding: 14px 6px 0 0;
font-size: 84px;
font-family: "raleway-bold", sans-serif;
line-height: 60px;
text-indent: 0;
background: transparent;
color: inherit;
}
/* Line Definition Style Markup
/* ------------------------------------------------------------------ */
.lining dt, .lining dd {
display: inline;
margin: 0;
}
.lining dt + dt:before, .lining dd + dt:before {
content: "\A";
white-space: pre;
}
.lining dd + dd:before {
content: ", ";
}
.lining dd + dd:before {
content: ", ";
}
.lining dd:before {
content: ":";
margin-left: -0.2em;
}
/* Dictionary Definition Style Markup
/* ------------------------------------------------------------------ */
.dictionary-style dt {
display: inline;
counter-reset: definitions;
}
.dictionary-style dt + dt:before {
content: ", ";
margin-left: -0.2em;
}
.dictionary-style dd {
display: block;
counter-increment: definitions;
}
.dictionary-style dd:before {
content: counter(definitions, decimal) ". ";
}
/*
/* Pull Quotes Markup
/*
/*
/* --------------------------------------------------------------------- */
.pull-quote {
position: relative;
padding: 18px 30px 18px 0px;
}
.pull-quote:before, .pull-quote:after {
height: 1em;
opacity: 0.45;
position: absolute;
font-size: 80px;
font-family: Arial, Sans-Serif;
}
.pull-quote:before {
content: "\201C";
top: 33px;
left: 0;
}
.pull-quote:after {
content: '\201D';
bottom: -33px;
right: 0;
}
.pull-quote blockquote {
margin: 0;
}
.pull-quote blockquote:before {
content: none;
}
/*
/* Stats Tab Markup
/*
/* --------------------------------------------------------------------- */
.stats-tabs {
padding: 0;
margin: 24px 0;
}
.stats-tabs li {
display: inline-block;
margin: 0 10px 18px 0;
padding: 0 10px 0 0;
border-right: 1px solid #ccc;
}
.stats-tabs li:last-child {
margin: 0;
padding: 0;
border: none;
}
.stats-tabs li a {
display: inline-block;
font-size: 24px;
font-family: "raleway-bold", sans-serif;
border: none;
color: #252525;
}
.stats-tabs li a:hover {
color: #f26522;
}
.stats-tabs li a em {
display: block;
margin: 6px 0 0 0;
font-size: 14px;
font-family: "raleway-regular", sans-serif;
color: #7d7e80;
}
/* Pagination
/* ------------------------------------------------------------------ */
.pagination {
margin: 30px auto;
text-align: center;
}
.pagination ul li {
display: inline-block;
margin: 0;
padding: 0;
}
.pagination .page-numbers {
font: 15px/24px "raleway-bold", sans-serif;
display: inline-block;
padding: 6px 12px;
height: 36px;
margin-right: 3px;
margin-bottom: 6px;
color: #707273;
background-color: #dde4e6;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border-radius: 3px;
background-clip: padding-box;
}
.pagination .page-numbers:hover {
background: #94aab0;
color: white;
}
.pagination .current, .pagination .current:hover {
background-color: #f26522;
color: white;
}
.pagination .inactive, .pagination .inactive:hover {
background-color: #ecf0f1;
color: #a3a4a6;
}
/*
/* g. Header Styles
/* =================================================================== */
header {
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 990;
text-align: left;
}
header .headbg{
width: 100%;
text-align: center;
background: url(../../images/header_bg.jpg) center top repeat-x;
-webkit-background-size: 2001px 160px;
-moz-background-size: 2001px 160px;
background-size: 2001px 160px;
padding-bottom:10px;
position:relative;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
header .headbg:before, header .headbg:after{
content:"";
position:absolute;
z-index:-1;
box-shadow:0 0 10px rgba(0,0,0,0.8);
top:0;
bottom:2px;
left:10px;
right:10px;
border-radius:400px / 10px;
}
header .logo {
/* add position relative since z-index only applies to
elements that have been given an explicit position */
z-index: 992;
margin:0 auto 5px auto;
overflow:hidden;
}
header .logo a {
display:block;
margin: 0 auto;
height:0;
padding-left:380px;
padding-top:110px;
width:0;
background-image:url("../../images/header_logo.png");
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
overflow:hidden;
}
.opaque .headbgg {
width: 100%;
text-align: center;
background: url(../../images/header_bg.jpg) center top repeat-x;
-webkit-background-size: 2001px 160px;
-moz-background-size: 2001px 160px;
background-size: 2001px 160px;
padding-bottom:5px;
}
.opaque .logo {
z-index: 992;
margin:0 auto 5px auto;
overflow:hidden;
}
.opaque .logo a {
display:block;
margin: 0 auto;
height:0;
padding-left:350px;
padding-top:90px;
width:0;
background-image:url("../../images/header_logo.png");
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
overflow:hidden;
}
/* primary navigation
--------------------------------------------------------------------- */
header .navbg{
background:#8f0b55;
text-align:center;
position:relative;
}
#nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
display: inline-block;
}
/* hide toggle button */
#nav-wrap > a {
display: none;
}
#nav {
min-height: 30px;
width: auto;
/* left align the menu */
text-align: right;
}
#nav > div {
position: relative;
list-style: none;
height: 30px;
display: inline-block;
}
#nav > div a {
display: inline-block;
padding: 7px 23px;
text-decoration: none;
color: #000000;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#nav > div a:hover {
-webkit-transform:translateY(-3px);
-moz-transform:translateY(-3px);
-ms-transform:translateY(-3px);
-o-transform:translateY(-3px);
}
#nav > div a:active {
background-color: transparent !important;
}
#nav > div.current a {
background: #f26522;
color: white;
}
#nav ul.snsic {
list-style:none;
position:absolute;
right:3%;
top:calc(100vw / 11 * -1);
z-index:100;
display:flex;
}
#nav ul.snsic li{
padding:0 2%;
}
#nav ul.snsic li a{
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity:1;
}
#nav ul.snsic li a:hover{
opacity:.7;
}
/*
/* i. Footer Styles
/* =================================================================== */
footer {
padding-bottom: 20px;
position: relative;
}
footer .copyright {
margin: 0;
padding-top: 24px;
clear: both;
text-align:center;
padding-bottom:30px;
font-size:1.4em;
}
/* back to top */
footer #go-top {
position: fixed;
bottom: 0;
right: 0;
z-index: 900;
display: none;
width:100%;
text-align:center;
height:40px;
}
footer #go-top .totop a {
display: block;
padding: 12px 20px;
color: #FFFFFF;
text-align: center;
font-size:1.3em;
font-weight:bold;
text-transform: uppercase;
letter-spacing: 2px;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background: rgba(143,11,85,0.8);
}
footer #go-top .totop a:hover {
color:#000000;
background: rgba(129,193,223,1);
}
/*
/* j. Common and shared styles
/* =================================================================== */
hr {
border: solid #f26522;
border-width: 3px 0 0;
width: 90px;
margin: 11px auto 15px;
height: 0;
clear: both;
text-align: center;
}
/* section head
---------------------------------------------------------------------- */
.section-head {
text-align: center;
}
.section-head h1 {
font-family: "hannari", serif;
font-size:3.3em;
line-height:1;
text-transform: uppercase;
color: #FFFFFF;
margin-bottom: 18px;
font-weight:normal;
}
.section-head h1 span {
font-size:3rem;
}
.section-head p {
font: 18px/36px "merriweather-light", sans-serif;
width: 95%;
color: #707273;
margin-left: auto;
margin-right: auto;
}
/* section button
---------------------------------------------------------------------- */
.section-button {
text-align: center;
font-family: "hannari", serif;
font-size:2.6em;
text-transform: uppercase;
color: #FFFFFF;
font-weight:normal;
line-height:1;
padding:35px
}
/* page title
---------------------------------------------------------------------- */
#page-title {
padding-top: 170px;
text-align: left;
}
#page-title .row {
max-width: 1024px;
}
#page-title h1 {
letter-spacing: -5px;
margin-bottom: 0;
padding-left:20px;
}
#page-title h1 span {
color: #f26522;
}
#page-title p {
margin: 0;
font-size:1.6em;
padding-left:25px;
}
/*
/* k. Hero Section
/* =================================================================== */
#hero {
padding-top:155px;
margin:0 auto;
text-align:center;
position:relative;
overflow:hidden;
}
#hero #mainimg{
text-align:center;
margin:0 auto;
list-style:none;
padding:0;
display:block;
}
#hero #mainimg li{
margin:0;
padding:0;
overflow:hidden;
}
#hero #mainimg #mimg2 img ,#hero #mainimg #mimg3 img ,#hero #mainimg #mimg4 img ,#hero #mainimg #mimg5 img ,#hero #mainimg #mimg6 img ,#hero #mainimg #mimg7 img ,#hero #mainimg #mimg8 img{
-moz-animation: move 14s ease infinite;
-webkit-animation: move 14s ease infinite;
animation: move 14s ease infinite;
}
@-moz-keyframes move {
from {
-moz-transform: scale(1);
transform: scale(1);
}
to {
-moz-transform: scale(1.17);
transform: scale(1.17);
}
}
@-webkit-keyframes move {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(1.17);
transform: scale(1.17);
}
}
@keyframes move {
from {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-moz-transform: scale(1.17);
-ms-transform: scale(1.17);
-webkit-transform: scale(1.17);
transform: scale(1.17);
}
}
/*
/* topnews Section(article)
/* =================================================================== */
#topnews {
width:70%;
margin:0 auto;
padding-top:10px;
}
#topnews:before, #topnews:after {
content: "";
display: table;
}
#topnews:after {
clear: both;
}
/*
/* news Section
/* =================================================================== */
#newssection {
width:55%;
position:relative;
float:left;
height:401px;
overflow:auto;
background: url(../../images/top/news_bg.png) center top repeat;
-webkit-background-size: 500px 401px;
-moz-background-size: 500px 401px;
background-size: 500px 401px;
text-align:center;
}
#newssection:before{
content:'';
display:block;
max-width:169px;
height:62px;
background: url(../../images/top/news_flow.png) center top no-repeat;
background-size:100% auto;
margin:10px auto 0 auto;
}
#newssection .flower{
position:absolute;
top:5%;
left:50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
#newssection h2{
text-align:center;
margin:0.5em auto 0 auto;
font-size:2em;
color:#FFFFFF;
background:#8f0b55;
display:inline-block;
padding:0 1em;
border-radius:5px;
}
#newssection ul{
list-style:none;
padding:0 13% 10px 10%;
text-align:center;
font-size:1.6em;
line-height:1.7;
color:#ea847b;
}
#newssection ul li{
padding:20px 0;
width:100%;
border-bottom:1px solid #eee;
}
#newssection ul .stp{
font-weight:bold;
font-size:1.2em;
}
#newssection ul .blsm{
color:#000000;
font-size:0.8em;
}
#newssection ul li a{
color:#57ADEC;
}
#newssection ul li a:hover{
color:#C87368;
}
/*
/* facebook Section
/* =================================================================== */
#facebooksection {
width:40%;
float:left;
margin-left:3%;
}
.cont-head{
padding-top:155px;
}
/*
/* Profile Section
/* =================================================================== */
#profile{
width:100%;
}
#profile #prmain{
padding:0 0 40px 0;
}
#profile #prmain img{
width:100%;
height:auto;
margin-bottom:30px;
}
#profile #prmain p{
text-align:center;
font-size:1.8em;
line-height:1.7;
padding:10px;
letter-spacing:0.1em;
width:80%;
margin:0 auto;
}
#profile #preach #youko, #profile #preach #hiroko{
background:#FFFFFF;
margin-bottom:20px;
}
#profile #preach #youko dl{
background:#FFFFFF url(../../images/profile/img01-3.jpg) right top no-repeat;
-webkit-background-size: 554px 507px;
-moz-background-size: 554px 507px;
background-size: 554px 507px;
padding-left:30px;
padding-top:120px;
width:1100px;
margin:0 auto;
min-height:507px;
}
#profile #preach #hiroko dl{
background:#FFFFFF url(../../images/profile/img02-3.jpg) left top no-repeat;
-webkit-background-size: 582px 510px;
-moz-background-size: 582px 510px;
background-size: 582px 510px;
padding-left:540px;
padding-top:130px;
width:1100px;
margin:0 auto;
min-height:510px;
}
#profile #preach dl{
font-size:1.7em;
line-height:1.7;
letter-spacing:0.05em;
color:000;
/*text-shadow: 1px 1px 1px #3a444e;*/
background:#3a444e;
}
#profile #preach dl dt{
font-size:1.6em;
line-height:1.7;
padding-bottom:15px;
}
#profile #preach dl dt span{
font-size:0.65em;
}
/*
/* Fan club Section
/* =================================================================== */
#fanclub{
width:100%;
}
#fanclub #fanmain{
text-align:center;
}
#fanclub #fanmain .fanimg img{
width:100%;
height:auto;
}
#fanclub #fanmain p.step{
text-align:center;
padding:20px 0 0 0;
font-size:3em;
}
#fanclub #fanmain p.soon{
text-align:center;
padding:0;
font-size:8em;
font-family:'impact';
font-weight:bold;
line-height:1;
}
#fanclub #fanmain p.honbun{
text-align:left;
padding:2em 0;
font-size:1.8em;
line-height:1.8;
font-family:sans;
width:80%;
max-width:850px;
margin:0 auto;
}
#fanclub #faninfo .fanpriv{
text-align:center;
padding-bottom:40px;
}
#fanclub #faninfo dl.fannai{
width:800px;
margin:0 auto;
}
#fanclub #faninfo dl.fannai dt.fant{
background:#ab814c;
color:white;
text-align:center;
font-size:2em;
letter-spacing:0.5em;
}
#fanclub #faninfo dl.fannai dd.fand{
padding:5px 10px 5px 15px;
}
#fanclub #faninfo dd.fand .fang{
color:#999999;
}
#fanclub #faninfo dl.fannai dd.fand .infomain{
list-style:none;
display:inline-block;
font-size:1.8em;
line-height:2;
}
#fanclub #faninfo dd.fand .infomain li{
display:inline-block;
padding-right:40px;
}
#fanclub #faninfo dd.fand .infomain li .infokikan{
padding-left:5em;
}
#fanclub #faninfo dd.fand .infomain li .infokikanin{
padding-left:1em;
font-size:0.9em;
}
#fanclub #faninfo dd.fand .infomain li .infokikanin .fang{
font-size:0.8em;
}
#fanclub #faninfo dd.fand .infomain li .infokikanat{
font-size:0.9em;
line-height:1.6;
display:inline-block;
}
#fanclub #faninfo dd.fand p{
font-size:1.8em;
padding:10px 50px;
margin:0;
}
#fanclub #faninfo dd.fand .kouza{
width:70%;
margin:0 auto;
border:1px solid #000;
padding:10px 15px;
font-size:1.8em;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#fanclub #faninfo dd.fand .kouza span{
font-size:0.9em;
}
#fanclub #faninfo dd.fand .fanatbx{
padding:15px 30px;
margin:0;
font-size:1.5em;
}
#fanclub #faninfo dd.fand .fanatbx .infoaten{
padding:0 0 0 1em;
margin:0;
list-style:none;
}
#fanclub #faninfo dd.fand .fanatbx .infoaten li{
padding-left:1em;
text-indent:-1em;
}
#fanclub #faninfo dd.fand .fanatbx .infoaten li .fang{
font-size:0.8em;
}
#fanclub #faninfo dl.fannai dd.fancontact{
padding:15px 0 30px 0;
font-size:1.8em;
width:80%;
margin:0 auto;
}
#fanclub #faninfo dl.fannai dd.fancontact .fctx{
font-size:0.9em;
}
#fanclub #faninfo dl.fannai dd.fancontact .fctxx{
font-size:0.8em;
}
#fanclub #faninfo dl.fannai dd.fancontact .fancontel{
padding-left:7em;
}
#fanclub #fankiyaku{
width:700px;
margin:0 auto;
background:white;
overflow:auto;
height:200px;
}
#fanclub #fankiyaku h3{
font-size:1.6em;
font-weight:normal;
text-align:center;
padding:15px 0 0 0;
margin:0;
}
#fanclub #fankiyaku .kiyaku{
font-size:1.2em;
padding:10px 40px;
margin:0;
}
#fanclub #fankiyaku .kiyaku dt{
padding-top:3px;
margin:0;
}
#fanclub #fankiyaku .kiyaku dd{
padding:5px 0 10px 0;
margin:0;
}
/*
/* Schedule Section
/* =================================================================== */
#schedule{
width:100%;
}
#schedule #scnmain{
text-align:center;
}
#schedule #scmain img{
width:100%;
height:auto;
}
#schedule #schedulebx{
width:1000px;
margin:0 auto;
padding:30px 0;
}
#schedule #schedulebx .scheachy{
width:100%;
}
#schedule #schedulebx .scheachy:before, #schedule #schedulebx .scheachy:after {
content: "";
display: table;
}
#schedule #schedulebx .scheachy:after {
clear: both;
}
#schedule #schedulebx .scheachy .year{
font-size:4em;
font-weight:bold;
float:left;
width:15%;
padding-top:10px;
}
#schedule #schedulebx .scheachy ul{
width:80%;
float:left;
list-style:none;
}
#schedule #schedulebx .scheachy ul .sche{
background:white;
padding:20px 25px 20px 25px;
margin-bottom:20px;
}
#schedule #schedulebx .scheachy ul li:nth-child(odd){
background:#f4f4f4;
}
#schedule #schedulebx .scheachy ul .sche dl{
position:relative;
padding-left:20em;
}
#schedule #schedulebx .scheachy ul .sche dt{
font-size:2.5em;
font-weight:bold;
line-height:1.3;
padding:7px 0 9px 0;
}
#schedule #schedulebx .scheachy ul .sche dt span{
font-size:0.7em;
}
#schedule #schedulebx .scheachy ul .sche .schedate{
position:absolute;
top:0;
left:0;
font-size:2.5em;
font-weight:bold;
text-align:right;
}
#schedule #schedulebx .scheachy ul .sche .mnd .pc{
display:block;
}
#schedule #schedulebx .scheachy ul .sche .schedate .time{
font-size:0.7em;
padding-right:1em;
}
#schedule #schedulebx .scheachy ul .sche .hall{
font-size:2em;
padding-bottom:5px;
}
#schedule #schedulebx .scheachy ul .sche .hall a{
color:#1267c4;
padding:5px;
font-size:0.9em;
}
#schedule #schedulebx .scheachy ul .sche .hall a:hover{
color:#FFFFFF;
background:#1267c4;
}
#schedule #schedulebx .scheachy ul .sche .price{
font-size:1.6em;
padding-bottom:5px;
}
#schedule #schedulebx .scheachy ul .sche .appe{
font-size:1.6em;
padding-bottom:5px;
}
#schedule #schedulebx .scheachy ul .sche .program{
font-size:1.6em;
padding-bottom:10px;
}
#schedule #schedulebx .scheachy ul .sche .detail{
color:#1267c4;
font-size:2em;
padding:5px;
margin-left:-5px;
}
#schedule #schedulebx .scheachy ul .sche .detail:hover{
color:#FFFFFF;
background:#1267c4;
}
#schedule .sche .scslbt{
display:inline-block;
cursor: pointer;
}
#schedule .sche .scslbt .active{
background-color:#999;
display:inline-block;
}
#schedule .sche .scsl{
display:none;
padding:1% 0;
font-size:1.2em;
}
/*
/* CD Section
/* =================================================================== */
#cd{
width:100%;
background: url(../../images/cd/bg.png) 25% 180px no-repeat;
-moz-background-size: 578px auto;
-webkit-background-size: 578px auto;
-o-background-size: 578px auto;
-ms-background-size: 578px auto;
background-size: 578px auto;
}
#cd #cdsection{
text-align:center;
padding:0;
}
#cd .cdmain{
width:660px;
margin:0 auto;
padding:60px 0 0 0;
text-align:center;
}
#cd .cdmain .cdcopy{
padding-bottom:2%;
}
#cd .cdmain .announ{
font-size:1.8em;
padding-bottom:2%;
}
#cd .cdmain .cdeach{
margin-bottom:10%;
}
#cd .cdmain .cdtitle{
padding-bottom:20px;
}
#cd .cdmain .cdtitled{
text-align:left;
}
#cd .cdmain .cdtitled ol{
list-style:none;
font-size:1.8em;
line-height:1.7;
}
#cd .cdmain .cdtitled ol:before, #cd #cdmain .cdtitled ol:after {
content: "";
display: table;
}
#cd .cdmain .cdtitled ol:after {
clear: both;
}
#cd .cdmain .cdtitled .cddleft{
width:45%;
float:left;
clear:left;
}
#cd .cdmain .cdtitled p{
text-align:center;
font-size:1.3em;
line-height:2;
}
#cd .cdmain .cdshop{
padding:50px 10px 0 10px;
}
#cd .cdmain .cdshop .cdshoptitle{
text-align:left;
padding-bottom:15px;
}
#cd .cdmain .cdshop ul{
list-style:none;
text-align:left;
margin:0;
padding:0;
}
#cd .cdmain .cdshop ul li{
display:inline-block;
margin:5px 3px;
padding:0;
overflow: hidden;
position: relative;
}
#cd .cdmain .cdshop ul li a{
cursor: pointer;
}
#cd .cdmain .cdshop ul li img{
vertical-align: bottom;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#cd .cdmain .cdshop ul li:hover img {
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
/*
/* Gallery Section
/* =================================================================== */
#gallery{
width:100%;
}
#gallery #gallerybx{
text-align:center;
width:60%;
margin:0 auto;
padding-top:5%;
}
#gallery #gallerybx p{
font-size:1.4em;
line-height:1.6;
padding-bottom:1.5em;
}
#gallery #gallerybx .movie-wrap{
margin-bottom:15px;
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
#gallery #gallerybx .movie-wrap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
/*
/* Media Section
/* =================================================================== */
#media{
width:100%;
}
#mediabx{
text-align:center;
}
#mediabx p{
font-size:2em;
letter-spacing:0.1em;
padding:20% 0;
margin:0;
}
#mediabx .eaig{
padding:20px 0;
}
/*
/* Contact Section
/* =================================================================== */
#contact{
width:100%;
text-align:center;
}
#contact .cotimg img{
width:100%;
height:auto;
}
#contact #ctccmt{
width:48%;
margin:0 auto;
text-align:left;
padding-top:2em;
padding-bottom:30px;
}
#contact #ctccmt p{
font-size:1.8em;
line-height:1.7;
margin:0;
padding:15px 0;
}
#contact #ctccmt .ctaddress{
padding-left:1em;
}
#contact #ctccmt .thanks{
text-align:center;
}
#contact #contactform{
width:100%;
background:#FFFFFF;
text-align:left;
padding-bottom:20px;
padding-top:30px;
}
#contact #contactform #contactbx{
width:40%;
margin:0 auto;
padding:0;
}
#contact #contactform #contactbx dl{
margin:0;
padding:20px 40px 0 40px;
}
#contact #contactform #contactbx dl dt{
font-size:1.6em;
padding-bottom:5px;
}
#contact #contactform #contactbx dl dd{
font-size:1.6em;
padding-bottom:20px;
}
#contact input{
border:0;
padding:5px;
font-size:1em;
border:solid 1px #666666;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin:5px 0;
width:100%;
}
#contact textarea{
width:100%;
border:solid 1px #666666;
}
/* btnSubmit */
#contact .btnSubmit {
margin:20px auto 0 auto;
font-size: 2em;
font-weight:bold;
line-height: 22px;
letter-spacing: 2px;
text-align: center;
clear: both;
width:60%;
}
#contact .btnSubmit input[type=submit] {
background-color: #FFFFFF;
border:2px solid #000;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-o-border-radius: 0px;
-ms-border-radius: 0px;
padding: 20px 70px 20px 70px;
color: #000;
text-decoration: none;
cursor: pointer;
display: inline-block;
}
#contact .btnSubmit input[type=submit]:hover{
background:#8f0b55;
color:#ffffff;
}
/* Error Notification */
#contact #alertMessagePlaceHolder {
background-color: #8f0b55;
color:white;
padding: 30px;
display: none;
margin: 0;
font-weight:bold;
font-size:1.4em;
text-shadow: 1px 1px 1px #770947;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#contact .errs {
background-color:#8f0b55;
color:white;
padding:30px;
margin: 0;
font-weight:bold;
font-size:1.4em;
text-shadow: 1px 1px 1px #770947;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#contact .errs ul {
padding-left:20px;
}
.g-recaptcha div{
margin:0 auto;
text-align:center;
}
/*
/* Topnav Section
/* =================================================================== */
#topnav {
background: rgb(170,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(170,0,0,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(170,0,0,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(170,0,0,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(170,0,0,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(170,0,0,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(170,0,0,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aa0000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.ie #topnav .row.items {
width: 1140px;
}
#topnav .topnavbg{
background:url(../../images2/top/topnav/bg.png)center top no-repeat fixed;
min-height:397px;
padding-top:50px;
}
#topnav dl{
text-align:center;
}
#topnav dl dt{
font-family: "hannari", serif;
font-size:3.3em;
line-height:1;
text-transform: uppercase;
color: #FFFFFF;
margin-bottom: 18px;
font-weight:normal;
letter-spacing:-3px;
}
#topnav dl dt span{
font-size:3rem;
}
#topnav ul.topnavbt li {
position: relative;
list-style: none;
display: inline-block;
padding-right:5px;
}
/* on topnavbt */
ul.topnavbt li {
overflow: hidden;
position: relative;
}
ul.topnavbt li a {
display: block;
cursor: pointer;
}
ul.topnavbt li img {
vertical-align: bottom;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/* on topnavbt hover */
ul.topnavbt li:hover img {
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
/*
/* Gijyutsu Section
/* =================================================================== */
#gijyutsu {
background:url(../../images2/top/top01/bg.png) 0 0 repeat;
padding:40px 0 0 0;
}
.ie #gijyutsu .row.items {
width: 1140px;
}
#gijyutsu .gijyutsubg{
width:80%;
margin:0 auto;
padding-left:120px;
background:url(../../images2/top/top01/number.png) 0 0 no-repeat;
}
#gijyutsu h1{
font-family: "hannari", serif;
font-size:6em;
line-height:1;
text-transform: uppercase;
color: #000000;
margin-bottom: 18px;
font-weight:normal;
letter-spacing:-2px;
}
#gijyutsu h1 span{
font-size:3rem;
}
#gijyutsu .gijyutsubx {
background:#fbf6e5;
border:1px solid #000000;
width:645px;
margin-top:30px;
}
#gijyutsu .gijyutsubx dt{
background:url(../../images2/top/top01/dtbg.png) 2px 2px no-repeat;
font-family: "hannari", serif;
font-size:3.3em;
text-align:center;
padding-top:15px;
}
#gijyutsu .gijyutsubx dd{
font-size:1.5em;
padding:20px 50px 20px 50px;
line-height:1.8;
text-shadow:2px 2px 0px #fbf6e5;
}
#gijyutsu .gijyutsubx dd a{
font-weight:bold;
}
#gijyutsu .gijyutsubx dd.gijyu01{
background:url(../../images2/top/top01/bg01.jpg) right bottom no-repeat;
padding-right:180px;
min-height:310px;
}
#gijyutsu .gijyutsubx dd.gijyu02{
background:url(../../images2/top/top01/bg02.jpg) right bottom no-repeat;
padding-right:300px;
}
#gijyutsu .gijyutsubx dd.gijyu03{
background:url(../../images2/top/top01/bg03.jpg) 15px bottom no-repeat;
padding-left:250px;
min-height:240px;
}
#gijyutsu .gijyustaff{
text-align:center;
font-family: "hannari", serif;
font-size:3.1em;
text-transform: uppercase;
color: #3D3027;
font-weight:bold;
letter-spacing:-2px;
background:url(../../images2/top/top01/staff.png) center 30px no-repeat;
min-height:447px;
margin-top:30px;
margin-left:70px;
}
#gijyutsu .gijyubtbx{
background:#3d3027;
}
#gijyutsu .gijyubtbx a{
display:block;
color:#FFFFFF;
}
#gijyutsu .gijyubtbx a:hover{
background:#FF6973;
}
/*
/* Beforeafter Section
/* =================================================================== */
#beforeafter {
background:#FFFFFF;
padding:40px 0 0 0;
position:relative;
}
.ie #beforeafter .row.items {
width: 1140px;
}
#beforeafter h1{
font-family: "hannari", serif;
font-size:6em;
text-transform: uppercase;
color: #000000;
font-weight:normal;
letter-spacing:-2px;
background:url(../../images2/top/top02/number.png) center 0 no-repeat;
text-align:center;
padding-top:90px;
}
#beforeafter h1 span{
font-size:3rem;
}
#beforeafter .beforeafterbtbx{
background:#000000;
}
#beforeafter .beforeafterbtbx a{
display:block;
color:#FFFFFF;
}
#beforeafter .beforeafterbtbx a:hover{
background:#70573D;
}
#beforeafter .baat{
position:absolute;
bottom:0px;
right:10%;
}
/*
/* Hyoka Section
/* =================================================================== */
#hyoka {
background:url(../../images2/top/top03/bg.png) 0 0 repeat;
padding:40px 0 0 0;
}
.ie #hyoka .row.items {
width: 1140px;
}
#hyoka h1{
font-family: "hannari", serif;
font-size:4.8em;
line-height:0.8;
text-transform: uppercase;
color: #000000;
font-weight:normal;
letter-spacing:-2px;
background:url(../../images2/top/top03/number.png) 25% 0 no-repeat;
padding-top:30px;
padding-left:33%;
min-height:100px;
}
#hyoka h1 span{
font-size:1.8rem;
}
#hyoka .hyokabx{
}
#hyoka .hyokabx li{
background:#FFFFFF;
list-style:none;
margin:30px 0;
padding:20px 30px;
text-align:center;
}
#hyoka .hyokabx li dl dt{
font-size:1.4em;
font-weight:bold;
padding-bottom:10px;
}
#hyoka .hyokabx li dl dt img{
margin:0 10px 0 0;
}
#hyoka .hyokabx li dl dd{
font-size:1.4em;
line-height:1.6;
}
#hyoka .hyokabtbx{
background:#FF6973;
}
#hyoka .hyokabtbx a{
display:block;
color:#FFFFFF;
}
#hyoka .hyokabtbx a:hover{
background:#3D3027;
}
#hyoka .hykanm{
color:#EE7A87;
font-weight:bold;
padding-top:15px;
}
#hyoka .hyat{
position:absolute;
bottom:0px;
right:0px;
}
/*
/* QandA Section
/* =================================================================== */
#qanda {
background:url(../../images2/top/qanda/bg.png) 0 0 repeat;
padding:40px 0 0 0;
}
.ie #qanda .row.items {
width: 1140px;
}
#qanda h1{
font-family: "hannari", serif;
font-size:2.9em;
line-height:1;
text-transform: uppercase;
color: #FFFFFF;
font-weight:normal;
letter-spacing:-2px;
background:url(../../images2/top/qanda/titlebg.png) center 0 no-repeat;
text-align:center;
padding-top:70px;
}
#qanda dl.qandabx {
background:#FFFFFF;
width:80%;
margin:30px auto 80px;
border:1px solid #CCCCCC;
}
#qanda dl.qandabx dt {
font-size:1.7em;
background:url(../../images2/top/qanda/open.png) 15px center no-repeat #FFFFFF;
border-bottom:1px solid #EEEEEE;
padding:15px 50px;
color:#594235;
cursor:pointer;
}
#qanda dl.qandabx dt.open {
background:url(../../images2/top/qanda/close.png) 15px center no-repeat #FFFFFF;
}
#qanda dl.qandabx dd {
background:#FFFFFF;
padding:20px 30px 20px 60px;
color:#000000;
font-size:1.5em;
line-height:1.8;
display:none;
border-bottom:1px solid #EEEEEE;
}
#qanda .qandabtbx{
background:#70573d;
}
#qanda .qandabtbx a{
display:block;
color:#FFFFFF;
}
#qanda .qandabtbx a:hover{
background:#000000;
}
/*
/* Coupon Section
/* =================================================================== */
#coupon {
background:url(../../images2/top/coupon/bg.jpg) 65% 110px no-repeat;
padding:40px 0 0 0;
}
@media only screen and (max-width:1400px) {
#coupon{
background-position:80% 110px;
}
}
.ie #coupon .row.items {
width: 1140px;
}
#coupon h2{
font-family: "hannari", serif;
font-size:3.3em;
line-height:1;
text-transform: uppercase;
font-weight:normal;
letter-spacing:-2px;
text-align:center;
}
#coupon p{
width:70%;
text-align:center;
font-size:1.5em;
margin:0 auto;
padding-right:200px;
padding-top:25px;
padding-bottom:20px;
line-height:1.8;
}
#coupon ul{
width:95%;
margin:0 auto;
}
#coupon li{
list-style:none;
float:left;
padding:5px 10px;
text-align:center;
}
@media only screen and (max-width:1042px) {
#coupon ul{
width:100%;
}
#coupon li{
padding:5px 0;
width:33%;
}
#coupon li img {
max-width:90%;
height:auto;
}
}
/* on topnavbt */
#coupon li {
overflow: hidden;
position: relative;
}
#coupon li a {
display: block;
cursor: pointer;
}
#coupon li img {
vertical-align: bottom;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/* on topnavbt hover */
#coupon li:hover img {
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
/*
/* Movie Section
/* =================================================================== */
#movie {
background:url(../../images2/top/movie/bg.jpg) center 30px no-repeat;
padding:40px 0 0 0;
position:relative;
}
.ie #movie .row.items {
width: 1140px;
}
#movie .mvfuki{
position:absolute;
top:0;
right:50px;
}
#movie .mvbx{
background:#f8f3e3;
margin-top:160px;
text-align:center;
}
#movie .mvbxin{
margin:0 auto;
text-align:center;
width:500px;
padding:20px 0;
}
#movie .mvytw{
width:100%;
margin:0 auto;
position:relative;
padding-top:56.25%;
text-align:center;
}
#movie .mvbx iframe{
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
}
/*
/* Beforeafterct Section
/* =================================================================== */
#beforeafterct {
padding:40px 0 0 0;
}
.ie #beforeafterct .row.items {
width: 1140px;
}
#beforeafterct ul{
padding:0;
margin:0;
}
#beforeafterct li{
width:840px;
list-style:none;
padding:0;
margin:0 auto;
}
#beforeafterct li .beforectcom {
padding:0 20px;
}
#beforeafterct li .beforectcom dt{
font-family: "hannari", serif;
font-size: 2.7em;
line-height: 1.2;
padding-top:20px;
padding-bottom: 15px;
color: #ed7409;
letter-spacing:-5px;
}
#beforeafterct li .beforectcom dt strong{
font-size:2.0rem;
letter-spacing:-3px;
}
#beforeafterct li .beforectcom dd{
font-size:1.4em;
line-height:1.6;
}
#beforeafterct li .beforectcom dd strong{
color:#ed7409;
}
#beforeafterct li .beforectkk:before, #beforeafterct li .beforectkk:after {
content: "";
display: table;
}
#beforeafterct li .beforectkk:after {
clear: both;
}
#beforeafterct li .beforectkk{
padding:30px 0 10px 0;
}
/* for ie8 */
.ie8 #beforeafterct li .beforectkk .beforectgraph img{
max-width:397px;
}
#beforeafterct li .beforectkk .beforectgraph{
float:left;
}
#beforeafterct li .beforectkk .beforectgraph img{
margin-right:30px;
}
#beforeafterct li .beforectkk .beforecthy{
float:left;
border-top:1px solid #B2B2B2;
border-right:1px solid #B2B2B2;
border-left:1px solid #B2B2B2;
padding:0;
margin:2px 0 0 0;
}
#beforeafterct li .beforectkk .beforecthy:before, #beforeafterct li .beforectkk .beforecthy:after {
content: "";
display: table;
}
#beforeafterct li .beforectkk .beforecthy:after {
clear: both;
}
#beforeafterct li .beforectkk .beforecthy dt{
font-family: "hannari", serif;
font-size:1.6em;
line-height:100%;
float:left;
clear:left;
width:120px;
background:#FAF6E5;
border-bottom:1px solid #B2B2B2;
border-right:1px solid #B2B2B2;
padding:12px 15px;
margin:0;
}
#beforeafterct li .beforectkk .beforecthy dd{
float:left;
font-size:1.8em;
border-bottom:1px solid #B2B2B2;
line-height:1;
}
#beforeafterct li .beforectkk .beforecthy dd.bfbf{
font-family: "hannari", serif;
width:70px;
padding-left:15px;
padding-top:11px;
padding-bottom:11px;
}
#beforeafterct li .beforectkk .beforecthy dd.bfaf{
font-family: "hannari", serif;
width:90px;
padding-top:11px;
padding-bottom:11px;
}
.ie #beforeafterct li .beforectkk .beforecthy dd.bfaf{
padding-top:9px;
padding-bottom:9px;
}
#beforeafterct li .beforectkk .beforecthy dd.bfaf span{
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
line-height:1;
}
#beforeafterct li .beforectkk .beforecthy dd.bftl{
width:100px;
padding-left:15px;
font-weight:bold;
color:#FF9223;
padding-top:11px;
padding-bottom:11px;
}
#beforeafterct .bfafat{
text-align:right;
padding:0 0 10px 0;
margin:0;
}
/*
/* History Section
/* =================================================================== */
#history{
background:#fcf5ef;
padding:150px 0 30px 0;
}
.ie #history .row.items {
width: 1140px;
}
#history h1{
min-height:100px;
background: 510px top url(../../images2/history/bg_head.png) no-repeat;
padding-top:50px;
padding-left:70px;
}
#history #historyBox{
background: right 25px url(../../images2/history/hdkei.png) no-repeat;
}
#history #historyBox .histtopt{
font-size:1.4em;
line-height:2;
padding:60px 40px 8px 220px;
}
#history #historyBox .histtop{
font-size:1.4em;
line-height:2;
padding:8px 40px 8px 220px;
}
#history #historyBox .histnom{
font-size:1.4em;
line-height:2;
padding:15px 35px;
}
#history #historyBox h2{
font-size:3em;
font-family: "hannari", serif;
font-weight:normal;
letter-spacing:-2px;
color:#9B1E18;
padding:30px 0 0 35px;
}
#history #historyBox .imgnom{
margin:15px 35px 15px 20px;
}
#history #historyBox .red{
color:#AA1D0C;
}
#history #historyBox .eaphoto{
float:right;
width:300px;
margin-left:20px;
margin-top:15px;
margin-right:35px;
}
#history #historyBox .eaphoto img{
margin-bottom:15px;
}
#history #histfoot{
padding:25px 0 40px 45px;
background: left bottom url(../../images2/history/btkei.png) no-repeat;
}
#history #histfoot .histnom{
font-size:1.4em;
}
#history #histfoot .histft{
font-size:1.6em;
padding-top:15px;
}
#history .fright{
float:right;
}
#history .fleft{
float:left;
}
/*
/* India Section
/* =================================================================== */
#india{
background:#fcf5ef;
padding:150px 0 30px 0;
}
.ie #india .row.items {
width: 1140px;
}
#india h1{
padding-top:5px;
padding-bottom:5px;
}
#india .aindiaBox{
width:100%;
margin:0 auto;
padding-top:20px;
padding-bottom:20px;
position:relative;
}
#india .aindiaBox:before, #india .aindiaBox:after {
content: "";
display: table;
}
#india .aindiaBox:after {
clear: both;
}
#india ul, #aindia ol{
list-style-type:none;
}
#india .aindiaBox .aindiaTxtRight{
width:60%;
float:right;
margin-left:2%;
}
#india .aindiaBox .aindiaPhotoLeft{
width:38%;
float:right;
}
#india .aindiaBox .aindiaTxtLeft{
width:60%;
float:left;
margin-right:2%;
}
#india .aindiaBox .aindiaPhotoRight{
width:38%;
float:left;
}
#india p.aindiaTxt{
padding-top:10px;
padding-bottom:10px;
font-size:1.4em;
line-height:1.8;
}
#india .aindiaPhotoLeft .photobox{
max-width:400px;
width:100%;
}
#india .aindiaPhotoLeft .photobox img{
width:100%;
height:auto;
}
#india .aindiaPhotoLeft .photobox:before, #india .aindiaPhotoLeft .photobox:after {
content: "";
display: table;
}
#india .aindiaPhotoLeft .photobox:after {
clear: both;
}
.float_l{
float:left;
width:50%;
}
.width200px{width:200px;}
#india .mvbox{
width:100%;
text-align:center;
font-size:1.6em;
padding:10px 0 40px 0;
line-height:2;
}
#india .mvbox .mv{
width:100%;
text-align:center;
}
#india .mvbox .mv iframe{
width:100%;
max-width:560px;
}
#india .rinen{
padding-top:35px;
padding-bottom:16px;
text-align:center;
margin:0 auto;
max-width:698px;
}
#india .rinen img{
width:100%;
height:auto;
}
/*
/* company Section
/* =================================================================== */
#company{
padding:150px 0 30px 0;
}
.ie #company .row.items {
width: 1140px;
}
#company h1{
text-align:center;
padding-top:20px;
padding-bottom:5px;
}
#company .tableCompany{
border-collapse:separate;
border-spacing:1px;
empty-cells:show;
line-height:1.6;
width:70%;
margin:0 auto;
color:#330000;
background-color:#D9D3CD;
}
#company .tableCompany th{ vertical-align:middle;padding:7px 10px; background-color:#FC6;text-align:center;font-size:1.4em;}
#company .tableCompany td{ vertical-align:middle;padding:7px 15px;text-align:left;background-color:#fff;font-size:1.4em;}
#company .groups{
font-size:1.4em;
text-align:center;
padding:30px 0;
line-height:1.8;
}
/*
/* Voice Section
/* =================================================================== */
#voice{
background:#f8f4f1;
padding:40px 0 0 0;
}
.ie #voice .row.items {
width: 1140px;
}
#voice .voislist{
width:100%;
max-width:980px;
list-style:none;
margin:0 auto;
position: relative;
}
#voice .voislist:before, #voice .voislist:after {
content: "";
display: table;
}
#voice .voislist:after {
clear: both;
}
#voice .voislist li{
float:left;
width:420px;
background:#FFFFFF;
padding:25px;
margin:10px;
vertical-align:top;
}
@media only screen and (max-width:934px) {
#voice .voislist li{
width:380px;
}
}
#voice .voislist .ct1{
background:#FFFFFF url("../../images2/voice/ct1.png") 0 0 no-repeat;
}
#voice .voislist .ct2{
background:#FFFFFF url("../../images2/voice/ct2.png") 0 0 no-repeat;
}
#voice .voislist .ct3{
padding:20px;
}
#voice .voislist li .vlstimg{
text-align:center;
}
#voice .voislist li .vlstex{
padding-top:15px;
text-align:center;
font-size:1.5em;
line-height:1.8;
}
#voice .voislist li .vlsvs{
font-size:1.5em;
line-height:1.8;
text-align:left;
padding:0;
margin:0;
}
#voice .pcvat{
text-align:right;
}
/*
/* Oshirase Section
/* =================================================================== */
#oshirase{
background:#fcf5ef;
padding:150px 0 50px 0;
}
.ie #oshirase .row.items {
width: 1140px;
}
#oshirase ul{
list-style:none;
width:80%;
margin:0 auto;
}
#oshirase li{
padding:0px;
background: center bottom url(../../images/enquete/box_bg.png) no-repeat;
position:relative;
margin:20px 0;
}
#oshirase li dl{
padding:15px 30px 40px 30px;
}
#oshirase li dl dt{
font-size:2.2em;
color:#FF4D4D;
font-weight:bold;
padding-bottom:10px;
}
#oshirase li dl dd.ostxt{
font-size:1.4em;
}
#oshirase li dl dd.osimg{
text-align:center;
padding:10px 0;
}
/*
/* Staffprof Section
/* =================================================================== */
#staffprof{
background:#fcf5ef;
padding:150px 0 50px 0;
}
.ie #staffprof .row.items {
width: 1140px;
}
#staffprof h1{
min-height:150px;
background: center top url(../../images/staff/bg_main.jpg) no-repeat;
text-align:center;
padding-top:550px;
}
@media screen and (max-width:949px){
#staffprof h1{
-moz-background-size: 90% auto; /* Firefox */
-webkit-background-size: 90% auto; /* Safari,Chromeなど */
-o-background-size: 90% auto; /* Opera */
-ms-background-size: 90% auto; /* ie */
background-size: 90% auto;
padding-top:62%;
}
#staffprof h1 img{
max-width:80%;
height:auto;
}
}
#staffprof .kbbutton{
text-align:center;
}
#staffprof #stafftopBox{
width:100%;
position:relative;
list-style:none;
padding:80px 0 0 0;
margin:0 auto;
}
#staffprof #stafftopBox:before, #staffprof #stafftopBox:after {
content: "";
display: table;
}
#staffprof #stafftopBox:after {
clear: both;
}
#staffprof #stafftopBox .stafflbox{
position:relative;
border:1px solid #E4A597;
padding:2px;
margin:0 auto 20px auto;
min-height:230px;
width:80%;
}
#staffprof #stafftopBox .staffBRight{
padding-right:189px;
}
#staffprof #stafftopBox .staffBLeft{
padding-left:189px;
}
#staffprof #stafftopBox .staffBRight h2{
text-align:right;
padding-top:0px;
padding-right:20px;
}
#staffprof #stafftopBox .staffBLeft h2{
text-align:left;
padding-top:0px;
padding-left:20px;
}
#staffprof #stafftopBox .staffBLeft .stinfo{
padding-left:10px;
padding-bottom:15px;
text-align:left;
}
#staffprof #stafftopBox .staffBRight .stinfo{
padding-right:20px;
text-align:right;
padding-bottom:15px;
}
#staffprof #stafftopBox .staffBLeft .stphoto{
position:absolute;
top:2px;
left:2px;
}
#staffprof #stafftopBox .staffBRight .stphoto{
position:absolute;
top:2px;
right:2px;
}
#staffprof #stafftopBox .stinfo{
list-style:none;
font-size:1.3em;
padding-top:0px;
}
#staffprof #stafftopBox .stinfo li{
padding:2px 0;
}
#staffprof #stafftopBox .stbutton{
background-color:#E2A598;
height:36px;
padding-top:5px;
text-align:center;
}
#staffprof #stafftopBox .staffbox{
position:relative;
border:1px solid #CCCCCC;
padding:2px;
margin:0 auto 20px auto;
min-height:200px;
width:48%;
background-color:#FFFFFF;
}
#staffprof #stafftopBox .staffLeft{
float:left;
margin-left:10px;
}
#staffprof #stafftopBox .staffRight{
float:left;
margin-left:10px;
}
#staffprof #stafftopBox .staffLeft .stphoto{
position:absolute;
top:2px;
left:2px;
}
#staffprof #stafftopBox .staffRight .stphoto{
position:absolute;
top:2px;
right:2px;
}
#staffprof #stafftopBox .staffLeft h2{
text-align:left;
padding-top:5px;
padding-left:174px;
height:67px;
}
#staffprof #stafftopBox .staffRight h2{
text-align:right;
padding-top:5px;
padding-right:174px;
height:67px;
}
#staffprof #stafftopBox .staffLeft .stinfo{
padding-left:164px;
padding-bottom:10px;
text-align:left;
}
#staffprof #stafftopBox .staffRight .stinfo{
padding-right:174px;
text-align:right;
padding-bottom:10px;
}
/*
/* eachstaff Section
/* =================================================================== */
#eachstaff{
background:#fcf5ef;
padding:180px 0 50px 0;
}
.ie #eachstaff .row.items {
width: 1140px;
}
#eachstaff .btbacktop{
text-align:right;
padding-bottom:20px;
}
#eachstaffin{
width:100%;
margin:0 auto;
background: center top url(../../images/staff/bg_each.png) no-repeat;
padding:40px;
background-size:100% auto;
-moz-background-size: 100% auto; /* Firefox */
-webkit-background-size: 100% auto; /* Safari,Chromeなど */
-o-background-size: 100% auto; /* Opera */
-ms-background-size: 100% auto; /* ie */
}
#eachstaffin #eaprof{
max-width:250px;
width:30%;
margin-right:30px;
}
#eachstaffin #eaprof img{
max-width:100%;
height:auto;
}
#eachstaffin #eaprof .eainfo{
background-color:#E29F8B;
color:#ffffff;
list-style:none;
font-size:1.3em;
padding:10px 15px;
margin:0;
}
#eachstaffin h1{
padding:0;
margin:0;
width:65%;
}
#eachstaffin h1 img{
max-width:100%;
height:auto;
}
#eachstaffin h2{
font-size:2.6em;
font-family:"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
font-weight:normal;
color:#9B1E18;
padding:20px 0 0 0;
}
#eachstaffin p{
font-size:1.5em;
line-height:1.7;
}
#eachstaffin p.dan{
padding:15px 0;
}
#eachstaffin .eaphoto{
float:right;
max-width:300px;
width:40%;
margin-left:30px;
margin-top:30px;
}
#eachstaffin .eaphoto img{
margin-bottom:15px;
max-width:100%;
height:auto;
}
#eachstaffin .fright{
float:right;
}
#eachstaffin .fleft{
float:left;
}
#eachstaff #ecfoot{
background: center 15px url(../../images/staff/bg_each_bottom.png) no-repeat;
text-align:center;
}
#eachstaff #ecfoot .btkbl{
text-align:center;
padding:15px 0;
}
/*
/* sns Section
/* =================================================================== */
#sns{
padding:180px 0 50px 0;
}
.ie #eachstaff .row.items {
width: 1140px;
}
/*sns facebook=======*/
#sns #facebook{
width:100%;
margin:0 auto;
background: center top url(../../images/sns/facebook/bg.jpg) no-repeat #015198;
position:relative;
background-size:100% auto;
-moz-background-size: 100% auto; /* Firefox */
-webkit-background-size: 100% auto; /* Safari,Chromeなど */
-o-background-size: 100% auto; /* Opera */
-ms-background-size: 100% auto; /* ie */
}
#sns #facebook .fblogo{
position:absolute;
top:2%;
left:50%;
margin-left:-150px;
max-width:395px;
width:50%;
}
#sns #facebook .fblogo img{
width:100%;
height:auto;
}
#sns #facebook h1{
padding-top:15%;
text-align:center;
max-width:472px;
width:90%;
margin:0 auto;
}
#sns #facebook h1 img{
width:100%;
height:auto;
}
#sns #facebook .fbcan{
text-align:center;
}
#sns #facebook .fbcan img{
max-width:847px;
width:90%;
height:auto;
}
#sns #facebook .fbcannai{
padding-top:1%;
text-align:center;
}
#sns #facebook .fbcannai img{
max-width:483px;
width:60%;
height:auto;
}
#sns #facebook .fbng{
padding-top:2%;
text-align:center;
}
#sns #facebook .fbng img{
max-width:836px;
width:90%;
height:auto;
}
#sns #facebook .fbbtbox{
position:relative;
text-align:center;
margin-top:3%;
}
#sns #facebook .fbbttai{
position:absolute;
top:0;
left:18%;
max-width:297px;
width:30%;
}
#sns #facebook .fbbttai img{
width:100%;
height:auto;
}
#sns #facebook .fbbt{
position:absolute;
top:0;
left:52%;
width:30%;
max-width:297px;
}
#sns #facebook .fbbt img{
width:100%;
height:auto;
}
#sns #facebook .fbatten{
color:#ffffff;
padding:12% 0 11% 0;
width:87%;
margin:0 auto;
}
#sns #facebook .fbatten dt{
font-size:1.5em;
font-weight:bold;
padding-bottom:10px;
text-align:left;
}
#sns #facebook .fbatten dd{
font-size:1.2em;
text-align:left;
}
/*sns line=======*/
#sns #line{
background-color: #ffffff;
position:relative;
padding-bottom:40px;
}
#sns #line h1{
padding-top:30px;
text-align:center;
}
#sns #line h1 img{
max-width:545px;
width:100%;
height:auto;
}
#sns #line .linehow{
list-style:none;
width:100%;
margin:20px auto;
}
#sns #line .linehow li{
background-color:#EEEFEF;
padding:30px;
margin-bottom:5px;
}
#sns #line .linehow li dl:before, #sns #line .linehow li dl:after {
content: "";
display: table;
}
#sns #line .linehow li dl:after {
clear: both;
}
#sns #line .linehow li.lnfs dl dt{
float:left;
max-width:504px;
}
#sns #line .linehow li.lnfs dl dt img{
width:100%;
height:auto;
}
#sns #line .linehow li.lnfs dl dd{
float:left;
max-width:238px;
}
#sns #line .linehow li.lnfs dl dd img{
margin-left:30px;
width:100%;
height:auto;
}
#sns #line .linehow li.lnsc dl dt{
padding-bottom:15px;
}
#sns #line .linehow li.lnsc dl dd ul:before, #sns #line .linehow li.lnsc dl dd ul:after {
content: "";
display: table;
}
#sns #line .linehow li.lnsc dl dd ul:after {
clear: both;
}
#sns #line .linehow li.lnsc dl dd ul{
list-style:none;
}
#sns #line .linehow li.lnsc dl dd ul li{
float:left;
padding:0;
margin:0;
text-align:center;
}
#sns #line .linehow li.lnsc dl dd ul li img{
width:100%;
height:auto;
}
#sns #line .linehow li.lnsc dl dd ul .lnqr{
padding:10% 20px 0 0;
width:25%;
}
#sns #line .linehow li.lnsc dl dd ul .lnqr2,#sns #line .linehow li.lnsc dl dd ul .lnqr3{
width:25%;
}
#sns #line .linehow li.lnsc dl dd ul .lnqr4{
width:20%;
}
/*
/* access Section
/* =================================================================== */
#access{
padding:180px 0 50px 0;
}
.ie #access .row.items {
width: 1140px;
}
#access #main1{
width:80%;
margin:0 auto;
}
#access #main1 h2{
padding:0;
margin:0;
}
#access .actr{
padding:0 0 0 15%;
font-size:1.4em;
}
#access iframe{
width:100%;
margin:0 auto;
}
/*
/* flow Section
/* =================================================================== */
#flow{
background:#fcf5ef;
padding:180px 0 50px 0;
}
.ie #flow .row.items {
width: 1140px;
}
#flow ul, #flow ol{
list-style-type:none;
}
#flow h2{
background: center top url(../../images/flow/title_bg.jpg) no-repeat;
padding:1.5% 0;
text-align:center;
width:100%;
margin:0 auto;
-webkit-background-size: 95% auto;
-moz-background-size: 95% auto;
background-size: 95% auto;
}
#flow h2 img{
max-width:263px;
width:90%;
height:auto;
}
#flow ol#flowBox{
background: center top url(../../images/flow/bg.png) repeat-y;
padding:22px 0;
width:100%;
margin:0 auto;
-webkit-background-size: 95% auto;
-moz-background-size: 95% auto;
background-size: 95% auto;
}
#flow ol#flowBox li{
padding-left:10%;
}
#flow ol#flowBox li#flb01{
background: center top url(../../images/flow/titile_bg01.png) no-repeat;
-webkit-background-size: 90% auto;
-moz-background-size: 90% auto;
background-size: 90% auto;
}
#flow ol#flowBox li#flb01 dl dt img{
max-width:207px;
}
#flow ol#flowBox li#flb02{
background: center top url(../../images/flow/titile_bg02.png) no-repeat;
-webkit-background-size: 90% auto;
-moz-background-size: 90% auto;
background-size: 90% auto;
}
#flow ol#flowBox li#flb02 dl dt img{
max-width:134px;
}
#flow ol#flowBox li#flb03{
background: center top url(../../images/flow/titile_bg03.png) no-repeat;
-webkit-background-size: 90% auto;
-moz-background-size: 90% auto;
background-size: 90% auto;
}
#flow ol#flowBox li#flb03 dl dt img{
max-width:230px;
}
#flow ol#flowBox li#flb04{
background: center top url(../../images/flow/titile_bg04.png) no-repeat;
-webkit-background-size: 90% auto;
-moz-background-size: 90% auto;
background-size: 90% auto;
}
#flow ol#flowBox li#flb04 dl dt img{
max-width:395px;
}
#flow ol#flowBox li dl dt{
padding:13px 0 0 20px;
}
*+html #flow ol#flowBox li dl dt {
padding:0 0 0 12px;
margin-top:-8px;
}
#flow ol#flowBox li dl dt img{
width:90%;
height:auto;
}
#flow ol#flowBox li dl dd{
padding-top:18px;
padding-right:7px;
}
#flow ol#flowBox li dl dd:before, #flow ol#flowBox li dl dd:after {
content: "";
display: table;
}
#flow ol#flowBox li dl dd:after {
clear: both;
}
#flow ol#flowBox li dl dd.flbFrame{
width:90%;
padding-bottom:3%;
}
#flow ol#flowBox li dl dd.flbFrame .flbComment{
width:50%;
float:right;
}
#flow ol#flowBox li dl dd.flbFrame .flbComment h3{
color:#CC0000;
font-size:1.8em;
letter-spacing:-2px;
line-height:1.2;
font-weight:bold;
padding-top:10px;
}
#flow ol#flowBox li dl dd.flbFrame img{
width:45%;
height:auto;
}
#flow ol#flowBox li dl dd.flbFrame .flbComment p{
font-size:1.4em;
padding:14px 0
}
#flow ol#flowBox li dl dd.flbFrame .flbComment .flbop{
font-size:1.4em;
text-align:right;
}
#flow ol#flowBox li dl dd.flbFrame .flbComment .flbH{
padding-top:10px;
}
#flow #flbBottom{
background: center top url(../../images/flow/bottom_bg.jpg) no-repeat;
padding:1% 0;
text-align:center;
width:100%;
margin:0 auto;
-webkit-background-size: 95% auto;
-moz-background-size: 95% auto;
background-size: 95% auto;
}
#flow #flbBottom img{
max-width:649px;
width:90%;
height:auto;
}
/*
/* enquete Section
/* =================================================================== */
#enquete{
background:#fcf5ef;
padding:160px 0 50px 0;
}
.ie #enquete .row.items {
width: 1140px;
}
#enquete h1{
width:50%;
padding-bottom:5%;
padding-left:23%;
padding-top:10%;
z-index:100;
}
#enquete h1 img{
width:100%;
height:auto;
}
#enquete #titleBg{
position:absolute;
max-width:123px;
width:13%;
left:8.5%;
top:1%;
}
#enquete #titleBg img{
width:100%;
height:auto;
}
#enquete #ans{
position:absolute;
max-width:326px;
width:45%;
right:5%;
top:1%;
}
#enquete #ans img{
width:100%;
height:auto;
}
#enquete .enqueteBox{
max-width:762px;
width:100%;
padding:40px 5% 50px 5%;
background: left bottom url(../../images/enquete/box_bg.png) no-repeat;
position:relative;
margin:20px auto;
}
#enquete .enqueteBox:before, #enquete .enqueteBox:after {
content: "";
display: table;
}
#enquete .enqueteBox:after {
clear: both;
}
#enquete .enqueteBox dt.entitle1{
max-width:530px;
position:relative;
padding-bottom:3%;
}
#enquete .enqueteBox dt.entitle1 img{
width:100%;
height:auto;
}
#enquete .enqueteBox dd.graph1{
text-align:center;
}
#enquete .enqueteBox dd.voice1{
padding:25px 0px 0px 50px;
}
#enquete .enqueteBox dt.entitle2{
width:65%;
max-width:445px;
postion:relative;
padding-right:10%;
padding-bottom:3%;
}
#enquete .enqueteBox dt.entitle2 img{
width:100%;
height:auto;
}
#enquete .enqueteBox dd.graph2{
width:35%;
max-width:234px;
position:absolute;
right:5%;
top:8%;
}
#enquete .enqueteBox dd.graph2 img{
width:100%;
height:auto;
}
#enquete .enqueteBox dd.voice2{
padding:25px 40% 0px 5%;
}
#enquete .enqueteBox dt.entitle3{
postion:relative;
padding-bottom:3%;
padding-left:40%;
}
#enquete .enqueteBox dt.entitle3 img{
width:100%;
height:auto;
}
#enquete .enqueteBox dd.graph3{
width:35%;
max-width:242px;
position:absolute;
left:5%;
top:8%;
}
#enquete .enqueteBox dd.graph3 img{
width:100%;
height:auto;
}
#enquete .enqueteBox dd.voice3{
padding:25px 5% 0 40%;
}
#enquete .enqueteBox dt.entitle4{
max-width:481px;
position:relative;
padding-bottom:3%;
}
#enquete .enqueteBox dt.entitle4 img{
width:100%;
height:auto;
}
#enquete .enqueteBox dd.graph4{
text-align:center;
}
#enquete .enqueteBox dd.voice4{
padding:25px 0px 0px 70px;
}
#enquete .enqueteBox dt.entitle5{
width:65%;
max-width:412px;
postion:relative;
padding-right:10%;
padding-bottom:3%;
}
#enquete .enqueteBox dt.entitle5 img{
width:100%;
height:auto;
}
#enquete .enqueteBox dd.graph5{
width:35%;
max-width:234px;
position:absolute;
right:5%;
top:8%;
}
#enquete .enqueteBox dd.graph5 img{
width:100%;
height:auto;
}
#enquete .enqueteBox dd.voice5{
padding:25px 40% 0 5%;
}
#enquete .enqueteBox dt.entitle6{
postion:relative;
padding-bottom:3%;
padding-left:40%;
}
#enquete .enqueteBox dt.entitle6 img{
width:100%;
height:auto;
}
#enquete .enqueteBox dd.graph6{
width:35%;
max-width:225px;
position:absolute;
left:5%;
top:8%;
}
#enquete .enqueteBox dd.graph6 img{
width:100%;
height:auto;
}
#enquete .enqueteBox dd.voice6{
padding:15px 5% 0px 40%;
}
#enquete .enqueteBox dt.entitle7{
width:65%;
max-width:437px;
postion:relative;
padding-right:10%;
padding-bottom:3%;
}
#enquete .enqueteBox dt.entitle7 img{
width:100%;
height:auto;
}
#enquete .enqueteBox dd.graph7{
width:35%;
max-width:226px;
position:absolute;
right:5%;
top:8%;
}
#enquete .enqueteBox dd.graph7 img{
width:100%;
height:auto;
}
#enquete .enqueteBox .voiceicn{
position:absolute;
bottom:100px;
left:20px;
}
#enquete .enqueteBox .voice{
list-style-type:none;
font-size:1.2em;
}
#enquete .enqueteBox .voice li{
background: left top url(../../images/enquete/voice_icn.png) no-repeat;
padding:0 0 5px 20px;
}
#enquete #enqbutton{
max-width:742px;
width:100%;
height:auto;
margin:0 auto;
text-align:center;
}
/*
/* faq Section
/* =================================================================== */
#faqp{
background:#fcf5ef;
padding:180px 0 50px 0;
}
.ie #faqp .row.items {
width: 1140px;
}
#faq ul, #faq ol{
list-style-type:none;
}
#faqp #faq{
position:relative;
width:100%;
margin:0 auto;
text-align:left;
}
#faqp #faq h2{
background: center top url(../../images/faq/title_bg.jpg) no-repeat;
padding:130px 0 26px 155px;
margin:0 auto;
width:100%;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
background-size: 100% auto;
}
#faqp #faq dl#faqFrame{
background: center bottom url(../../images/faq/bg2.jpg) no-repeat;
padding:0 0 500px 17%;
width:100%;
margin:0 auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
background-size: 100% auto;
}
#faqp #faq dl#faqFrame dt{
padding-top:4%;
}
#faqp #faq dl#faqFrame dd{
font-size:1.4em;
padding:15px 5% 6px 5%;
}
#faqp #faq #faqstaff{
position:absolute;
bottom:18%;
left:35%;
}
/*
/* report Section
/* =================================================================== */
#report{
background:#fcf5ef;
padding:180px 0 50px 0;
}
.ie #report .row.items {
width: 1140px;
}
#report h1{
padding:7% 0;
text-align:center;
z-index:100;
background: center top url(../../images/report2014/title_bg.jpg) no-repeat;
-webkit-background-size: 95% auto;
-moz-background-size: 95% auto;
background-size: 95% auto;
}
#report h1 img{
max-width:305px;
width:100%;
height:auto;
}
#report .reportBox{
max-width:742px;
width:100%;
padding:0px 0px 40px 0px;
background: center bottom url(../../images/enquete/box_bg.png) no-repeat;
position:relative;
margin:20px auto;
}
#report .reportBox .repoimgs{
max-width:500px;
width:100%;
height:auto;
margin:0 auto;
padding-top:30px;
}
#report .reportBox .imgcom{
font-size:1.2em;
text-align:center;
padding-bottom:10px;
}
#report .reportBox .textsingle{
font-size:1.4em;
line-height:1.6em;
padding:15px 70px;
}
#report .reportBox dl{
background-color:#fff;
padding:30px 40px 0px 40px;
}
#report .reportBox dt.repo1{
position:relative;
padding-bottom:15px;
}
#report .reportBox .repotext{
padding:0 30px;
}
#report .reportBox .repotext p{
font-size:1.4em;
line-height:1.6em;
padding:15px 0;
}
#report .reportBox .repoimg{
max-width:500px;
width:100%;
height:auto;
margin:0 auto;
padding-top:10px;
}
#report #nextbutton{
max-width:500px;
width:100%;
height:auto;
margin:0 auto;
}
#report #bimg{
max-width:742px;
width:100%;
height:auto;
margin:0 auto;
}
/*
/* Course Section
/* =================================================================== */
#course {
padding:40px 0 0 0;
}
.ie #course .row.items {
width: 1140px;
}
#course .csstimg{
position:absolute;
top:180px;
right:30%;
}
#course #csnav{
padding:0;
margin:0 auto;
text-align:center;
}
#course #csnav li{
padding:15px 0 0 0;
margin:0 5px 10px 5px;
list-style:none;
position:relative;
width:410px;
display:inline-block;
text-align:left;
}
#course #csnav li a {
display:block;
}
#course #csnav li a:hover {
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
#course #csnav li .csbui{
position:absolute;
top:0;
left:20%;
}
#course #csnav li .csbui_br{
position:absolute;
top:0;
left:19%;
}
#course #csnav li .csbui_op{
position:absolute;
top:15px;
left:19%;
}
#course #csnav li dl{
padding:0;
margin:0;
}
#course #csnav li dl dt{
margin:0;
font-size:2.2em;
font-family: "hannari", serif;
color:#FFFFFF;
padding:12px 0 12px 30%;
}
#course #csnav li dl .cstn{
background:url("../../images2/course/bg_t1.png") 0 0 repeat;
}
#course #csnav li dl .cste{
background:url("../../images2/course/bg_t2.png") 0 0 repeat;
}
#course #csnav li dl dd{
padding:10px;
margin:0;
font-size:1.4em;
background:#f9e2d1;
text-align:center;
color:#000000;
}
#course h2{
position:relative;
padding-top:15px;
margin:20px 0 0 0;
}
#course h2 .cstlbui{
position:absolute;
left:38%;
top:0;
}
#course h2 .cstl{
line-height:1;
text-transform: uppercase;
font-weight:normal;
letter-spacing:-2px;
margin:0;
font-size:1.5em;
font-family: "hannari", serif;
color:#FFFFFF;
background:url("../../images2/course/bg_t1.png") 0 0 repeat;
padding:10px 0 10px 41%;
}
#course h2 .cstl2{
line-height:1;
text-transform: uppercase;
font-weight:normal;
letter-spacing:-2px;
margin:0;
font-size:1.5em;
font-family: "hannari", serif;
color:#FFFFFF;
background:url("../../images2/course/bg_t2.png") 0 0 repeat;
padding:10px 0 10px 41%;
}
#course h2 .cstl3{
line-height:1;
text-transform: uppercase;
font-weight:normal;
margin:0;
font-size:1.5em;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "MS P 明朝", "MS PMincho", "MS 明朝", serif;
color:#FFFFFF;
background:url("../../images2/course/bg_t2.png") 0 0 repeat;
padding:10px 0 10px 0;
text-align:center;
}
#course h2 .cstl3 .csopti{
font-size:0.5em;
padding-left:10px;
}
#course .csbox{
padding:10px 0 20px 0;
background:#f8f4f1 url("../../images2/course/main_bg.png") 95% 90% no-repeat;
text-align:center;
}
#course .csbox .cslistbox{
margin:0 auto;
padding-top:20px;
width:90%;
max-width:900px;
text-align:left;
}
#course .csbox .cslistbox:before, #course .csbox .cslistbox:after {
content: "";
display: table;
}
#course .csbox .cslistbox:after {
clear: both;
}
#course .csbox .cslist1{
float:left;
margin-right:8px;
text-align:right;
display:inline-block;
width:70%;
}
#course .csbox .cslist2{
float:left;
margin-right:8px;
text-align:right;
display:inline-block;
width:65%;
}
#course .csbox .cslist3{
float:left;
margin-right:8px;
text-align:right;
display:inline-block;
width:55%;
}
#course .csbox .cslist4{
float:left;
margin-right:8px;
text-align:right;
display:inline-block;
width:52%;
}
#course .csbox .cslistin{
font-size:1.6em;
border-bottom:2px solid #44311f;
padding:5px;
padding-top:7px;
text-align:left;
display:inline-block;
}
#course .csbox .cslistin .cslistp{
font-size:0.3em;
padding-bottom:15px;
}
#course .csbox .cstime{
float:left;
width:80px;
text-align:left;
}
#course .csbox .cstime .cstimein{
font-size:1.6em;
font-weight:bold;
border:2px solid #44311f;
padding:5px;
display:inline-block;
}
#course .csbox .csinbox{
width:90%;
max-width:900px;
padding-top:30px;
padding-bottom:20px;
clear:both;
margin-left:auto;
margin-right:auto;
position:relative;
}
#course .csbox .csinbox:before, #course .csbox .csinbox:after {
content: "";
display: table;
}
#course .csbox .csinbox:after {
clear: both;
}
#course .csbox .csinbox h3{
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
padding:0;
margin:0;
font-size:1.5em;
line-height:1.3;
}
#course .csbox .csinbox .csinleft{
width:52%;
float:left;
text-align:left;
padding-right:30px;
max-width:480px;
}
#course .csbox .csinbox .csinright{
width:48%;
float:left;
text-align:left;
max-width:420px;
}
#course .csbox .csinbox p{
padding:0;
margin:0;
}
#course .csbox .csinbox .cstxnm{
font-size:1.5em;
line-height:1.8;
text-align:left;
padding:0 0 10px 0;
margin:0;
}
#course .csbox .csinbox .cstxun{
font-size:1.4em;
line-height:2;
text-align:left;
padding:5px 0 25px 5px;
margin:0;
}
#course .csbox .csinbox .csfcbx{
padding:15px 15px 15px 20px;
background:#FFFFFF;
margin:0 0 20px 0;
}
#course .csbox .csinbox .csfcbx h3{
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
padding:0 0 5px 0;
margin:0;
font-size:1.5em;
line-height:1.3;
}
#course .csbox .csinbox .csfcbx .csfctx{
padding:0;
margin:0;
font-size:1.4em;
line-height:2;
}
#course .csbox .csinbox .csinleft .csstrecom{
position:absolute;
top:300px;
left:-10px;
}
#course .csbox .csinbox .csinleft .csstrecom2{
position:absolute;
top:10px;
left:-10px;
}
#course .csbox .csinbox .csinleft .csoprec{
text-align:left;
padding:10px 0 20px 190px;
font-size:1.3em;
margin:0;
}
#course .csbox .csinbox .csinleft .csoprec li{
padding:2px 0;
margin:0;
}
#course .csbox .csinbox .csprice2{
padding-top:10px;
}
#course .csbox .csinbox .cspoint{
background:#FFFFFF;
padding:20px 20px 20px 35px;
margin:0 0 20px 0;
}
#course .csbox .csinbox .cspoint li{
font-size:1.3em;
font-weight:bold;
border-bottom:dashed 1px #44311f;
padding:7px 3px 7px 0;
margin:0;
}
#course .csbox .csinbox .csimgct{
text-align:center;
padding-bottom:20px;
}
#course .csbtbox{
text-align:center;
padding:10px 0 30px 0;
margin:0;
}
#course .csbtbox:before, #course .csbtbox:after {
content: "";
display: table;
}
#course .csbtbox:after {
clear: both;
}
#course .csbtbox .cstxbt{
font-size:1.3em;
color:#7c7c7c;
padding:0 0 10px 0;
margin:0;
}
#course .csbtbox .cstxbt a{
color:#7c7c7c;
}
#course .csbtbox .cstxbt a:hover{
color:#000000;
}
#course .csbtbox .csbtleft{
font-size:1.2em;
display:inline-block;
}
#course .csbtbox .csbtleft .csbttel{
font-size:1.3em;
font-weight:bold;
padding-left:5px;
padding-right:15px;
}
#course .csbtbox .csbtleft a{
color:#44311f;
}
#course .csbtbox .csbtright{
display:inline-block;
}
#course .csbtbox .csbtright a{
font-size:1.2em;
background:#7ac800;
display:block;
padding:5px 15px;
color:#ffffff;
}
/*
/* q. Blog Entry
/* =================================================================== */
.entry .tags {
margin-top: 18px;
font-family: "raleway-regular", sans-serif;
color: #707273;
}
.entry .tags a {
font-family: "raleway-heavy", sans-serif;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
color: #f26522;
}
.entry .tags a:hover {
color: #12151b;
}
/* comments
-------------------------------------------------------------------- */
#comments {
padding-top: 12px;
padding-bottom: 12px;
}
#comments h3 {
font: 20px/30px "raleway-bold", sans-serif;
margin-bottom: 6px;
}
.commentlist {
margin: 30px 0 54px 0;
padding: 0;
}
.commentlist > li {
position: relative;
list-style: none;
margin: 0;
padding: 18px 0 18px 0;
padding-left: 14%;
}
.commentlist li .avatar {
position: absolute;
left: 0px;
display: block;
height: 48px;
width: 48px;
}
.commentlist li .avatar img {
margin-top: 6px;
height: 48px;
width: 48px;
border-radius: 100%;
}
.commentlist li .comment-info cite {
font: 14px/30px "raleway-heavy", sans-serif;
color: #252525;
}
.commentlist li .comment-info .comment-meta {
font-size: 13px;
line-height: 24px;
display: block;
color: #707273;
}
.commentlist li .comment-info .comment-meta .reply {
font-family: "raleway-bold", sans-serif;
}
.commentlist li .comment-info .comment-meta .sep {
margin: 0 5px;
color: #7d7e80;
}
.commentlist li .comment-text {
clear: both;
margin: 18px 0 0 0;
padding: 0;
}
.commentlist li ul.children {
margin: 0;
padding: 18px 0 0 0;
list-style: none;
}
.commentlist li ul.children li {
padding-left: 5%;
padding-top: 18px;
}
/* comment form
-------------------------------------------------------------------- */
#comments form {
margin-top: 36px;
}
#comments form fieldset {
padding: 0;
}
#comments form label {
padding-left: 24px;
width: 41.66667%;
float: right;
}
#comments form div {
margin: 12px 0 18px 0;
}
#comments form input,
#comments form textarea,
#comments form select {
width: 58.33333%;
float: left;
}
#comments form .message label {
display: none;
}
#comments form textarea {
width: 100%;
}
#comments form span.required {
color: #f26522;
font-size: 15px;
}
#comments form button {
padding-left: 24px;
padding-right: 24px;
color: #f26522 !important;
border-color: #f26522 !important;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
}
#comments form button:hover {
color: white !important;
background: #f26522 !important;
}
/*
/* r. Portfolio Entry
/* =================================================================== */
.portfolio-content .entry header {
text-align: center;
}
.portfolio-content .entry .entry-content-media {
margin: 30px 0 0;
}
.portfolio-content .entry .entry-content-media img {
margin-bottom: 24px;
}
.portfolio-content .entry .pagenav {
margin-top: 0;
}
.portfolio-content .entry .pagenav a[rel="next"]:after {
float: right;
}
/* more projects
/* ------------------------------------------------------------------- */
.more-projects {
margin-top: 60px;
}
.more-projects h1 {
font: 30px/36px "raleway-bold", sans-serif;
text-align: center;
margin-bottom: 0;
}
.more-projects .portfolio-wrapper {
text-align: left;
}