/*
Theme Name: 縺｡縺�＆縺ｪ繧ｳ繝ｳ繝薙ル
Theme URI: http://www.scvs.jp
Description:
Version: 1.2
Author: 繝帙�繝�譬ｪ蠑丈ｼ夂､ｾ
Author URI: http://www.scvs.jp
*/
@charset "UTF-8";
/* CSS3 Document */
@font-face {
font-family: 'FontAwesome';
src: url(fonts/fontawesome-webfont.eot?v=4.7.0);
src: url(fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format('embedded-opentype'), url(fonts/fontawesome-webfont.woff2?v=4.7.0) format('woff2'), url(../fonts/fontawesome-webfont.woff?v=4.7.0) format('woff'), url(fonts/fontawesome-webfont.ttf?v=4.7.0) format('truetype'), url(fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular) format('svg');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
font-size: 1em;
}
img {
border: none;
vertical-align: bottom;
}
.clear {
clear: both;
}
.clearfix {
overflow: hidden;
}
ol, ul {
list-style: none;
}
:focus {
outline: 0;
}
html{
font-size: 100%;
}
body, table, input, textarea, select, option {
font-size: 100%;
}
body {
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
font-family: "貂ｸ譏取悃", "�ｭ�ｳ �ｰ譏取悃", "MS PMincho", "繝偵Λ繧ｮ繝取�譛� Pro W3", "Hiragino Mincho Pro", serif;
color: #222;
font-size: 15px; /* --rem縺ｫ蟇ｾ蠢懊＠縺ｦ縺�↑縺�ヶ繝ｩ繧ｦ繧ｶ逕ｨ -- */
font-size: 1.5rem;
/*-webkit-text-size-adjust: none;*/
-webkit-text-size-adjust: 100%; /* -- 邵ｦ讓ｪ縺ｧ繧ゅヵ繧ｩ繝ｳ繝医し繧､繧ｺ縺悟､峨ｏ繧峨↑縺� -- */
}
/*------------------------------------------------------------
Wrapper
------------------------------------------------------------*/
#wrapper {
margin: 0 auto;
width: 980px;
}
@media only screen and (max-width: 979px){
#wrapper {
margin: 0 auto;
width: 100%;
}
}
/*------------------------------------------------------------
繝倥ャ繝繝ｼ
------------------------------------------------------------*/
#header {
margin: 0 auto;
width: 961px;
height: 106px;
}
#header_text {
width: 100%;
height: 24px;
padding-top: 6px;
color: #000;
font-size: 16px;
font-weight: 500;
text-align: left !important;
}
#logo {
float: left;
}
#header_menu {
float: right;
width: 200px;
height: 21px;
margin: 26px 0 0 0px;
}
#header_menu li {
float: left;
width: auto;
height: 21px;
font-size: 13px;
font-weight: bold;
}
#header_menu li a {
display: block;
width: 81px;
height: 11px;
padding: 5px 0 5px 19px;
color: #2a2726;
color: #666;
text-decoration: none;
letter-spacing: -1px;
background: url(images/base/hesder_icon.png) no-repeat;
background-position: 5px 5px;
}
#header_menu li a:hover {
color: #e50012;
}
@media only screen and (max-width: 959px){
#header {
margin: 0 auto;
width: 100%;
min-width: 320px;
height: auto;
}
}
@media only screen and (max-width: 500px){
#header_text {
margin: 0 3%;
width: 94%;
height: 48px;
line-height: 20px;
}
#logo {
float: none;
width: 100%;
text-align: center;
}
#header_menu {
float: none;
margin: 10px auto;
width: 200px;
}
}
/*------------------------------------------------------------
繧ｰ繝ｫ繝ｼ繝舌Ν繝翫ン
------------------------------------------------------------*/
#nav {
clear: both;
margin: 0 auto;
width: 960px;
height: 46px;
}
#nav ul {
height: 46px;
}
#nav li {
float: left;
width: 159px;
text-align: center;
border-left: 1px solid #120f0f;
}
#nav li a {
display: block;
width: 159px;
height: 28px;
padding-top: 12px;
color: #222;
font-size: 14px;
text-align: center;
text-decoration: none;
border-bottom: 5px;
}
#nav li:first-child {
border-bottom: 6px solid #2ba1d3;
}
#nav li:first-child a:hover {
background: #dff2fb !important;
}
#nav li:nth-child(2) {
border-bottom: 6px solid #293089;
}
#nav li:nth-child(2) a:hover {
background: #e0e0ef !important;
}
#nav li:nth-child(3) {
border-bottom: 6px solid #dd5324;
}
#nav li:nth-child(3) a:hover {
background: #fce6de !important;
}
#nav li:nth-child(4) {
border-bottom: 6px solid #fff100;
}
#nav li:nth-child(4) a:hover {
background: #fffdd9 !important;
}
#nav li:nth-child(5) {
border-bottom: 6px solid #45a739;
}
#nav li:nth-child(5) a:hover {
background: #e3f3e1 !important;
}
#nav li:nth-child(6) {
width: 158px;
border-right: 1px solid #120f0f;
border-bottom: 6px solid #896138;
}
#nav li:nth-child(6) a:hover {
background: #eee8e1 !important;
}
@media only screen and (min-width: 960px){
#naver {
display: none;
}
}
@media only screen and (max-width: 959px){
#nav {
display: none;
}
}
/*------------------------------------------------------------
繝ｬ繧､繧｢繧ｦ繝�
------------------------------------------------------------*/
#container {
clear: both;
width: 100%;
}
#left {
float: left;
width: 726px;
padding-left: 9px;
margin-bottom: 30px
}
#contents{
margin-left: 10px;
}
@media only screen and (max-width: 979px){
#left {
float: none;
width: 724px;
margin: 0 auto;
padding-left: 0;
}
#contents{
margin-left: 2%;
}
}
@media only screen and (max-width: 734px){
#left {
width: 100%;
padding-left: 0;
margin-bottom: 30px;
}
#contents{
margin-left: 10px;
}
}
/*------------------------------------------------------------
蜿ｳ繧ｵ繧､繝�
------------------------------------------------------------*/
#right {
float: right;
width: 245px;
margin-bottom: 30px;
}
#side_box {
margin: 14px 0 24px;
padding-bottom: 23px;
width: 233px;
border: 1px solid #736357;
}
#side_box_title {
width: 100%;
height: 40px;
line-height: 40px;
color: #fff;
font-size: 18px;
text-align: center;
background: #736357;
}
#side_contact {
margin: 0 auto;
width: 150px;
height: 50px;
text-align: center;
line-height: 1;
}
#side_contact img {
padding-top: 4px;
}
#side_contact a {
display: block;
width: 150px;
height: 50px;
background: #ea551f;
border-radius: 12px;
}
#side_contact a:hover {
background: #e50012;
background: #d60050;
}
@media only screen and (max-width: 979px){
#right {
float: none;
width: 520px;
margin: 0 auto 30px;
}
#side_box {
float: left;
margin: 2px 40px 24px 0;
}
}
@media only screen and (max-width: 539px){
#right {
float: none;
width: 490px;
margin: 0 auto 30px;
}
#side_box {
float: left;
margin: 2px 10px 24px 0;
}
}
@media only screen and (max-width: 499px){
#right {
width: 245px;
margin: 0 auto 30px;
}
#side_box {
float: none;
margin: 2px auto 24px;
padding-bottom: 23px;
width: 233px;
}
}
/*------------------------------------------------------------
TOP
------------------------------------------------------------*/
#slide {
margin: 30px 0 45px;
width: 724px;
}
@media only screen and (max-width: 979px){
#slide {
margin: 30px auto 45px;
width: 724px;
}
}
@media only screen and (max-width: 723px){
#slide {
width: 100%;
}
#slide img {
width: 100%;
height: auto;
}
}
#top_catch {
margin-right: 20px;
background: url(images/top/case.png) no-repeat right;
}
#top_catch .text {
margin: 30px 0 50px;
color: #333;
font-size: 17px;
font-weight: bold;
line-height: 28px;
}
#merit {
margin-bottom: 84px;
color: #333;
font-weight: bold;
}
.merit {
width: 100%;
padding-bottom: 17px;
font-size: 17px;
line-height: 40px;
}
.merit .m{
clear: both;
float: left;
padding-right: 14px;
}
.merit .right{
float: left;
}
.merit .num {
width: 18px;
height: 18px;
line-height: 18px;
color: #fff;
font-size: 16px;
text-align: center;
background: #333;
border-radius: 9px;
}
.merit .right span {
font-size: 75%;
letter-spacing: -1px;
}
@media only screen and (max-width: 723px){
#top_catch {
margin-right: 0px;
background: url(images/top/case.png) no-repeat right;
background-size: 170px 287px;
}
#top_catch .text {
margin: 15px 0 30px;
font-size: 16px;
line-height: 26px;
}
.merit .right span {
font-size: 80%;
letter-spacing: -1px;
}
}
@media only screen and (max-width: 709px){
#top_coffee img {
width: 100%;
height: auto;
}
}
@media only screen and (max-width: 650px){
#top_catch {
margin-bottom: 40px;
padding-bottom: 300px;
background: url(images/top/case.png) no-repeat center bottom;
background-size: 232px 392px;
}
.merit .m{
float: none;
padding: 0 5px 0 10px;
}
.merit .right{
float: none;
padding: 0 5px 0 10px;
line-height: 20px;
}
}
@media only screen and (max-width: 530px){
#top_catch_img img {
width: 96%;
height: auto;
}
}
.top_title {
clear: both;
margin: 50px 0 25px -10px;
width: 164px;
padding-left: 24px;
height: 40px;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;
background: #ea551f;
border-radius: 0 25px 25px 0;
position: relative;
}
.top_title:after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 12px solid #954e33;
border-left: 12px solid #fff;
position: absolute;
top: 40px;
left: 0;
}
@media only screen and (max-width: 743px){
.top_title {
margin: 50px 0 25px -8px;
}
}
#popular {
padding: 10px 0 60px;
}
#popular li {
float: left;
width: 165px;
height: 295px;
margin: 0 14px 0 0;
}
#popular li:last-child {
margin-right: 0;
}
#popular .num {
padding-left: 12px;
margin-bottom: -1px;
width: 49px;
height: 38px;
color: #fff;
font-size: 32px;
text-align: left;
}
#popular .box {
width: 165px;
height: 240px;
padding: 15px 0px 5px;
text-align: center;
border: 1px solid #eee;
box-shadow: 2px 2px 5px #aaa inset;
}
#popular .box p {
padding: 0 10px 0 18px;
font-size: 13px;
line-height: 16px;
font-family: "�ｭ�ｳ 繧ｴ繧ｷ繝�け", "MS Gothic", "Osaka�咲ｭ牙ｹ�", Osaka-mono, monospace;
text-align: center;
}
#popular .price {
width: 100px;
color: #ff0000;
font-size: 170%;
/*font-weight: bold;*/
line-height: 1;
text-align: right;
font-family: "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
@media only screen and (max-width: 743px){
#popular {
width: 430px;
margin: 0 auto 14px;
}
#popular li {
float: left;
width: 165px;
height: 295px;
margin: 0 25px 25px 25px;
}
}
@media only screen and (max-width: 440px){
#popular {
width: 400px;
margin: 0 auto 14px;
}
#popular li {
float: left;
width: 165px;
height: 295px;
margin: 0 10px 25px 10px;
}
}
@media only screen and (max-width: 399px){
#popular {
width: 165px;
margin: 0 auto 14px;
}
#popular li {
float: left;
width: 165px;
height: 295px;
margin: 0 0 25px;
}
}
@media only screen and (max-width: 699px){
#top_monitor img {
width: 98%;
height: auto;
}
}
#top_qa {
margin: 60px 0 65px !important;
}
#top_qa .box {
margin-bottom: 12px;
width: 672px;
padding: 14px;
background: #fff;
border: 1px solid #ababab;
border-radius: 20px;
box-shadow: 2px 2px 5px #ccc inset;
}
.top_q {
height: 40px;
padding: 14px 0 0 60px;
margin-bottom: 8px;
color: #000;
font-size: 20px;
background: url(images/top/q.jpg) no-repeat;
border-bottom: 1px solid #bfbfbf;
}
.top_a {
padding: 8px 0 0 60px;
color: #000;
font-size: 19px;
line-height: 32px;
background: url(images/top/a.jpg) no-repeat;
}
@media only screen and (max-width: 734px){
#top_qa .box {
margin-bottom: 12px;
width: 93%;
padding: 14px 2%;
border-radius: 16px;
box-shadow: 2px 2px 5px #ccc inset;
}
.top_q {
height: 40px;
padding: 12px 0 0 35px;
font-size: 18px;
background-size: 30px 31px;
background-position: 0 5px;
}
.top_a {
padding: 8px 0 0 35px;
font-size: 17px;
line-height: 30px;
background-size: 30px 31px;
background-position: 0 5px;
}
}
@media only screen and (max-width: 441px){
#top_qa .box {
margin-bottom: 12px;
width: 93%;
padding: 14px 2%;
border-radius: 15px;
box-shadow: 2px 2px 4px #ccc inset;
}
.top_q {
height: 40px;
padding: 12px 0 0 35px;
font-size: 17px;
}
.top_a {
padding: 8px 0 0 35px;
font-size: 16px;
line-height: 30px;
}
}
#top_voice {
margin: 65px 0 0px;
}
.voice1 {
margin-right: 60px;
}
@media only screen and (max-width: 699px){
#top_voice {
margin: 45px 0 0 -10px;
text-align: center;
}
.voice1 {
margin-right: 0px; !important;
}
.voice1 img {
margin: 0 0 30px 0 !important;
}
}
@media only screen and (max-width: 359px){
#top_voice img {
width: 93%;
height: auto;
}
}
#information {
margin: 0 10px 50px 0;
}
#information li {
line-height: 30px;
border-bottom: 1px dotted #999;
}
#information .date {
float: left;
width: 90px;
padding-left: 10px;
}
#information .text a {
color: #222;
font-weight: 500;
text-decoration: none;
}
#information .text a:hover {
color: #d7440e;
text-decoration: underline;
}
/*------------------------------------------------------------
縺｡縺�＆縺ｪ繧ｳ繝ｳ繝薙ル縺ｨ縺ｯ
------------------------------------------------------------*/
#scvs_title {
margin: 22px 0 27px 0px;
width: 384px;
padding: 3px 0 0 28px;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 24px;
font-weight: bold;
background: #29abe2;
border-radius: 0 25px 25px 0;
position: relative;
}
#scvs_title:after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 10px solid #0071bc;
border-left: 12px solid #fff;
position: absolute;
top: 48px;
left: 0;
}
.scvs_merit {
clear: both;
width: 688px;
height: 160px;
margin: 17px 0 0 10px;
background: url(images/scvs/box_bg.png) no-repeat;
}
.scvs_merit .img1 {
float: left;
}
.scvs_merit dl {
float: left;
width: 320px;
padding: 24px 0 0 20px;
font-family: "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
color: #1a1a1a;
}
.scvs_merit dt {
padding-bottom: 20px;
font-size: 46px;
font-weight: bold;
}
.scvs_merit dd{
font-size: 17px;
line-height: 23px;
}
.scvs_merit .img2 {
float: left;
margin: 8px 0 0 10px;
}
@media only screen and (max-width: 743px){
#scvs_merit {
margin-left: 10px;
}
#scvs_title {
margin: 22px 0 27px 2px;
}
.scvs_merit {
width: 98%;
height: 160px;
margin: 17px 1% 0 1%;
background: url(images/scvs/box_bg.png) no-repeat;
background-size: 99% 160px;
}
.scvs_merit .img1 img {
width: 74px;
height: auto;
}
.scvs_merit dl {
float: left;
width: 200px;
padding: 24px 0 0 10px;
}
.scvs_merit dt {
padding-bottom: 20px;
font-size: 36px;
}
.scvs_merit dd{
margin-left: -70px;
font-size: 15px;
line-height: 25px;
}
.scvs_merit dd .fs_70 {
font-size: 75%;
}
.scvs_merit dd .mt_15{
margin-top: -5px !important;
}
.scvs_merit .img2 {
float: right;
margin: 10px 30px 0 10px
}
/*.scvs_merit .img2 img {
width: 156px;
height: auto;
}*/
}
@media only screen and (max-width: 600px){
.scvs_merit {
height: 260px;
margin: 17px 0 0 10px;
background: url(images/scvs/box_bg.png) no-repeat;
background-size: 96% 260px;
}
.scvs_merit .img1 img {
width: 66px;
height: auto;
margin-right: 10px;
}
.scvs_merit dl {
float: none;
width: 400px;
padding: 24px 0 0 20px;
}
.scvs_merit dt {
padding-bottom: 10px;
font-size: 36px;
}
.scvs_merit dd{
margin-left: 55px;
font-size: 15px;
line-height: 22px;
}
.scvs_merit .img2 {
float: none;
margin: 0px 40px 0 10px;
text-align: center;
}
.scvs_merit .img2 img {
width: auto;
height: 113px;
}
}
@media only screen and (max-width: 520px){
#scvs_3merit img {
width: 98%;
height: auto;
}
}
@media only screen and (max-width: 441px){
.scvs_merit dd{
margin-left: 0px;
font-size: 15px;
}
}
.scvs_title {
clear: both;
margin: 50px 0 10px 0px;
width: 246px;
padding-left: 22px;
height: 40px;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;
background: #ea551f;
border-radius: 0 25px 25px 0;
position: relative;
}
.scvs_title:after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 10px solid #954e33;
border-left: 12px solid #fff;
position: absolute;
top: 40px;
left: 0;
}
@media only screen and (max-width: 743px){
#example {
}
.scvs_title {
margin: 22px 0 27px 2px;
}
}
#example {
clear: both;
padding: 0px 10px 0 0;
position: relative;
}
#example img {
vertical-align: top;
}
#example #img1 {
float: left;
margin: 25px 0 0 10px;
}
#example #img2 {
float: right;
margin: -40px 25px 0 0;
/*position: absolute;
top: -20px;
right: 20px;*/
}
@media only screen and (max-width: 500px){
#example #img2 {
float: none;
margin: 0px 0 30px 20px;
}
#example #img2 img {
width: 96%;
height: auto;
}
}
#case ul {
margin-left:10px;
padding-top: 10px;;
}
#case li {
float: left;
margin: 0 10px 10px 0;
width: 340px;
height: auto;
box-shadow: 0px 4px 6px #ccc inset;
border: 1px solid #999;
}
@media only screen and (max-width: 734px){
#case li {
width: 310px;
height: auto;
}
#case li img {
width: 310px;
height: auto;
}
}
@media only screen and (max-width: 679px){
#case li {
float: none;
margin: 0 auto 10px;
width: 340px;
height: auto;
}
#case li img {
width: 340px;
height: auto;
}
}
@media only screen and (max-width: 380px){
#case li {
float: none;
margin: 0 auto 10px;
width: 310px;
height: auto;
}
#case li img {
width: 310px;
height: auto;
}
}
#comparison {
margin: 20px 0 50px 10px !important;
width: 690px;
height: 720px;
padding-top: 15px;
text-align: center;
box-shadow: 0px 4px 6px #ccc inset;
border-bottom: 1px solid #eee;
}
#comparison td {
}
.blue {
background: #daeafb;
}
.pink {
background: #fce8e7;
}
@media only screen and (max-width: 689px){
#comparison {
margin: 20px 0 50px 1% !important;
width: 98%;
height: auto;
box-shadow: 0px 4px 6px #ccc inset;
border-bottom: 1px solid #eee;
}
#comparison img {
width: 98%;
height: auto;
}
}
/*#attract {
margin: 20px 0 50px 10px !important;
}
#attract p {
margin: 10px 0px 10px 20px;
color: #1301e1;
font-weight: bold;
font-size: 29px;
white-space: nowrap;
line-height: 1.3;
}
#attract li {
margin: 5px 0 5px 20px;
padding-top: 3px;
padding-left: 20px;
background: url(images/scvs/check.jpg) left center no-repeat;
font-size:22px;
white-space:nowrap;
}*/
#flow {
margin: 30px 0 100px 10px !important;
width: 690px;
padding: 30px 0;
text-align: center;
box-shadow: 0px 4px 6px #ccc inset;
border-bottom: 1px solid #eee;
}
#flow img {
margin: 5px 6px;
width: 121px;
height: 160px;
}
#flow #confirm {
padding: 30px 10px 0 20px;
text-align: left;
}
#flow .text_01 {
padding: 40px 0 0 15px;
color: #000;
font-size: 18px;
font-weight: bold;
text-align: left;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#flow #confirm li {
padding-bottom: 10px;
line-height: 20px;
list-style: inside;
}
@media only screen and (max-width: 729px){
#flow {
margin: 30px 1% 100px 1% !important;
width: 98%;
padding: 30px 0;
text-align: center;
box-shadow: 0px 4px 6px #ccc inset;
border-bottom: 1px solid #eee;
}
#flow_img {
margin: 0 auto;
width: 459px;
}
}
@media only screen and (max-width: 479px){
#flow_img {
width: auto;
}
}
/*------------------------------------------------------------
蝠�刀繝ｩ繧､繝ｳ繧｢繝��
------------------------------------------------------------*/
#lineup {
margin: 0 0 100px 10px;
}
#lineup_title {
margin: 22px 0 27px 0px;
width: 384px;
padding: 3px 0 0 28px;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 24px;
font-weight: bold;
background: #2e3192;
border-radius: 0 25px 25px 0;
position: relative;
}
#lineup_title:after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 10px solid #1b1464;
border-left: 12px solid #fff;
position: absolute;
top: 48px;
left: 0;
}
#lineup_button img {
margin: 0 15px 15px 0;
}
#lineup_button a:hover img {
opacity: 0.70;
filter: alpha(opacity=70);
-moz-opacity: 0.70;
-ms-filter: "alpha(opacity=70)";
-webkit-transition: opacity 0.65s ease-in-outt;
-moz-transition: opacity 0.65s ease-in-out;
-ms-transition: opacity 0.65s ease-in-out;
transition: opacity 0.65s ease-in-out;
}
#lineup_button img {
margin: 0 15px 15px 0;
}
#lineup .text {
margin: 25px 0 35px;
color: #3e3a39;
font-size: 18px;
line-height: 30px;
font-weight: 500;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#lineup .text a {
color: #0071bc;
text-decoration: none;
}
#lineup .text a:hover {
color: #ed1c24;
text-decoration: underline;
}
@media only screen and (max-width: 743px){
#lineup_title {
margin: 22px 0 27px 2px;
}
#lineup_button {
width: 480px;
margin: 0 auto;
}
}
@media only screen and (max-width: 699px){
#lineup_monitor img {
width: 98%;
height: auto;
}
}
@media only screen and (max-width: 479px){
#lineup_button {
width: 220px;
}
#lineup_button img {
margin: 0 0 15px 0;
}
}
ul.tab{
padding: 0;
}
ul.tab li{
list-style-type:none;
height: 45px;
float:left;
}
ul.tab li a{
outline: none;
display: block;
}
ul.tab li a.selected{
cursor: default;
}
ul.panel{
clear: both;
padding: 0;
}
ul.panel li {
list-style-type: none;
width: 688px;
height: auto;
}
#tab1 {
border-top: 2px solid #f0ba2f;
border-left: 2px solid #f0ba2f;
}
#tab1 div{
border-right: 2px solid #f0ba2f;
border-bottom: 2px solid #f0ba2f;
}
#tab2 {
clear: both;
border-top: 2px solid #45b035;
border-left: 2px solid #45b035;
}
#tab2 div{
border-right: 2px solid #45b035;
border-bottom: 2px solid #45b035;
}
#tab3 {
clear: both;
border-top: 2px solid #e36c88;
border-left: 2px solid #e36c88;
}
#tab3 div{
border-right: 2px solid #e36c88;
border-bottom: 2px solid #e36c88;
}
.food {
margin-left: 220px;
}
.sweets {
margin-left: 450px;
}
#lineup ul.panel div {
float: left;
width: 170px;
height: 300px;
font-size: 16px;
font-family: "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#lineup ul.panel li div a {
display: block;
width: 170px;
height: 300px;
color: #222;
text-decoration: none;
}
#lineup ul.panel li div a:hover {
color: #151cbe;
}
#lineup ul.panel li div p {
padding-left: 10px;
line-height: 1.3;
}
#lineup .img {
padding-top: 5px;
}
#lineup .num {
padding: 10px 0 3px;
font-size: 14px;
}
#lineup .name {
font-size: 14px;
padding-bottom: 0px;
height: 65px;
}
#lineup .price {
width: 100px;
color: #ff0000;
font-size: 170%;
/*font-weight: bold;*/
line-height: 1;
text-align: right;
}
@media only screen and (max-width: 717px){
#lineup ul.tab {
margin: 0 auto;
width: 518px;
}
#lineup ul.panel li {
margin: 0 auto;
width: 516px;
}
.food {
margin-left: 0px;
}
.sweets {
margin-left: 0px;
}
}
@media only screen and (max-width: 545px){
#lineup ul.tab {
margin: 0 auto;
width: 346px;
}
#lineup ul.panel li {
margin: 0 auto;
width: 344px;
}
}
@media only screen and (max-width: 373px){
#lineup ul.tab {
margin: 0 auto;
width: 174px;
}
#lineup ul.panel li {
margin: 0 auto;
width: 172px;
}
ul.tab li{
height: 34px;
}
.drink img {
width: 174px;
height: auto;
}
.food img {
width: 174px;
height: auto;
}
.sweets img {
width: 174px;
height: auto
}
}
/*------------------------------------------------------------
縺雁ｮ｢縺輔∪縺ｮ螢ｰ
------------------------------------------------------------*/
#voice_title {
margin: 22px 0 27px 0px;
width: 384px;
padding: 3px 0 0 28px;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 24px;
font-weight: bold;
background: #ea551f;
border-radius: 0 25px 25px 0;
position: relative;
}
#voice_title:after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 10px solid #954e33;
border-left: 12px solid #fff;
position: absolute;
top: 48px;
left: 0;
}
#voice {
margin-bottom: 80px;
}
.voice {
margin: 20px 0 15px 10px !important;
width: 666px;
height: auto;
padding: 30px 17px 15px;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
text-align: left;
box-shadow: 0px 4px 6px #ccc inset;
border-bottom: 1px solid #eee;
}
.voice .customer {
float: left;
width: 255px;
line-height: 25px;
color: #000;
font-size: 14px;
font-weight: 500;
text-align: center;
}
.voice_top {
width: 100%;
}
.voice .company {
float: left;
padding-top: 2px;
margin-right: 3px;
width: 110px;
background: #fff1d5;
}
.voice .name {
float: left;
padding-top: 2px;
width: 142px;
background: #fff1d5;
}
.voice .customer img {
margin: 13px 0 20px;
}
.voice dl {
float: right;
width: 395px;
}
.voice dt {
padding: 2px 0 0 12px;
height: 25px;
line-height: 25px;
color: #fff;
font-size: 14px;
font-weight: bold;
background: #f7931e;
}
.voice dd {
padding: 6px 0 15px;
color: #000;
font-size: 14px;
font-weight: 500;
line-height: 24px;
}
#voice video {
clear: both;
margin: 12px 0 22px;
}
.voice .wide dl {
float: none;
width: 666px !important;
}
.voice .wide dt {
padding: 2px 0 0 12px;
height: 25px;
line-height: 25px;
color: #fff;
font-size: 14px;
font-weight: bold;
background: #f7931e;
}
.voice .wide dd {
padding: 6px 0 15px;
color: #000;
font-size: 14px;
font-weight: 500;
line-height: 24px;
}
@media only screen and (max-width: 743px){
#voice_title {
margin: 22px 0 27px 2px;
}
#voice {
width: 100%;
}
.voice .customer {
float: none;
margin: 0 auto;
width: 255px;
}
.voice {
margin: 20px 1% 15px 2% !important;
width: 91%;
height: auto;
padding: 30px 3% 15px 3%;
}
.voice_img {
clear: both;
float: none;
}
.voice dl {
clear: both;
float: none;
width: 100% !important;
margin-top: 20px !important;
}
.voice .wide dl {
float: none;
width: 100% !important;
}
}
/*------------------------------------------------------------
繧ｵ繝ｼ繝薙せ繧ｨ繝ｪ繧｢
------------------------------------------------------------*/
#area_title {
margin: 22px 0 27px 0px;
width: 384px;
padding: 3px 0 0 28px;
height: 45px;
line-height: 45px;
color: #3e3a39;
font-size: 24px;
font-weight: bold;
background: #fff100;
border-radius: 0 25px 25px 0;
position: relative;
}
#area_title:after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 10px solid #a89b00;
border-left: 12px solid #fff;
position: absolute;
top: 48px;
left: 0;
}
#area {
margin-left: 10px;
}
#area_left {
float: left;
}
#area #map {
margin: 25px 30px 30px 0;
width: 423px;
}
#area #map img {
border: 1px solid #595757;
}
#area dl {
float: left;
margin-top: 25px;
width: 200px;
color: #3e3a39;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#area dt {
padding-bottom: 20px;
font-size: 24px;
font-weight: bold;
}
#area dd {
padding: 0 0 50px 15px;
font-size: 18px;
line-height: 30px;
}
#area .text_01 {
clear: both;
padding: 30px 0 10px;
font-size: 24px;
font-weight: bold;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#area .text_02 {
clear: both;
font-size: 18px;
line-height: 30px;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#area .text_03 {
clear: both;
padding: 0 0 10px;
font-size: 18px;
font-weight: bold;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
@media only screen and (max-width: 743px){
#area_title {
margin: 22px 0 27px 2px;
}
#area {
margin-left: 12px;
}
}
@media only screen and (max-width: 679px){
#area dl {
float: none;
margin: 60px 0 0 20px !important;
width: 200px;
}
}
@media only screen and (max-width: 462px){
#area #map {
margin: 25px 0 30px 0;
width: 100%;
}
#area #map img {
width: 98%;
height: auto;
}
}
@media only screen and (max-width: 359px){
#area_img img {
width: 99%;
height: auto;
}
}
/*------------------------------------------------------------
繧医￥縺ゅｋ縺碑ｳｪ蝠�
------------------------------------------------------------*/
#qa_title {
margin: 22px 0 27px -10px;
width: 384px;
padding: 3px 0 0 28px;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 20px;
font-weight: bold;
background: #45b035;
border-radius: 0 25px 25px 0;
position: relative;
}
#qa_title:after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 10px solid #006837;
border-left: 12px solid #fff;
position: absolute;
top: 48px;
left: 0;
}
#qa {
margin: 20px 0 65px !important;
}
#qa .box {
margin-bottom: 23px;
width: 670px;
padding: 8px 4px 9px 10px;
background: #fff;
border: 1px solid #ababab;
border-radius: 20px;
box-shadow: 2px 2px 5px #aaa inset;
}
#qa .q {
padding: 7px 0 6px 58px;
margin-bottom: 8px;
color: #000;
font-size: 18px;
line-height: 34px;
background: url(images/faq/q.jpg) no-repeat;
border-bottom: 1px solid #bfbfbf;
}
#qa .a {
padding: 2px 0 0 58px;
color: #000;
font-size: 18px;
line-height: 34px;
background: url(images/faq/a.jpg) no-repeat;
background-position: 0 2px;
}
@media only screen and (max-width: 734px){
#qa .box {
margin-bottom: 12px;
width: 93%;
padding: 14px 2%;
border-radius: 16px;
box-shadow: 2px 2px 5px #ccc inset;
}
#qa .q {
height: 40px;
padding: 12px 0 0 35px;
font-size: 18px;
background-size: 28px 32px;
background-position: 0 5px;
}
#qa .a {
padding: 8px 0 0 35px;
font-size: 17px;
line-height: 30px;
background-size: 28px 32px;
background-position: 0 5px;
}
}
@media only screen and (max-width: 441px){
#qa .box {
margin-bottom: 12px;
width: 93%;
padding: 14px 2%;
border-radius: 15px;
box-shadow: 2px 2px 4px #ccc inset;
}
#qa .q {
height: 40px;
padding: 8px 0 10px 30px;
font-size: 15px;
line-height: 20px;
}
#qa .a {
padding: 8px 0 0 30px;
font-size: 15px;
line-height: 22px;
}
}
/*------------------------------------------------------------
縺雁撫縺�粋縺�
------------------------------------------------------------*/
#contact {
margin: 0 0 100px 10px;
}
#contact_title {
margin: 22px 0 27px 0px;
width: 384px;
padding: 3px 0 0 28px;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 20px;
font-weight: bold;
background: #8c6239;
border-radius: 0 25px 25px 0;
position: relative;
}
#contact_title:after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 10px solid #42210b;
border-left: 12px solid #fff;
position: absolute;
top: 48px;
left: 0;
}
#contact figure {
float: left;
}
#contact figcaption {
margin-bottom: 12px;
color: #000;
font-size: 18px;
font-weight: bold;
line-height: 30px;
padding: �壬x 0 ��0px;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#contact .text_01 {
clear: both;
color: #000;
font-size: 18px;
font-weight: bold;
padding: 50px 0 20px;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#contact .text_02 {
clear: both;
color: #fb2f2f;
font-size: 16px;
font-weight: bold;
padding: 0px 0 10px 20px;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#contact #attention {
overflow: auto;
padding: 5px 0 5px 20px;
margin-left: 15px;
width: 650px;
height: 160px;
font-size: 14px;
line-height: 18px;
font-weight: 500;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
list-style: decimal outside;
border: #999 solid 1px;
}
#contact #breadcrumb {
margin: 30px 0 30px 3%;
width: 93%;
list-style: none;
overflow: hidden;
position: relative;
zoom: 1;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#contact #breadcrumb li {
float: left;
color: #fff;
font-size: 15px;
width: 105px;
text-align: center;
padding: 12px 0 10px 40px;
background: #e3e3e3;
position: relative;
display: block;
float: left;
}
#contact #breadcrumb li:first-child {
padding: 12px 0 10px 20px;
}
#contact #breadcrumb li:after { /* 遏｢蜊ｰ縺ｫ縺ゅ◆繧倶ｸ芽ｧ偵�陬�｣ｾ */
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #0053a2;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
#contact #breadcrumb li:before { /* 蠅�阜縺ｮ繝ｩ繧､繝ｳ縲荳芽ｧ偵ｒ驥阪�縺ｦ縺壹ｉ縺吶％縺ｨ縺ｫ繧医▲縺ｦ譫�縺ｨ縺吶ｋ */
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #fff;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 3px;
left: 100%;
z-index: 1;
}
#breadcrumb li.red {
font-weight: 500;
background: #fc1204 !important;
}
#breadcrumb li.red::after {
border-left-color: #fc1204 !important;
}
#breadcrumb li.gray {
color: #000 !important;
background: #e3e3e3;
}
#breadcrumb li.gray::after {
border-left-color: #e3e3e3 !important;
}
#contact #required {
margin: 30px 35px 10px 0;
text-align: right;
}
#contact table {
margin: 0 0 30px 3%;
width: 93%;
line-height: 1.5;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
border-top: 1px dotted #999;
}
#contact tr {
border-bottom: 1px dotted #999;
}
#contact th {
width: 235px;
padding: 12px 0 10px 2px;
text-align: left;
font-weight: normal;
vertical-align: middle;
}
#contact td {
padding: 12px 2px 10px 45px;
text-align: left;
}
.required {
background: url(contact/img/required.jpg) no-repeat left center;
}
#contact input[type=text] {
width: 320px;
padding:4px 2px;
border: 1px solid #ccc;
}
#contact textarea {
width: 98%;
padding:4px 2px;
border: 1px solid #ccc;
}
#contact .btn {
width: 100%;
text-align: center;
}
#contact input[type="submit"], #contact input[type="button"] {
margin-top: 20px;
padding: 10px 15px;
color: #fff;
font-size: 18px;
font-weight: bold;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
background: #f15a24;
border-radius: 8px;
cursor: pointer;
}
#contact .text_03 {
padding: 30px 0 0 3%;
color: #3e3a39;
font-size: 18px;
font-weight: bold;
line-height: 30px;
padding-bottom: 42px;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
@media only screen and (max-width: 743px){
#contact {
margin: 0 0 100px 12px;
}
#contact_title {
margin: 22px 0 27px 2px;
}
#contact figure {
margin-bottom: 50px;
}
#contact .text_01 {
padding: 0 0 20px;
}
#contact #attention {
padding: 5px 0 5px 20px;
margin-left: 1%;
width: 94%;
height: 160px;
font-size: 14px;
line-height: 18px;
}
#contact .text_02 {
font-size: 16px;
padding: 0px 0 10px 5px;
}
#contact th {
display: block;
padding: 16px 2px 0px 45px;
text-align: left;
}
#contact td {
display: block;
padding: 12px 2px 12px 45px;
text-align: left;
}
}
@media only screen and (max-width: 522px){
#contact #attention {
padding: 5px 0 5px 20px;
margin-left: 1%;
width: 92%;
height: 160px;
font-size: 14px;
line-height: 18px;
}
#contact #breadcrumb {
margin: 30px 0 30px -12px;
width: 336px;
}
#contact #breadcrumb li {
float: left;
color: #fff;
font-size: 13px;
width: 84px;
text-align: center;
letter-spacing: -1px;
padding: 12px 0 10px 30px;
float: left;
}
#contact #breadcrumb li:first-child {
padding: 12px 0 10px 5px;
}
#contact #breadcrumb li:after { /* 遏｢蜊ｰ縺ｫ縺ゅ◆繧倶ｸ芽ｧ偵�陬�｣ｾ */
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 20px solid #0053a2;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
#contact #breadcrumb li:before { /* 蠅�阜縺ｮ繝ｩ繧､繝ｳ縲荳芽ｧ偵ｒ驥阪�縺ｦ縺壹ｉ縺吶％縺ｨ縺ｫ繧医▲縺ｦ譫�縺ｨ縺吶ｋ */
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 20px solid #fff;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 3px;
left: 100%;
z-index: 1;
}
#contact textarea {
width: 92%;
}
}
@media only screen and (max-width: 414px){
#contact input[type=text] {
width: 280px;
}
#contact textarea {
width: 280px;
}
}
@media only screen and (max-width: 380px){
#contact input[type=text] {
width: 240px;
}
#contact textarea {
width: 240px;
}
}
/*------------------------------------------------------------
髦ｲ轣ｽ逕ｨ蛯呵塘鬟溷刀
------------------------------------------------------------*/
#bichiku {
margin: 0 0 100px 10px;
}
#bichiku_title {
margin: 22px 0 27px 0px;
width: 384px;
padding: 3px 0 0 28px;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 20px;
font-weight: bold;
background: #ed1c24;
border-radius: 0 25px 25px 0;
position: relative;
}
#bichiku_title:after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 10px solid #943e1e;
border-left: 12px solid #fff;
position: absolute;
top: 48px;
left: 0;
}
#bichiku .text_01 {
color: #000;
font-size: 28px;
line-height: 42px;
padding-bottom: 32px;
}
#bichiku .text_01 p {
padding-bottom: 42px;
}
#bichiku .contact {
padding-bottom: 20px;
text-align: center;
}
#bichiku .text_02 {
color: #000;
font-size: 18px;
font-weight: bold;
line-height: 30px;
padding-bottom: 42px;
text-align: center;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#bichiku .text_03 {
color: #000;
font-size: 21px;
font-weight: bold;
line-height: 30px;
padding-bottom: 28px;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#bichiku .link {
color: #00a0e9;
font-size: 21px;
padding-bottom: 45px;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#bichiku .link a {
color: #00a0e9;
text-decoration: none;
}
#bichiku .link a:hover {
text-decoration: underline;
}
@media only screen and (max-width: 743px){
#bichiku {
margin: 0 0 100px 12px;
}
#bichiku_title {
margin: 22px 0 27px 2px;
}
#bichiku .text_01 {
color: #000;
font-size: 20px;
line-height: 30px;
padding-bottom: 32px;
}
#bichiku .text_01 p {
padding-bottom: 20px;
}
#bichiku .text_02 {
text-align: left;
}
}
@media only screen and (max-width: 399px){
#bichiku_img1 img {
width: 98%;
height: auto;
}
}
@media only screen and (max-width: 580px){
#bichiku .link img {
width: 98%;
height: auto;
}
}
@media only screen and (max-width: 699px){
#bichiku_img2 img {
width: 98%;
height: auto;
}
}
/*------------------------------------------------------------
縺｡縺�＆縺ｪ繝�Μ繝舌Μ繝ｼ
------------------------------------------------------------*/
#delivery {
margin: 0 0 0px 10px;
}
#delivery_title {
margin: 22px 0 27px 0px;
width: 384px;
padding: 3px 0 0 28px;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 20px;
font-weight: bold;
background: #f08437;
border-radius: 0 25px 25px 0;
position: relative;
}
#delivery_title:after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 10px solid #8b462b;
border-left: 12px solid #fff;
position: absolute;
top: 48px;
left: 0;
}
#delivery .text_01 {
color: #ff0000;
font-size: 24px;
font-weight: 500;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
padding-bottom: 16px;
}
#delivery .text_02 {
color: #3e3a39;
font-size: 18px;
font-weight: bold;
line-height: 30px;
padding-bottom: 42px;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#delivery .drink img {
box-shadow: 1px 7px 4px #555;
}
#delivery .area {
margin-top: 35px;
width: 680px;
height: 30px;
line-height: 30px;
font-size: 16px;
font-weight: bold;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
border: 1px solid #e70012;
border-radius: 4px;
}
#delivery .area .left {
float: left;
width: 100px;
height: 30px;
color: #fff;
text-align: center;
background: #e70012;
}
#delivery .area .right {
float: left;
padding: 0px 0 0 15px;
width: auto;
height: 30px;
line-height: 30px;
color: #000 !important;
text-align: center;
}
#delivery dl {
padding-top: 30px;
}
#delivery dt, #delivery dd {
color: #313131;
font-size: 18px;
font-weight: bold;
line-height: 24px;
padding-bottom: 12px;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#delivery dd {
margin-left: 18px;
padding-left: 18px;
background: url(images/sd/icon.png) no-repeat;
}
#delivery .royal_blue {
color: #2e3192;
}
#delivery .red {
color: #ff0000;
}
.delivery_title {
margin: 30px 0 25px -10px;
width: 164px;
padding-left: 24px;
height: 40px;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;
background: #f6ad3c;
border-radius: 0 25px 25px 0;
position: relative;
}
.delivery_title:after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 12px solid #a9481a;
border-left: 12px solid #fff;
position: absolute;
top: 40px;
left: 0;
}
#how_to_use {
margin-bottom: 70px;
}
#arrow {
margin: 0 10px 100px 10px;
}
@media only screen and (max-width: 743px){
#delivery {
margin: 0 0 50px 12px;
}
#delivery_title {
margin: 22px 0 27px 2px;
}
#delivery .text_01 {
font-size: 22px;
padding-bottom: 16px;
}
#delivery .text_02 {
font-size: 16px;
line-height: 26px;
}
#delivery .drink img {
width: 98%;
height: auto;
}
.delivery_title {
margin: 30px 0 25px 2px;
}
#delivery .area {
margin-top: 35px;
width: 98%;
height: auto;
line-height: 30px;
}
#delivery .area .left {
float: none;
width: 100%;
}
#delivery .area .right {
float: none;
height: auto;
text-align: left;
}
#delivery .area .right .fs_90 {
font-size: 95%;
}
#delivery dt, #delivery dd {
color: #313131;
font-size: 16px;
font-weight: bold;
line-height: 20px;
}
#delivery dd {
margin-left: 8px;
}
#how_to_use {
margin: 0 auto 70px;
width: 320px;
text-align: center;
}
#how_to_use #arrow {
margin: 30px auto 20px;
transform: rotate(90deg)
}
}
/*------------------------------------------------------------
縺｡縺�＆縺ｪ繧ｳ繝ｳ繝薙ル繧ｫ繝輔ぉ縺ｨ縺ｯ
------------------------------------------------------------*/
#cafe {
margin: 5px 0 30px 10px;
}
#cafe_title {
margin: 22px 0 20px 0px;
width: 384px;
padding: 3px 0 0 28px;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 20px;
font-weight: bold;
background: #ea5d7b;
border-radius: 0 25px 25px 0;
position: relative;
}
#cafe_title:after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 10px solid #904579;
border-left: 12px solid #fff;
position: absolute;
top: 48px;
left: 0;
}
.img_shadow {
box-shadow: 6px 2px 17px #555;
}
#map {
margin: 50px 0 30px;
}
#map img {
float: left;
margin-bottom: 20px;
}
#map #text {
float: right;
margin-top: 160px;
width: 245px;
color: #d1555a;
font-size: 17px;
font-weight: bold;
line-height: 26px;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#cafe_img3 img {
margin-left: 5px;
}
.cafe_title {
margin: 30px 0 25px -10px;
width: 164px;
padding-left: 24px;
height: 40px;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;
background: #f8b62b;
border-radius: 0 25px 25px 0;
position: relative;
}
.cafe_title:after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 12px solid #a24823;
border-left: 12px solid #fff;
position: absolute;
top: 40px;
left: 0;
}
#box_lunch {
width: 618px;
height: 522px;
padding: 34px;
margin-bottom: 60px;
color: #fff;
font-size: 34px;
font-weight: bold;
line-height: 45px;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
background: #f7931e;
}
#box_lunch img {
margin-bottom: 20px;
}
#box_lunch_text {
margin: 10px 0 50px 5px;
color: #1b1b1b;
font-size: 18px;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#catering_title {
padding-bottom: 10px;
color: #ea551f;
font-size: 38px;
font-weight: bold;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#catering_text {
margin: 15px 0 50px 14px;
color: #1b1b1b;
font-size: 18px;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
.catering_menu {
padding: 30px 0;
width: 100%;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
border-bottom: 1px dotted #999;
}
.catering_menu img {
margin: 5px 20px 10px 10px;
}
.catering_menu .menu {
padding: 0 0 10px 7px;
color: #ea551f;
font-size: 20px;
font-weight: bold;
}
.catering_menu li {
padding: 0 0 5px 10px;
font-size: 17px;
line-height: 21px;
font-weight: bold;
list-style: inside !important;
}
@media only screen and (max-width: 743px){
#cafe {
margin: 0 0 50px 12px;
}
#cafe_title {
margin: 22px 0 27px 2px;
}
#map {
text-align: center;
}
#map img {
float: none;
}
#map #text {
float: none;
margin: 0 auto 20px;
text-align: left;
}
.cafe_title {
margin: 30px 0 25px 2px;
}
#box_lunch_text {
margin: 10px 0 50px 5px;
font-size: 16px;
}
#catering_title {
font-size: 30px;
}
#catering_text {
margin: 15px 0 50px 5px;
font-size: 16px;
}
.catering_menu img.f_l, .catering_menu img.f_r {
float: none;
margin-bottom: 20px !important;
}
}
@media only screen and (max-width: 685px){
#box_lunch {
width: 90%;
margin: 0 1%;
height: auto;
padding: 4%;
margin-bottom: 40px;
color: #fff;
font-size: 24px;
line-height: 1.3;
text-align: left;
}
#box_lunch img {
width: 100%;
height: auto;
}
#box_lunch .fs_50 {
font-size: 60% !important;
line-height: 18px;
}
}
@media only screen and (max-width: 569px){
#cafe_img1 img {
width: 98%;
height: auto;
}
}
@media only screen and (max-width: 727px){
#cafe_img2 img {
width: 97%;
height: auto;
}
#cafe_img2 .img_shadow {
box-shadow: 4px 2px 13px #555;
}
#cafe_img4 img {
width: 100%;
height: auto;
margin-left: 0;
}
#cafe_img4 .img_shadow {
box-shadow: 3px 2px 10px #555;
}
#cafe_img5 img {
width: 100%;
height: auto;
margin-left: 0;
}
#cafe_img5 .img_shadow {
box-shadow: 3px 2px 10px #555;
}
#cafe_img6 img {
width: 100%;
height: auto;
margin-left: 0;
}
#cafe_img6 .img_shadow {
box-shadow: 3px 2px 10px #555;
}
#cafe_img7 img {
width: 100%;
height: auto;
margin-left: 0;
}
#cafe_img7 .img_shadow {
box-shadow: 3px 2px 10px #555;
}
}
@media only screen and (max-width: 700px){
#cafe_img3 img {
width: 96%;
height: auto;
}
#cafe_img3 .img_shadow {
box-shadow: 4px 2px 13px #555;
}
}
@media only screen and (max-width: 485px){
#map img {
width: 100%;
height: auto;
}
.catering_menu .menu {
font-size: 18px;
}
.catering_menu li {
padding: 0 0 5px 10px;
font-size: 15px;
line-height: 19px;
}
}
@media only screen and (max-width: 414px){
.catering_menu li {
padding: 0 0 5px 10px;
font-size: 14px;
line-height: 18px;
}
}
/*------------------------------------------------------------
繝ｪ繧ｯ繝ｫ繝ｼ繝�
------------------------------------------------------------*/
#recruit_top {
margin: 5px 0 10px 10px;
}
#recruit {
padding-left: 6px;
}
#recruit_img1 {
margin: 20px 0 30px;
}
#recruit_img3 {
margin-top: 25px;
}
#recruit ul {
width: 100%;
margin: 30px 0 0;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#recruit li {
float: left;
width: 316px;
margin-left: 0;
}
#recruit li:first-child {
margin-right: 64px;
}
#recruit li:nth-child(3) {
margin-right: 64px;
}
#recruit li .title {
padding-left: 78px;
color: #ed6c3d;
font-size: 21px;
font-weight: bold;
text-align: left;
letter-spacing: -1px;
}
#recruit li ul {
margin: 20px 0 0 35px;
}
#recruit li ul li {
margin-left: 10px;
width: 250px;
color: #313131;
font-size: 18px;
font-weight: 500;
line-height: 30px;
list-style: outside;
}
#recruit li li:first-child {
margin-right: 0;
}
#recruit li li:nth-child(3) {
margin-right: 0;
}
.clip_01 {
margin-top: 63px;
width: 316px;
height: 322px;
padding: 65px 0 0 0;
background:url(images/sc/clip.png) no-repeat;
}
.clip_02 {
width: 316px;
height: 322px;
padding: 65px 0 0 0;
background:url(images/sc/clip.png) no-repeat;
}
#clip {
clear: both;
width: 691px;
height: 222px;
margin-left: 6px;
padding: 65px 0 0 0;
background: url(images/sc/clip2.png) no-repeat;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#clip .title {
padding-left: 78px;
color: #ed6c3d;
font-size: 21px;
font-weight: bold;
text-align: left;
letter-spacing: -1px;
}
#clip ul {
margin: 20px 20px 0 35px;
}
#clip li {
margin-left: 10px;
color: #313131;
font-size: 18px;
font-weight: 500;
line-height: 30px;
list-style: outside;
}
#recruit_border {
margin: 30px 0 50px 5px;
width: 627px;
height: 367px;
padding: 20px 30px 10px;
border: 5px solid #f7931e;
border-radius: 20px;
}
@media only screen and (max-width: 743px){
#recruit ul {
margin: 0 auto;
width: 316px;
}
.clip_01 {
margin-top: 20px;
padding: 65px 0 0 0;
}
.clip_02 {
padding: 65px 0 0 0;
}
#clip {
margin: 0 auto;
width: 316px;
height: 342px;
padding: 45px 0 0 0;
background: url(images/sc/clip.png) no-repeat;
}
#clip ul {
margin: 10px 20px 0 35px;
}
#clip li {
margin-left: 10px;
font-size: 18px;
line-height: 25px;
}
#recruit_border {
margin: 30px 0 50px 1%;
width: 90%;
height: auto;
padding: 3% 3%;
border: 5px solid #f7931e;
border-radius: 20px;
}
#recruit_border img {
width: 100%;
height: auto;
}
}
@media only screen and (max-width: 570px){
#recruit_img1 img {
width: 98%;
height: auto;
}
}
@media only screen and (max-width: 700px){
#recruit_img2 img {
width: 98%;
height: auto;
}
#recruit_img3 img {
width: 98%;
height: auto;
}
#recruit_img4 img {
width: 97%;
height: auto;
}
#recruit_img4 .img_shadow {
box-shadow: 4px 2px 13px #555;
}
}
/*------------------------------------------------------------
404
------------------------------------------------------------*/
#text_01_404 {
padding-top: 100px;
text-align: center;
font-size: 30px;
}
#text_02_404 {
padding-top: 50px;
text-align: center;
font-size: 20px;
line-height: 30px;
}
/*------------------------------------------------------------
縺顔衍繧峨○
------------------------------------------------------------*/
.blog_title {
width: 96%;
padding: 10px 0 10px 10px;
color: #29abe2;
font-size: 18px;
font-weight: bold;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
border-left: 4px solid #29abe2;
border-bottom: 1px dashed #29abe2;
}
.blog_title a {
color: #29abe2;
text-decoration: none;
}
.blog_title a:hover {
color: #006ebe;
}
.blog_date {
float: right;
padding: 6px 3% 0 0;
color: #29abe2;
}
.blog_text {
clear: both;
padding: 30px 0 30px 14px;
line-height: 1.5;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
.blog_text p {
padding-bottom: 20px;
}
@media only screen and (max-width: 743px){
.blog_title {
width: 95%;
margin-left: 0.5%;
padding: 10px 0 10px 10px;
font-size: 16px;
}
.blog_text {
padding: 20px 0 30px 14px;
font-size: 14px;
}
}
/*------------------------------------------------------------
繝ｭ繧ｰ繧､繝ｳ
------------------------------------------------------------*/
#login {
margin: 0 0 100px 10px;
font-family: "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
}
#login .text {
margin: 25px 0 35px;
color: #3e3a39;
font-size: 18px;
line-height: 30px;
font-weight: 500;
}
#login .text a {
color: #0071bc;
text-decoration: none;
}
#login .text a:hover {
color: #ed1c24;
text-decoration: underline;
}
#member {
margin: 50px 0 50px 10px;
width: 310px;
}
#member section {
clear: both;
margin-bottom: 20px;
width: 310px;
}
#member .user {
float: left;
width: 100px;
height: 39px;
line-height: 38px;
}
#member input[type="text"] {
width: 188px;
padding: 10px;
border: 1px solid #999;
}
#member input[type="button"], #member input[type="submit"]{
margin: 20px 50px 0 40px;
padding: 10px 80px;
color: #fff;
font-size: 18px;
font-weight: bold;
background: #f15a24;
border-radius: 8px;
cursor: pointer;
}
#member input[type="button"]:hover, #member input[type="submit"]:hover {
background: #d60050;
}
#login ul.panel div {
float: left;
width: 170px;
height: 350px;
font-size: 16px;
}
#login ul.panel li div a {
display: block;
width: 170px;
height: 380px;
color: #222;
text-decoration: none;
}
#login ul.panel li div a:hover {
color: #151cbe;
}
#login ul.panel li div p {
padding-left: 10px;
line-height: 1.3;
}
#login .img {
padding-top: 5px;
}
#login .num {
padding: 10px 0 3px;
font-size: 14px;
}
#login .name {
font-size: 14px;
padding-bottom: 0px;
height: 65px;
}
#login .price {
width: 100px;
color: #ff0000;
font-size: 170%;
/*font-weight: bold;*/
line-height: 1;
text-align: right;
}
#request select {
margin-top: 10px;
border: 1px solid #999;
}
#request input[type="button"], #request input[type="submit"] {
width: 130px;
margin: 15px 0 0 -10px;
padding: 5px 0;
color: #fff;
font-size: 15px;
font-weight: bold;
background: #f15a24;
border-radius: 8px;
cursor: pointer;
}
#request input[type="button"]:hover, #request input[type="submit"]:hover {
background: #d60050;
}
#login table {
width: 98%;
margin-bottom: 30px;
}
#login th, #login td {
border: 1px solid #999;
}
#login th {
padding: 5px 0;
font-size: 15px;
}
#login td {
padding: 5px 10px;
font-size: 15px;
text-align: right;
}
#login #code {
width: 120px;
background: #f5f5f5;
}
#login #p-name {
width: 420px;
background: #f5f5f5;
}
#login #price, #login #subtotal {
width: 90px;
background: #f5f5f5;
}
#login #o-number {
width: 80px;
background: #f5f5f5;
}
#login #delete {
background: #f5f5f5;
}
#login #delete {
text-align: center !important;
}
#confirm select {
border: 1px solid #999;
}
#confirm .delete {
text-align: center !important;
}
#confirm .delete input[type="button"] {
margin: 0 0 !important;
padding: 2px 5px !important;
color: #fff;
font-size: 13px !important;
font-weight: bold;
background: #736357;
border-radius: 4px;
border: 1px solid #999;
cursor: pointer;
}
#confirm .delete input[type="button"]:hover {
background: #d60050;
}
#login textarea{
margin: 25px 0 35px !important;
padding: 1%;
width: 94%;
color: #3e3a39;
font-size: 18px;
line-height: 30px;
font-weight: 500;
border: 1px solid #999;
}
#confirm input[type="button"], #confirm input[type="submit"] {
margin: 20px 20px 20px 0;
padding: 10px 50px;
color: #fff;
font-size: 18px;
font-weight: bold;
background: #f15a24;
border-radius: 8px;
cursor: pointer;
}
#confirm input[type="button"]:hover, #confirm input[type="submit"]:hover {
background: #d60050;
}
@media only screen and (max-width: 717px){
#login ul.tab {
margin: 0 auto;
width: 518px;
}
#login ul.panel li {
margin: 0 auto;
width: 516px;
}
}
@media only screen and (max-width: 545px){
#login ul.tab {
margin: 0 auto;
width: 346px;
}
#login ul.panel li {
margin: 0 auto;
width: 344px;
}
}
@media only screen and (max-width: 373px){
#login ul.tab {
margin: 0 auto;
width: 174px;
}
#login ul.panel li {
margin: 0 auto;
width: 172px;
}
}
/*------------------------------------------------------------
繝輔ャ繧ｿ繝ｼ
------------------------------------------------------------*/
#footer {
clear: both;
width: 100%;
background: url(images/base/footer_img.png) top center repeat-x;
}
#footer_menu_wrap {
margin: 82px auto 0;
background: #7fb7c6;
}
#footer_menu {
margin:0 auto;
width: 960px;
padding-bottom: 20px;
background: url(images/base/footer_car2.png) no-repeat #7fb7c6;
background-position: 600px 22px;
}
#page_top {
height: 48px;
}
#page_top img {
float: right;
}
.footer_box {
float: left;
width: 280px;
}
.footer_box li {
color: #fff;
font-size: 16px;
line-height: 30px;
}
.footer_box li a {
color: #fff;
text-decoration: none;
}
.footer_box li a:hover {
text-decoration: underline;
}
#copy {
clear: both;
padding: 0 0 7px;
color: #fff;
font-size: 12px;
text-align: center;
font-style: normal;
}
@media only screen and (max-width: 959px){
#footer_menu {
margin:0 auto;
width: 100%;
background-position: 560px 22px;
}
}
@media only screen and (max-width: 790px){
#footer_menu {
background-size: 160px 116px;
background-position: 520px 22px;
}
.footer_box {
width: 260px;
}
}
@media only screen and (max-width: 710px){
#footer_menu {
background-size: 120px 87px;
background-position: 480px 22px;
}
.footer_box {
width: 240px;
}
}
@media only screen and (max-width: 630px){
#footer_menu {
background-size: 100px 73px;
background-position: 440px 22px;
}
.footer_box {
width: 220px;
}
}
@media only screen and (max-width: 560px){
#footer_menu {
background-image: none;
}
}
@media only screen and (max-width: 560px){
.footer_box {
float: none;
margin: 0 auto;
}
}
/*------------------------------------------------------------
霑ｽ蜉�繧ｹ繧ｿ繧､繝ｫ
------------------------------------------------------------*/
.center {
text-align: center;
}
.c {
text-align: center;
}
.r {
text-align: right;
}
.f_l {
float: left;
}
.f_r {
float: right;
}
.t_c {
text-align: center !important;
}
.fs_40 {
font-size: 40% !important;
}
.fs_50 {
font-size: 50% !important;
}
.fs_60 {
font-size: 60% !important;
}
.fs_70 {
font-size: 70% !important;
}
.fs_80 {
font-size: 80% !important;
}
.fs_90 {
font-size: 90% !important;
}
.fs19 {
font-size: 19px !important;
}
.fs20 {
font-size: 20px !important;
}
.ls_1 {
letter-spacing: -1px;
}
.ls_2 {
letter-spacing: -2px;
}
.ls_3 {
letter-spacing: -3px;
}
.ls_4 {
letter-spacing: -4px;
}
/*------------------------------------------------------------
菴咏區 霑ｽ蜉�
------------------------------------------------------------*/
.mt_10 {
margin-top: -10px !important;
}
.mr_10 {
margin-right: -10px !important;
}
.mb_10 {
margin-bottom: -10px !important;
}
.ml_10 {
margin-left: -10px !important;
}
.mt_15 {
margin-top: -15px !important;
}
.mr_15 {
margin-right: -15px !important;
}
.mb_15 {
margin-bottom: -15px !important;
}
.ml_15 {
margin-left: -15px !important;
}
/*------------------------------------------------------------
菴咏區
------------------------------------------------------------*/
.m0 {
margin: 0px !important;
}
.mt0 {
margin-top: 0px !important;
}
.mr0 {
margin-right: 0px !important;
}
.mb0 {
margin-bottom: 0px !important;
}
.ml0 {
margin-left: 0px !important;
}
.m5 {
margin: 5px !important;
}
.mt5 {
margin-top: 5px !important;
}
.mr5 {
margin-right: 5px !important;
}
.mb5 {
margin-bottom: 5px !important;
}
.ml5 {
margin-left: 5px !important;
}
.m10 {
margin: 10px !important;
}
.mt10 {
margin-top: 10px !important;
}
.mr10 {
margin-right: 10px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
.ml10 {
margin-left: 10px !important;
}
.m15 {
margin: 15px !important;
}
.mt15 {
margin-top: 15px !important;
}
.mr15 {
margin-right: 15px !important;
}
.mb15 {
margin-bottom: 15px !important;
}
.ml15 {
margin-left: 15px !important;
}
.m20 {
margin: 20px !important;
}
.mt20 {
margin-top: 20px !important;
}
.mr20 {
margin-right: 20px !important;
}
.mb20 {
margin-bottom: 20px !important;
}
.ml20 {
margin-left: 20px !important;
}
.m25 {
margin: 25px !important;
}
.mt25 {
margin-top: 25px !important;
}
.mr25 {
margin-right: 25px !important;
}
.mb25 {
margin-bottom: 25px !important;
}
.ml25 {
margin-left: 25px !important;
}
.m30 {
margin: 30px !important;
}
.mt30 {
margin-top: 30px !important;
}
.mr30 {
margin-right: 30px !important;
}
.mb30 {
margin-bottom: 30px !important;
}
.ml30 {
margin-left: 30px !important;
}
.m35 {
margin: 35px !important;
}
.mt35 {
margin-top: 35px !important;
}
.mr35 {
margin-right: 35px !important;
}
.mb35 {
margin-bottom: 35px !important;
}
.ml35 {
margin-left: 35px !important;
}
.m40 {
margin: 40px !important;
}
.mt40 {
margin-top: 40px !important;
}
.mr40 {
margin-right: 40px !important;
}
.mb40 {
margin-bottom: 40px !important;
}
.ml40 {
margin-left: 40px !important;
}
.m45 {
margin: 45px !important;
}
.mt45 {
margin-top: 45px !important;
}
.mr45 {
margin-right: 45px !important;
}
.mb45 {
margin-bottom: 45px !important;
}
.ml45 {
margin-left: 45px !important;
}
.m50 {
margin: 50px !important;
}
.mt50 {
margin-top: 50px !important;
}
.mr50 {
margin-right: 50px !important;
}
.mb50 {
margin-bottom: 50px !important;
}
.ml50 {
margin-left: 50px !important;
}
.m55 {
margin: 55px !important;
}
.mt55 {
margin-top: 55px !important;
}
.mr55 {
margin-right: 55px !important;
}
.mb55 {
margin-bottom: 55px !important;
}
.ml55 {
margin-left: 55px !important;
}
.m60 {
margin: 60px !important;
}
.mt60 {
margin-top: 60px !important;
}
.mr60 {
margin-right: 60px !important;
}
.mb60 {
margin-bottom: 60px !important;
}
.ml60 {
margin-left: 60px !important;
}
.m65 {
margin: 65px !important;
}
.mt65 {
margin-top: 65px !important;
}
.mr65 {
margin-right: 65px !important;
}
.mb65 {
margin-bottom: 65px !important;
}
.ml65 {
margin-left: 65px !important;
}
.m70 {
margin: 70px !important;
}
.mr70 {
margin-right: 70px !important;
}
.mb70 {
margin-bottom: 70px !important;
}
.ml70 {
margin-left: 70px !important;
}
.m75 {
margin: 75px !important;
}
.mt75 {
margin-top: 75px !important;
}
.mr75 {
margin-right: 75px !important;
}
.mb75 {
margin-bottom: 75px !important;
}
.ml75 {
margin-left: 75px !important;
}
.m80 {
margin: 80px !important;
}
.mt80 {
margin-top: 80px !important;
}
.mr80 {
margin-right: 80px !important;
}
.mb80 {
margin-bottom: 80px !important;
}
.ml80 {
margin-left: 80px !important;
}
.m85 {
margin: 85px !important;
}
.mt85 {
margin-top: 85px !important;
}
.mr85 {
margin-right: 85px !important;
}
.mb85 {
margin-bottom: 85px !important;
}
.ml85 {
margin-left: 85px !important;
}
.m90 {
margin: 90px !important;
}
.mt90 {
margin-top: 90px !important;
}
.mr90 {
margin-right: 90px !important;
}
.mb90 {
margin-bottom: 90px !important;
}
.ml90 {
margin-left: 90px !important;
}
.m95 {
margin: 95px !important;
}
.mt95 {
margin-top: 95px !important;
}
.mr95 {
margin-right: 95px !important;
}
.mb95 {
margin-bottom: 95px !important;
}
.ml95 {
margin-left: 95px !important;
}
.m100 {
margin: 100px !important;
}
.mt100 {
margin-top: 100px !important;
}
.mr100 {
margin-right: 100px !important;
}
.mb100 {
margin-bottom: 100px !important;
}
.ml100 {
margin-left: 100px !important;
}
.p0 {
padding: 0px !important;
}
.pt0 {
padding-top: 0px !important;
}
.pr0 {
padding-right: 0px !important;
}
.pb0 {
padding-bottom: 0px !important;
}
.pl0 {
padding-left: 0px !important;
}
.p5 {
padding: 5px !important;
}
.pt5 {
padding-top: 5px !important;
}
.pr5 {
padding-right: 5px !important;
}
.pb5 {
padding-bottom: 5px !important;
}
.pl5 {
padding-left: 5px !important;
}
.p10 {
padding: 10px !important;
}
.pt10 {
padding-top: 10px !important;
}
.pr10 {
padding-right: 10px !important;
}
.pb10 {
padding-bottom: 10px !important;
}
.pl10 {
padding-left: 10px !important;
}
.p15 {
padding: 15px !important;
}
.pt15 {
padding-top:1 5px !important;
}
.pr15 {
padding-right: 15px !important;
}
.pb15 {
padding-bottom: 15px !important;
}
.pl15 {
padding-left: 15px !important;
}
.p20 {
padding: 20px !important;
}
.pt20 {
padding-top: 20px !important;
}
.pr20 {
padding-right: 20px !important;
}
.pb20 {
padding-bottom: 20px !important;
}
.pl20 {
padding-left: 20px !important;
}