@charset "utf-8";


/* ************************************************ 
*	基本設定
* ************************************************ */	
body {
font-family: 'Shippori Mincho', serif;
font-size: min(1.6vw,16px);
color: #000;
font-weight: 500;
line-height: 180%;
overflow-x: hidden;
background: url("../images/bg_pc.jpg") top repeat-y;
background-size: contain;
background-color:#000;
word-break:break-all;
}

/* リンク */
a{
	color:#333;
	text-decoration: none;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
}

a:hover{
color:#000;
}

a:active, a:focus {
outline: 0;
}


/* 画像 */
img{
border:0;
padding:0px;
margin:0px
vertical-align: bottom;
}

img a{
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
}


/* フロート */
.right{ float: right; }
.left{ float: left; }
.clear{ clear:both; }


/* リスト */
ol{
margin: 0 0 0 5px;
padding: 0 0 0 0;
list-style: decimal;
}

ul{
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style: none;
}

li{
margin: 0 0 10px 15px;
padding: 0 0 0 0;
}

li a{
color:#444;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}

li a:hover{
color:#03335d;
}

#topcontrol{
z-index:99999;
}

ruby {
color: #fff;
}


/*---------------------------------------------------------------------------------
エフェクト
--------------------------------------------------------------------------------- */
/* 画面外にいる状態 */
.effect {
  opacity : 0;
  transition : all 900ms 300ms ease-out;
  transform: translate(0,0);
}
/* 画面内に入った状態 */
.effect-on {
  opacity: 1.0;
  transform: translate(0,0px);
}
.effect-on a:hover{
  opacity: 0.8;
  transform: translate(0,0px);
}


/* ************************************************ 
*	全体Wrapper
* ************************************************ */	
.wrapper {
margin: 100px auto; 
width: 1120px;
max-width: 90%;
padding: 70px 0 0 0;
background-color: rgba(255,255,255,0.9);
position:relative;
z-index:1;
-moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
-o-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
-ms-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
}

h1 {
margin: 0 0 30px 0;
font-size: min(3.6vw,36px);
font-weight: 700;
text-align: center;
line-height: 140%;
}
.lead-text {
margin: 50px 0;
font-size: min(2.1vw,21px);
font-weight: 500;
text-align: center;
line-height: 180%;
}


