@charset "utf-8";
/*-----------------------------------------------------
TOP トップページ共通
------------------------------------------------------*/
.hTitle01 {
font-size: 32px;
}
.detialBtn a {
background-color: #e48c7d;
color: #fff !important;
background-size: 200% 100%;
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(177, 38, 43) 50%);
background-image: linear-gradient(to right, transparent 50%, rgb(177, 38, 43) 50%);
-webkit-transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
padding: 18px 110px;
margin: auto;
}
.detialBtn a:hover {
background-color: #e48c7d;
background-position: -100% 100%;
}
/*-----------------------------------------------------
TOP MAINIMAGE トップページ
------------------------------------------------------*/
#top ul.slider{
}
#top ul.slider li a{
display:block;
}
#top .slick-slide img{
max-width: 100%;
height: auto;
}
/*----- フェードイン -----*/
.inviewfadeIn {
opacity: 0;
transition: .8s;
}
.fadeIn {
opacity: 1.0;
}
/*-----------------------------------------------------
TOP SECTION_01 トップページ
------------------------------------------------------*/
#top #sec_01 {
padding: 80px 0;
}
#top #sec_01 .secInner {
width: 1100px;
margin: auto;
text-align: center;
}
#top #sec_01 .secInner .box01 {
padding: 0 0 50px;
}
#top #sec_01 .secInner .box01 p {
font-size: 16px;
line-height: 40px;
padding: 50px 0 0 0;
}
#top #sec_01 .secInner .about ul {
display: flex;
justify-content: space-between;
}
#top #sec_01 .secInner .about li {
width: 500px;
position: relative;
}
#top #sec_01 .secInner .about li img {
margin: 0 0 9px 0;
}
#top #sec_01 .secInner .about .txt {
position: absolute;
top: 27%;
left: 0;
right: 0px;
margin: auto;
}
#top #sec_01 .secInner .about .txt h3 {
font-size: 22px;
color: #fff;
position: relative;
}
#top #sec_01 .secInner .about .txt h3:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 1px #fff;
bottom: -2px;
left: 0;
width: 8%;
right: 0;
margin: auto;
}
#top .online_bnr{
margin-bottom: 6em;
}
#top .online_bnr a:hover{
opacity: 0.6;
}
#top .online_bnr img{
max-width: 100%;
}
/*-----------------------------------------------------
TOP SECTION_02 トップページ
------------------------------------------------------*/
#top #sec_foot {
display: none;
}
#top #sec_02 {
padding: 80px 0;
background: url(../Image/top/bgProduct.png) no-repeat bottom #f3f3f3;
}
#top #sec_02 .secInner {
width: 1100px;
margin: auto;
text-align: center;
}
#top #sec_02 .secInner .box01 p {
font-size: 16px;
line-height: 48px;
padding: 50px 0px;
}
#top #sec_02 .secInner .product ul {
display: flex;
justify-content: space-between;
}
#top #sec_02 .secInner .product li {
width: 500px;
}
#top #sec_02 .secInner .product li img {
margin: 0 0 9px 0;
}
/*-----------------------------------------------------
TOP SECTION_03 トップページ
------------------------------------------------------*/
#top #sec_03 {
padding: 80px 0;
background: url(../Image/top/bgNews.png) no-repeat bottom #f4ebdb;
}
#top #sec_03 .secInner {
width: 1100px;
margin: auto;
text-align: center;
}
#top #sec_03 .secInner .news {
margin: 50px 0 50px;
}
#top #sec_03 .secInner .boxWrapp {
width: 830px;
text-align: left;
font-size: 14px;
line-height: 24px;
margin: 10px auto;
}
#top #sec_03 .secInner .date {
border-left: 5px solid #b1262b;
width: 220px;
padding: 20px;
}
#top #sec_03 .secInner .newsTitle {
padding: 20px 20px 20px 0;
width: 1100px;
}
#top #sec_03 .secInner .boxWrapp a {
width: 100%;
background: #fff;
display: flex;
}
#top #sec_03 .secInner .boxWrapp a:hover {
background: #f5c1b8;
}
/*-----------------------------------------------------
UNDER COMMON 下層共通
------------------------------------------------------*/
.under #mainimage {
display: flex;
justify-content: center;
padding: 166px 0;
background-position: center;
}
.under #mainimage .pageTtl {
font-size: 36px;
color: #fff;
text-shadow: 1px 1px 2px #000000;
}
.under .secTtl {
font-size: 22px;
text-align: center;
margin: 0 0 30px;
position: relative;
z-index: 10;
}
.secTtl {
position: relative;
display: inline-block;
padding: 0 55px;
}
.secTtl:before, .secTtl:after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: black;
}
.secTtl:before {
left: 0;
}
.secTtl:after {
right: 0;
}
.under .secTtl02 {
font-size: 20px;
text-align: center;
margin: 0 0 30px;
}
#sec_foot {
background: url(../Image/common/underBg.png) no-repeat center;
background-size: cover;
padding: 80px 0;
}
#sec_foot .secInner {
width: 543px;
margin: auto;
}
#sec_foot .secInner .logoArea {
width: 200px;
float: left;
}
#sec_foot .secInner .infoArea {
float: right;
width: 343px;
color: #fff;
text-align: left;
}
#sec_foot .secInner .infoArea img {
padding: 10px 0;
}
/*-----------------------------------------------------
ABOUT 菊屋商店とは
------------------------------------------------------*/
#about header, #about footer, #about #mainimage {
position: relative;
z-index: 10;
}
#about {
background: #f9f7f6;
}
#about #mainimage {
background-image: url(../Image/about/main.png);
}
#about #sec_01 {
/* background: url(../Image/about/bg_02.png) no-repeat center, url(../Image/about/bg_01.png) no-repeat center;*/
padding: 80px 0 80px;
}
#about #sec_01 .secInner {
width: 1100px;
margin: auto;
}
#about .ttlWrapp {
display: block;
}
/*パララックス*/
.bg_container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#parallax-bg1 {
z-index: 1;
}
#parallax-bg2 {
z-index: 3;
}
#parallax-bg2 img {
position: absolute;
left: 0;
right: 0;
top: 67%;
margin: auto;
}
#parallax-bg3 {
z-index: 2;
}
#parallax-bg3 img {
position: absolute;
left: 0;
right: 0;
top: 61%;
}
#parallax-bg4 {
z-index: 4;
}
#parallax-bg4 img {
position: absolute;
left: 0;
right: 0;
top: 80%;
}
/*パララックスend*/
#about #sec_01 .greeting {
writing-mode: tb-rl; /* 縦書き */
margin: auto;
position: relative;
right: 0;
z-index: 10;
display: inline-block;
white-space: nowrap;
}
#about #sec_01 .greeting .secTtl {
}
#about #sec_01 .greeting p {
text-align: left;
font-size: 18px;
line-height: 54px;
}
#about #sec_02 {
padding: 80px 0 80px;
position: relative;
z-index: 10;
}
#about #sec_02 .secInner {
width: 1100px;
margin: auto;
}
#about #sec_02 .outline .lBox {
float: left;
width: 542px;
}
#about #sec_02 .outline .lBox {
float: left;
width: 542px;
}
#about #sec_02 .outline .rBox {
float: right;
width: 520px;
margin: 0 0px 0 0;
}
#about #sec_02 table {
width: 100%;
text-align: left;
background: rgba(249,247,246,0.8);
}
#about #sec_02 tr {
border-bottom: 1px solid #f2eaea;
line-height: 1.9;
}
#about #sec_02 th {
padding: 15px 0;
width: 30%;
}
#about #sec_02 td {
padding: 15px 0;
width: 70%;
}
#about #sec_03 {
padding: 80px 0 80px;
background: url(../Image/about/bg_03.png) center #732323;
background-size: cover;
color: #fff;
}
#about #sec_03 .secInner {
width: 1100px;
margin: auto;
}
#about #sec_03 table {
width: 700px;
margin: auto;
text-align: left;
}
#about #sec_03 tr {
border-bottom: 1px solid #a79c9d;
}
#about #sec_03 td, #about #sec_03 th {
padding: 15px;
font-size: 16px;
}
#about #sec_03 .outline {
background: #fff;
box-sizing: border-box;
padding: 64px 40px;
width: 900px;
margin: auto;
}
#about #sec_03 .lBox {
float: left;
width: 501px;
}
#about #sec_03 .rBox {
float: right;
width: 560px;
}
#about #sec_03 .hisWrapp {
text-align: left;
font-size: 16px;
}
#about #sec_03 .hisWrapp .date {
font-size: 26px;
}
#about #sec_03 .hisWrapp li {
margin: 25px 0 0 0;
}
#about #sec_03 .hisWrapp li:first-child {
margin: 0;
}
#about #sec_03 .hisWrapp ul > li {
overflow: hidden;
margin: 0;
position: relative;
}
#about #sec_03 .hisWrapp .date {
border-left: 1px #e5e5d1 solid;
padding: 20px 0px 10px 20px;
margin: 0 0 0 15px;
}
#about #sec_03 .hisWrapp .cont {
width: 80%;
border-left: 1px #e5e5d1 solid;
padding: 0px 0px 0px 22px;
margin: 0 0 0 15px;
font-size: 14px;
}
#about #sec_03 .hisWrapp .date:before {
content: '';
position: absolute;
left: 8px;
top: 27px;
width: 14px;
height: 14px;
border-radius: 50%;
box-sizing: border-box;
background: #732323;
border: 4px solid #fff;
}
#about #sec_03 .secTtl:before, #about #sec_03 .secTtl:after {
background-color: #fff;
}
/*-----------------------------------------------------
ITEM 商品案内
------------------------------------------------------*/
#item {
background: #F9F7F6;
}
#item #mainimage .pageTtl {
color: #0e0e0e;
text-shadow: none;
}
#item #mainimage {
background-image: url(../Image/item/main.png);
}
#item #sec_01 {
background: url(../Image/item/bg_01.png) no-repeat 50% 17%;
padding: 40px 0 80px 0;
}
#item #sec_01 .secInner {
width: 1100px;
margin: auto;
box-sizing: border-box;
padding: 40px;
background: url(../Image/item/img_01.png) no-repeat right top;
}
#item .secInner .box {
background: #fff;
width: 430px;
text-align: left;
box-sizing: border-box;
padding: 70px;
margin-bottom: 70px;
}
#item #sec_01 .secInner .box p, #item #sec_02 .secInner .box p {
line-height: 1.9;
}
#item #sec_01 .secInner ul, #item #sec_02 .secInner ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#item #sec_02 .secInner ul {
margin: 0px 0 60px;
}
#item .secInner ul li {
width: 30%;
background: #fff;
transition-duration: 0.4s;
}
#item .secInner ul li a {
font-size: 16px;
box-sizing: border-box;
display: block;
height: 100%;
pointer-events:none;
}
#item #sec_01 .secInner ul li p, #item #sec_02 .secInner ul li p {
font-size: 14px;
line-height: 1.9;
text-align: left;
}
#item .secInner ul li .txtArea {
padding: 25px;
}
#item .secInner ul li .txtArea h4 {
padding: 20px;
box-sizing: border-box;
}
#item .secInner ul li .txtArea p {
margin-bottom: 8px;
line-height: 1;
}
#item .secInner ul li img {
width: 100%;
}
#item #sec_02 {
background: url(../Image/item/bg_01.png) no-repeat 50% 17%;
padding: 40px 0 80px 0;
}
#item #sec_02 .secInner {
width: 1100px;
margin: auto;
box-sizing: border-box;
padding: 40px;
background: url(../Image/item/img_02.png) no-repeat right top;
}
#item .secInner ul li a:hover {
background: #E48C7D;
color: #fff;
}
/*-----------------------------------------------------
STORY 海苔のおはなし
------------------------------------------------------*/
#story #mainimage .pageTtl {
text-shadow: none;
}
#story {
background: #f9f8f6;
}
#story #mainimage {
background-image: url(../Image/story/main.png);
}
#story #sec_01 {
padding: 40px 0 80px 0;
background: url(../Image/story/bg_01.png) no-repeat center;
background-size: 120%;
}
#story #sec_01 .secInner {
width: 1000px;
margin: auto;
position: relative;
}
#story #sec_01 .secInner .box {
text-align: left;
line-height: 1.9;
}
#story #sec_01 .secInner .box img {
margin-bottom: 40px;
margin-top: -6px;
}
#story #sec_01 .read {
padding: 30px 0;
}
#story #sec_01 .secInner .copyTxt {
position: absolute;
top: 86px;
right: 19px;
writing-mode: vertical-rl;
font-size: 21px;
color: #fff;
text-shadow: 1px 1px 3px #020202;
height: 300px;
}
#story #sec_01 .secInner .box p {
font-size: 16px;
width: 800px;
margin: auto;
text-align: center;
margin-bottom: 40px;
line-height: 2.4;
}
#story #sec_02 {
background: #fff;
}
#story .nameArea{
text-align: center;
font-size: 18px;
}
#story .nameArea span{
margin-right: 5px;
}
/*-----------------------------------------------------
business 業務用商品のご案内
------------------------------------------------------*/
#business {
background: #F9F7F6;
}
#business #mainimage .pageTtl {
color: #0e0e0e;
text-shadow: none;
}
#business #mainimage {
background-image: url(../Image/business/main.png);
}
#business #sec_01 {
background: url(../Image/item/bg_01.png) no-repeat 50% 17%;
padding: 80px 0 80px 0;
}
#business #sec_01 .secInner {
width: 1100px;
margin: auto;
box-sizing: border-box;
padding: 30px 0 0 0;
background: url(../Image/business/img_01.png) no-repeat right top;
}
#business #sec_01 .secInner .box {
background: #fff;
width: 430px;
text-align: left;
box-sizing: border-box;
padding: 70px;
margin: 0 0 80px 0;
}
#business #sec_01 .secInner .box p {
line-height: 1.9;
}
#business #sec_01 .secInner .product {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
}
#business #sec_01 .secInner .product .imgArea {
width: 50%;
}
#business #sec_01 .secInner .product:nth-child(odd) .imgArea {
order: 2;
}
#business #sec_01 .secInner .product .imgArea img {
width: 100%;
}
#business #sec_01 .secInner .product .txtArea {
width: 50%;
text-align: left;
box-sizing: border-box;
padding: 75px;
}
#business #sec_01 .secInner .product .txtArea h5 {
font-size: 18px;
margin-bottom: 20px;
line-height: 1;
}
#business #sec_01 .secInner .product .txtArea p {
line-height: 2.2;
}
#business #sec_02 {
padding: 80px 0;
background: #fff;
}
#business #sec_02 .secInner {
width: 1100px;
margin: auto;
}
#business #sec_02 .box {
}
#business #sec_02 .box h3 {
}
#business #sec_02 .box img {
width: 100%;
margin-bottom: 30px;
}
#business #sec_02 .box .comment {
background: #F5F3E7;
}
#business #sec_02 .box p {
padding: 30px;
font-size: 18px;
}
#business #sec_03 {
padding: 80px 0;
}
#business #sec_03 .secInner {
width: 1100px;
margin: auto;
}
#business #sec_03 .secInner ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0px 0 40px;
}
#business #sec_03 .secInner li {
width: 30%;
margin-bottom: 30px;
}
#business #sec_03 .secInner li img {
width: 100%;
}
#business #sec_03 .secInner li a {
font-size: 16px;
box-sizing: border-box;
display: block;
}
#business #sec_03 .secInner li h4 {
padding: 20px 0 20px;
background: #fff;
transition-duration: 0.4s;
}
#business #sec_03 .secInner li a:hover h4 {
background: #E48C7D;
color: #fff;
}
/*-----------------------------------------------------
SHOP 店舗紹介
------------------------------------------------------*/
#shop #mainimage {
background-image: url(../Image/shop/main.png);
}
#shop #sec_01 {
padding: 0 0 80px 0;
}
#shop #sec_01 .secInner {
background: #fff;
width: 1100px;
margin: auto;
box-sizing: border-box;
padding: 40px;
}
#shop #sec_01 .access .imgBox {
float: right;
width: 500px;
}
#shop #sec_01 .access .imgBox img {
width: 100%;
}
#shop #sec_01 .access02 .imgBox {
float: right;
width: 409px;
}
#shop #sec_01 .access02 .imgBox {
padding: 40px 0 0;
}
#shop #sec_01 .access .textBox {
width: 520px;
float: left;
font-size: 16px;
line-height: 2;
flex-wrap: wrap;
display: flex;
box-sizing: border-box;
padding: 25px;
padding-top: 0;
}
#shop #sec_01 .access02 .textBox {
width: 600px;
float: left;
font-size: 16px;
line-height: 2;
flex-wrap: wrap;
display: flex;
box-sizing: border-box;
padding: 25px;
}
#shop #sec_01 .access .textBox li {
width: 100%;
font-size: 16px;
text-align: left;
border-bottom: 1px solid #d7d7d8;
padding: 16px 0;
line-height: 1.6;
}
#shop #sec_01 .access .textBox li:first-child {
padding-top: 0;
}
#shop #sec_01 .access .textBox .lBox {
float: left;
width: 20%;
}
#shop #sec_01 .access .textBox .rBox {
float: right;
width: 80%;
}
#shop #sec_01 .access02 .hTtl {
font-size: 18px;
text-align: left;
}
#shop #sec_01 .access02 .textBox li {
width: 100%;
font-size: 16px;
text-align: left;
padding: 16px 0;
}
#shop #sec_01 .access02 .textBox li:first-child {
padding: 0px;
}
#shop #sec_02 {
padding: 80px;
clear: both;
}
#shop #sec_02 .secInner {
width: 1100px;
margin: auto;
}
#shop #sec_02 .access {
display: flex;
justify-content: space-between;
}
#shop #sec_02 .access .textBox {
text-align: left;
display: flex;
flex-wrap: wrap;
width: 49%;
}
#shop #sec_02 .access .lBox {
width: 30%;
padding: 15px 15px 15px 38px;
box-sizing: border-box;
border-bottom: 1px solid #d7d6de;
}
#shop #sec_02 .access .rBox {
width: 81%;
padding: 15px 0;
font-size: 16px;
line-height: 2.4;
}
/*矢印*/
#shop #sec_01 .access02 .textBox li.arrow {
position: relative;
display: inline-block;
color: #000;
vertical-align: middle;
text-decoration: none;
}
#shop #sec_01 .access02 .textBox li.arrow::before, #shop #sec_01 .access02 .textBox li.arrow::after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
content: "";
vertical-align: middle;
}
#shop #sec_01 .access02 .textBox li.sample3-1::before {
right: 2px;
box-sizing: border-box;
width: 5px;
height: 6px;
border: 7px solid transparent;
border-left: 10px solid #DAC1BC;
}
#shop #sec_01 .access02 .textBox li.sample3-1::after {
right: 6px;
width: 6px;
height: 3px;
border-left: 151px solid #DDC1BE;
}
/*-----------------------------------------------------
NEWS 新着情報
------------------------------------------------------*/
#news {
background: #F9F7F6;
}
#news #mainimage {
background-image: url(../Image/news/main.png);
}
#news #mainimage .pageTtl {
color: #504848;
text-shadow: none;
}
#news #sec_01 {
padding: 40px 0 80px;
background: url(../Image/about/bg_01.png) no-repeat center;
}
#news #sec_01 .secInner {
width: 900px;
margin: auto;
}
#news #sec_01 li {
text-align: left;
padding: 28px 30px;
border-bottom: 1px solid #dad0bf;
line-height: 1.9;
}
#news #sec_01 li a {
position: relative;
display: inline-block;
transition: .6s;
}
#news #sec_01 li a:hover {
text-decoration: none;
color: #732323;
}
#news #sec_01 li a:hover::after {
width: 100%;
}
#news #sec_01 li a:after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 0;
height: 1px;
background-color: #732323;
transition: .6s;
}
#news #sec_01 .date {
float: left;
width: 15%;
border-left: 4px solid #732323;
padding: 0 0 0 10px;
box-sizing: border-box;
}
#news #sec_01 .ttl {
float: right;
width: 85%;
}
/*--------新着詳細---------*/
#news .news_single {
text-align: left;
}
#news .news_single .date02 {
margin: 0 0 10px 0;
color: #732323;
font-size: 16px;
}
#news .news_single h3 {
font-size: 28px;
border-bottom: 1px solid #732323;
margin: 0 0 20px;
}
#news .news_single .txt_box {
line-height: 1.9;
font-size: 16px;
margin: 0 0 30px;
}
#news .news_single .txt_box p {
margin: 0 0 10px;
}
#news .news_single .link_btn {
background-color: #e48c7d;
background-size: 200% 100%;
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(177, 38, 43) 50%);
background-image: linear-gradient(to right, transparent 50%, rgb(177, 38, 43) 50%);
-webkit-transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
width: 289px;
margin: auto;
text-align: center;
}
#news .news_single .link_btn a {
background-position: -100% 100%;
display: block;
color: #fff !important;
width: 100%;
padding: 18px 0;
}
#news .news_single .link_btn:hover {
background-color: #e48c7d;
background-position: -100% 100%;
}
#news #sec_01 .news_list{
margin-bottom:30px;
}
/*-----------------------------------------------------
SITEMAP サイトマップ
------------------------------------------------------*/
#sitemap {
background: #F9F7F6;
}
#sitemap #sec_01 {
padding: 120px 0;
/* background: url(../Image/sitemap/bg_01.png) no-repeat 90% 77%, url(../Image/about/bg_01.png) no-repeat center;*/
}
#sitemap #mainimage {
background-image: url(../Image/sitemap/main.png);
}
#sitemap #sec_01 .secInner {
width: 700px;
margin: auto;
text-align: left;
}
#sitemap #sec_01 ul {
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}
#sitemap #sec_01 ul a {
display: block;
padding: 15px;
text-align: left;
}
#sitemap #sec_01 li {
width: 35%;
margin: 30px 30px 0px 0;
font-size: 16px;
text-align: left;
}
#sitemap #sec_01 li a:after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 0;
height: 1px;
background-color: #E48C7D;
transition: .6s;
}
#sitemap #sec_01 li a {
position: relative;
display: inline-block;
transition: .6s;
font-size: 20px;
}
#sitemap #sec_01 li a:hover {
text-decoration: none;
color: #E48C7D;
}
#sitemap #sec_01 li a:hover::after {
width: 100%;
}
#sitemap #sec_01 li:nth-child(-n+2) {
margin: 0 30px 0px 0;
}
/*矢印*/
#sitemap .arrow {
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
#sitemap .arrow::before, #sitemap .arrow::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
#sitemap .icon_03::before {
width: 12px;
height: 12px;
background: #e48c7d;
}
#sitemap .icon_03::after {
left: 3px;
width: 3px;
height: 3px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/*-----------------------------------------------------
PRIVACY プライバシーポリシー
------------------------------------------------------*/
#privacy {
background: #fefdf1;
}
#privacy #mainimage {
background-image: url(../Image/privacy/main.png);
}
#privacy #sec_01 {
text-align: center;
padding: 40px 0;
}
#privacy #sec_01 .secInner {
width: 1100px;
margin: auto;
}
#privacy #sec_01 .privacypolicy_box {
text-align: left;
width: 800px;
margin: auto;
line-height: 1.8;
font-size: 16px;
}
#privacy #sec_01 .privacypolicy_box dl {
margin: 45px 0 0;
}
#privacy #sec_01 .privacypolicy_box dt {
color: #524442;
font-size: 15px;
font-weight: bold;
line-height: 16px;
margin-bottom: 15px;
}
#privacy #sec_01 .privacypolicy_box dd {
margin-bottom: 30px;
margin-left: 17px;
}
#privacy #sec_01 .privacypolicy_box ul {
margin-bottom: 15px;
margin-top: 14px;
}
#privacy #sec_01 .privacypolicy_box li {
list-style-type: circle;
margin-left: 1.5em;
}
#privacy #sec_01 .privacypolicy_box span {
font-size: 20px;
font-weight: bold;
border-left: 5px solid #b1262b;
padding: 5px 0 3px 12px;
}
/*-----------------------------------------------------
CONTACT お問い合わせ
------------------------------------------------------*/
#contact {
background: #F4EBDB;
}
#contact #sec_01 {
padding: 40px 0;
background: url(../Image/contact/bg_01.png) no-repeat right bottom
}
#contact #mainimage {
background-image: url(../Image/contact/main.png);
}
#contact #sec_01 .secInner {
width: 1000px;
margin: auto;
}
#contact #sec_01 .secInner .txt {
font-size: 16px;
line-height: 1.9;
margin: 0 0 30px;
}
#contact .wrapp {
background: rgba(255,255,255,0.5);
box-sizing: border-box;
padding: 35px;
}
#contact #sec_01 table {
text-align: left;
font-size: 16px;
line-height: 2.2;
}
#contact #sec_01 tbody {
vertical-align: top;
}
#contact #sec_01 tr {
border-bottom: 1px solid #d0cabf;
}
#contact #sec_01 th {
width: 30%;
padding: 15px 0;
font-size: 15px;
color: #312e2e;
}
#contact #sec_01 td {
width: 70%;
padding: 15px 0 15px 30px;
line-height: 2.2;
box-sizing: border-box;
font-size: 15px;
color: #312e2e;
}
#contact #sec_01 .radioWrapp {
padding: 7px 0 15px 30px;
}
/*#contact #sec_01 .sheet_01 td textarea {
width: 100%;
height: 150px;
resize: none;
box-sizing: border-box;
}
#contact #sec_01 .sheet_01 td li input, #contact #sec_01 .sheet_01 td li select {
margin: 0 0 0 15px;
}*/
#contact #sec_01 .sheet_01 td li input, #contact #sec_01 .sheet_01 td li select {
margin: 0 0 0 15px;
}
#contact #sec_01 .sheet_01 td input, #contact #sec_01 .sheet_01 td textarea, #contact #sec_01 .sheet_01 td li select, form#mailformpro label {
line-height: 24px;
color: #312e2e;
}
#contact #sec_01 .sheet_01 td input.long {
width: 65%;
}
#contact #sec_01 .sheet_01 td input.middle {
width: 45%;
}
#contact #sec_01 .sheet_01 td input.short {
width: 30%;
}
#contact #sec_01 .sheet_01 td input[type="checkbox"] {
display: inline-block;
width: 1.1em;
margin: 0 3px 0 3px;
height: 28px;
}
#contact #sec_01 .sheet_01 td select {
font-family: 'メイリオ', Meiryo, sans-serif;
line-height: 24px;
padding: 3px 8px;
}
#contact #sec_01 .sheet_01 td textarea {
width: 99% !important;
height: 150px !important;
resize: none;
box-sizing: border-box;
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#contact #sec_01 .mfp_buttons {
padding: 30px 0 0;
}
#contact #sec_01 .mfp_buttons button {
display: block;
width: 280px;
color: #fff;
font-size: 16px;
font-weight: bold;
line-height: 1;
text-align: center;
border-radius: 0 !important;
padding: 12px 0;
margin: 0 auto;
border: 2px solid #ef647c;
background: #ef647c;
transition: .4s;
text-decoration: none;
}
#contact #sec_01 .mfp_buttons button:hover {
color: #ef647c;
border: 2px solid #ef647c;
background: #fff;
}
#contact .mfp_buttons {
padding: 40px 0 0;
}
#contact input[type="radio"] {
width: 1.1em;
height: 1.1em;
}
#contact #sec_01 .sheet_01 td li {
margin: 0 0 15px;
}
#contact #sec_01 .sheet_01 td li:last-child {
margin: 0px;
}
/*補助テキスト*/
#contact #sec_01 .sheet_01 td .support {
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 12px;
color: #737373;
margin: 0 0 0 8px;
}
/*ラジオボタン*/
#contact input[type="radio"] {
width: 1.1em;
height: 1.1em;
}
/*送信ボタン*/
#contact #sec_01 .mfp_buttons button, #contact #sec_01 #mfp_button_send {
display: block;
width: 280px;
color: #fff;
font-size: 16px;
font-weight: bold;
line-height: 1;
text-align: center;
border-radius: 0 !important;
padding: 12px 0;
margin: 0 auto;
border: 2px solid #e48c7d;
background: #e48c7d;
transition: .4s;
text-decoration: none;
text-shadow: none;
}
#contact #sec_01 .mfp_buttons button:hover, #contact #sec_01 #mfp_button_send:hover {
color: #e48c7d;
border: 2px solid #e48c7d;
background: #fff;
}
#contact #sec_01 .mfp_buttons button#mfp_button_cancel {
border: 2px solid #adadad;
background: #adadad;
}
#contact #sec_01 .mfp_buttons button#mfp_button_cancel:hover {
color: #adadad;
border: 2px solid #adadad;
background: #fff;
}
/*mailformproを使用する場合、エラーメッセージなどのエフェクトがうざい場合は以下を使ってください。must-fillはサイト毎に変更必要です。*/
/* フォーム部品のボックスシャドウ打消し */
.mfp_element_text, .mfp_element_number, .mfp_element_select-one, .mfp_element_email, .mfp_element_tel, .mfp_element_textarea {
box-shadow: none;
border-radius: 0px;
font-size: 14px;
padding: 5px 9px;
}
/* 入力エラーのチカチカなし、文字色 */
div.mfp_err {
background: none;
padding-left: 0;
color: #a03535;
font-weight: bold;
font-size: 13px;
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/* エラー箇所のフォーム部品を色つきで強調 */
.problem {
background-color: #efe3e3;
}
/* 入力OKのエフェクト */
div.mfp_ok {
background-color: #ff7500;
border-color: #ff7500;
font-size: 12px;
}
/* チェックボックスのエフェクト打消し */
form#mailformpro label.mfp_not_checked {
padding: 0;
border: none;
}
form#mailformpro label.mfp_checked {
padding: 0;
border: none;
background: none;
}
/* ボタンのエフェクト打消し */
.mfp_element_submit, .mfp_element_reset, .mfp_element_button {
font-size: 0.8em;
text-shadow: none;
}
/* 内容確認画面のテーブルを全幅 */
#mfp_confirm_table {
width: 100% !important;
margin: 0 auto;
}
/* 入力画面の「必須」のデザイン */
.must-fill {
background: #732323;
padding: 1px 8px;
color: #fff;
font-size: 0.7em;
display: inline-block;
margin: 7px 0 0 0;
border-radius: 2px;
float: right;
}
.not_must-fill {
background: #999;
padding: 1px 8px;
color: #fff;
font-size: 0.7em;
display: inline-block;
margin: 7px 0 0 0;
border-radius: 2px;
float: right;
}
div.mfp_buttons {
padding: 30px 0px 10px;
}
/* 内容確認画面のテーブルのデザイン */
table#mfp_confirm_table tr th, table#mfp_confirm_table tr td {
font-size: 16px;
}
div#mfp_phase_confirm h4 {
font-size: 24px;
margin: 0 0 30px;
color: #732323;
}
table#mfp_confirm_table tr.mfp_achroma, .mfp_achroma, #contact #sec_01 tr {
background: none;
}
/*ラジオボタン装飾*/
input[type=radio] {
display: none;
}
.radio {
box-sizing: border-box;
-webkit-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
position: relative;
display: inline-block;
margin: 0 20px 8px 0;
padding: 7px 12px 7px 42px;
vertical-align: middle;
cursor: pointer;
}
.radio:hover {
background-color: #eae4da;
}
.radio:hover:after {
border-color: #732323;
}
.radio:after {
-webkit-transition: border-color 0.2s linear;
transition: border-color 0.2s linear;
position: absolute;
top: 50%;
left: 15px;
display: block;
margin-top: -10px;
width: 16px;
height: 16px;
border: 2px solid #bbb;
border-radius: 2px;
content: '';
}
.radio:before {
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
position: absolute;
top: 50%;
left: 20px;
display: block;
margin-top: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #732323;
content: '';
opacity: 0;
}
input[type=radio]:checked + .radio:before {
opacity: 1;
}
/*-----------------------------------------------------
THANKS サンクスページ
------------------------------------------------------*/
#thanks {
background: #F4EBDB;
}
#thanks #sec_01 {
padding: 80px 0;
background: url(../Image/contact/bg_01.png) no-repeat right bottom
}
#contact #sec_01 .secInner {
width: 1000px;
margin: auto;
}
#thanks #mainimage {
background-image: url(../Image/contact/main.png);
}
#thanks h3 {
margin: 0 0 50px;
}
#thanks .txt {
line-height: 2.6;
margin: 0 0 50px;
font-size: 16px;
}
#thanks .detialBtn a {
width: 280px;
box-sizing: border-box;
padding: 18px 0;
}
/*--------------------------------------------
パンくず
--------------------------------------------*/
#breadcrumb {
margin-top: 20px;
line-height: 1;
position: relative;
z-index: 10;
}
#breadcrumb ul {
width: 1100px;
margin: 0 auto;
}
#breadcrumb li {
position: relative;
display: inline-block;
font-size: 13px;
color: #444;
padding-right: 25px;
}
#breadcrumb li:last-child {
padding-right: 0;
}
#breadcrumb li a {
color: #ed4e39;
text-decoration: underline;
}
#breadcrumb li a:hover {
text-decoration: none;
}
#breadcrumb li:before {
position: absolute;
content: "＞";
right: 0;
top: 0;
font-weight: bold;
}
#breadcrumb li:last-child:before {
content: none;
}
/*--------------------------------------------
404
--------------------------------------------*/
#not-found #mainimage .pageTtl {
text-shadow: none;
}
#not-found {
background: #f9f8f6;
}
#not-found #mainimage {
background-image: url(../Image/story/main.png);
}
#not-found .errMsg {
padding:80px 0;
}
#not-found .errMsg .title {
font-size:24px;
margin-bottom:40px;
}
#not-found .errMsg .text {
font-size:18px;
margin-bottom:40px;
line-height:2.5;
}
/*-----------------------------------------------------
WP PAGER
------------------------------------------------------*/
.wp-pagenavi {
text-align: center;
font-size: 18px;
font-weight: bold;
}
.wp-pagenavi *:nth-child(n+2) {
margin-left:10px;
}
/* ボタンタグのデザイン */
.wp-pagenavi a, .wp-pagenavi .current, .wp-pagenavi .extend {
line-height: 40px;
display: inline-block;
vertical-align: middle;
border: solid 1px #e48c7d;
width:40px;
background: #e48c7d;
color: #fff;
}
.wp-pagenavi .current {
color: #fff;
background: #b1262b;
border-color: #b1262b;
}
/* 矢印（ < とか > ）のデザイン */
.wp-pagenavi .nextpostslink, .wp-pagenavi .previouspostslink {
}
@media screen and (min-width : 768px ) {
/* ボタンタグのホバー時のデザイン */
.wp-pagenavi a:hover {
background: #b1262b;
border-color: #b1262b;
}
}