* {
margin: 0;
padding: 0;
}
*::after, * {
box-sizing: border-box;
}
body {
background: #eee none repeat scroll 0 0;
font-family: 'Josefin Sans', sans-serif;
}
article {
height: 1000px;
line-height: 1.9;
margin: 100px auto;
text-align: center;
}
article p {
margin-bottom: 1em;
}
a {
color: #0b8793;
text-decoration: none;
}
/*--------------------------------------------------------------------------
top-pc
--------------------------------------------------------------------------*/
.top-wrapper {
padding: 110px 0 100px 0;
color: white;
text-align: center;
background: url("../img/pc_main.jpg") 50% 0 no-repeat fixed;
background-position:center center;
background-size:cover ;
height: 570px;
}
.container {
width: 1050px;
height: 450px;
margin: 50px auto 0;
position: relative;
color: white;
text-align: center;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
.top_logo img{
margin-bottom: 30px;
}
.top_text {
font-size: 16px;
line-height: 1.8;
letter-spacing: 1px;
}
.wap {
width: 100%;
text-align: center;
}
.bg01 {
background: url("../img/bg01.jpg") 50% 0 no-repeat fixed;
background-position: center center;
background-size: cover;
text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.9);
}
.bg02 {
background: url("../img/bg02.jpg") 50% 0 no-repeat fixed;
background-position: center center;
background-size: cover;
text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.9);
}
.bg03 {
background: url("../img/bg03.jpg") 50% 0 no-repeat fixed;
background-position: center center;
background-size: cover;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9);
color: white;
}
.col {
padding: 110px;
}
.col_title {
font-size: 38px;
line-height: 1.6;
font-weight: bold;
padding-bottom: 30px;
}
.col_text {
font-size: 20px;
line-height: 1.9;
font-weight: bold;
}
/*--------------------------------------------------------------------------
tokuten
--------------------------------------------------------------------------*/
.tokuten_title {
font-size: 18px;
width: 100%;
text-align: center;
padding: 10px;
display: inline-block;
　　border-bottom: solid 1px !important;
}
.tokuten_col {
padding: 40px 0px 45px;
background-color: #f2f2f2;
width: 100%;
text-align: center;
}
.tokuten_col_title {
font-size: 18px;
padding: 5px 10px;
border-bottom: 1px solid #2a2929;
display: inline;
color: #000;
display: inline-block;
margin-bottom: 5px;
}
.tokuten_col {
font-size: 30px;
line-height: 1.2;
}
.tokuten_col span {
font-size: 40px;
}
.fa {
font-size: 25px;
}
.tokuten_detail {
background-color: #f2f2f2;
width: 100%;
overflow: hidden;
}
.tokuten_detail_wp {
width: 1050px;
margin: 0 auto;
padding: 30px 0px;
overflow: hidden;
}
.tokuten_detail_col {
width: 320px;
text-align: center;
padding: 25px 30px;
background-color: white;
float: left;
margin: 10px;
}
.tokuten_detail_title {
font-size: 16px;
line-height: 1.7;
}
.tokuten_detail_col span{
font-size: 25px;
color: #df3c42;
line-height: 1.7;
font-weight: bold;
}
.tokuten_detail_text {
font-size: 15px;
padding-top: 10px;
}
.tokuten_btn {
padding: 10px 30px;
background-color: #444444;
color: white;
font-size: 18px;
width: 700px;
text-align: center;
margin: 0 auto 100px;
}
/*--------------------------------------------------------------------------
popular_item
--------------------------------------------------------------------------*/
.popular_item {
width: 100%;
}
.popular_item_wp {
width: 1050px;
margin: 0 auto;
text-align: center;
}
.popular_item_cl {
width: 320px;
margin: 0 10px 30px;
float: left;
font-weight: bold;
border: #f2f2f2 15px solid;
padding: 35px;
}
.popular_item_title {
font-size: 16px;
color: white;
display: inline;
padding: 8px 20px;
}
.popular_item_img {
margin: 5px;
}
.color01 {
background-color: #ff6666;
}
.color02 {
background-color: #93cfc3;
}
.color03 {
background-color: #ad85b6;
}
.color04 {
background-color: #f6c62f;
}
.color05 {
background-color: #b9b37a;
}
.color06 {
background-color: #81e4e4;
}
.popular_item_name {
font-size: 20px;
margin: 15px 0 5px;
}
.popular_item_com {
font-size: 14px;
border-top: 2px #c0c0c0 solid;
border-bottom: 2px #c0c0c0 solid;
}
.popular_item_btn {
font-size: 15px;
background-color: #22b573;
padding: 15px 40px;
width: 80%;
display: inline;
color: white;
border-radius: 10px;
box-shadow: #1c8b50 4px 4px;
}
/*--------------------------------------------------------------------------
syurui
--------------------------------------------------------------------------*/
.syurui {
width: 1050px;
margin: 0 auto;
padding-bottom: 70px;
overflow: hidden;
}
.bg1 {
background-color: #f7f7f7;
}
/*--------------------------------------------------------------------------
ctg-sq
--------------------------------------------------------------------------*/
.ctg-sq {
width: 235px;
padding: 40px 10px;
text-align: center;
display: inline-block;
font-size: 22px;
line-height: 1.4;
margin: 10px;
color: white;
font-weight: bold;
}
.color1 {
background-color: #a2dbe1;
}
.color2 {
background-color: #f7acb0;
}
.color3 {
background-color: #f8cc82;
}
.color4 {
background-color: #86f4c7;
}
.color5 {
background-color: #dbc999;
}
/*--------------------------------------------------------------------------
try
--------------------------------------------------------------------------*/
.try_item {
background-color: #f2f2f2;
width: 100%;
padding: 50px;
}
.mnkh {
width: 1000px;
margin: 0 auto 50px;
overflow:hidden;
background-color: white;
padding: 45px;
}
.mnkh-left {
float: left;
width: 35%;
position: relative;
}
.mnkh-right {
float: left;
width: 65%;
}
.mnkh-left img {
width: 90%;
}
.tag {
padding: 3px 15px;
font-size: 16px;
color: white;
background-color: #C00;
display: inline-block;
position: absolute;
bottom: 20px;
left: 30px;
letter-spacing: 8px;
}
.mnkh-btn02 {
width: 100%;
color: white;
background-color: #339966;
text-align: center;
padding: 13px;
margin-top: 20px;
font-size: 19px;
border-radius: 10px;
font-weight: bold;
}
.tuujyou {
padding-top: 10px;
}
.mnkh-ttl01 {
color: #414141;
font-size: 20px;
float: left;
}
.mnkh-ttl02 {
color: #339966;
font-size: 30px;
line-height: 1.5;
font-weight: bold;
}
.mnkh-span {
font-size: 20px;
}
.mnkh-text {
padding-bottom: 20px;
line-height: 1.5;
font-size: 16px;
}
.souryou {
padding: 5px 25px;
font-size: 18px;
color: white;
background-color: #ff6666;
display: inline-block;
margin: 5px 10px 0;
float: left;
font-weight: bold;
}
.souryou02 {
padding: 5px 15px;
font-size: 18px;
color: white;
background-color: #ff6666;
display: inline-block;
margin: 0px 10px 0;
float: left;
}
.umf {
background-color: #e25b09;
color: white;
padding:3px 10px;
font-size: 20px;
text-align: center;
display: inline-block;
margin-left: 5px;
}
.clear {
clear: both;
}
.mnkh-kosu {
float: left;
text-align: center;
padding-right: 5%;
}
.mnkh-btn01 {
color: white;
background-color: #f66;
padding: 2px;
width: 90%;
border-radius: 15px;
text-align: center;
font-size: 16px;
margin: 0 auto;
}
.valu-ttl {
color: #ff6666;
border: 1px #ff6666 solid;
display: inline-block;
padding: 6px 12px;
float: left;
margin: 5px 10px 0;
font-weight: bold;
font-size: 16px;
}
.valu {
color: #C00;
font-size: 40px;
line-height: 1.0;
margin: 10px 5px 0;
font-weight: bold;
float: left;
}
.valu02 {
float: left;
font-size: 16px;
margin: 20px 5px 0;
}
footer {
border-top: 1px solid #bbb;
padding: 30px;
text-align: center;
}
footer a {
color: #666;
text-decoration: none;
}
.inner {
margin: 0 auto;
width: 1150px;
}
.inner::after {
clear: both;
content: "";
display: block;
}
#top-head {
font-size: 14px;
line-height: 1;
margin: 100px auto 0;
position: absolute;
top: -100px;
width: 100%;
z-index: 999;
background-color: #fff;
}
#top-head a, #top-head {
color: #000;
text-decoration: none;
}
#top-head .inner {
position: relative;
}
#top-head .logo {
float: left;
font-size: 32px;
line-height: 60px;
}
#global-nav ul {
bottom: 0;
font-size: 14px;
list-style: outside none none;
position: absolute;
right: 0;
line-height: 60px;
}
#global-nav ul li {
float: left;
position: relative;
}
#global-nav ul li a {
padding: 0 16px;
}
#global-nav ul li::after {
bottom: -20px;
content: "";
display: block;
height: 3px;
position: absolute;
transition: all 0.3s ease 0s;
width: 100%;
}
#global-nav ul li:hover::after {
background: #fff none repeat scroll 0 0;
bottom: -30px;
}
#top-head.fixed {
background: #FFF;
height: 55px;
margin-top: 0;
position: fixed;
top: 0;
transition: top 0.65s ease-in 0s;
border-bottom: 1px #000 solid;
}
#top-head.fixed .logo {
font-size: 24px;
}
#top-head.fixed .logo a{
color:#000;
}
#top-head.fixed #global-nav ul li a {
color: #000;
padding: 0 20px;
}
#top-head.fixed #global-nav ul li::after {
bottom: -10px;
}
#top-head.fixed #global-nav ul li:hover::after {
background: #0062b8 none repeat scroll 0 0;
bottom: -20px;
}
#nav-toggle {
cursor: pointer;
display: none;
height: 36px;
position: absolute;
right: 12px;
top: 14px;
width: 34px;
z-index: 101;
}
#nav-toggle div {
position: relative;
}
#nav-toggle span {
background: #666 none repeat scroll 0 0;
display: block;
height: 4px;
left: 0;
position: absolute;
transition: all 0.35s ease-in-out 0s;
width: 100%;
}
#nav-toggle span:nth-child(1) {
top: 0;
}
#nav-toggle span:nth-child(2) {
top: 11px;
}
#nav-toggle span:nth-child(3) {
top: 22px;
}
.inner_base {
margin: 0 auto;
max-width: 1150px;
padding: 0 20px;
}
.block {
color: #fff;
font-size: 25px;
height: 200px;
padding: 55px;
text-align: center;
font-weight: bold;
line-height: 1.8;
letter-spacing: 3px;
}
.block p {
font-size: 18px;
}
.block02 {
font-size: 1.2rem;
height: 150px;
padding: 45px;
text-align: center;
line-height: 1.5;
letter-spacing: 3px;
}
/*--------------------------------------------------------------------------
category-title
--------------------------------------------------------------------------*/
#item-ttl {
background: no-repeat scroll;
background-color: #f4f4f4;
background-position: 50% 50%;
background-size:cover ;
color: black;
}
#item-ttl02 {
background: no-repeat scroll;
background-position: 50% 50%;
background-size:cover ;
color: black;
}
.sec02 .sec_inner {
background: #e3f0ec none repeat scroll 0 0;
padding: 95px 0 122px;
}
.cf::before, .cf::after {
content: "";
display: table;
}
.cf::after {
clear: both;
}
.cf {
}
.cmn_btn02 {
background: #2fa37e none repeat scroll 0 0;
border: 2px solid #888;
box-sizing: border-box;
color: #fff;
display: inline-block;
font-size: 20px;
line-height: 1;
min-width: 100%;
padding: 10px 20px;
position: relative;
text-align: center;
text-decoration: none;
transition: background 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
}
.cmn_arw02 {
background: rgba(0, 0, 0, 0) url("../img/ico_arw02.png") no-repeat scroll 0 1px / 10px auto;
display: inline-block;
padding: 0 10px 0 30px;
}
/*--------------------------------------------------------------------------
item_list
--------------------------------------------------------------------------*/
.lead + .item_list{
margin-top: 60px;
}
.item_list{
overflow: hidden;
}
.item_list ul{
margin: 0 0;
}
.item_list ul + ul{
margin-top: 30px;
}
.item_list li{
float: left;
width: 29%;
margin: 0 1.4%;
padding-bottom: 50px;
background: #fff;
}
.item_list._choice li{
padding-bottom: 20px;
}
.item_list figure{
padding: 22px 5px 30px;
position: relative;
}
.item_list._choice figure{
padding: 10px 0;
text-align: center;
}
.item_list figure img{
border-radius: 10px;
width: 90%;
position: relative;
}
.item_list._choice figcaption{
padding: 16px 0;
font-size: 21px;
font-weight: bold;
color: #2fa37e;
text-align: center;
line-height: 1.4;
}
.item_list ._choice p{
text-align:center;
}
.item_list dl{
padding: 0 23px;
color: #000;
}
.item_list dt{
padding: 5px 0 9px;
font-size: 14px;
font-weight: bold;
line-height: 1.5;
}
.item_list dd{
font-size: 13px;
line-height: 1.7;
padding-bottom: 5px;
}
.item_list li{
position:relative;
}
.item_list._choice p{
text-align: center;
padding-top: 5px;
display: block;
}
.item_list strong {
color: #ff0000;
font-size: 16px;
line-height:20px;
}
.item_list strong p {
font-size: 35px;
}
.off{
background-color: #f66;
letter-spacing: 0.03em;
display:block;
width: 100%;
color: #ffffff;
font-size: 16px;
font-weight: normal;
text-align:center;
margin: 2px auto 10px;
padding: 6px 3px;
float:left;
letter-spacing:8px;
}
/* 三角形 */
.triangle-l {
border-color: transparent #7d90a3 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: -30px;
top: 65px;
/* é‡ãªã‚Šã€ä¸€ç•ªä¸‹ã«è¡¨ç¤º */
z-index: -1;
}
.price{
display:inline;
line-height: 1.1;
}
@media screen and (max-width: 980px) {
article {
padding: 0 30px;
}
.inner {
padding: 0 20px;
width: 100%;
}
#global-nav ul {
font-size: 12px;
}
#global-nav ul li a {
padding: 0 20px;
}
#top-head.fixed #global-nav ul li a {
padding: 0 15px;
}
/* item_list @TB */
.item_list._choice figcaption{
font-size: 14px;
}
.item_list dl{
padding: 0 20px;
}
}