/* ************************************************ 
*	商品　大枠
* ************************************************ */
.items-box {
margin: 0 auto;
width: 960px;
max-width: 90%;
}
.items-box-gd {
margin: 0 auto 35px auto;
padding: 30px;
width: calc(100% - 60px);
background: url("../images/itemsbg_gd.svg") top no-repeat;
background-size: cover;
}
.items-box-bk {
margin: 0 auto 35px auto;
padding: 30px;
width: calc(100% - 60px);
background: url("../images/itemsbg_bk.svg") top no-repeat;
background-size: cover;
}
.items-inner {
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: start;
}
.items-inner img{ vertical-align: bottom; }
.items-left-gd,
.items-right-bk {
width:51%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.items-right-gd,
.items-left-bk {
width:44%;
}


/* ************************************************ 
*	商品　情報
* ************************************************ */
.items-left-gd .place,
.items-right-bk .place{
width:30%;
font-size: min(1.8vw,18px);
font-weight: 700;
}
.items-left-gd .kumiai,
.items-right-bk .kumiai {
width:65%;
font-size: min(1.8vw,18px);
font-weight: 700;
display: flex;
justify-content: flex-end;
}

.items-left-gd p {
color: #000;
line-height: 170%;
}
.items-right-bk p {
color: #fff;
line-height: 170%;
}
.items-right-bk .place { color: #fff; }
.items-right-bk .kumiai { color: #fff; }

.title-bk-inner {
width:100%;
height: 48px;
background-color: #000;
padding: 0;
margin: 0 0 15px 0;
position:relative;
z-index: 0;
}
.title-bk {
font-size: min(2.4vw,24px);
font-weight: 700;
color: #fff;
line-height: 1;
margin: 0;
padding: 0;
position:absolute;
z-index: 1;
top: 4px;
left: 15px;
}
.title-bk::before {
position:relative;
top: 5px;
left: -5px;
content:"";
display:inline-block;
width:49px;
height:30px;
background:url("../images/ougi_gd.svg") no-repeat;
background-size:contain;
}

.title-bk2-inner {
width:100%;
height: 48px;
background-color: #000;
padding: 0;
margin: 0 0 15px 0;
position:relative;
z-index: 0;
}
.title-bk2 {
font-size: min(2.4vw,24px);
font-weight: 700;
color: #fff;
line-height: 1;
margin: 0;
padding: 0;
position:absolute;
z-index: 1;
top: 4px;
left: 130px;
letter-spacing: -0.05em;
}
.title-bk2 span{
font-size: min(1.5vw,15px);
font-weight: 700;
color: #fff;
position:absolute;
z-index: 1;
top: 5px;
left: -67px;
}
.title-bk2::before {
position:relative;
top: 5px;
left: -120px;
content:"";
display:inline-block;
width:49px;
height:30px;
background:url("../images/ougi_gd.svg") no-repeat;
background-size:contain;
}

.plice-bk{
font-size: min(1.4vw,14px);
font-weight: 700;
color: #fff;
position:absolute;
z-index: 1;
right: 10px;
bottom: 4px;
}

.title-gd-inner {
width:100%;
height: 48px;
background-image: linear-gradient(90deg, rgba(246, 226, 145, 1), rgba(205, 153, 74, 1) 30%, rgba(246, 226, 145, 1) 68%, rgba(205, 153, 74, 1));
padding: 0;
margin: 0 0 15px 0;
position:relative;
z-index: 0;
}
.title-gd {
font-size: min(2.4vw,24px);
font-weight: 700;
color: #000;
line-height: 1;
margin: 0;
padding: 0;
position:absolute;
z-index: 1;
top: 4px;
left: 15px;
}
.title-gd::before {
position:relative;
top: 5px;
left: -5px;
content:"";
display:inline-block;
width:49px;
height:30px;
background:url("../images/ougi_bk.svg") no-repeat;
background-size:contain;
}

.plice-gd{
font-size: min(1.4vw,14px);
font-weight: 700;
color: #000;
position:absolute;
z-index: 1;
right: 10px;
bottom: 4px;
}


/* ************************************************ 
*	リスト関係
* ************************************************ */
.list-box {
margin: 80px auto 50px auto;
width: 960px;
max-width: 90%;
}
.list-box .logo{
margin: 0 auto;
width: 60px;
}
.list-box .text-logo{
margin: 5px auto 10px auto;
width: 505px;
max-width: 100%;
}

table.table_box{
margin: 0;
width: 100%;
border: 1px solid #000;
background-color: #fff;
}
table.table_box tr{
border-bottom: 1px solid #000;
}
table.table_box tr:nth-child(2n){
background-color: #f4efdc;
}
table.table_box th{
background-color: #000;
padding: 7px 0;
color:#fff;
text-align: center;
border-right: 1px solid #fff;
vertical-align: middle;
}
table.table_box th:first-child{
width: 40%;
}
table.table_box th:last-child{
border-right: none;
width: 30%;
}

table.table_box td{
padding: 7px;
color:#000;
border-right: 1px solid #000;
line-height:110%;
vertical-align: middle;
}
table.table_box td p{
font-size: min(1.6vw,16px);
padding: 0;
margin-bottom: 7px;
line-height:100%;
}
table.table_box td span{
font-size: min(1.3vw,13px);
}
table.table_box td:nth-child(2){
font-size: min(1.8vw,18px);
}
table.table_box td:last-child{
border-right: none;
text-align: right;
}

table.table_box td span.tel {
padding-left: 4px;
}
table.table_box td span.tel::before {
position:relative;
top: 0;
left: -2px;
content:"";
display:inline-block;
width:10px;
height:10px;
background:url("../images/tel.svg") no-repeat;
background-size:contain;
}
table.table_box td:nth-child(2) span{
font-size: min(1.6vw,16px);
}


/* ************************************************ 
*	メイン（本文）コンテンツ
* ************************************************ */	
.clear	{ clear: both; } 
.mT10	{ margin-top:10px; }
.mT20	{ margin-top:20px; }
.mT30	{ margin-top:30px; }
.mT40	{ margin-top:40px; }
.mB10	{ margin-bottom:10px; }
.mB20	{ margin-bottom:20px; }

.imgcenter{
text-align:center;
margin: 0 auto;
padding: 0;
}
.imgcenter img {
  vertical-align: bottom;
}
.htext{
text-align:center;
}

/* 記事部分 */	
p {
padding: 0;
line-height: 200%;
}

p a {
color:#ec817f;
text-decoration:underline;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}

p a:hover {
color:#000;
text-decoration:none;
}

p a:active, a:focus {
outline: 0;
}


/* フォント */	
.mincho {
font-family:'century','Times New Roman','Baskerville','Optima','Palatino','Georgia','ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','HGS明朝E','ＭＳ Ｐ明朝','MS PMincho',serif;
}

.bold {
font-weight: bolder;
}

.italic {
font-style: italic; 
}
.dllink {
margin: 10px auto 5px auto;
padding: 0;
background-color:#1462be;
text-align:center;
width: 40%;
}
.dllink a{
color: #fff;
display: block;
padding: 10px 0px;
font-size:18px;
line-height: 210%;
}
.dllink a:hover{
color: #fff;
background-color:#03335d;
}
.alllink {
margin: 10px auto 5px auto;
padding: 0;
background-color:#fff;
border: 1px solid #333;
text-align:center;
width: 30%;
border-radius: 50vh; /* CSS3 */
 -webkit-border-radius: 50vh; /* Firefox */
 -moz-border-radius: 50vh; /* Safari,Chrome */
}
.alllink a{
color: #333;
display: block;
padding: 15px 0px;
font-size:16px;
}
.alllink a:hover{
color: #fff;
background-color:#333;
border-radius: 50vh; /* CSS3 */
 -webkit-border-radius: 50vh; /* Firefox */
 -moz-border-radius: 50vh; /* Safari,Chrome */
}


/* ************************************************ 
*	フッターエリア
* ************************************************ */	
.copyright {
margin: 0px auto 0px auto;
padding: 30px 0;
text-align:center;
font-size: 85%;
width: 100%;
line-height: 150%;
}


/* ************************************************ 
*	ライン
* ************************************************ */
.line-dotted {
margin: 0 0 0 0;
padding: 0 0 0 0;
border-bottom:1px dotted #CCC;
}

.line-solid {
margin: 0 0 0 0;
padding: 0 0 0 0;
border-bottom:1px solid #CCC;
}


/* ************************************************ 
*	画像装飾
* ************************************************ */
.pict_right {
margin:0 0 10px 20px; 
padding: 2px 2px 2px 2px; 
float: right;
border: 1px solid #DCDCDC;
}

.pict_left {
margin:0 10px 10px 0; 
padding: 2px 2px 2px 2px; 
float: left;
border: 1px solid #DCDCDC;
}

.pict1px{
margin: 0 0 5px 0; 
padding: 2px 2px 2px 2px; 
border: 1px solid #CCC;
}

.pict_shadow{
background: #fff;
margin: 0px auto;
border: 1px solid #ccc;
padding: 5px 5px 5px 5px;
border-radius: 1px; /* CSS3 */
 -webkit-border-radius: 1px; /* Firefox */
 -moz-border-radius: 1px; /* Safari,Chrome */
box-shadow: 2px 2px 3px #C0C0C0;
}



/* ************************************************ 
*	角丸
* ************************************************ */
.border-radius{
border-radius: 5px; /* CSS3 */
 -webkit-border-radius: 5px; /* Firefox */
 -moz-border-radius: 5px; /* Safari,Chrome */
}



/* ************************************************ 
*	ボックスシャドウ・テキストシャドウ
* ************************************************ */
.box-shadow{
box-shadow: 2px 2px 3px #ccc; /* CSS3 */
 -webkit-box-shadow: 2px 2px 3px #ccc; /* Safari,Chrome */
 -moz-box-shadow: 2px 2px 3px #ccc; /* Firefox */
}
.text-shadow{
text-shadow: 1px 1px 3px #DEDEDE; /* CSS3 */
 -webkit-text-shadow: 1px 1px 3px #DEDEDE; /* Safari,Chrome */
 -moz-text-shadow: 1px 1px 3px #DEDEDE; /* Firefox */
}



/* ************************************************ 
*	CSS3ボタン
* ************************************************ */
.bt-more a {
font-size: 9px;
font-weight: normal;
color: #333;
text-align: center;
text-decoration: none;
text-shadow: 0px -1px 0px #fff;
width: 50px;
float: left;
display: block;
padding: 0 0 0 0;
margin: 10px 0 0 0;
border: 1px solid #ccc;
border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
background-color: #eee;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ddd),color-stop(.75, #eee),color-stop(1, #ddd));
background: -moz-linear-gradient(#ddd, #eee 75%, #ddd);
}

.bt-more a:hover {
background-color: #fff;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eee),color-stop(.75, #fff),color-stop(1, #eee));
background: -moz-linear-gradient(#eee, #fff 75%, #eee);
}

.bt-more a:active {
background-color: #999;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #999),color-stop(.75, #ccc),color-stop(1, #999));
background: -moz-linear-gradient(#999, #ccc 75%, #999);
}

.bt-order a{
font-size: 14px;
color:#fff;
display: block;
text-align:center;
background-color: #999;
margin: 20px 0 20px 0 ;
padding: 10px 15px;
border-radius: 3px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
}

.bt-order a:hover{
color:#867888;
background: #ddd;
text-decoration:none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}




/* ************************************************ 
*   レスポンシブ
* ************************************************ */
/* PC 画面の横幅が960px以上 */
@media only screen and (min-width: 960px){
 iframe {
    width: 100%;
    height:100%;
}
/* topcontrol ====================*/
#topcontrol{ z-index:99999; }
#topcontrol img{ width:80px; }

.show_tb { display: none; }
.show_sp { display: none; }
}

/* Tablet (Portrait) 画面の横幅が768px〜959pxまで */
@media only screen and (min-width: 768px) and (max-width: 959px) {
iframe { width: 100%; height:100%; max-width: 728px; }
.show_sp { display: none; }
}


/* Mobile (Portrait) 画面の横幅が767pxまで */
@media only screen and (max-width: 767px) {
body { font-size: 3.75vw; }
.wrapper {
margin: 50px auto; 
padding: 20px 0 0 0;
}
h1 {
margin: 0 0 20px 0;
font-size: 5vw;
}
.lead-text {
margin: 20px 0 30px 0;
font-size: 3.75vw;
letter-spacing: -0.05em;
}

.items-left-gd,
.items-right-bk {
width:100%;
}
.items-right-gd,
.items-left-bk {
width:100%;
}

.items-right-bk img,
.items-left-gd img{
margin-bottom: 10px;
}

.items-box-gd {
margin: 0 auto 30px auto;
padding: 15px;
width: calc(100% - 30px);
}
.items-box-bk {
margin: 0 auto 30px auto;
padding: 15px;
width: calc(100% - 30px);
}

.items-left-gd .place,
.items-right-bk .place {
width: 30%;
font-size: 4vw;
}
.items-left-gd .kumiai,
.items-right-bk .kumiai {
width: 70%;
font-size: 4vw;
}
.title-bk-inner,
.title-gd-inner {
height: 55px;
margin: 0 0 10px 0;
}
.title-bk,
.title-gd {
font-size: 4.5vw;
top: 0px;
left: 15px;
}
.title-bk::before,
.title-gd::before {
top: 10px;
left: -5px;
width: 44px;
height: 25px;
}
.plice-bk,
.plice-gd {
font-size: 3.5vw;
position: absolute;
left: 60px;
bottom: 3px;
}

.title-bk2-inner {
height: 60px;
margin: 0 0 10px 0;
}
.title-bk2 {
font-size: 4.5vw;
top: 10px;
left: 15px;
}
.title-bk2 span{
font-size: 3.5vw;
top: -5px;
left: 45px;
width: calc(100% + 50px);
}
.title-bk2::before {
top: 10px;
left: -5px;
width: 44px;
height: 25px;
}

.list-box { margin: 50px auto 0 auto; }
table.table_box td:first-child,
table.table_box td:nth-child(2),
table.table_box td:last-child {
font-size: 3.75vw;
line-height: 130%;
}
table.table_box td:last-child {
text-align: left;
}
table.table_box td p {
font-size: 4vw;
margin-bottom: 7px;
}
table.table_box td span {
font-size: 3.75vw;
line-height: 130%;
}
table.table_box td:nth-child(2) span {
font-size: 4.25vw;
line-height: 130%;
}
table.table_box td:nth-child(2) span span{
font-size: 3.75vw;
}

iframe { width: 100%; height:100%; }
#topcontrol{
bottom: 10px !important;
right: 10px !important;
}
#topcontrol img{ width:50px; }
.show_pc { display: none; }
}